scratch – Blame information for rev 65

Subversion Repositories:
Rev:
Rev Author Line No. Line
24 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
64 office 12 <title>scratch</title>
24 office 13  
14 <!-- Bootstrap core CSS -->
58 office 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
65 office 16 <!-- Font Awesome -->
17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
24 office 18  
19 <!-- DropZone -->
58 office 20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
24 office 21 <!-- Local style -->
22 <link href="css/files/style.css" rel="stylesheet">
23 </head>
24  
25 <body>
26  
27 <div class="container">
28  
29 <!-- Main component for a primary marketing message or call to action -->
30 <div class="jumbotron">
57 office 31 <h1>Scratch</h1>
24 office 32 <p>Asset sharing platform.</p>
33 </div>
34  
35 <ul class="nav nav-tabs">
36 <li><a href="index.html">Home</a></li>
56 office 37 <li class="active"><a href="#">File</a></li>
24 office 38 <li><a href="text.html">Text</a></li>
39 </ul>
40  
41 <div class="panel panel-default">
42 <div class="panel-heading">
43 <div id="actions" class="row">
44 <div class="col-lg-5">
45 <div class="btn-group btn-group-justified" role="group">
46 <!-- The fileinput-button span is used to style the file input field as button -->
47 <div class="btn-group" role="group">
48 <button id="uploadbutton" type="button" class="btn btn-default">
49 <i class="glyphicon glyphicon-plus"></i>
50 <span>Add...</span>
51 </button>
52 </div>
53 <div class="btn-group" role="group">
54 <button type="submit" class="btn btn-default start">
55 <i class="glyphicon glyphicon-upload"></i>
57 office 56 <span>Upload All</span>
24 office 57 </button>
58 </div>
59 <div class="btn-group" role="group">
60 <button type="reset" class="btn btn-default cancel">
61 <i class="glyphicon glyphicon-ban-circle"></i>
57 office 62 <span>Cancel All</span>
24 office 63 </button>
64 </div>
65 </div>
66 </div>
67 </div>
68 </div>
69 <div class="panel-body" id="uploadpanel">
70 <div class="table table-striped files" id="previews">
71 <div id="template" class="file-row">
72 <!-- This is used as the file preview template -->
73 <div>
74 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
75 </div>
76 <div>
77 <p id="name" class="name" data-dz-name></p>
78 <div class="input-group">
79 <input id="URL" type="text" class="form-control" readonly>
80 <span class="input-group-btn">
39 office 81 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
24 office 82 </span>
83 </div>
84 <strong class="error text-danger" data-dz-errormessage></strong>
85 </div>
86 <div>
87 <p class="size" data-dz-size></p>
88 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
89 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
90 </div>
91 </div>
92 <div>
93 <button id="start" class="btn btn-default start">
94 <i class="glyphicon glyphicon-upload"></i>
95 <span>Upload</span>
96 </button>
97 <button id="cancel" data-dz-remove class="btn btn-default cancel">
98 <i class="glyphicon glyphicon-ban-circle"></i>
99 <span>Cancel</span>
100 </button>
101 <button id="remove" data-dz-remove class="btn btn-danger remove">
102 <i class="glyphicon glyphicon-remove"></i>
103 <span>Remove</span>
104 </button>
105 </div>
106 </div>
107  
108 </div>
109 </div>
110 <!-- The global file processing state -->
111 <div class="fileupload-process">
112 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
113 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
114 </div>
115 </div>
116 </div>
117  
118 </div> <!-- /container -->
119  
120 <div id="footer">
121 <div class="container">
122 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
123 </div>
124 </div>
125  
58 office 126 <!-- jQuery -->
127 <script src="bower_components/jquery/dist/jquery.min.js"></script>
128 <!-- BootStrap -->
129 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
24 office 130  
131 <!-- DropZone -->
58 office 132 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
24 office 133 <!-- Clipboard -->
58 office 134 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
24 office 135 <script>
26 office 136 $(document).ready(() => {
24 office 137 // Get the template HTML and remove it from the doument
138 var previewNode = document
139 .querySelector("#template");
140 previewNode.id = "";
141 var previewTemplate = previewNode
142 .parentNode
143 .innerHTML;
144 previewNode
145 .parentNode
146 .removeChild(previewNode);
147  
148 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
49 office 149 url: "file.php", // Set the url
24 office 150 paramName: "file",
151 thumbnailWidth: 80,
152 thumbnailHeight: 80,
153 //parallelUploads: 20,
154 previewTemplate: previewTemplate,
155 autoQueue: false, // Make sure the files aren't queued until manually added
156 previewsContainer: "#previews", // Container to display the previews
157 clickable: [
158 "#uploadbutton",
159 "#uploadpanel"
160 ],
161 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
162 }).on("addedfile", (file) => {
163 // Hookup the start button
164 file.previewElement.querySelector(".start").onclick = () => {
165 myDropzone.enqueueFile(file);
166 };
167 }).on("totaluploadprogress", (progress) => {
168 document
169 .querySelector("#total-progress .progress-bar")
170 .style
171 .width = progress + "%";
172 }).on("sending", (file) => {
173 // Show the total progress bar when upload starts
174 document.querySelector("#total-progress")
175 .style
176 .opacity = 1;
177  
178 // And disable the start button.
179 file
180 .previewElement
181 .querySelector(".start")
182 .setAttribute("disabled", "disabled");
183 }).on("queuecomplete", (progress) => {
184 document.querySelector("#total-progress")
185 .style
186 .opacity = "0";
187 }).on("success", (file, data) => {
188  
189 var boxURLID = '_' + Math
190 .random()
191 .toString(36)
192 .substr(2, 9);
193 file
194 .previewElement
195 .querySelector("#URL")
196 .value = data;
197  
198 file
199 .previewElement
200 .querySelector("#URL")
201 .setAttribute('id', boxURLID)
202  
203 // Clipboard button.
204 clipButtonID = '_' + Math
205 .random()
206 .toString(36)
207 .substr(2, 9);
208 file
209 .previewElement
210 .querySelector("#btn-clipboard")
211 .setAttribute('data-clipboard-target', '#' + boxURLID)
212  
213 file
214 .previewElement
215 .querySelector("#btn-clipboard")
216 .setAttribute('id', clipButtonID);
217  
218 file
219 .previewElement
220 .querySelector(".start")
221 .setAttribute("disabled", "disabled");
222 file
223 .previewElement
224 .querySelector(".cancel")
225 .setAttribute("disabled", "disabled");
226  
227 new Clipboard('#' + clipButtonID);
228 });
229  
230 document.querySelector("#actions .start").onclick = () => {
231 myDropzone.enqueueFiles(
232 myDropzone
233 .getFilesWithStatus(Dropzone.ADDED));
234 };
235  
236 document.querySelector("#actions .cancel").onclick = () => {
237 myDropzone.removeAllFiles(true);
238 };
239 });
240 </script>
241 </body>
242 </html>