scratch – Diff between revs 128 and 129

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