scratch – Diff between revs 44 and 49

Subversion Repositories:
Rev:
Only display areas with differences – Ignore whitespace
Rev 44 Rev 49
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1"> 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 --> 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"> 8 <meta name="description" content="quick asset upload">
9 <meta name="author" content="Wizardry and Steamworks"> 9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico"> 10 <link rel="icon" href="favicon.ico">
11   11  
12 <title>Quickload</title> 12 <title>Quickload</title>
13   13  
14 <!-- Polyfill --> 14 <!-- Polyfill -->
15 <script src="js/polyfill/polyfill.min.js"></script> 15 <script src="js/polyfill/polyfill.min.js"></script>
16 16
17 <!-- Bootstrap core CSS --> 17 <!-- Bootstrap core CSS -->
18 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> 18 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
19   19  
20 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 20 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
21 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet"> 21 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
22   22  
23 <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 23 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
24 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]--> 24 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
25 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script> 25 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
26   26  
27 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 27 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
28 <!--[if lt IE 9]> 28 <!--[if lt IE 9]>
29 <script src="js/bootstrap/html5shiv.min.js"></script> 29 <script src="js/bootstrap/html5shiv.min.js"></script>
30 <script src="js/bootstrap/respond.min.js"></script> 30 <script src="js/bootstrap/respond.min.js"></script>
31 <![endif]--> 31 <![endif]-->
32 32
33 <!-- DropZone --> 33 <!-- DropZone -->
34 <link href="css/dropzone/dropzone.min.css" rel="stylesheet"> 34 <link href="css/dropzone/dropzone.min.css" rel="stylesheet">
35 <!-- Local style --> 35 <!-- Local style -->
36 <link href="css/files/style.css" rel="stylesheet"> 36 <link href="css/files/style.css" rel="stylesheet">
37 </head> 37 </head>
38   38  
39 <body> 39 <body>
40   40  
41 <div class="container"> 41 <div class="container">
42   42  
43 <!-- Main component for a primary marketing message or call to action --> 43 <!-- Main component for a primary marketing message or call to action -->
44 <div class="jumbotron"> 44 <div class="jumbotron">
45 <h1>Quickload</h1> 45 <h1>Quickload</h1>
46 <p>Asset sharing platform.</p> 46 <p>Asset sharing platform.</p>
47 </div> 47 </div>
48 48
49 <ul class="nav nav-tabs"> 49 <ul class="nav nav-tabs">
50 <li><a href="index.html">Home</a></li> 50 <li><a href="index.html">Home</a></li>
51 <li class="active"><a href="#">Files</a></li> 51 <li class="active"><a href="#">Files</a></li>
52 <li><a href="text.html">Text</a></li> 52 <li><a href="text.html">Text</a></li>
53 </ul> 53 </ul>
54 54
55 <div class="panel panel-default"> 55 <div class="panel panel-default">
56 <div class="panel-heading"> 56 <div class="panel-heading">
57 <div id="actions" class="row"> 57 <div id="actions" class="row">
58 <div class="col-lg-5"> 58 <div class="col-lg-5">
59 <div class="btn-group btn-group-justified" role="group"> 59 <div class="btn-group btn-group-justified" role="group">
60 <!-- The fileinput-button span is used to style the file input field as button --> 60 <!-- The fileinput-button span is used to style the file input field as button -->
61 <div class="btn-group" role="group"> 61 <div class="btn-group" role="group">
62 <button id="uploadbutton" type="button" class="btn btn-default"> 62 <button id="uploadbutton" type="button" class="btn btn-default">
63 <i class="glyphicon glyphicon-plus"></i> 63 <i class="glyphicon glyphicon-plus"></i>
64 <span>Add...</span> 64 <span>Add...</span>
65 </button> 65 </button>
66 </div> 66 </div>
67 <div class="btn-group" role="group"> 67 <div class="btn-group" role="group">
68 <button type="submit" class="btn btn-default start"> 68 <button type="submit" class="btn btn-default start">
69 <i class="glyphicon glyphicon-upload"></i> 69 <i class="glyphicon glyphicon-upload"></i>
70 <span>Upload</span> 70 <span>Upload</span>
71 </button> 71 </button>
72 </div> 72 </div>
73 <div class="btn-group" role="group"> 73 <div class="btn-group" role="group">
74 <button type="reset" class="btn btn-default cancel"> 74 <button type="reset" class="btn btn-default cancel">
75 <i class="glyphicon glyphicon-ban-circle"></i> 75 <i class="glyphicon glyphicon-ban-circle"></i>
76 <span>Cancel</span> 76 <span>Cancel</span>
77 </button> 77 </button>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 <div class="panel-body" id="uploadpanel"> 83 <div class="panel-body" id="uploadpanel">
84 <div class="table table-striped files" id="previews"> 84 <div class="table table-striped files" id="previews">
85 <div id="template" class="file-row"> 85 <div id="template" class="file-row">
86 <!-- This is used as the file preview template --> 86 <!-- This is used as the file preview template -->
87 <div> 87 <div>
88 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> 88 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
89 </div> 89 </div>
90 <div> 90 <div>
91 <p id="name" class="name" data-dz-name></p> 91 <p id="name" class="name" data-dz-name></p>
92 <div class="input-group"> 92 <div class="input-group">
93 <input id="URL" type="text" class="form-control" readonly> 93 <input id="URL" type="text" class="form-control" readonly>
94 <span class="input-group-btn"> 94 <span class="input-group-btn">
95 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button> 95 <button id="btn-clipboard" class="btn btn-default" type="button"><i class="glyphicon glyphicon-paperclip"></i></button>
96 </span> 96 </span>
97 </div> 97 </div>
98 <strong class="error text-danger" data-dz-errormessage></strong> 98 <strong class="error text-danger" data-dz-errormessage></strong>
99 </div> 99 </div>
100 <div> 100 <div>
101 <p class="size" data-dz-size></p> 101 <p class="size" data-dz-size></p>
102 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 102 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
103 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 103 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
104 </div> 104 </div>
105 </div> 105 </div>
106 <div> 106 <div>
107 <button id="start" class="btn btn-default start"> 107 <button id="start" class="btn btn-default start">
108 <i class="glyphicon glyphicon-upload"></i> 108 <i class="glyphicon glyphicon-upload"></i>
109 <span>Upload</span> 109 <span>Upload</span>
110 </button> 110 </button>
111 <button id="cancel" data-dz-remove class="btn btn-default cancel"> 111 <button id="cancel" data-dz-remove class="btn btn-default cancel">
112 <i class="glyphicon glyphicon-ban-circle"></i> 112 <i class="glyphicon glyphicon-ban-circle"></i>
113 <span>Cancel</span> 113 <span>Cancel</span>
114 </button> 114 </button>
115 <button id="remove" data-dz-remove class="btn btn-danger remove"> 115 <button id="remove" data-dz-remove class="btn btn-danger remove">
116 <i class="glyphicon glyphicon-remove"></i> 116 <i class="glyphicon glyphicon-remove"></i>
117 <span>Remove</span> 117 <span>Remove</span>
118 </button> 118 </button>
119 </div> 119 </div>
120 </div> 120 </div>
121   121  
122 </div> 122 </div>
123 </div> 123 </div>
124 <!-- The global file processing state --> 124 <!-- The global file processing state -->
125 <div class="fileupload-process"> 125 <div class="fileupload-process">
126 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 126 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
127 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 127 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
128 </div> 128 </div>
129 </div> 129 </div>
130 </div> 130 </div>
131   131  
132 </div> <!-- /container --> 132 </div> <!-- /container -->
133 133
134 <div id="footer"> 134 <div id="footer">
135 <div class="container"> 135 <div class="container">
136 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> 136 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
137 </div> 137 </div>
138 </div> 138 </div>
139   139  
140 <script src="js/jquery/jquery.min.js"></script> 140 <script src="js/jquery/jquery.min.js"></script>
141 <script src="js/bootstrap/bootstrap.min.js"></script> 141 <script src="js/bootstrap/bootstrap.min.js"></script>
142 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 142 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
143 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script> 143 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
144 144
145 <!-- DropZone --> 145 <!-- DropZone -->
146 <script src="js/dropzone/dropzone.min.js"></script> 146 <script src="js/dropzone/dropzone.min.js"></script>
147 <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> --> 147 <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> -->
148 <!-- Clipboard --> 148 <!-- Clipboard -->
149 <script src="js/clipboard/clipboard.min.js"></script> 149 <script src="js/clipboard/clipboard.min.js"></script>
150 <script> 150 <script>
151 $(document).ready(() => { 151 $(document).ready(() => {
152 // Get the template HTML and remove it from the doument 152 // Get the template HTML and remove it from the doument
153 var previewNode = document 153 var previewNode = document
154 .querySelector("#template"); 154 .querySelector("#template");
155 previewNode.id = ""; 155 previewNode.id = "";
156 var previewTemplate = previewNode 156 var previewTemplate = previewNode
157 .parentNode 157 .parentNode
158 .innerHTML; 158 .innerHTML;
159 previewNode 159 previewNode
160 .parentNode 160 .parentNode
161 .removeChild(previewNode); 161 .removeChild(previewNode);
162   162  
163 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 163 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
164 url: "upload-files.php", // Set the url 164 url: "file.php", // Set the url
165 paramName: "file", 165 paramName: "file",
166 thumbnailWidth: 80, 166 thumbnailWidth: 80,
167 thumbnailHeight: 80, 167 thumbnailHeight: 80,
168 //parallelUploads: 20, 168 //parallelUploads: 20,
169 previewTemplate: previewTemplate, 169 previewTemplate: previewTemplate,
170 autoQueue: false, // Make sure the files aren't queued until manually added 170 autoQueue: false, // Make sure the files aren't queued until manually added
171 previewsContainer: "#previews", // Container to display the previews 171 previewsContainer: "#previews", // Container to display the previews
172 clickable: [ 172 clickable: [
173 "#uploadbutton", 173 "#uploadbutton",
174 "#uploadpanel" 174 "#uploadpanel"
175 ], 175 ],
176 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 176 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
177 }).on("addedfile", (file) => { 177 }).on("addedfile", (file) => {
178 // Hookup the start button 178 // Hookup the start button
179 file.previewElement.querySelector(".start").onclick = () => { 179 file.previewElement.querySelector(".start").onclick = () => {
180 myDropzone.enqueueFile(file); 180 myDropzone.enqueueFile(file);
181 }; 181 };
182 }).on("totaluploadprogress", (progress) => { 182 }).on("totaluploadprogress", (progress) => {
183 document 183 document
184 .querySelector("#total-progress .progress-bar") 184 .querySelector("#total-progress .progress-bar")
185 .style 185 .style
186 .width = progress + "%"; 186 .width = progress + "%";
187 }).on("sending", (file) => { 187 }).on("sending", (file) => {
188 // Show the total progress bar when upload starts 188 // Show the total progress bar when upload starts
189 document.querySelector("#total-progress") 189 document.querySelector("#total-progress")
190 .style 190 .style
191 .opacity = 1; 191 .opacity = 1;
192 192
193 // And disable the start button. 193 // And disable the start button.
194 file 194 file
195 .previewElement 195 .previewElement
196 .querySelector(".start") 196 .querySelector(".start")
197 .setAttribute("disabled", "disabled"); 197 .setAttribute("disabled", "disabled");
198 }).on("queuecomplete", (progress) => { 198 }).on("queuecomplete", (progress) => {
199 document.querySelector("#total-progress") 199 document.querySelector("#total-progress")
200 .style 200 .style
201 .opacity = "0"; 201 .opacity = "0";
202 }).on("success", (file, data) => { 202 }).on("success", (file, data) => {
203 203
204 var boxURLID = '_' + Math 204 var boxURLID = '_' + Math
205 .random() 205 .random()
206 .toString(36) 206 .toString(36)
207 .substr(2, 9); 207 .substr(2, 9);
208 file 208 file
209 .previewElement 209 .previewElement
210 .querySelector("#URL") 210 .querySelector("#URL")
211 .value = data; 211 .value = data;
212 212
213 file 213 file
214 .previewElement 214 .previewElement
215 .querySelector("#URL") 215 .querySelector("#URL")
216 .setAttribute('id', boxURLID) 216 .setAttribute('id', boxURLID)
217 217
218 // Clipboard button. 218 // Clipboard button.
219 clipButtonID = '_' + Math 219 clipButtonID = '_' + Math
220 .random() 220 .random()
221 .toString(36) 221 .toString(36)
222 .substr(2, 9); 222 .substr(2, 9);
223 file 223 file
224 .previewElement 224 .previewElement
225 .querySelector("#btn-clipboard") 225 .querySelector("#btn-clipboard")
226 .setAttribute('data-clipboard-target', '#' + boxURLID) 226 .setAttribute('data-clipboard-target', '#' + boxURLID)
227 227
228 file 228 file
229 .previewElement 229 .previewElement
230 .querySelector("#btn-clipboard") 230 .querySelector("#btn-clipboard")
231 .setAttribute('id', clipButtonID); 231 .setAttribute('id', clipButtonID);
232   232  
233 file 233 file
234 .previewElement 234 .previewElement
235 .querySelector(".start") 235 .querySelector(".start")
236 .setAttribute("disabled", "disabled"); 236 .setAttribute("disabled", "disabled");
237 file 237 file
238 .previewElement 238 .previewElement
239 .querySelector(".cancel") 239 .querySelector(".cancel")
240 .setAttribute("disabled", "disabled"); 240 .setAttribute("disabled", "disabled");
241 241
242 new Clipboard('#' + clipButtonID); 242 new Clipboard('#' + clipButtonID);
243 }); 243 });
244 244
245 document.querySelector("#actions .start").onclick = () => { 245 document.querySelector("#actions .start").onclick = () => {
246 myDropzone.enqueueFiles( 246 myDropzone.enqueueFiles(
247 myDropzone 247 myDropzone
248 .getFilesWithStatus(Dropzone.ADDED)); 248 .getFilesWithStatus(Dropzone.ADDED));
249 }; 249 };
250 250
251 document.querySelector("#actions .cancel").onclick = () => { 251 document.querySelector("#actions .cancel").onclick = () => {
252 myDropzone.removeAllFiles(true); 252 myDropzone.removeAllFiles(true);
253 }; 253 };
254 }); 254 });
255 </script> 255 </script>
256 </body> 256 </body>
257 </html> 257 </html>
258   258