scratch – Diff between revs 9 and 10

Subversion Repositories:
Rev:
Only display areas with differencesIgnore whitespace
Rev 9 Rev 10
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 file upload"> 8 <meta name="description" content="quick file 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/style.css" rel="stylesheet"> 33 <link href="css/style.css" rel="stylesheet">
34 </head> 34 </head>
35   35  
36 <body> 36 <body>
37 -  
38 <!--#include virtual="ssi/body/header.shtml" --> -  
39   37  
40 <div class="container"> 38 <div class="container">
41   39  
42 <!-- Main component for a primary marketing message or call to action --> 40 <!-- Main component for a primary marketing message or call to action -->
43 <div class="jumbotron"> 41 <div class="jumbotron">
44 <h1>Quickload</h1> 42 <h1>Quickload</h1>
45 <p>HTTP template for sharing assets.</p> 43 <p>HTTP template for sharing assets.</p>
46 </div> 44 </div>
47 45
48 <ul class="nav nav-tabs"> 46 <ul class="nav nav-tabs">
49 <li class="active"><a href="#">Files</a></li> 47 <li class="active"><a href="#">Files</a></li>
50 </ul> 48 </ul>
51 49
52 <div id="actions" class="row"> 50 <div id="actions" class="row">
53   51  
54 <div class="col-lg-7"> 52 <div class="col-lg-7">
55 <!-- The fileinput-button span is used to style the file input field as button --> 53 <!-- The fileinput-button span is used to style the file input field as button -->
56 <span class="btn btn-success fileinput-button"> 54 <span class="btn btn-success fileinput-button">
57 <i class="glyphicon glyphicon-plus"></i> 55 <i class="glyphicon glyphicon-plus"></i>
58 <span>Add files...</span> 56 <span>Add files...</span>
59 </span> 57 </span>
60 <button type="submit" class="btn btn-primary start"> 58 <button type="submit" class="btn btn-primary start">
61 <i class="glyphicon glyphicon-upload"></i> 59 <i class="glyphicon glyphicon-upload"></i>
62 <span>Start upload</span> 60 <span>Start upload</span>
63 </button> 61 </button>
64 <button type="reset" class="btn btn-warning cancel"> 62 <button type="reset" class="btn btn-warning cancel">
65 <i class="glyphicon glyphicon-ban-circle"></i> 63 <i class="glyphicon glyphicon-ban-circle"></i>
66 <span>Cancel upload</span> 64 <span>Cancel upload</span>
67 </button> 65 </button>
68 </div> 66 </div>
69   67  
70 <div class="col-lg-5"> 68 <div class="col-lg-5">
71 <!-- The global file processing state --> 69 <!-- The global file processing state -->
72 <span class="fileupload-process"> 70 <span class="fileupload-process">
73 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 71 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
74 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> 72 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
75 </div> 73 </div>
76 </span> 74 </span>
77 </div> 75 </div>
78   76  
79 </div> 77 </div>
80 <div class="table table-striped files" id="previews"> 78 <div class="table table-striped files" id="previews">
81   79  
82 <div id="template" class="file-row"> 80 <div id="template" class="file-row">
83 <!-- This is used as the file preview template --> 81 <!-- This is used as the file preview template -->
84 <div> 82 <div>
85 <span class="preview"><img data-dz-thumbnail /></span> 83 <span class="preview"><img data-dz-thumbnail /></span>
86 </div> 84 </div>
87 <div> 85 <div>
88 <p id="name" class="name" data-dz-name></p> 86 <p id="name" class="name" data-dz-name></p>
89 <input id="URL" type="text" class='form-control' readonly> 87 <input id="URL" type="text" class='form-control' readonly>
90 <span class="input-group-button"> 88 <span class="input-group-button">
91 <button id="clippy" class="btn clipBtn" type="button"> 89 <button id="clippy" class="btn clipBtn" type="button">
92 <img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard"> 90 <img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard">
93 </button> 91 </button>
94 </span> 92 </span>
95 <strong class="error text-danger" data-dz-errormessage></strong> 93 <strong class="error text-danger" data-dz-errormessage></strong>
96 </div> 94 </div>
97 <div> 95 <div>
98 <p class="size" data-dz-size></p> 96 <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"> 97 <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> 98 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
101 </div> 99 </div>
102 </div> 100 </div>
103 <div> 101 <div>
104 <button class="btn btn-primary start"> 102 <button class="btn btn-primary start">
105 <i class="glyphicon glyphicon-upload"></i> 103 <i class="glyphicon glyphicon-upload"></i>
106 <span>Start</span> 104 <span>Start</span>
107 </button> 105 </button>
108 <button data-dz-remove class="btn btn-warning cancel"> 106 <button data-dz-remove class="btn btn-warning cancel">
109 <i class="glyphicon glyphicon-ban-circle"></i> 107 <i class="glyphicon glyphicon-ban-circle"></i>
110 <span>Cancel</span> 108 <span>Cancel</span>
111 </button> 109 </button>
112 <button data-dz-remove class="btn btn-danger delete"> 110 <button data-dz-remove class="btn btn-danger delete">
113 <i class="glyphicon glyphicon-trash"></i> 111 <i class="glyphicon glyphicon-trash"></i>
114 <span>Delete</span> 112 <span>Delete</span>
115 </button> 113 </button>
116 </div> 114 </div>
117 </div> 115 </div>
118   116  
119 </div> 117 </div>
120   118  
121 </div> <!-- /container --> 119 </div> <!-- /container -->
-   120
122 121 <div id="footer">
-   122 <div class="container">
-   123 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
-   124 </div>
123 <!--#include virtual="ssi/body/footer.shtml" --> 125 </div>
124   126  
125 <script src="js/jquery/jquery.min.js"></script> 127 <script src="js/jquery/jquery.min.js"></script>
126 <script src="js/bootstrap/bootstrap.min.js"></script> 128 <script src="js/bootstrap/bootstrap.min.js"></script>
127 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 129 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
128 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script> 130 <script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script>
129 131
130 <!-- DropZone --> 132 <!-- DropZone -->
131 <script src="js/dropzone/dropzone.min.js"></script> 133 <script src="js/dropzone/dropzone.min.js"></script>
132 <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> --> 134 <!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> -->
133 <!-- Clipboard --> 135 <!-- Clipboard -->
134 <script src="js/clipboard/clipboard.min.js"></script> 136 <script src="js/clipboard/clipboard.min.js"></script>
135 <script> 137 <script>
136 $(document).ready(function(){ 138 $(document).ready(function(){
137 // Get the template HTML and remove it from the doument 139 // Get the template HTML and remove it from the doument
138 var previewNode = document 140 var previewNode = document
139 .querySelector("#template"); 141 .querySelector("#template");
140 previewNode.id = ""; 142 previewNode.id = "";
141 var previewTemplate = previewNode 143 var previewTemplate = previewNode
142 .parentNode 144 .parentNode
143 .innerHTML; 145 .innerHTML;
144 previewNode 146 previewNode
145 .parentNode 147 .parentNode
146 .removeChild(previewNode); 148 .removeChild(previewNode);
147   149  
148 var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone 150 var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
149 url: "upload.php", // Set the url 151 url: "upload.php", // Set the url
150 paramName: "file", 152 paramName: "file",
151 thumbnailWidth: 80, 153 thumbnailWidth: 80,
152 thumbnailHeight: 80, 154 thumbnailHeight: 80,
153 parallelUploads: 20, 155 parallelUploads: 20,
154 previewTemplate: previewTemplate, 156 previewTemplate: previewTemplate,
155 autoQueue: false, // Make sure the files aren't queued until manually added 157 autoQueue: false, // Make sure the files aren't queued until manually added
156 previewsContainer: "#previews", // Container to display the previews 158 previewsContainer: "#previews", // Container to display the previews
157 clickable: ".fileinput-button" // Element that should be used as click trigger to select files. 159 clickable: ".fileinput-button" // Element that should be used as click trigger to select files.
158 }); 160 });
159   161  
160 myDropzone.on("addedfile", (file) => { 162 myDropzone.on("addedfile", (file) => {
161 // Hookup the start button 163 // Hookup the start button
162 file.previewElement.querySelector(".start").onclick = () => { 164 file.previewElement.querySelector(".start").onclick = () => {
163 myDropzone.enqueueFile(file); 165 myDropzone.enqueueFile(file);
164 }; 166 };
165 }); 167 });
166   168  
167 // Update the total progress bar 169 // Update the total progress bar
168 myDropzone.on("totaluploadprogress", (progress) => { 170 myDropzone.on("totaluploadprogress", (progress) => {
169 document 171 document
170 .querySelector("#total-progress .progress-bar") 172 .querySelector("#total-progress .progress-bar")
171 .style 173 .style
172 .width = progress + "%"; 174 .width = progress + "%";
173 }); 175 });
174   176  
175 myDropzone.on("sending", (file) => { 177 myDropzone.on("sending", (file) => {
176 // Show the total progress bar when upload starts 178 // Show the total progress bar when upload starts
177 document.querySelector("#total-progress") 179 document.querySelector("#total-progress")
178 .style 180 .style
179 .opacity = 1; 181 .opacity = 1;
180 182
181 // And disable the start button. 183 // And disable the start button.
182 file 184 file
183 .previewElement 185 .previewElement
184 .querySelector(".start") 186 .querySelector(".start")
185 .setAttribute("disabled", "disabled"); 187 .setAttribute("disabled", "disabled");
186 }); 188 });
187   189  
188 // Hide the total progress bar when nothing's uploading anymore 190 // Hide the total progress bar when nothing's uploading anymore
189 myDropzone.on("queuecomplete", (progress) => { 191 myDropzone.on("queuecomplete", (progress) => {
190 document.querySelector("#total-progress") 192 document.querySelector("#total-progress")
191 .style 193 .style
192 .opacity = "0"; 194 .opacity = "0";
193 }); 195 });
194   196  
195 // Display the URL of the file. 197 // Display the URL of the file.
196 myDropzone.on("success", (file, data) => { 198 myDropzone.on("success", (file, data) => {
197 199
198 var boxURLID = '_' + Math.random().toString(36).substr(2, 9); 200 var boxURLID = '_' + Math.random().toString(36).substr(2, 9);
199 file 201 file
200 .previewElement 202 .previewElement
201 .querySelector("#URL") 203 .querySelector("#URL")
202 .value = data; 204 .value = data;
203 205
204 file 206 file
205 .previewElement 207 .previewElement
206 .querySelector("#URL") 208 .querySelector("#URL")
207 .setAttribute('id', boxURLID) 209 .setAttribute('id', boxURLID)
208 210
209 // Clipboard button. 211 // Clipboard button.
210 clipButtonID = '_' + Math.random().toString(36).substr(2, 9); 212 clipButtonID = '_' + Math.random().toString(36).substr(2, 9);
211 file 213 file
212 .previewElement 214 .previewElement
213 .querySelector("#clippy") 215 .querySelector("#clippy")
214 .setAttribute('data-clipboard-target', '#' + boxURLID) 216 .setAttribute('data-clipboard-target', '#' + boxURLID)
215 217
216 file 218 file
217 .previewElement 219 .previewElement
218 .querySelector("#clippy") 220 .querySelector("#clippy")
219 .setAttribute('id', clipButtonID); 221 .setAttribute('id', clipButtonID);
220 222
221 new Clipboard('#' + clipButtonID); 223 new Clipboard('#' + clipButtonID);
222 }); 224 });
223   225  
224 // Setup the buttons for all transfers 226 // Setup the buttons for all transfers
225 // The "add files" button doesn't need to be setup because the config 227 // The "add files" button doesn't need to be setup because the config
226 // `clickable` has already been specified. 228 // `clickable` has already been specified.
227 document.querySelector("#actions .start").onclick = function() { 229 document.querySelector("#actions .start").onclick = function() {
228 myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); 230 myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
229 }; 231 };
230 document.querySelector("#actions .cancel").onclick = function() { 232 document.querySelector("#actions .cancel").onclick = function() {
231 myDropzone.removeAllFiles(true); 233 myDropzone.removeAllFiles(true);
232 }; 234 };
233 }); 235 });
234 </script> 236 </script>
235 </body> 237 </body>
236 </html> 238 </html>
237   239