scratch – Diff between revs 64 and 65

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