scratch – Diff between revs 129 and 131

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