scratch – Blame information for rev 115

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