scratch – Diff between revs 57 and 58

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