scratch – Blame information for rev 139

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