scratch – Blame information for rev 81

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