scratch – Blame information for rev 131

Subversion Repositories:
Rev:
Rev Author Line No. Line
24 office 1 <!DOCTYPE html>
125 office 2 <html lang="en" ng-app="scratch">
24 office 3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
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 -->
8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
64 office 12 <title>scratch</title>
96 office 13  
24 office 14 <!-- Bootstrap core CSS -->
58 office 15 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
65 office 16 <!-- Font Awesome -->
17 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
24 office 18 <!-- DropZone -->
58 office 19 <link href="bower_components/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
125 office 20 <!-- TagsInput -->
21 <link href="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet">
71 office 22  
23 <!-- Site-wide style CCS -->
24 <link href="css/style.css" rel="stylesheet">
25  
24 office 26 <!-- Local style -->
27 <link href="css/files/style.css" rel="stylesheet">
125 office 28  
29 <!-- Scratch Angular Includes -->
30 <ng-include src="'html/scratch-head-last.html'"></ng-include>
24 office 31 </head>
32  
33 <body>
125 office 34  
35 <!-- Scratch Angular Includes -->
36 <ng-include src="'html/scratch-body-first.html'"></ng-include>
24 office 37  
71 office 38 <!-- Main component for a primary marketing message or call to action -->
39 <div class="paralax-background"></div>
40 <div class="jumbotron">
41 <h1>scratch copy</h1>
42 <p class="quote">the asset sharer</p>
43 </div>
44  
24 office 45 <div class="container">
46  
47 <ul class="nav nav-tabs">
48 <li><a href="index.html">Home</a></li>
56 office 49 <li class="active"><a href="#">File</a></li>
24 office 50 <li><a href="text.html">Text</a></li>
84 office 51 <li><a href="draw.html">Draw</a></li>
91 office 52 <li><a href="link.html">Link</a></li>
121 office 53 <li><a href="view.html">View</a></li>
24 office 54 </ul>
55  
131 office 56 <form data-toggle="validator" role="form" id="file-form-upload">
57 <div id="main-panel" class="panel panel-default">
24 office 58 <div class="panel-heading">
59 <div id="actions" class="row">
60 <div class="col-lg-5">
61 <div class="btn-group btn-group-justified" role="group">
62 <!-- The fileinput-button span is used to style the file input field as button -->
63 <div class="btn-group" role="group">
64 <button id="uploadbutton" type="button" class="btn btn-default">
65 <i class="glyphicon glyphicon-plus"></i>
66 <span>Add...</span>
67 </button>
68 </div>
69 <div class="btn-group" role="group">
70 <button type="submit" class="btn btn-default start">
71 <i class="glyphicon glyphicon-upload"></i>
57 office 72 <span>Upload All</span>
24 office 73 </button>
74 </div>
75 <div class="btn-group" role="group">
96 office 76 <button type="reset" class="btn btn-danger cancel">
24 office 77 <i class="glyphicon glyphicon-ban-circle"></i>
57 office 78 <span>Cancel All</span>
24 office 79 </button>
80 </div>
81 </div>
82 </div>
83 </div>
84 </div>
85 <div class="panel-body" id="uploadpanel">
86 <div class="table table-striped files" id="previews">
87 <div id="template" class="file-row">
88 <!-- This is used as the file preview template -->
89 <div>
90 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
91 </div>
92 <div>
129 office 93 <p class="upload-filename" data-dz-name></p>
131 office 94 <label for="file-upload-url">Download URL:</label>
24 office 95 <div class="input-group">
129 office 96 <input id="file-upload-url" type="text" class="form-control upload-url" readonly>
24 office 97 <span class="input-group-btn">
129 office 98 <button id="btn-mailto" class="btn btn-default url-mailto-button" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
24 office 99 </span>
72 office 100 <span class="input-group-btn">
129 office 101 <button id="btn-facebook" class="btn btn-default url-facebook-button" type="button" disabled><i class="fa fa-facebook"></i></button>
90 office 102 </span>
103 <span class="input-group-btn">
129 office 104 <button id="btn-clipboard" class="btn btn-default url-clipboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
72 office 105 </span>
24 office 106 </div>
131 office 107 <label for="file-upload-url">Delete URL:</label>
73 office 108 <div class="input-group">
129 office 109 <input id="file-delete-url" type="text" class="form-control delete-url" readonly>
73 office 110 <span class="input-group-btn">
129 office 111 <button id="btn-clipboard-delete" class="btn btn-default delete-cliboard-button" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
73 office 112 </span>
113 </div>
131 office 114 <label for="file-tags">Tags:</label>
125 office 115 <div class="input-group">
131 office 116 <select id="file-tags" multiple class="form-control file-tags"></select>
125 office 117 </div>
24 office 118 <strong class="error text-danger" data-dz-errormessage></strong>
119 </div>
120 <div>
121 <p class="size" data-dz-size></p>
76 office 122 <div id="progress" class="progress active" role="progressbar">
123 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
24 office 124 </div>
125 </div>
126 <div>
127 <button id="start" class="btn btn-default start">
128 <i class="glyphicon glyphicon-upload"></i>
129 <span>Upload</span>
130 </button>
96 office 131 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
24 office 132 <i class="glyphicon glyphicon-ban-circle"></i>
133 <span>Cancel</span>
134 </button>
135 <button id="remove" data-dz-remove class="btn btn-danger remove">
136 <i class="glyphicon glyphicon-remove"></i>
137 <span>Remove</span>
138 </button>
139 </div>
140 </div>
141 </div>
142 </div>
143 <!-- The global file processing state -->
144 <div class="fileupload-process">
76 office 145 <div id="total-progress" class="progress active" role="progressbar">
146 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
147 </div>
24 office 148 </div>
131 office 149 </form>
24 office 150  
151 </div> <!-- /container -->
152  
153 <div id="footer">
154 <div class="container">
71 office 155 <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>
24 office 156 </div>
157 </div>
158  
58 office 159 <!-- jQuery -->
160 <script src="bower_components/jquery/dist/jquery.min.js"></script>
125 office 161 <!-- Angular JS -->
162 <script src="bower_components/angular/angular.min.js"></script>
58 office 163 <!-- BootStrap -->
164 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
131 office 165 <!-- BootStrap Validator -->
166 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
24 office 167 <!-- DropZone -->
58 office 168 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
24 office 169 <!-- Clipboard -->
58 office 170 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
125 office 171 <!-- TagsInput -->
172 <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
173 <!-- Angular Initialization. -->
24 office 174 <script>
125 office 175 var app = angular.module('scratch', []);
176 </script>
177 <script>
26 office 178 $(document).ready(() => {
96 office 179 $.get('session.php').then((token) => {
180 // Get the template HTML and remove it from the doument
181 var previewNode = document
126 office 182 .querySelector('#template');
183 previewNode.id = '';
96 office 184 var previewTemplate = previewNode
185 .parentNode
186 .innerHTML;
187 previewNode
188 .parentNode
189 .removeChild(previewNode);
126 office 190  
96 office 191 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
192 url: 'file.php', // Set the url
193 paramName: 'file',
194 thumbnailWidth: 80,
195 thumbnailHeight: 80,
196 //parallelUploads: 20,
197 previewTemplate: previewTemplate,
198 autoQueue: false, // Make sure the files aren't queued until manually added
199 previewsContainer: '#previews', // Container to display the previews
200 clickable: [
201 '#uploadbutton',
202 '#uploadpanel'
203 ],
204 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
205 }).on('sending', (file, xhr, formData) => {
206 // Append session token.
207 formData.append('token', token);
126 office 208  
209 // Append tags to the form data.
210 const tagsBoxID = file
211 .previewElement
129 office 212 .querySelector('.file-tags')
126 office 213 .getAttribute('id');
214  
215 const tags = $('#' + tagsBoxID)
216 .tagsinput('items');
217  
218 formData.append('tags', JSON.stringify(tags));
128 office 219  
220 // And disable the tags bar.
131 office 221 const tagsContainerID = file
128 office 222 .previewElement
131 office 223 .querySelector('.bootstrap-tagsinput')
224 .getAttribute('id');
225  
226 $('#' + tagsContainerID).attr('readonly', 'readonly');
227 $('#' + tagsContainerID).attr('disabled', 'disabled');
128 office 228  
96 office 229 }).on('addedfile', (file) => {
126 office 230 // Hookup the start button.
231 file.previewElement.querySelector('.start').onclick = () => {
96 office 232 myDropzone.enqueueFile(file);
233 };
125 office 234  
96 office 235 // Set the ID of the URL box.
236 const boxURLID = '_' + Math
237 .random()
238 .toString(36)
239 .substr(2, 9);
240 file
241 .previewElement
129 office 242 .querySelector('#file-upload-url')
243 .setAttribute('id', boxURLID);
244  
96 office 245 // Set the ID of the delete URL box.
246 const deleteBoxURLID = '_' + Math
247 .random()
248 .toString(36)
249 .substr(2, 9);
250 file
251 .previewElement
129 office 252 .querySelector('#file-delete-url')
253 .setAttribute('id', deleteBoxURLID);
254  
96 office 255 // Set the ID of the URL clipboard button.
256 const clipButtonID = '_' + Math
257 .random()
258 .toString(36)
259 .substr(2, 9);
260 file
261 .previewElement
126 office 262 .querySelector('#btn-clipboard')
96 office 263 .setAttribute('data-clipboard-target', '#' + boxURLID)
24 office 264  
96 office 265 file
266 .previewElement
126 office 267 .querySelector('#btn-clipboard')
96 office 268 .setAttribute('id', clipButtonID);
73 office 269  
96 office 270 new Clipboard('#' + clipButtonID);
72 office 271  
96 office 272 // Set the ID of the delete URL clipboard button.
273 const clipButtonDeleteID = '_' + Math
274 .random()
275 .toString(36)
276 .substr(2, 9);
277 file
278 .previewElement
126 office 279 .querySelector('#btn-clipboard-delete')
96 office 280 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
73 office 281  
96 office 282 file
283 .previewElement
126 office 284 .querySelector('#btn-clipboard-delete')
96 office 285 .setAttribute('id', clipButtonDeleteID);
73 office 286  
96 office 287 new Clipboard('#' + clipButtonDeleteID);
73 office 288  
96 office 289 // Set the ID of the mailto button.
290 const mailToButtonID = '_' + Math
291 .random()
292 .toString(36)
293 .substr(2, 9);
72 office 294  
96 office 295 file
296 .previewElement
126 office 297 .querySelector('#btn-mailto')
96 office 298 .setAttribute('id', mailToButtonID);
129 office 299  
300 // Set the ID of the facebook button.
301 const faceBookButtonID = '_' + Math
302 .random()
303 .toString(36)
304 .substr(2, 9);
24 office 305  
96 office 306 file
307 .previewElement
129 office 308 .querySelector('#btn-facebook')
309 .setAttribute('id', faceBookButtonID);
310  
311 // Set the ID of the tags input.
312 const tagsBoxID = '_' + Math
313 .random()
314 .toString(36)
315 .substr(2, 9);
316  
317 file
318 .previewElement
319 .querySelector('#file-tags')
320 .setAttribute('id', tagsBoxID);
321  
322 $('#' + tagsBoxID).tagsinput('refresh');
323  
131 office 324 // Set the ID of the tags div.
325 const tagsContainerID = '_' + Math
326 .random()
327 .toString(36)
328 .substr(2, 9);
329  
330 // Add form control to tags list.
331 file
332 .previewElement
333 .querySelector('.bootstrap-tagsinput')
334 .classList
335 .add('form-control');
336  
337 file
338 .previewElement
339 .querySelector('.bootstrap-tagsinput')
340 .setAttribute('id', tagsContainerID);
341  
129 office 342 }).on('totaluploadprogress', (progress) => {
343 document
344 .querySelector('#total-progress .progress-bar')
345 .style
346 .width = progress + '%';
347 }).on('sending', (file) => {
348 // Show the total progress bar when upload starts
349 document.querySelector("#total-progress")
350 .style
351 .opacity = 1;
352  
353 // And disable the start button.
354 file
355 .previewElement
126 office 356 .querySelector('.start')
357 .setAttribute('disabled', 'disabled');
129 office 358 }).on('queuecomplete', (progress) => {
359 document.querySelector('#total-progress')
360 .style
361 .opacity = '0';
362 }).on('success', (file, data) => {
363 // Serialize JSON to object.
364 data = JSON.parse(data);
365  
96 office 366 file
367 .previewElement
129 office 368 .querySelector(".upload-url")
369 .value = location.protocol
370 .concat("//")
371 .concat(window.location.hostname)
372 .concat("/")
373 .concat(data.hash);
374  
375 file
376 .previewElement
377 .querySelector('.delete-url')
378 .value = location.protocol.concat('//')
379 .concat(window.location.hostname)
380 .concat('/')
381 .concat(data.timestamp)
382 .concat('/')
383 .concat(data.hash);
384  
385 file
386 .previewElement
387 .querySelector('.start')
388 .setAttribute('disabled', 'disabled');
389 file
390 .previewElement
126 office 391 .querySelector('.cancel')
392 .setAttribute('disabled', 'disabled');
129 office 393  
394 // Enable the mailto button.
395 $('.url-mailto-button').on('click', () => {
96 office 396 window.location.href = "mailto:?subject="+
397 encodeURIComponent("Can't scratch this!") + "&body=" +
129 office 398 encodeURIComponent($('.upload-url').val());
96 office 399 });
129 office 400  
401 // Enable or disable the facebook opengraph URL.
96 office 402 switch(data.opengraph) {
403 case true:
404 // Enable the facebook button.
405 file
406 .previewElement
129 office 407 .querySelector('.url-facebook-button')
126 office 408 .removeAttribute('disabled');
90 office 409  
96 office 410 // Change the URL when the user clicks the button.
129 office 411 $('.url-facebook-button').on('click', () => {
412 $('.upload-url')
96 office 413 .val(
126 office 414 location.protocol.concat('//')
96 office 415 .concat(window.location.hostname)
126 office 416 .concat('/')
417 .concat('og')
418 .concat('/')
96 office 419 .concat(data.hash)
420 );
421 });
422 break;
423 default:
424 // Disable the facebook button.
425 file
426 .previewElement
129 office 427 .querySelector('.url-facebook-button')
126 office 428 .setAttribute('disabled', 'disabled');
96 office 429 break;
430 }
431 });
432  
126 office 433 document.querySelector('#actions .start').onclick = () => {
96 office 434 myDropzone.enqueueFiles(
435 myDropzone
436 .getFilesWithStatus(Dropzone.ADDED));
437 };
438  
126 office 439 document.querySelector('#actions .cancel').onclick = () => {
96 office 440 myDropzone.removeAllFiles(true);
441 };
24 office 442 });
443  
84 office 444 // Scroll to the panel.
445 $('html, body').animate({
446 scrollTop: $('#main-panel').offset().top
447 }, 'slow');
24 office 448 });
449 </script>
71 office 450 <!-- Jumbotron parallax effect -->
70 office 451 <script>
71 office 452 const jumboHeight = $('.jumbotron').outerHeight();
70 office 453 function parallax(){
454 var scrolled = $(window).scrollTop();
455 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
456 }
457  
458 $(window).scroll(function(e){
459 parallax();
460 });
461 </script>
24 office 462 </body>
463 </html>