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 | |
|