scratch – Blame information for rev 84

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