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