scratch – Blame information for rev 128

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  
84 office 56 <div id="main-panel" class="panel panel-default">
24 office 57 <div class="panel-heading">
58 <div id="actions" class="row">
59 <div class="col-lg-5">
60 <div class="btn-group btn-group-justified" role="group">
61 <!-- The fileinput-button span is used to style the file input field as button -->
62 <div class="btn-group" role="group">
63 <button id="uploadbutton" type="button" class="btn btn-default">
64 <i class="glyphicon glyphicon-plus"></i>
65 <span>Add...</span>
66 </button>
67 </div>
68 <div class="btn-group" role="group">
69 <button type="submit" class="btn btn-default start">
70 <i class="glyphicon glyphicon-upload"></i>
57 office 71 <span>Upload All</span>
24 office 72 </button>
73 </div>
74 <div class="btn-group" role="group">
96 office 75 <button type="reset" class="btn btn-danger cancel">
24 office 76 <i class="glyphicon glyphicon-ban-circle"></i>
57 office 77 <span>Cancel All</span>
24 office 78 </button>
79 </div>
80 </div>
81 </div>
82 </div>
83 </div>
84 <div class="panel-body" id="uploadpanel">
85 <div class="table table-striped files" id="previews">
86 <div id="template" class="file-row">
87 <!-- This is used as the file preview template -->
88 <div>
89 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
90 </div>
91 <div>
128 office 92 <p id="filename" class="filename" data-dz-name></p>
24 office 93 <div class="input-group">
94 <input id="URL" type="text" class="form-control" readonly>
95 <span class="input-group-btn">
74 office 96 <button id="btn-mailto" class="btn btn-default" type="button"><i class="glyphicon glyphicon-envelope"></i></button>
24 office 97 </span>
72 office 98 <span class="input-group-btn">
91 office 99 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
90 office 100 </span>
101 <span class="input-group-btn">
74 office 102 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
72 office 103 </span>
24 office 104 </div>
73 office 105 <div class="input-group">
106 <input id="deleteURL" type="text" class="form-control" readonly>
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>
109 </span>
110 </div>
125 office 111 <div class="input-group">
126 office 112 <select id="tags" multiple class="form-control bootstrap-tagsinput tags"></select>
125 office 113 </div>
24 office 114 <strong class="error text-danger" data-dz-errormessage></strong>
115 </div>
116 <div>
117 <p class="size" data-dz-size></p>
76 office 118 <div id="progress" class="progress active" role="progressbar">
119 <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 120 </div>
121 </div>
122 <div>
123 <button id="start" class="btn btn-default start">
124 <i class="glyphicon glyphicon-upload"></i>
125 <span>Upload</span>
126 </button>
96 office 127 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
24 office 128 <i class="glyphicon glyphicon-ban-circle"></i>
129 <span>Cancel</span>
130 </button>
131 <button id="remove" data-dz-remove class="btn btn-danger remove">
132 <i class="glyphicon glyphicon-remove"></i>
133 <span>Remove</span>
134 </button>
135 </div>
136 </div>
137  
138 </div>
139 </div>
140 <!-- The global file processing state -->
141 <div class="fileupload-process">
76 office 142 <div id="total-progress" class="progress active" role="progressbar">
143 <div class="progress-bar progress-bar-custom" style="width:0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress></div>
144 </div>
24 office 145 </div>
146 </div>
147  
148 </div> <!-- /container -->
149  
150 <div id="footer">
151 <div class="container">
71 office 152 <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 153 </div>
154 </div>
155  
58 office 156 <!-- jQuery -->
157 <script src="bower_components/jquery/dist/jquery.min.js"></script>
125 office 158 <!-- Angular JS -->
159 <script src="bower_components/angular/angular.min.js"></script>
58 office 160 <!-- BootStrap -->
161 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
24 office 162 <!-- DropZone -->
58 office 163 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
24 office 164 <!-- Clipboard -->
58 office 165 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
125 office 166 <!-- TagsInput -->
167 <script src="bower_components/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
168 <!-- Angular Initialization. -->
24 office 169 <script>
125 office 170 var app = angular.module('scratch', []);
171 </script>
172 <script>
26 office 173 $(document).ready(() => {
96 office 174 $.get('session.php').then((token) => {
175 // Get the template HTML and remove it from the doument
176 var previewNode = document
126 office 177 .querySelector('#template');
178 previewNode.id = '';
96 office 179 var previewTemplate = previewNode
180 .parentNode
181 .innerHTML;
182 previewNode
183 .parentNode
184 .removeChild(previewNode);
126 office 185  
96 office 186 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
187 url: 'file.php', // Set the url
188 paramName: 'file',
189 thumbnailWidth: 80,
190 thumbnailHeight: 80,
191 //parallelUploads: 20,
192 previewTemplate: previewTemplate,
193 autoQueue: false, // Make sure the files aren't queued until manually added
194 previewsContainer: '#previews', // Container to display the previews
195 clickable: [
196 '#uploadbutton',
197 '#uploadpanel'
198 ],
199 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
200 }).on('sending', (file, xhr, formData) => {
201 // Append session token.
202 formData.append('token', token);
126 office 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));
128 office 214  
215 // And disable the tags bar.
216 file
217 .previewElement
218 .querySelector('#' + tagsBoxID)
219 .setAttribute('disabled', 'disabled');
220  
96 office 221 }).on('addedfile', (file) => {
126 office 222 // Hookup the start button.
223 file.previewElement.querySelector('.start').onclick = () => {
96 office 224 myDropzone.enqueueFile(file);
225 };
125 office 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
126 office 235 .querySelector('#tags')
125 office 236 .setAttribute('id', tagsBoxID);
237  
238 $('#' + tagsBoxID).tagsinput('refresh');
96 office 239 }).on('totaluploadprogress', (progress) => {
240 document
241 .querySelector('#total-progress .progress-bar')
242 .style
126 office 243 .width = progress + '%';
96 office 244 }).on('sending', (file) => {
245 // Show the total progress bar when upload starts
246 document.querySelector("#total-progress")
24 office 247 .style
96 office 248 .opacity = 1;
24 office 249  
96 office 250 // And disable the start button.
251 file
252 .previewElement
126 office 253 .querySelector('.start')
254 .setAttribute('disabled', 'disabled');
96 office 255 }).on('queuecomplete', (progress) => {
126 office 256 document.querySelector('#total-progress')
96 office 257 .style
126 office 258 .opacity = '0';
96 office 259 }).on('success', (file, data) => {
260 // Serialize JSON to object.
261 data = JSON.parse(data);
81 office 262  
96 office 263 // Set the ID of the URL box.
264 const boxURLID = '_' + Math
265 .random()
266 .toString(36)
267 .substr(2, 9);
268 file
269 .previewElement
270 .querySelector("#URL")
271 .value = location.protocol
272 .concat("//")
273 .concat(window.location.hostname)
274 .concat("/")
275 .concat(data.hash);
24 office 276  
96 office 277 file
278 .previewElement
126 office 279 .querySelector('#URL')
96 office 280 .setAttribute('id', boxURLID)
73 office 281  
96 office 282 // Set the ID of the delete URL box.
283 const deleteBoxURLID = '_' + Math
284 .random()
285 .toString(36)
286 .substr(2, 9);
287 file
288 .previewElement
126 office 289 .querySelector('#deleteURL')
290 .value = location.protocol.concat('//')
96 office 291 .concat(window.location.hostname)
126 office 292 .concat('/')
96 office 293 .concat(data.timestamp)
126 office 294 .concat('/')
96 office 295 .concat(data.hash);
73 office 296  
96 office 297 file
298 .previewElement
126 office 299 .querySelector('#deleteURL')
96 office 300 .setAttribute('id', deleteBoxURLID)
73 office 301  
96 office 302 // Set the ID of the URL clipboard button.
303 const clipButtonID = '_' + Math
304 .random()
305 .toString(36)
306 .substr(2, 9);
307 file
308 .previewElement
126 office 309 .querySelector('#btn-clipboard')
96 office 310 .setAttribute('data-clipboard-target', '#' + boxURLID)
24 office 311  
96 office 312 file
313 .previewElement
126 office 314 .querySelector('#btn-clipboard')
96 office 315 .setAttribute('id', clipButtonID);
73 office 316  
96 office 317 new Clipboard('#' + clipButtonID);
72 office 318  
96 office 319 // Set the ID of the delete URL clipboard button.
320 const clipButtonDeleteID = '_' + Math
321 .random()
322 .toString(36)
323 .substr(2, 9);
324 file
325 .previewElement
126 office 326 .querySelector('#btn-clipboard-delete')
96 office 327 .setAttribute('data-clipboard-target', '#' + deleteBoxURLID)
73 office 328  
96 office 329 file
330 .previewElement
126 office 331 .querySelector('#btn-clipboard-delete')
96 office 332 .setAttribute('id', clipButtonDeleteID);
73 office 333  
96 office 334 new Clipboard('#' + clipButtonDeleteID);
73 office 335  
96 office 336 // Set the ID of the mailto button.
337 const mailToButtonID = '_' + Math
338 .random()
339 .toString(36)
340 .substr(2, 9);
72 office 341  
96 office 342 file
343 .previewElement
126 office 344 .querySelector('#btn-mailto')
96 office 345 .setAttribute('id', mailToButtonID);
24 office 346  
96 office 347 file
348 .previewElement
126 office 349 .querySelector('.start')
350 .setAttribute('disabled', 'disabled');
96 office 351 file
352 .previewElement
126 office 353 .querySelector('.cancel')
354 .setAttribute('disabled', 'disabled');
72 office 355  
96 office 356 $('#' + mailToButtonID).on('click', () => {
357 window.location.href = "mailto:?subject="+
358 encodeURIComponent("Can't scratch this!") + "&body=" +
359 encodeURIComponent($('#' + boxURLID).val());
360 });
90 office 361  
96 office 362 // Set the ID of the facebook button.
363 const faceBookButtonID = '_' + Math
364 .random()
365 .toString(36)
366 .substr(2, 9);
90 office 367  
96 office 368 file
369 .previewElement
126 office 370 .querySelector('#btn-facebook')
96 office 371 .setAttribute('id', faceBookButtonID);
90 office 372  
96 office 373 switch(data.opengraph) {
374 case true:
375 // Enable the facebook button.
376 file
377 .previewElement
378 .querySelector('#' + faceBookButtonID)
126 office 379 .removeAttribute('disabled');
90 office 380  
96 office 381 // Change the URL when the user clicks the button.
382 $('#' + faceBookButtonID).on('click', () => {
383 $('#' + boxURLID)
384 .val(
126 office 385 location.protocol.concat('//')
96 office 386 .concat(window.location.hostname)
126 office 387 .concat('/')
388 .concat('og')
389 .concat('/')
96 office 390 .concat(data.hash)
391 );
392 });
393 break;
394 default:
395 // Disable the facebook button.
396 file
397 .previewElement
398 .querySelector('#' + faceBookButtonID)
126 office 399 .setAttribute('disabled', 'disabled');
96 office 400 break;
401 }
402 });
403  
126 office 404 document.querySelector('#actions .start').onclick = () => {
96 office 405 myDropzone.enqueueFiles(
406 myDropzone
407 .getFilesWithStatus(Dropzone.ADDED));
408 };
409  
126 office 410 document.querySelector('#actions .cancel').onclick = () => {
96 office 411 myDropzone.removeAllFiles(true);
412 };
24 office 413 });
414  
84 office 415 // Scroll to the panel.
416 $('html, body').animate({
417 scrollTop: $('#main-panel').offset().top
418 }, 'slow');
24 office 419 });
420 </script>
71 office 421 <!-- Jumbotron parallax effect -->
70 office 422 <script>
71 office 423 const jumboHeight = $('.jumbotron').outerHeight();
70 office 424 function parallax(){
425 var scrolled = $(window).scrollTop();
426 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
427 }
428  
429 $(window).scroll(function(e){
430 parallax();
431 });
432 </script>
24 office 433 </body>
434 </html>