scratch – Diff between revs 24 and 26

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