scratch – Diff between revs 128 and 129
?pathlinks?
Rev 128 | Rev 129 | |||
---|---|---|---|---|
Line 87... | Line 87... | |||
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> |
|
Line 202... | Line 202... | |||
202 | formData.append('token', token); |
202 | formData.append('token', token); |
|
Line 203... | Line 203... | |||
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') |
|
Line 208... | Line 208... | |||
208 | .getAttribute('id'); |
208 | .getAttribute('id'); |
|
209 | |
209 | |
|
Line 222... | Line 222... | |||
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 | }; |
|
Line 226... | Line -... | |||
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 |
- | ||
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 |
233 | .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') |
- | ||
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') |
244 | .querySelector('#file-delete-url') |
|
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) |
|
Line 341... | Line 286... | |||
341 | |
286 | |
|
342 | file |
287 | file |
|
343 | .previewElement |
288 | .previewElement |
|
344 | .querySelector('#btn-mailto') |
289 | .querySelector('#btn-mailto') |
|
- | 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('/') |
||
Line 345... | Line 358... | |||
345 | .setAttribute('id', mailToButtonID); |
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') |
|
- | 367 | .setAttribute('disabled', 'disabled'); |
||
354 | .setAttribute('disabled', 'disabled'); |
368 | |
|
355 | |
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 | |
- | ||
362 | // Set the ID of the facebook button. |
- | ||
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); |
375 | |
|
372 | |
376 | // Enable or disable the facebook opengraph URL. |
|
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 |
|
Line 378... | Line 382... | |||
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('//') |
|
Line 393... | Line 397... | |||
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 | }); |