scratch – Diff between revs 5 and 9

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