scratch – Blame information for rev 90

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