scratch – Diff between revs 74 and 75

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 74 Rev 75
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1"> 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 --> 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"> 8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks"> 9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico"> 10 <link rel="icon" href="favicon.ico">
11   11  
12 <title>scratch</title> 12 <title>scratch</title>
13   13  
14 <!-- Bootstrap core CSS --> 14 <!-- Bootstrap core CSS -->
15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
16 <!-- Font Awesome --> 16 <!-- Font Awesome -->
17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
18 18
19 <!-- DropZone --> 19 <!-- DropZone -->
20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> 20 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
21 21
22 <!-- Site-wide style CCS --> 22 <!-- Site-wide style CCS -->
23 <link href="css/style.css" rel="stylesheet"> 23 <link href="css/style.css" rel="stylesheet">
24 24
25 <!-- Local style --> 25 <!-- Local style -->
26 <link href="css/files/style.css" rel="stylesheet"> 26 <link href="css/files/style.css" rel="stylesheet">
27 </head> 27 </head>
28   28  
29 <body> 29 <body>
30   30  
31 <!-- Main component for a primary marketing message or call to action --> 31 <!-- Main component for a primary marketing message or call to action -->
32 <div class="paralax-background"></div> 32 <div class="paralax-background"></div>
33 <div class="jumbotron"> 33 <div class="jumbotron">
34 <h1>scratch copy</h1> 34 <h1>scratch copy</h1>
35 <p class="quote">the asset sharer</p> 35 <p class="quote">the asset sharer</p>
36 </div> 36 </div>
37   37  
38 <div class="container"> 38 <div class="container">
39 39
40 <ul class="nav nav-tabs"> 40 <ul class="nav nav-tabs">
41 <li><a href="index.html">Home</a></li> 41 <li><a href="index.html">Home</a></li>
42 <li class="active"><a href="#">File</a></li> 42 <li class="active"><a href="#">File</a></li>
43 <li><a href="text.html">Text</a></li> 43 <li><a href="text.html">Text</a></li>
44 </ul> 44 </ul>
45 45
46 <div class="panel panel-default"> 46 <div class="panel panel-default">
47 <div class="panel-heading"> 47 <div class="panel-heading">
48 <div id="actions" class="row"> 48 <div id="actions" class="row">
49 <div class="col-lg-5"> 49 <div class="col-lg-5">
50 <div class="btn-group btn-group-justified" role="group"> 50 <div class="btn-group btn-group-justified" role="group">
51 <!-- The fileinput-button span is used to style the file input field as button --> 51 <!-- The fileinput-button span is used to style the file input field as button -->
52 <div class="btn-group" role="group"> 52 <div class="btn-group" role="group">
53 <button id="uploadbutton" type="button" class="btn btn-default"> 53 <button id="uploadbutton" type="button" class="btn btn-default">
54 <i class="glyphicon glyphicon-plus"></i> 54 <i class="glyphicon glyphicon-plus"></i>
55 <span>Add...</span> 55 <span>Add...</span>
56 </button> 56 </button>
57 </div> 57 </div>
58 <div class="btn-group" role="group"> 58 <div class="btn-group" role="group">
59 <button type="submit" class="btn btn-default start"> 59 <button type="submit" class="btn btn-default start">
60 <i class="glyphicon glyphicon-upload"></i> 60 <i class="glyphicon glyphicon-upload"></i>
61 <span>Upload All</span> 61 <span>Upload All</span>
62 </button> 62 </button>
63 </div> 63 </div>
64 <div class="btn-group" role="group"> 64 <div class="btn-group" role="group">
65 <button type="reset" class="btn btn-default cancel"> 65 <button type="reset" class="btn btn-default cancel">
66 <i class="glyphicon glyphicon-ban-circle"></i> 66 <i class="glyphicon glyphicon-ban-circle"></i>
67 <span>Cancel All</span> 67 <span>Cancel All</span>
68 </button> 68 </button>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="panel-body" id="uploadpanel"> 74 <div class="panel-body" id="uploadpanel">
75 <div class="table table-striped files" id="previews"> 75 <div class="table table-striped files" id="previews">
76 <div id="template" class="file-row"> 76 <div id="template" class="file-row">
77 <!-- This is used as the file preview template --> 77 <!-- This is used as the file preview template -->
78 <div> 78 <div>
79 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> 79 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
80 </div> 80 </div>
81 <div> 81 <div>
82 <p id="name" class="name" data-dz-name></p> 82 <p id="name" class="name" data-dz-name></p>
83 <div class="input-group"> 83 <div class="input-group">
84 <input id="URL" type="text" class="form-control" readonly> 84 <input id="URL" type="text" class="form-control" readonly>
85 <span class="input-group-btn"> 85 <span class="input-group-btn">
86 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button> 86 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
87 </span> 87 </span>
88 <span class="input-group-btn"> 88 <span class="input-group-btn">
89 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 89 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
90 </span> 90 </span>
91 </div> 91 </div>
92 <div class="input-group"> 92 <div class="input-group">
93 <input id="deleteURL" type="text" class="form-control" readonly> 93 <input id="deleteURL" type="text" class="form-control" readonly>
94 <span class="input-group-btn"> 94 <span class="input-group-btn">
95 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 95 <button id="btn-clipboard-delete" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
96 </span> 96 </span>
97 </div> 97 </div>
98 <strong class="error text-danger" data-dz-errormessage></strong> 98 <strong class="error text-danger" data-dz-errormessage></strong>
99 </div> 99 </div>
100 <div> 100 <div>
101 <p class="size" data-dz-size></p> 101 <p class="size" data-dz-size></p>
102 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 102 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
103 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 103 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
104 </div> 104 </div>
105 </div> 105 </div>
106 <div> 106 <div>
107 <button id="start" class="btn btn-default start"> 107 <button id="start" class="btn btn-default start">
108 <i class="glyphicon glyphicon-upload"></i> 108 <i class="glyphicon glyphicon-upload"></i>
109 <span>Upload</span> 109 <span>Upload</span>
110 </button> 110 </button>
111 <button id="cancel" data-dz-remove class="btn btn-default cancel"> 111 <button id="cancel" data-dz-cancel class="btn btn-default cancel">
112 <i class="glyphicon glyphicon-ban-circle"></i> 112 <i class="glyphicon glyphicon-ban-circle"></i>
113 <span>Cancel</span> 113 <span>Cancel</span>
114 </button> 114 </button>
115 <button id="remove" data-dz-remove class="btn btn-danger remove"> 115 <button id="remove" data-dz-remove class="btn btn-danger remove">
116 <i class="glyphicon glyphicon-remove"></i> 116 <i class="glyphicon glyphicon-remove"></i>
117 <span>Remove</span> 117 <span>Remove</span>
118 </button> 118 </button>
119 </div> 119 </div>
120 </div> 120 </div>
121   121  
122 </div> 122 </div>
123 </div> 123 </div>
124 <!-- The global file processing state --> 124 <!-- The global file processing state -->
125 <div class="fileupload-process"> 125 <div class="fileupload-process">
126 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 126 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
127 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 127 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131   131  
132 </div> <!-- /container --> 132 </div> <!-- /container -->
133 133
134 <div id="footer"> 134 <div id="footer">
135 <div class="container"> 135 <div class="container">
136 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 136 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
137 </div> 137 </div>
138 </div> 138 </div>
139   139  
140 <!-- jQuery --> 140 <!-- jQuery -->
141 <script src="bower_components/jquery/dist/jquery.min.js"></script> 141 <script src="bower_components/jquery/dist/jquery.min.js"></script>
142 <!-- BootStrap --> 142 <!-- BootStrap -->
143 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 143 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
144 144
145 <!-- DropZone --> 145 <!-- DropZone -->
146 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 146 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
147 <!-- Clipboard --> 147 <!-- Clipboard -->
148 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 148 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
149 <script> 149 <script>
150 $(document).ready(() => { 150 $(document).ready(() => {
151 // Get the template HTML and remove it from the doument 151 // Get the template HTML and remove it from the doument
152 var previewNode = document 152 var previewNode = document
153 .querySelector("#template"); 153 .querySelector("#template");
154 previewNode.id = ""; 154 previewNode.id = "";
155 var previewTemplate = previewNode 155 var previewTemplate = previewNode
156 .parentNode 156 .parentNode
157 .innerHTML; 157 .innerHTML;
158 previewNode 158 previewNode
159 .parentNode 159 .parentNode
160 .removeChild(previewNode); 160 .removeChild(previewNode);
161   161  
162 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 162 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
163 url: "file.php", // Set the url 163 url: "file.php", // Set the url
164 paramName: "file", 164 paramName: "file",
165 thumbnailWidth: 80, 165 thumbnailWidth: 80,
166 thumbnailHeight: 80, 166 thumbnailHeight: 80,
167 //parallelUploads: 20, 167 //parallelUploads: 20,
168 previewTemplate: previewTemplate, 168 previewTemplate: previewTemplate,
169 autoQueue: false, // Make sure the files aren't queued until manually added 169 autoQueue: false, // Make sure the files aren't queued until manually added
170 previewsContainer: "#previews", // Container to display the previews 170 previewsContainer: "#previews", // Container to display the previews
171 clickable: [ 171 clickable: [
172 "#uploadbutton", 172 "#uploadbutton",
173 "#uploadpanel" 173 "#uploadpanel"
174 ], 174 ],
175 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 175 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
176 }).on("addedfile", (file) => { 176 }).on("addedfile", (file) => {
177 // Hookup the start button 177 // Hookup the start button
178 file.previewElement.querySelector(".start").onclick = () => { 178 file.previewElement.querySelector(".start").onclick = () => {
179 myDropzone.enqueueFile(file); 179 myDropzone.enqueueFile(file);
180 }; 180 };
181 }).on("totaluploadprogress", (progress) => { 181 }).on("totaluploadprogress", (progress) => {
182 document 182 document
183 .querySelector("#total-progress .progress-bar") 183 .querySelector("#total-progress .progress-bar")
184 .style 184 .style
185 .width = progress + "%"; 185 .width = progress + "%";
186 }).on("sending", (file) => { 186 }).on("sending", (file) => {
187 // Show the total progress bar when upload starts 187 // Show the total progress bar when upload starts
188 document.querySelector("#total-progress") 188 document.querySelector("#total-progress")
189 .style 189 .style
190 .opacity = 1; 190 .opacity = 1;
191 191
192 // And disable the start button. 192 // And disable the start button.
193 file 193 file
194 .previewElement 194 .previewElement
195 .querySelector(".start") 195 .querySelector(".start")
196 .setAttribute("disabled", "disabled"); 196 .setAttribute("disabled", "disabled");
197 }).on("queuecomplete", (progress) => { 197 }).on("queuecomplete", (progress) => {
198 document.querySelector("#total-progress") 198 document.querySelector("#total-progress")
199 .style 199 .style
200 .opacity = "0"; 200 .opacity = "0";
201 }).on("success", (file, data) => { 201 }).on("success", (file, data) => {
202 // Set the ID of the URL box. 202 // Set the ID of the URL box.
203 const boxURLID = '_' + Math 203 const boxURLID = '_' + Math
204 .random() 204 .random()
205 .toString(36) 205 .toString(36)
206 .substr(2, 9); 206 .substr(2, 9);
207 file 207 file
208 .previewElement 208 .previewElement
209 .querySelector("#URL") 209 .querySelector("#URL")
210 .value = location.protocol 210 .value = location.protocol
211 .concat("//") 211 .concat("//")
212 .concat(window.location.hostname) 212 .concat(window.location.hostname)
213 .concat("/") 213 .concat("/")
214 .concat(data); 214 .concat(data);
215 215
216 file 216 file
217 .previewElement 217 .previewElement
218 .querySelector("#URL") 218 .querySelector("#URL")
219 .setAttribute('id', boxURLID) 219 .setAttribute('id', boxURLID)
220   220  
221 // Set the ID of the delete URL box. 221 // Set the ID of the delete URL box.
222 const deleteBoxURLID = '_' + Math 222 const deleteBoxURLID = '_' + Math
223 .random() 223 .random()
224 .toString(36) 224 .toString(36)
225 .substr(2, 9); 225 .substr(2, 9);
226 file 226 file
227 .previewElement 227 .previewElement
228 .querySelector("#deleteURL") 228 .querySelector("#deleteURL")
229 .value = location.protocol.concat("//") 229 .value = location.protocol.concat("//")
230 .concat(window.location.hostname) 230 .concat(window.location.hostname)
231 .concat("/") 231 .concat("/")
232 .concat("delete") 232 .concat("delete")
233 .concat("/") 233 .concat("/")
234 .concat(data); 234 .concat(data);
235 235
236 file 236 file
237 .previewElement 237 .previewElement
238 .querySelector("#deleteURL") 238 .querySelector("#deleteURL")
239 .setAttribute('id', deleteBoxURLID) 239 .setAttribute('id', deleteBoxURLID)
240 240
241 // Set the ID of the URL clipboard button. 241 // Set the ID of the URL clipboard button.
242 const clipButtonID = '_' + Math 242 const clipButtonID = '_' + Math
243 .random() 243 .random()
244 .toString(36) 244 .toString(36)
245 .substr(2, 9); 245 .substr(2, 9);
246 file 246 file
247 .previewElement 247 .previewElement
248 .querySelector("#btn-clipboard") 248 .querySelector("#btn-clipboard")
249 .setAttribute('data-clipboard-target', '#' + boxURLID) 249 .setAttribute('data-clipboard-target', '#' + boxURLID)
250 250
251 file 251 file
252 .previewElement 252 .previewElement
253 .querySelector("#btn-clipboard") 253 .querySelector("#btn-clipboard")
254 .setAttribute('id', clipButtonID); 254 .setAttribute('id', clipButtonID);
255 255
256 new Clipboard('#' + clipButtonID); 256 new Clipboard('#' + clipButtonID);
257 257
258 // Set the ID of the delete URL clipboard button. 258 // Set the ID of the delete URL clipboard button.
259 const clipButtonDeleteID = '_' + Math 259 const clipButtonDeleteID = '_' + Math
260 .random() 260 .random()
261 .toString(36) 261 .toString(36)
262 .substr(2, 9); 262 .substr(2, 9);
263 file 263 file
264 .previewElement 264 .previewElement
265 .querySelector("#btn-clipboard-delete") 265 .querySelector("#btn-clipboard-delete")
266 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) 266 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
267 267
268 file 268 file
269 .previewElement 269 .previewElement
270 .querySelector("#btn-clipboard-delete") 270 .querySelector("#btn-clipboard-delete")
271 .setAttribute('id', clipButtonDeleteID); 271 .setAttribute('id', clipButtonDeleteID);
272 272
273 new Clipboard('#' + clipButtonDeleteID); 273 new Clipboard('#' + clipButtonDeleteID);
274 274
275 // Set the ID of the mailto button. 275 // Set the ID of the mailto button.
276 const mailToButtonID = '_' + Math 276 const mailToButtonID = '_' + Math
277 .random() 277 .random()
278 .toString(36) 278 .toString(36)
279 .substr(2, 9); 279 .substr(2, 9);
280 280
281 file 281 file
282 .previewElement 282 .previewElement
283 .querySelector("#btn-mailto") 283 .querySelector("#btn-mailto")
284 .setAttribute('id', mailToButtonID); 284 .setAttribute('id', mailToButtonID);
285   285  
286 file 286 file
287 .previewElement 287 .previewElement
288 .querySelector(".start") 288 .querySelector(".start")
289 .setAttribute("disabled", "disabled"); 289 .setAttribute("disabled", "disabled");
290 file 290 file
291 .previewElement 291 .previewElement
292 .querySelector(".cancel") 292 .querySelector(".cancel")
293 .setAttribute("disabled", "disabled"); 293 .setAttribute("disabled", "disabled");
294 294
295 $('#' + mailToButtonID).on('click', () => { 295 $('#' + mailToButtonID).on('click', () => {
296 window.location.href = "mailto:?subject="+ 296 window.location.href = "mailto:?subject="+
297 encodeURIComponent("Can't scratch this!") + "&body=" + 297 encodeURIComponent("Can't scratch this!") + "&body=" +
298 encodeURIComponent($('#' + boxURLID).val()); 298 encodeURIComponent($('#' + boxURLID).val());
299 }); 299 });
300 }); 300 });
301 301
302 document.querySelector("#actions .start").onclick = () => { 302 document.querySelector("#actions .start").onclick = () => {
303 myDropzone.enqueueFiles( 303 myDropzone.enqueueFiles(
304 myDropzone 304 myDropzone
305 .getFilesWithStatus(Dropzone.ADDED)); 305 .getFilesWithStatus(Dropzone.ADDED));
306 }; 306 };
307 307
308 document.querySelector("#actions .cancel").onclick = () => { 308 document.querySelector("#actions .cancel").onclick = () => {
309 myDropzone.removeAllFiles(true); 309 myDropzone.removeAllFiles(true);
310 }; 310 };
311 }); 311 });
312 </script> 312 </script>
313 <!-- Jumbotron parallax effect --> 313 <!-- Jumbotron parallax effect -->
314 <script> 314 <script>
315 const jumboHeight = $('.jumbotron').outerHeight(); 315 const jumboHeight = $('.jumbotron').outerHeight();
316 function parallax(){ 316 function parallax(){
317 var scrolled = $(window).scrollTop(); 317 var scrolled = $(window).scrollTop();
318 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 318 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
319 } 319 }
320   320  
321 $(window).scroll(function(e){ 321 $(window).scroll(function(e){
322 parallax(); 322 parallax();
323 }); 323 });
324 </script> 324 </script>
325 </body> 325 </body>
326 </html> 326 </html>
327   327