scratch – Diff between revs 132 and 133

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 132 Rev 133
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en" ng-app="scratch"> 2 <html lang="en" ng-app="scratch">
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 <!-- DropZone --> 18 <!-- DropZone -->
19 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet"> 19 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
20 <!-- TagsInput --> 20 <!-- TagsInput -->
21 <link href="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"> 21 <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">
22 22
23 <!-- Site-wide style CCS --> 23 <!-- Site-wide style CCS -->
24 <link href="css/style.css" rel="stylesheet"> 24 <link href="css/style.css" rel="stylesheet">
25 25
26 <!-- Local style --> 26 <!-- Local style -->
27 <link href="css/files/style.css" rel="stylesheet"> 27 <link href="css/files/style.css" rel="stylesheet">
28 28
29 <!-- Scratch Angular Includes --> 29 <!-- Scratch Angular Includes -->
30 <ng-include src="'html/scratch-head-last.html'"></ng-include> 30 <ng-include src="'html/scratch-head-last.html'"></ng-include>
31 </head> 31 </head>
32   32  
33 <body> 33 <body>
34 34
35 <!-- Scratch Angular Includes --> 35 <!-- Scratch Angular Includes -->
36 <ng-include src="'html/scratch-body-first.html'"></ng-include> 36 <ng-include src="'html/scratch-body-first.html'"></ng-include>
37   37  
38 <!-- Main component for a primary marketing message or call to action --> 38 <!-- Main component for a primary marketing message or call to action -->
39 <div class="paralax-background"></div> 39 <div class="paralax-background"></div>
40 <div class="jumbotron"> 40 <div class="jumbotron">
41 <h1>scratch copy</h1> 41 <h1>scratch copy</h1>
42 <p class="quote">the asset sharer</p> 42 <p class="quote">the asset sharer</p>
43 </div> 43 </div>
44   44  
45 <div class="container"> 45 <div class="container">
46 46
47 <ul class="nav nav-tabs"> 47 <ul class="nav nav-tabs">
48 <li><a href="index.html">Home</a></li> 48 <li><a href="index.html">Home</a></li>
49 <li class="active"><a href="#">File</a></li> 49 <li class="active"><a href="#">File</a></li>
50 <li><a href="text.html">Text</a></li> 50 <li><a href="text.html">Text</a></li>
51 <li><a href="draw.html">Draw</a></li> 51 <li><a href="draw.html">Draw</a></li>
52 <li><a href="link.html">Link</a></li> 52 <li><a href="link.html">Link</a></li>
53 <li><a href="view.html">View</a></li> 53 <li><a href="view.html">View</a></li>
54 </ul> 54 </ul>
55 55
56 <div id="main-panel" class="panel panel-default"> 56 <div id="main-panel" class="panel panel-default">
57 <div class="panel-heading"> 57 <div class="panel-heading">
58 <div id="actions" class="row"> 58 <div id="actions" class="row">
59 <div class="col-lg-5"> 59 <div class="col-lg-5">
60 <div class="btn-group btn-group-justified" role="group"> 60 <div class="btn-group btn-group-justified" role="group">
61 <!-- The fileinput-button span is used to style the file input field as button --> 61 <!-- The fileinput-button span is used to style the file input field as button -->
62 <div class="btn-group" role="group"> 62 <div class="btn-group" role="group">
63 <button id="uploadbutton" type="button" class="btn btn-default"> 63 <button id="uploadbutton" type="button" class="btn btn-default">
64 <i class="glyphicon glyphicon-plus"></i> 64 <i class="glyphicon glyphicon-plus"></i>
65 <span>Add...</span> 65 <span>Add...</span>
66 </button> 66 </button>
67 </div> 67 </div>
68 <div class="btn-group" role="group"> 68 <div class="btn-group" role="group">
69 <button type="submit" class="btn btn-default start"> 69 <button type="submit" class="btn btn-default start">
70 <i class="glyphicon glyphicon-upload"></i> 70 <i class="glyphicon glyphicon-upload"></i>
71 <span>Upload All</span> 71 <span>Upload All</span>
72 </button> 72 </button>
73 </div> 73 </div>
74 <div class="btn-group" role="group"> 74 <div class="btn-group" role="group">
75 <button type="reset" class="btn btn-danger cancel"> 75 <button type="reset" class="btn btn-danger cancel">
76 <i class="glyphicon glyphicon-ban-circle"></i> 76 <i class="glyphicon glyphicon-ban-circle"></i>
77 <span>Cancel All</span> 77 <span>Cancel All</span>
78 </button> 78 </button>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 <div class="panel-body" id="uploadpanel"> 84 <div class="panel-body" id="uploadpanel">
85 <div class="table table-striped files" id="previews"> 85 <div class="table table-striped files" id="previews">
86 <div id="template" class="file-row"> 86 <div id="template" class="file-row">
87 <!-- This is used as the file preview template --> 87 <!-- This is used as the file preview template -->
88 <div> 88 <div>
89 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> 89 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
90 </div> 90 </div>
91 <div> 91 <div>
92 <p class="upload-filename" data-dz-name></p> 92 <p class="upload-filename" data-dz-name></p>
93 <label for="file-upload-url">Download URL:</label> 93 <label for="file-upload-url">Download URL:</label>
94 <div class="input-group"> 94 <div class="input-group">
95 <input id="file-upload-url" type="text" class="form-control upload-url" readonly> 95 <input id="file-upload-url" type="text" class="form-control upload-url" readonly>
96 <span class="input-group-btn"> 96 <span class="input-group-btn">
97 <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button> 97 <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
98 </span> 98 </span>
99 <span class="input-group-btn"> 99 <span class="input-group-btn">
100 <button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button> 100 <button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button>
101 </span> 101 </span>
102 <span class="input-group-btn"> 102 <span class="input-group-btn">
103 <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 103 <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
104 </span> 104 </span>
105 </div> 105 </div>
106 <label for="file-upload-url">Delete URL:</label> 106 <label for="file-upload-url">Delete URL:</label>
107 <div class="input-group"> 107 <div class="input-group">
108 <input id="file-delete-url" type="text" class="form-control delete-url" readonly> 108 <input id="file-delete-url" type="text" class="form-control delete-url" readonly>
109 <span class="input-group-btn"> 109 <span class="input-group-btn">
110 <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 110 <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
111 </span> 111 </span>
112 </div> 112 </div>
113 <label for="file-tags">Tags:</label> 113 <label for="file-tags">Tags:</label>
114 <div class="input-group"> 114 <div class="input-group">
115 <select id="file-tags" multiple class="form-control file-tags"></select> 115 <!-- <select id="file-tags" multiple class="form-control file-tags"></select> -->
-   116 <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
116 </div> 117 </div>
117 <strong class="error text-danger" data-dz-errormessage></strong> 118 <strong class="error text-danger" data-dz-errormessage></strong>
118 </div> 119 </div>
119 <div> 120 <div>
120 <p class="size" data-dz-size></p> 121 <p class="size" data-dz-size></p>
121 <div id="progress" class="progress active" role="progressbar"> 122 <div id="progress" class="progress active" role="progressbar">
122 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 123 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
123 </div> 124 </div>
124 </div> 125 </div>
125 <div> 126 <div>
126 <button id="start" class="btn btn-default start"> 127 <button id="start" class="btn btn-default start">
127 <i class="glyphicon glyphicon-upload"></i> 128 <i class="glyphicon glyphicon-upload"></i>
128 <span>Upload</span> 129 <span>Upload</span>
129 </button> 130 </button>
130 <button id="cancel" data-dz-remove class="btn btn-warning cancel"> 131 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
131 <i class="glyphicon glyphicon-ban-circle"></i> 132 <i class="glyphicon glyphicon-ban-circle"></i>
132 <span>Cancel</span> 133 <span>Cancel</span>
133 </button> 134 </button>
134 <button id="remove" data-dz-remove class="btn btn-danger remove"> 135 <button id="remove" data-dz-remove class="btn btn-danger remove">
135 <i class="glyphicon glyphicon-remove"></i> 136 <i class="glyphicon glyphicon-remove"></i>
136 <span>Remove</span> 137 <span>Remove</span>
137 </button> 138 </button>
138 </div> 139 </div>
139 </div> 140 </div>
140 </div> 141 </div>
141 </div> 142 </div>
142 <!-- The global file processing state --> 143 <!-- The global file processing state -->
143 <div class="fileupload-process"> 144 <div class="fileupload-process">
144 <div id="total-progress" class="progress active" role="progressbar"> 145 <div id="total-progress" class="progress active" role="progressbar">
145 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div> 146 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
146 </div> 147 </div>
147 </div> 148 </div>
148 </div> 149 </div>
149 </div> <!-- /container --> 150 </div> <!-- /container -->
150 151
151 <div id="footer"> 152 <div id="footer">
152 <div class="container"> 153 <div class="container">
153 <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> 154 <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>
154 </div> 155 </div>
155 </div> 156 </div>
156   157  
157 <!-- jQuery --> 158 <!-- jQuery -->
158 <script src="bower_components/jquery/dist/jquery.min.js"></script> 159 <script src="bower_components/jquery/dist/jquery.min.js"></script>
159 <!-- Angular JS --> 160 <!-- Angular JS -->
160 <script src="bower_components/angular/angular.min.js"></script> 161 <script src="bower_components/angular/angular.min.js"></script>
161 <!-- BootStrap --> 162 <!-- BootStrap -->
162 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 163 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
163 <!-- DropZone --> 164 <!-- DropZone -->
164 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 165 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
165 <!-- Clipboard --> 166 <!-- Clipboard -->
166 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 167 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
167 <!-- TagsInput --> 168 <!-- TagsInput -->
168 <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> 169 <!-- <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script> -->
-   170 <!-- BootStrap TokenField -->
-   171 <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script>
169 <!-- Angular Initialization. --> 172 <!-- Angular Initialization. -->
170 <script> 173 <script>
171 var app = angular.module('scratch', []); 174 var app = angular.module('scratch', []);
172 </script> 175 </script>
173 <script> 176 <script>
174 $(document).ready(() => { 177 $(document).ready(() => {
175 $.get('session.php').then((token) => { 178 $.get('session.php').then((token) => {
176 // Get the template HTML and remove it from the doument 179 // Get the template HTML and remove it from the doument
177 var previewNode = document 180 var previewNode = document
178 .querySelector('#template'); 181 .querySelector('#template');
179 previewNode.id = ''; 182 previewNode.id = '';
180 var previewTemplate = previewNode 183 var previewTemplate = previewNode
181 .parentNode 184 .parentNode
182 .innerHTML; 185 .innerHTML;
183 previewNode 186 previewNode
184 .parentNode 187 .parentNode
185 .removeChild(previewNode); 188 .removeChild(previewNode);
186 189
187 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 190 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
188 url: 'file.php', // Set the url 191 url: 'file.php', // Set the url
189 paramName: 'file', 192 paramName: 'file',
190 thumbnailWidth: 80, 193 thumbnailWidth: 80,
191 thumbnailHeight: 80, 194 thumbnailHeight: 80,
192 //parallelUploads: 20, 195 //parallelUploads: 20,
193 previewTemplate: previewTemplate, 196 previewTemplate: previewTemplate,
194 autoQueue: false, // Make sure the files aren't queued until manually added 197 autoQueue: false, // Make sure the files aren't queued until manually added
195 previewsContainer: '#previews', // Container to display the previews 198 previewsContainer: '#previews', // Container to display the previews
196 clickable: [ 199 clickable: [
197 '#uploadbutton', 200 '#uploadbutton',
198 '#uploadpanel' 201 '#uploadpanel'
199 ], 202 ],
200 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 203 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
201 }).on('sending', (file, xhr, formData) => { 204 }).on('sending', (file, xhr, formData) => {
202 // Append session token. 205 // Append session token.
203 formData.append('token', token); 206 formData.append('token', token);
204 207
205 // Append tags to the form data. 208 // Append tags to the form data.
206 const tagsBoxID = file 209 const tagsBoxID = file
207 .previewElement 210 .previewElement
208 .querySelector('.file-tags') 211 .querySelector('.file-tags')
209 .getAttribute('id'); 212 .getAttribute('id');
210 213
211 const tags = $('#' + tagsBoxID) 214 const tags = $('#' + tagsBoxID)
212 .tagsinput('items'); 215 .tokenfield('getTokens')
-   216 .map((token) => {
-   217 return token.value;
-   218 });
213 219
214 formData.append('tags', JSON.stringify(tags)); 220 formData.append('tags', JSON.stringify(tags));
215 221
216 // And disable the tags bar. 222 // And disable the tags bar.
217 const tagsContainerID = file -  
218 .previewElement -  
219 .querySelector('.bootstrap-tagsinput') -  
220 .getAttribute('id'); -  
221 -  
222 $('#' + tagsBoxID).attr('readonly', 'readonly'); 223 $('#' + tagsBoxID).tokenfield('readonly');
223 $('#' + tagsBoxID).attr('disabled', 'disabled'); 224 $('#' + tagsBoxID).tokenfield('disable');
224 $('#' + tagsContainerID).attr('readonly', 'readonly'); -  
225 $('#' + tagsContainerID).attr('disabled', 'disabled'); -  
226 225
227 }).on('addedfile', (file) => { 226 }).on('addedfile', (file) => {
228 // Hookup the start button. 227 // Hookup the start button.
229 file.previewElement.querySelector('.start').onclick = () => { 228 file.previewElement.querySelector('.start').onclick = () => {
230 myDropzone.enqueueFile(file); 229 myDropzone.enqueueFile(file);
231 }; 230 };
232 231
233 // Set the ID of the URL box. 232 // Set the ID of the URL box.
234 const boxURLID = '_' + Math 233 const boxURLID = '_' + Math
235 .random() 234 .random()
236 .toString(36) 235 .toString(36)
237 .substr(2, 9); 236 .substr(2, 9);
238 file 237 file
239 .previewElement 238 .previewElement
240 .querySelector('#file-upload-url') 239 .querySelector('#file-upload-url')
241 .setAttribute('id', boxURLID); 240 .setAttribute('id', boxURLID);
242 241
243 // Set the ID of the delete URL box. 242 // Set the ID of the delete URL box.
244 const deleteBoxURLID = '_' + Math 243 const deleteBoxURLID = '_' + Math
245 .random() 244 .random()
246 .toString(36) 245 .toString(36)
247 .substr(2, 9); 246 .substr(2, 9);
248 file 247 file
249 .previewElement 248 .previewElement
250 .querySelector('#file-delete-url') 249 .querySelector('#file-delete-url')
251 .setAttribute('id', deleteBoxURLID); 250 .setAttribute('id', deleteBoxURLID);
252 251
253 // Set the ID of the URL clipboard button. 252 // Set the ID of the URL clipboard button.
254 const clipButtonID = '_' + Math 253 const clipButtonID = '_' + Math
255 .random() 254 .random()
256 .toString(36) 255 .toString(36)
257 .substr(2, 9); 256 .substr(2, 9);
258 file 257 file
259 .previewElement 258 .previewElement
260 .querySelector('#btn-clipboard') 259 .querySelector('#btn-clipboard')
261 .setAttribute('data-clipboard-target', '#' + boxURLID) 260 .setAttribute('data-clipboard-target', '#' + boxURLID)
262 261
263 file 262 file
264 .previewElement 263 .previewElement
265 .querySelector('#btn-clipboard') 264 .querySelector('#btn-clipboard')
266 .setAttribute('id', clipButtonID); 265 .setAttribute('id', clipButtonID);
267 266
268 new Clipboard('#' + clipButtonID); 267 new Clipboard('#' + clipButtonID);
269 268
270 // Set the ID of the delete URL clipboard button. 269 // Set the ID of the delete URL clipboard button.
271 const clipButtonDeleteID = '_' + Math 270 const clipButtonDeleteID = '_' + Math
272 .random() 271 .random()
273 .toString(36) 272 .toString(36)
274 .substr(2, 9); 273 .substr(2, 9);
275 file 274 file
276 .previewElement 275 .previewElement
277 .querySelector('#btn-clipboard-delete') 276 .querySelector('#btn-clipboard-delete')
278 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) 277 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
279 278
280 file 279 file
281 .previewElement 280 .previewElement
282 .querySelector('#btn-clipboard-delete') 281 .querySelector('#btn-clipboard-delete')
283 .setAttribute('id', clipButtonDeleteID); 282 .setAttribute('id', clipButtonDeleteID);
284 283
285 new Clipboard('#' + clipButtonDeleteID); 284 new Clipboard('#' + clipButtonDeleteID);
286 285
287 // Set the ID of the mailto button. 286 // Set the ID of the mailto button.
288 const mailToButtonID = '_' + Math 287 const mailToButtonID = '_' + Math
289 .random() 288 .random()
290 .toString(36) 289 .toString(36)
291 .substr(2, 9); 290 .substr(2, 9);
292 291
293 file 292 file
294 .previewElement 293 .previewElement
295 .querySelector('#btn-mailto') 294 .querySelector('#btn-mailto')
296 .setAttribute('id', mailToButtonID); 295 .setAttribute('id', mailToButtonID);
297 296
298 // Set the ID of the facebook button. 297 // Set the ID of the facebook button.
299 const faceBookButtonID = '_' + Math 298 const faceBookButtonID = '_' + Math
300 .random() 299 .random()
301 .toString(36) 300 .toString(36)
302 .substr(2, 9); 301 .substr(2, 9);
303   302  
304 file 303 file
305 .previewElement 304 .previewElement
306 .querySelector('#btn-facebook') 305 .querySelector('#btn-facebook')
307 .setAttribute('id', faceBookButtonID); 306 .setAttribute('id', faceBookButtonID);
308 307
309 // Set the ID of the tags input. 308 // Set the ID of the tags input.
310 const tagsBoxID = '_' + Math 309 const tagsBoxID = '_' + Math
311 .random() 310 .random()
312 .toString(36) 311 .toString(36)
313 .substr(2, 9); 312 .substr(2, 9);
314 313
315 file 314 file
316 .previewElement 315 .previewElement
317 .querySelector('#file-tags') 316 .querySelector('#file-tags')
318 .setAttribute('id', tagsBoxID); 317 .setAttribute('id', tagsBoxID);
319 318  
320 $('#' + tagsBoxID).tagsinput('refresh'); 319 $('#' + tagsBoxID).tokenfield();
321 -  
322 // Set the ID of the tags div. -  
323 const tagsContainerID = '_' + Math -  
324 .random() -  
325 .toString(36) -  
326 .substr(2, 9); -  
327 -  
328 // Add form control to tags list. -  
329 file -  
330 .previewElement -  
331 .querySelector('.bootstrap-tagsinput') -  
332 .classList -  
333 .add('form-control'); -  
334 -  
335 file -  
336 .previewElement -  
337 .querySelector('.bootstrap-tagsinput') -  
338 .setAttribute('id', tagsContainerID); -  
339 320
340 }).on('totaluploadprogress', (progress) => { 321 }).on('totaluploadprogress', (progress) => {
341 document 322 document
342 .querySelector('#total-progress .progress-bar') 323 .querySelector('#total-progress .progress-bar')
343 .style 324 .style
344 .width = progress + '%'; 325 .width = progress + '%';
345 }).on('sending', (file) => { 326 }).on('sending', (file) => {
346 // Show the total progress bar when upload starts 327 // Show the total progress bar when upload starts
347 document.querySelector("#total-progress") 328 document.querySelector("#total-progress")
348 .style 329 .style
349 .opacity = 1; 330 .opacity = 1;
350 331
351 // And disable the start button. 332 // And disable the start button.
352 file 333 file
353 .previewElement 334 .previewElement
354 .querySelector('.start') 335 .querySelector('.start')
355 .setAttribute('disabled', 'disabled'); 336 .setAttribute('disabled', 'disabled');
356 }).on('queuecomplete', (progress) => { 337 }).on('queuecomplete', (progress) => {
357 document.querySelector('#total-progress') 338 document.querySelector('#total-progress')
358 .style 339 .style
359 .opacity = '0'; 340 .opacity = '0';
360 }).on('success', (file, data) => { 341 }).on('success', (file, data) => {
361 // Serialize JSON to object. 342 // Serialize JSON to object.
362 data = JSON.parse(data); 343 data = JSON.parse(data);
363 344
364 file 345 file
365 .previewElement 346 .previewElement
366 .querySelector(".upload-url") 347 .querySelector(".upload-url")
367 .value = location.protocol 348 .value = location.protocol
368 .concat("//") 349 .concat("//")
369 .concat(window.location.hostname) 350 .concat(window.location.hostname)
370 .concat("/") 351 .concat("/")
371 .concat(data.hash); 352 .concat(data.hash);
372 353
373 file 354 file
374 .previewElement 355 .previewElement
375 .querySelector('.delete-url') 356 .querySelector('.delete-url')
376 .value = location.protocol.concat('//') 357 .value = location.protocol.concat('//')
377 .concat(window.location.hostname) 358 .concat(window.location.hostname)
378 .concat('/') 359 .concat('/')
379 .concat(data.timestamp) 360 .concat(data.timestamp)
380 .concat('/') 361 .concat('/')
381 .concat(data.hash); 362 .concat(data.hash);
382   363  
383 file 364 file
384 .previewElement 365 .previewElement
385 .querySelector('.start') 366 .querySelector('.start')
386 .setAttribute('disabled', 'disabled'); 367 .setAttribute('disabled', 'disabled');
387 file 368 file
388 .previewElement 369 .previewElement
389 .querySelector('.cancel') 370 .querySelector('.cancel')
390 .setAttribute('disabled', 'disabled'); 371 .setAttribute('disabled', 'disabled');
391 372
392 // Enable the mailto button. 373 // Enable the mailto button.
393 $('.url-mailto-button').on('click', () => { 374 $('.url-mailto-button').on('click', () => {
394 window.location.href = "mailto:?subject="+ 375 window.location.href = "mailto:?subject="+
395 encodeURIComponent("Can't scratch this!") + "&body=" + 376 encodeURIComponent("Can't scratch this!") + "&body=" +
396 encodeURIComponent($('.upload-url').val()); 377 encodeURIComponent($('.upload-url').val());
397 }); 378 });
398 379
399 // Enable or disable the facebook opengraph URL. 380 // Enable or disable the facebook opengraph URL.
400 switch(data.opengraph) { 381 switch(data.opengraph) {
401 case true: 382 case true:
402 // Enable the facebook button. 383 // Enable the facebook button.
403 file 384 file
404 .previewElement 385 .previewElement
405 .querySelector('.url-facebook-button') 386 .querySelector('.url-facebook-button')
406 .removeAttribute('disabled'); 387 .removeAttribute('disabled');
407 388
408 // Change the URL when the user clicks the button. 389 // Change the URL when the user clicks the button.
409 $('.url-facebook-button').on('click', () => { 390 $('.url-facebook-button').on('click', () => {
410 $('.upload-url') 391 $('.upload-url')
411 .val( 392 .val(
412 location.protocol.concat('//') 393 location.protocol.concat('//')
413 .concat(window.location.hostname) 394 .concat(window.location.hostname)
414 .concat('/') 395 .concat('/')
415 .concat('og') 396 .concat('og')
416 .concat('/') 397 .concat('/')
417 .concat(data.hash) 398 .concat(data.hash)
418 ); 399 );
419 }); 400 });
420 break; 401 break;
421 default: 402 default:
422 // Disable the facebook button. 403 // Disable the facebook button.
423 file 404 file
424 .previewElement 405 .previewElement
425 .querySelector('.url-facebook-button') 406 .querySelector('.url-facebook-button')
426 .setAttribute('disabled', 'disabled'); 407 .setAttribute('disabled', 'disabled');
427 break; 408 break;
428 } 409 }
429 }); 410 });
430 411
431 document.querySelector('#actions .start').onclick = () => { 412 document.querySelector('#actions .start').onclick = () => {
432 myDropzone.enqueueFiles( 413 myDropzone.enqueueFiles(
433 myDropzone 414 myDropzone
434 .getFilesWithStatus(Dropzone.ADDED)); 415 .getFilesWithStatus(Dropzone.ADDED));
435 }; 416 };
436 417
437 document.querySelector('#actions .cancel').onclick = () => { 418 document.querySelector('#actions .cancel').onclick = () => {
438 myDropzone.removeAllFiles(true); 419 myDropzone.removeAllFiles(true);
439 }; 420 };
440 }); 421 });
441 422
442 // Scroll to the panel. 423 // Scroll to the panel.
443 $('html, body').animate({ 424 $('html, body').animate({
444 scrollTop: $('#main-panel').offset().top 425 scrollTop: $('#main-panel').offset().top
445 }, 'slow'); 426 }, 'slow');
446 }); 427 });
447 </script> 428 </script>
448 <!-- Jumbotron parallax effect --> 429 <!-- Jumbotron parallax effect -->
449 <script> 430 <script>
450 const jumboHeight = $('.jumbotron').outerHeight(); 431 const jumboHeight = $('.jumbotron').outerHeight();
451 function parallax(){ 432 function parallax(){
452 var scrolled = $(window).scrollTop(); 433 var scrolled = $(window).scrollTop();
453 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px'); 434 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
454 } 435 }
455   436  
456 $(window).scroll(function(e){ 437 $(window).scroll(function(e){
457 parallax(); 438 parallax();
458 }); 439 });
459 </script> 440 </script>
460 </body> 441 </body>
461 </html> 442 </html>
462   443