scratch – Diff between revs 125 and 126
?pathlinks?
Rev 125 | Rev 126 | |||
---|---|---|---|---|
Line 107... | Line 107... | |||
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" 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"></select> |
112 | <select id="tags" multiple class="form-control bootstrap-tagsinput 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 172... | Line 172... | |||
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, |
|
Line 198... | Line 198... | |||
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 | |
||
- | 204 | // Append tags to the form data. |
||
- | 205 | const tagsBoxID = file |
||
- | 206 | .previewElement |
||
- | 207 | .querySelector('.tags') |
||
- | 208 | .getAttribute('id'); |
||
- | 209 | |
||
- | 210 | const tags = $('#' + tagsBoxID) |
||
- | 211 | .tagsinput('items'); |
||
- | 212 | |
||
- | 213 | formData.append('tags', JSON.stringify(tags)); |
||
203 | }).on('addedfile', (file) => { |
214 | }).on('addedfile', (file) => { |
|
204 | // Hookup the start button |
215 | // Hookup the start button. |
|
205 | file.previewElement.querySelector(".start").onclick = () => { |
216 | file.previewElement.querySelector('.start').onclick = () => { |
|
206 | myDropzone.enqueueFile(file); |
217 | myDropzone.enqueueFile(file); |
|
207 | }; |
218 | }; |
|
Line 208... | Line 219... | |||
208 | |
219 | |
|
209 | // Set the ID of the tags input. |
220 | // Set the ID of the tags input. |
|
Line 212... | Line 223... | |||
212 | .toString(36) |
223 | .toString(36) |
|
213 | .substr(2, 9); |
224 | .substr(2, 9); |
|
Line 214... | Line 225... | |||
214 | |
225 | |
|
215 | file |
226 | file |
|
216 | .previewElement |
227 | .previewElement |
|
217 | .querySelector("#tags") |
228 | .querySelector('#tags') |
|
Line 218... | Line 229... | |||
218 | .setAttribute('id', tagsBoxID); |
229 | .setAttribute('id', tagsBoxID); |
|
219 | |
- | ||
220 | $('#' + tagsBoxID).tagsinput('refresh'); |
- | ||
221 | //$('input').tagsInput('refresh'); |
230 | |
|
222 | |
231 | $('#' + tagsBoxID).tagsinput('refresh'); |
|
223 | }).on('totaluploadprogress', (progress) => { |
232 | }).on('totaluploadprogress', (progress) => { |
|
224 | document |
233 | document |
|
225 | .querySelector('#total-progress .progress-bar') |
234 | .querySelector('#total-progress .progress-bar') |
|
226 | .style |
235 | .style |
|
227 | .width = progress + "%"; |
236 | .width = progress + '%'; |
|
228 | }).on('sending', (file) => { |
237 | }).on('sending', (file) => { |
|
229 | // Show the total progress bar when upload starts |
238 | // Show the total progress bar when upload starts |
|
230 | document.querySelector("#total-progress") |
239 | document.querySelector("#total-progress") |
|
Line 231... | Line 240... | |||
231 | .style |
240 | .style |
|
232 | .opacity = 1; |
241 | .opacity = 1; |
|
233 | |
242 | |
|
234 | // And disable the start button. |
243 | // And disable the start button. |
|
235 | file |
244 | file |
|
236 | .previewElement |
245 | .previewElement |
|
237 | .querySelector(".start") |
246 | .querySelector('.start') |
|
238 | .setAttribute("disabled", "disabled"); |
247 | .setAttribute('disabled', 'disabled'); |
|
239 | }).on('queuecomplete', (progress) => { |
248 | }).on('queuecomplete', (progress) => { |
|
240 | document.querySelector("#total-progress") |
249 | document.querySelector('#total-progress') |
|
241 | .style |
250 | .style |
|
242 | .opacity = "0"; |
251 | .opacity = '0'; |
|
Line 243... | Line 252... | |||
243 | }).on('success', (file, data) => { |
252 | }).on('success', (file, data) => { |
|
Line 258... | Line 267... | |||
258 | .concat("/") |
267 | .concat("/") |
|
259 | .concat(data.hash); |
268 | .concat(data.hash); |
|
Line 260... | Line 269... | |||
260 | |
269 | |
|
261 | file |
270 | file |
|
262 | .previewElement |
271 | .previewElement |
|
263 | .querySelector("#URL") |
272 | .querySelector('#URL') |
|
Line 264... | Line 273... | |||
264 | .setAttribute('id', boxURLID) |
273 | .setAttribute('id', boxURLID) |
|
265 | |
274 | |
|
266 | // Set the ID of the delete URL box. |
275 | // Set the ID of the delete URL box. |
|
267 | const deleteBoxURLID = '_' + Math |
276 | const deleteBoxURLID = '_' + Math |
|
268 | .random() |
277 | .random() |
|
269 | .toString(36) |
278 | .toString(36) |
|
270 | .substr(2, 9); |
279 | .substr(2, 9); |
|
271 | file |
280 | file |
|
272 | .previewElement |
281 | .previewElement |
|
273 | .querySelector("#deleteURL") |
282 | .querySelector('#deleteURL') |
|
274 | .value = location.protocol.concat("//") |
283 | .value = location.protocol.concat('//') |
|
275 | .concat(window.location.hostname) |
284 | .concat(window.location.hostname) |
|
276 | .concat("/") |
285 | .concat('/') |
|
277 | .concat(data.timestamp) |
286 | .concat(data.timestamp) |
|
Line 278... | Line 287... | |||
278 | .concat("/") |
287 | .concat('/') |
|
279 | .concat(data.hash); |
288 | .concat(data.hash); |
|
280 | |
289 | |
|
281 | file |
290 | file |
|
Line 282... | Line 291... | |||
282 | .previewElement |
291 | .previewElement |
|
283 | .querySelector("#deleteURL") |
292 | .querySelector('#deleteURL') |
|
284 | .setAttribute('id', deleteBoxURLID) |
293 | .setAttribute('id', deleteBoxURLID) |
|
285 | |
294 | |
|
286 | // Set the ID of the URL clipboard button. |
295 | // Set the ID of the URL clipboard button. |
|
287 | const clipButtonID = '_' + Math |
296 | const clipButtonID = '_' + Math |
|
288 | .random() |
297 | .random() |
|
289 | .toString(36) |
298 | .toString(36) |
|
290 | .substr(2, 9); |
299 | .substr(2, 9); |
|
Line 291... | Line 300... | |||
291 | file |
300 | file |
|
292 | .previewElement |
301 | .previewElement |
|
293 | .querySelector("#btn-clipboard") |
302 | .querySelector('#btn-clipboard') |
|
294 | .setAttribute('data-clipboard-target', '#' + boxURLID) |
303 | .setAttribute('data-clipboard-target', '#' + boxURLID) |
|
Line 295... | Line 304... | |||
295 | |
304 | |
|
Line 296... | Line 305... | |||
296 | file |
305 | file |
|
Line 305... | Line 314... | |||
305 | .random() |
314 | .random() |
|
306 | .toString(36) |
315 | .toString(36) |
|
307 | .substr(2, 9); |
316 | .substr(2, 9); |
|
308 | file |
317 | file |
|
309 | .previewElement |
318 | .previewElement |
|
310 | .querySelector("#btn-clipboard-delete") |
319 | .querySelector('#btn-clipboard-delete') |
|
311 | .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) |
320 | .setAttribute('data-clipboard-target', '#' + deleteBoxURLID) |
|
Line 312... | Line 321... | |||
312 | |
321 | |
|
313 | file |
322 | file |
|
314 | .previewElement |
323 | .previewElement |
|
315 | .querySelector("#btn-clipboard-delete") |
324 | .querySelector('#btn-clipboard-delete') |
|
Line 316... | Line 325... | |||
316 | .setAttribute('id', clipButtonDeleteID); |
325 | .setAttribute('id', clipButtonDeleteID); |
|
Line 317... | Line 326... | |||
317 | |
326 | |
|
Line 323... | Line 332... | |||
323 | .toString(36) |
332 | .toString(36) |
|
324 | .substr(2, 9); |
333 | .substr(2, 9); |
|
Line 325... | Line 334... | |||
325 | |
334 | |
|
326 | file |
335 | file |
|
327 | .previewElement |
336 | .previewElement |
|
328 | .querySelector("#btn-mailto") |
337 | .querySelector('#btn-mailto') |
|
Line 329... | Line 338... | |||
329 | .setAttribute('id', mailToButtonID); |
338 | .setAttribute('id', mailToButtonID); |
|
330 | |
339 | |
|
331 | file |
340 | file |
|
332 | .previewElement |
341 | .previewElement |
|
333 | .querySelector(".start") |
342 | .querySelector('.start') |
|
334 | .setAttribute("disabled", "disabled"); |
343 | .setAttribute('disabled', 'disabled'); |
|
335 | file |
344 | file |
|
336 | .previewElement |
345 | .previewElement |
|
Line 337... | Line 346... | |||
337 | .querySelector(".cancel") |
346 | .querySelector('.cancel') |
|
338 | .setAttribute("disabled", "disabled"); |
347 | .setAttribute('disabled', 'disabled'); |
|
339 | |
348 | |
|
340 | $('#' + mailToButtonID).on('click', () => { |
349 | $('#' + mailToButtonID).on('click', () => { |
|
Line 349... | Line 358... | |||
349 | .toString(36) |
358 | .toString(36) |
|
350 | .substr(2, 9); |
359 | .substr(2, 9); |
|
Line 351... | Line 360... | |||
351 | |
360 | |
|
352 | file |
361 | file |
|
353 | .previewElement |
362 | .previewElement |
|
354 | .querySelector("#btn-facebook") |
363 | .querySelector('#btn-facebook') |
|
Line 355... | Line 364... | |||
355 | .setAttribute('id', faceBookButtonID); |
364 | .setAttribute('id', faceBookButtonID); |
|
356 | |
365 | |
|
357 | switch(data.opengraph) { |
366 | switch(data.opengraph) { |
|
358 | case true: |
367 | case true: |
|
359 | // Enable the facebook button. |
368 | // Enable the facebook button. |
|
360 | file |
369 | file |
|
361 | .previewElement |
370 | .previewElement |
|
Line 362... | Line 371... | |||
362 | .querySelector('#' + faceBookButtonID) |
371 | .querySelector('#' + faceBookButtonID) |
|
363 | .removeAttribute("disabled"); |
372 | .removeAttribute('disabled'); |
|
364 | |
373 | |
|
365 | // Change the URL when the user clicks the button. |
374 | // Change the URL when the user clicks the button. |
|
366 | $('#' + faceBookButtonID).on('click', () => { |
375 | $('#' + faceBookButtonID).on('click', () => { |
|
367 | $('#' + boxURLID) |
376 | $('#' + boxURLID) |
|
368 | .val( |
377 | .val( |
|
369 | location.protocol.concat("//") |
378 | location.protocol.concat('//') |
|
370 | .concat(window.location.hostname) |
379 | .concat(window.location.hostname) |
|
371 | .concat("/") |
380 | .concat('/') |
|
372 | .concat("og") |
381 | .concat('og') |
|
373 | .concat("/") |
382 | .concat('/') |
|
374 | .concat(data.hash) |
383 | .concat(data.hash) |
|
375 | ); |
384 | ); |
|
376 | }); |
385 | }); |
|
377 | break; |
386 | break; |
|
378 | default: |
387 | default: |
|
379 | // Disable the facebook button. |
388 | // Disable the facebook button. |
|
380 | file |
389 | file |
|
381 | .previewElement |
390 | .previewElement |
|
382 | .querySelector('#' + faceBookButtonID) |
391 | .querySelector('#' + faceBookButtonID) |
|
383 | .setAttribute("disabled", "disabled"); |
392 | .setAttribute('disabled', 'disabled'); |
|
Line 384... | Line 393... | |||
384 | break; |
393 | break; |
|
385 | } |
394 | } |
|
386 | }); |
395 | }); |
|
387 | |
396 | |
|
388 | document.querySelector("#actions .start").onclick = () => { |
397 | document.querySelector('#actions .start').onclick = () => { |
|
Line 389... | Line 398... | |||
389 | myDropzone.enqueueFiles( |
398 | myDropzone.enqueueFiles( |
|
390 | myDropzone |
399 | myDropzone |
|
391 | .getFilesWithStatus(Dropzone.ADDED)); |
400 | .getFilesWithStatus(Dropzone.ADDED)); |
|
392 | }; |
401 | }; |
|
Line 393... | Line 402... | |||
393 | |
402 | |