scratch – Diff between revs 20 and 21
?pathlinks?
Rev 20 | Rev 21 | |||
---|---|---|---|---|
Line 3... | Line 3... | |||
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 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"> |
|
Line 11... | Line 11... | |||
11 | |
11 | |
|
Line 47... | Line 47... | |||
47 | <li class="active"><a href="#">Files</a></li> |
47 | <li class="active"><a href="#">Files</a></li> |
|
48 | </ul> |
48 | </ul> |
|
Line 49... | Line 49... | |||
49 | |
49 | |
|
50 | <div class="panel panel-default"> |
50 | <div class="panel panel-default"> |
|
51 | <div class="panel-heading"> |
- | ||
52 | <h3 class="panel-title">File Upload</h3> |
- | ||
53 | </div> |
- | ||
54 | <div class="panel-body" style="min-height: 480px; border: 2px dashed #0087F7; border-radius: 5px; background: white; box-sizing: border-box; padding: 54px 54px; outline-offset: -24px;"> |
51 | <div class="panel-heading"> |
|
55 | <div id="actions" class="row fallback"> |
52 | <div id="actions" class="row"> |
|
56 | <div class="col-lg-5"> |
53 | <div class="col-lg-5"> |
|
57 | <div class="btn-group btn-group-justified" role="group"> |
54 | <div class="btn-group btn-group-justified" role="group"> |
|
58 | <!-- 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 --> |
|
59 | <div class="btn-group" role="group"> |
56 | <div class="btn-group" role="group"> |
|
60 | <button type="button" class="btn btn-default fileinput-button"> |
57 | <button id="uploadbutton" type="button" class="btn btn-default"> |
|
61 | <i class="glyphicon glyphicon-plus"></i> |
58 | <i class="glyphicon glyphicon-plus"></i> |
|
62 | <span>Add...</span> |
59 | <span>Add...</span> |
|
63 | </button> |
60 | </button> |
|
64 | </div> |
61 | </div> |
|
Line 75... | Line 72... | |||
75 | </button> |
72 | </button> |
|
76 | </div> |
73 | </div> |
|
77 | </div> |
74 | </div> |
|
78 | </div> |
75 | </div> |
|
79 | </div> |
76 | </div> |
|
- | 77 | </div> |
||
- | 78 | <div class="panel-body" id="uploadpanel"> |
||
80 | <div class="table table-striped files" id="previews"> |
79 | <div class="table table-striped files" id="previews"> |
|
81 | <div id="template" class="file-row"> |
80 | <div id="template" class="file-row"> |
|
82 | <!-- This is used as the file preview template --> |
81 | <!-- This is used as the file preview template --> |
|
83 | <div> |
82 | <div> |
|
84 | <span class="preview"><img src="img/fileholder.svg" alt="Upload file thumbnail" data-dz-thumbnail></span> |
83 | <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> |
|
85 | </div> |
84 | </div> |
|
86 | <div> |
85 | <div> |
|
87 | <p id="name" class="name" data-dz-name></p> |
86 | <p id="name" class="name" data-dz-name></p> |
|
88 | <div class="input-group"> |
87 | <div class="input-group"> |
|
89 | <input id="URL" type="text" class="form-control" readonly> |
88 | <input id="URL" type="text" class="form-control" readonly> |
|
Line 106... | Line 105... | |||
106 | </button> |
105 | </button> |
|
107 | <button id="cancel" data-dz-remove class="btn btn-default cancel"> |
106 | <button id="cancel" data-dz-remove class="btn btn-default cancel"> |
|
108 | <i class="glyphicon glyphicon-ban-circle"></i> |
107 | <i class="glyphicon glyphicon-ban-circle"></i> |
|
109 | <span>Cancel</span> |
108 | <span>Cancel</span> |
|
110 | </button> |
109 | </button> |
|
111 | <button id="delete" data-dz-remove class="btn btn-danger delete"> |
110 | <button id="remove" data-dz-remove class="btn btn-danger remove"> |
|
112 | <i class="glyphicon glyphicon-trash"></i> |
111 | <i class="glyphicon glyphicon-remove"></i> |
|
113 | <span>Delete</span> |
112 | <span>Remove</span> |
|
114 | </button> |
113 | </button> |
|
115 | </div> |
114 | </div> |
|
116 | </div> |
115 | </div> |
|
Line 117... | Line 116... | |||
117 | |
116 | |
|
Line 163... | Line 162... | |||
163 | thumbnailHeight: 80, |
162 | thumbnailHeight: 80, |
|
164 | //parallelUploads: 20, |
163 | //parallelUploads: 20, |
|
165 | previewTemplate: previewTemplate, |
164 | previewTemplate: previewTemplate, |
|
166 | autoQueue: false, // Make sure the files aren't queued until manually added |
165 | autoQueue: false, // Make sure the files aren't queued until manually added |
|
167 | previewsContainer: "#previews", // Container to display the previews |
166 | previewsContainer: "#previews", // Container to display the previews |
|
168 | clickable: true, |
167 | clickable: [ |
|
- | 168 | "#uploadbutton", |
||
- | 169 | "#uploadpanel" |
||
- | 170 | ], |
||
169 | //clickable: ".fileinput-button" // Element that should be used as click trigger to select files. |
171 | //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. |
|
170 | }).on("addedfile", (file) => { |
172 | }).on("addedfile", (file) => { |
|
171 | // Hookup the start button |
173 | // Hookup the start button |
|
172 | file.previewElement.querySelector(".start").onclick = () => { |
174 | file.previewElement.querySelector(".start").onclick = () => { |
|
173 | myDropzone.enqueueFile(file); |
175 | myDropzone.enqueueFile(file); |
|
174 | }; |
176 | }; |
|
Line 233... | Line 235... | |||
233 | .setAttribute("disabled", "disabled"); |
235 | .setAttribute("disabled", "disabled"); |
|
Line 234... | Line 236... | |||
234 | |
236 | |
|
235 | new Clipboard('#' + clipButtonID); |
237 | new Clipboard('#' + clipButtonID); |
|
Line 236... | Line -... | |||
236 | }); |
- | ||
237 | |
238 | }); |
|
238 | if($('.panel-body').hasClass('fallback')) { |
239 | |
|
239 | document.querySelector("#actions .start").onclick = function() { |
240 | document.querySelector("#actions .start").onclick = () => { |
|
240 | myDropzone.enqueueFiles( |
241 | myDropzone.enqueueFiles( |
|
241 | myDropzone |
242 | myDropzone |
|
- | 243 | .getFilesWithStatus(Dropzone.ADDED)); |
||
242 | .getFilesWithStatus(Dropzone.ADDED)); |
244 | }; |
|
243 | }; |
245 | |
|
244 | document.querySelector("#actions .cancel").onclick = function() { |
246 | document.querySelector("#actions .cancel").onclick = () => { |
|
245 | myDropzone.removeAllFiles(true); |
- | ||
246 | }; |
247 | myDropzone.removeAllFiles(true); |
|
247 | } |
248 | }; |
|
248 | }); |
249 | }); |
|
249 | </script> |
250 | </script> |