scratch – Diff between revs 125 and 126

Subversion Repositories:
Rev:
Show entire fileIgnore whitespace
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