scratch – Blame information for rev 96

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