scratch – Diff between revs 91 and 96

Subversion Repositories:
Rev:
Show entire file – Regard whitespace
Rev 91 Rev 96
Line 62... Line 62...
62 <i class="glyphicon glyphicon-upload"></i> 62 <i class="glyphicon glyphicon-upload"></i>
63 <span>Upload All</span> 63 <span>Upload All</span>
64 </button> 64 </button>
65 </div> 65 </div>
66 <div class="btn-group" role="group"> 66 <div class="btn-group" role="group">
67 <button type="reset" class="btn btn-default cancel"> 67 <button type="reset" class="btn btn-danger cancel">
68 <i class="glyphicon glyphicon-ban-circle"></i> 68 <i class="glyphicon glyphicon-ban-circle"></i>
69 <span>Cancel All</span> 69 <span>Cancel All</span>
70 </button> 70 </button>
71 </div> 71 </div>
72 </div> 72 </div>
Line 111... Line 111...
111 <div> 111 <div>
112 <button id="start" class="btn btn-default start"> 112 <button id="start" class="btn btn-default start">
113 <i class="glyphicon glyphicon-upload"></i> 113 <i class="glyphicon glyphicon-upload"></i>
114 <span>Upload</span> 114 <span>Upload</span>
115 </button> 115 </button>
116 <button id="cancel" data-dz-cancel class="btn btn-default cancel"> 116 <button id="cancel" data-dz-remove class="btn btn-warning cancel">
117 <i class="glyphicon glyphicon-ban-circle"></i> 117 <i class="glyphicon glyphicon-ban-circle"></i>
118 <span>Cancel</span> 118 <span>Cancel</span>
119 </button> 119 </button>
120 <button id="remove" data-dz-remove class="btn btn-danger remove"> 120 <button id="remove" data-dz-remove class="btn btn-danger remove">
121 <i class="glyphicon glyphicon-remove"></i> 121 <i class="glyphicon glyphicon-remove"></i>
Line 150... Line 150...
150 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script> 150 <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
151 <!-- Clipboard --> 151 <!-- Clipboard -->
152 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 152 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
153 <script> 153 <script>
154 $(document).ready(() => { 154 $(document).ready(() => {
-   155 $.get('session.php').then((token) => {
155 // Get the template HTML and remove it from the doument 156 // Get the template HTML and remove it from the doument
156 var previewNode = document 157 var previewNode = document
157 .querySelector("#template"); 158 .querySelector("#template");
158 previewNode.id = ""; 159 previewNode.id = "";
159 var previewTemplate = previewNode 160 var previewTemplate = previewNode
Line 162... Line 163...
162 previewNode 163 previewNode
163 .parentNode 164 .parentNode
164 .removeChild(previewNode); 165 .removeChild(previewNode);
Line 165... Line 166...
165   166
166 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone 167 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
167 url: "file.php", // Set the url 168 url: 'file.php', // Set the url
168 paramName: "file", 169 paramName: 'file',
169 thumbnailWidth: 80, 170 thumbnailWidth: 80,
170 thumbnailHeight: 80, 171 thumbnailHeight: 80,
171 //parallelUploads: 20, 172 //parallelUploads: 20,
172 previewTemplate: previewTemplate, 173 previewTemplate: previewTemplate,
173 autoQueue: false, // Make sure the files aren't queued until manually added 174 autoQueue: false, // Make sure the files aren't queued until manually added
174 previewsContainer: "#previews", // Container to display the previews 175 previewsContainer: '#previews', // Container to display the previews
175 clickable: [ 176 clickable: [
176 "#uploadbutton", 177 '#uploadbutton',
177 "#uploadpanel" 178 '#uploadpanel'
178 ], 179 ],
-   180 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
-   181 }).on('sending', (file, xhr, formData) => {
-   182 // Append session token.
179 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files. 183 formData.append('token', token);
180 }).on("addedfile", (file) => { 184 }).on('addedfile', (file) => {
181 // Hookup the start button 185 // Hookup the start button
182 file.previewElement.querySelector(".start").onclick = () => { 186 file.previewElement.querySelector(".start").onclick = () => {
183 myDropzone.enqueueFile(file); 187 myDropzone.enqueueFile(file);
184 }; 188 };
185 }).on("totaluploadprogress", (progress) => { 189 }).on('totaluploadprogress', (progress) => {
186 document 190 document
187 .querySelector("#total-progress .progress-bar") 191 .querySelector('#total-progress .progress-bar')
188 .style 192 .style
189 .width = progress + "%"; 193 .width = progress + "%";
190 }).on("sending", (file) => { 194 }).on('sending', (file) => {
191 // Show the total progress bar when upload starts 195 // Show the total progress bar when upload starts
192 document.querySelector("#total-progress") 196 document.querySelector("#total-progress")
193 .style 197 .style
Line 194... Line 198...
194 .opacity = 1; 198 .opacity = 1;
195 199
196 // And disable the start button. 200 // And disable the start button.
197 file 201 file
198 .previewElement 202 .previewElement
199 .querySelector(".start") 203 .querySelector(".start")
200 .setAttribute("disabled", "disabled"); 204 .setAttribute("disabled", "disabled");
201 }).on("queuecomplete", (progress) => { 205 }).on('queuecomplete', (progress) => {
202 document.querySelector("#total-progress") 206 document.querySelector("#total-progress")
203 .style 207 .style
204 .opacity = "0"; 208 .opacity = "0";
205 }).on("success", (file, data) => { 209 }).on('success', (file, data) => {
Line 206... Line 210...
206 // Serialize JSON to object. 210 // Serialize JSON to object.
207 data = JSON.parse(data); 211 data = JSON.parse(data);
Line 354... Line 358...
354 }; 358 };
Line 355... Line 359...
355 359
356 document.querySelector("#actions .cancel").onclick = () => { 360 document.querySelector("#actions .cancel").onclick = () => {
357 myDropzone.removeAllFiles(true); 361 myDropzone.removeAllFiles(true);
-   362 };
Line 358... Line 363...
358 }; 363 });
359 364
360 // Scroll to the panel. 365 // Scroll to the panel.
361 $('html, body').animate({ 366 $('html, body').animate({