scratch – Diff between revs 19 and 20

Subversion Repositories:
Rev:
Show entire file – Ignore whitespace
Rev 19 Rev 20
Line 45... Line 45...
45 45
46 <ul class="nav nav-tabs"> 46 <ul class="nav nav-tabs">
47 <li class="active"><a href="#">Files</a></li> 47 <li class="active"><a href="#">Files</a></li>
Line -... Line 48...
-   48 </ul>
-   49
-   50 <div class="panel panel-default">
-   51 <div class="panel-heading">
-   52 <h3 class="panel-title">File Upload</h3>
48 </ul> 53 </div>
49 -  
50 <div id="actions" class="row"> 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;">
-   55 <div id="actions" class="row fallback">
51   56 <div class="col-lg-5">
-   57 <div class="btn-group btn-group-justified" role="group">
52 <div class="col-lg-7"> 58 <!-- The fileinput-button span is used to style the file input field as button -->
53 <!-- The fileinput-button span is used to style the file input field as button --> 59 <div class="btn-group" role="group">
54 <span class="btn btn-success fileinput-button"> 60 <button type="button" class="btn btn-default fileinput-button">
-   61 <i class="glyphicon glyphicon-plus"></i>
-   62 <span>Add...</span>
-   63 </button>
-   64 </div>
-   65 <div class="btn-group" role="group">
-   66 <button type="submit" class="btn btn-default start">
-   67 <i class="glyphicon glyphicon-upload"></i>
-   68 <span>Upload</span>
-   69 </button>
-   70 </div>
-   71 <div class="btn-group" role="group">
-   72 <button type="reset" class="btn btn-default cancel">
-   73 <i class="glyphicon glyphicon-ban-circle"></i>
-   74 <span>Cancel</span>
-   75 </button>
-   76 </div>
55 <i class="glyphicon glyphicon-plus"></i> 77 </div>
-   78 </div>
-   79 </div>
-   80 <div class="table table-striped files" id="previews">
-   81 <div id="template" class="file-row">
-   82 <!-- This is used as the file preview template -->
-   83 <div>
-   84 <span class="preview"><img src="img/fileholder.svg" alt="Upload file thumbnail" data-dz-thumbnail></span>
-   85 </div>
-   86 <div>
-   87 <p id="name" class="name" data-dz-name></p>
-   88 <div class="input-group">
-   89 <input id="URL" type="text" class="form-control" readonly>
-   90 <span class="input-group-btn">
-   91 <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>
-   92 </span>
-   93 </div>
-   94 <strong class="error text-danger" data-dz-errormessage></strong>
-   95 </div>
-   96 <div>
-   97 <p class="size" data-dz-size></p>
-   98 <div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
-   99 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
-   100 </div>
56 <span>Add files...</span> 101 </div>
57 </span> 102 <div>
58 <button type="submit" class="btn btn-primary start"> 103 <button id="start" class="btn btn-default start">
59 <i class="glyphicon glyphicon-upload"></i> 104 <i class="glyphicon glyphicon-upload"></i>
60 <span>Start upload</span> 105 <span>Upload</span>
61 </button> 106 </button>
62 <button type="reset" class="btn btn-warning cancel"> 107 <button id="cancel" data-dz-remove class="btn btn-default cancel">
-   108 <i class="glyphicon glyphicon-ban-circle"></i>
-   109 <span>Cancel</span>
-   110 </button>
-   111 <button id="delete" data-dz-remove class="btn btn-danger delete">
63 <i class="glyphicon glyphicon-ban-circle"></i> 112 <i class="glyphicon glyphicon-trash"></i>
-   113 <span>Delete</span>
64 <span>Cancel upload</span> 114 </button>
Line 65... Line 115...
65 </button> 115 </div>
-   116 </div>
66 </div> 117  
67   118 </div>
68 <div class="col-lg-5"> 119 </div>
69 <!-- The global file processing state --> 120 <!-- The global file processing state -->
70 <span class="fileupload-process"> 121 <div class="fileupload-process">
71 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> -  
72 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> -  
73 </div> -  
74 </span> -  
75 </div> -  
76   -  
77 </div> -  
78 <div class="table table-striped files" id="previews"> -  
79   -  
80 <div id="template" class="file-row"> -  
81 <!-- This is used as the file preview template --> -  
82 <div> -  
83 <span class="preview"><img data-dz-thumbnail /></span> -  
84 </div> -  
85 <div> -  
86 <p id="name" class="name" data-dz-name></p> -  
87 <span class="input-group-button"> -  
88 <input id="URL" type="text" class='form-control' readonly> -  
89 <button id="clippy" class="btn clipBtn" class='form-control' type="button"> -  
90 <img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard"> -  
91 </button> -  
92 </span> -  
93 <strong class="error text-danger" data-dz-errormessage></strong> -  
94 </div> -  
95 <div> -  
96 <p class="size" data-dz-size></p> 122 <div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
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 class="btn btn-primary start"> -  
103 <i class="glyphicon glyphicon-upload"></i> -  
104 <span>Start</span> -  
105 </button> -  
106 <button data-dz-remove class="btn btn-warning cancel"> -  
107 <i class="glyphicon glyphicon-ban-circle"></i> -  
108 <span>Cancel</span> -  
109 </button> -  
110 <button data-dz-remove class="btn btn-danger delete"> -  
111 <i class="glyphicon glyphicon-trash"></i> -  
112 <span>Delete</span> -  
113 </button> -  
114 </div> 123 <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
Line 115... Line 124...
115 </div> 124 </div>
Line 116... Line 125...
116   125 </div>
Line 145... Line 154...
145 .innerHTML; 154 .innerHTML;
146 previewNode 155 previewNode
147 .parentNode 156 .parentNode
148 .removeChild(previewNode); 157 .removeChild(previewNode);
Line 149... Line 158...
149   158  
150 var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone 159 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
151 url: "upload.php", // Set the url 160 url: "upload.php", // Set the url
152 paramName: "file", 161 paramName: "file",
153 thumbnailWidth: 80, 162 thumbnailWidth: 80,
154 thumbnailHeight: 80, 163 thumbnailHeight: 80,
155 parallelUploads: 20, 164 //parallelUploads: 20,
156 previewTemplate: previewTemplate, 165 previewTemplate: previewTemplate,
157 autoQueue: false, // Make sure the files aren't queued until manually added 166 autoQueue: false, // Make sure the files aren't queued until manually added
-   167 previewsContainer: "#previews", // Container to display the previews
158 previewsContainer: "#previews", // Container to display the previews 168 clickable: true,
159 clickable: ".fileinput-button" // Element that should be used as click trigger to select files. -  
160 }); -  
161   169 //clickable: ".fileinput-button" // Element that should be used as click trigger to select files.
162 myDropzone.on("addedfile", (file) => { 170 }).on("addedfile", (file) => {
163 // Hookup the start button 171 // Hookup the start button
164 file.previewElement.querySelector(".start").onclick = () => { 172 file.previewElement.querySelector(".start").onclick = () => {
165 myDropzone.enqueueFile(file); 173 myDropzone.enqueueFile(file);
166 }; -  
167 }); -  
168   -  
169 // Update the total progress bar 174 };
170 myDropzone.on("totaluploadprogress", (progress) => { 175 }).on("totaluploadprogress", (progress) => {
171 document 176 document
172 .querySelector("#total-progress .progress-bar") 177 .querySelector("#total-progress .progress-bar")
173 .style 178 .style
174 .width = progress + "%"; -  
175 }); -  
176   179 .width = progress + "%";
177 myDropzone.on("sending", (file) => { 180 }).on("sending", (file) => {
178 // Show the total progress bar when upload starts 181 // Show the total progress bar when upload starts
179 document.querySelector("#total-progress") 182 document.querySelector("#total-progress")
180 .style 183 .style
Line 181... Line 184...
181 .opacity = 1; 184 .opacity = 1;
182 185
183 // And disable the start button. 186 // And disable the start button.
184 file 187 file
185 .previewElement 188 .previewElement
186 .querySelector(".start") -  
187 .setAttribute("disabled", "disabled"); -  
188 }); -  
189   189 .querySelector(".start")
190 // Hide the total progress bar when nothing's uploading anymore 190 .setAttribute("disabled", "disabled");
191 myDropzone.on("queuecomplete", (progress) => { 191 }).on("queuecomplete", (progress) => {
192 document.querySelector("#total-progress") 192 document.querySelector("#total-progress")
193 .style -  
194 .opacity = "0"; -  
195 }); -  
196   193 .style
Line 197... Line 194...
197 // Display the URL of the file. 194 .opacity = "0";
-   195 }).on("success", (file, data) => {
-   196
-   197 var boxURLID = '_' + Math
198 myDropzone.on("success", (file, data) => { 198 .random()
199 199 .toString(36)
200 var boxURLID = '_' + Math.random().toString(36).substr(2, 9); 200 .substr(2, 9);
201 file 201 file
Line 207... Line 207...
207 .previewElement 207 .previewElement
208 .querySelector("#URL") 208 .querySelector("#URL")
209 .setAttribute('id', boxURLID) 209 .setAttribute('id', boxURLID)
Line 210... Line 210...
210 210
211 // Clipboard button. 211 // Clipboard button.
-   212 clipButtonID = '_' + Math
-   213 .random()
-   214 .toString(36)
212 clipButtonID = '_' + Math.random().toString(36).substr(2, 9); 215 .substr(2, 9);
213 file 216 file
214 .previewElement 217 .previewElement
215 .querySelector("#clippy") 218 .querySelector("#btn-clipboard")
Line 216... Line 219...
216 .setAttribute('data-clipboard-target', '#' + boxURLID) 219 .setAttribute('data-clipboard-target', '#' + boxURLID)
217 220
218 file 221 file
219 .previewElement 222 .previewElement
-   223 .querySelector("#btn-clipboard")
-   224 .setAttribute('id', clipButtonID);
-   225  
-   226 file
-   227 .previewElement
-   228 .querySelector(".start")
-   229 .setAttribute("disabled", "disabled");
-   230 file
-   231 .previewElement
Line 220... Line 232...
220 .querySelector("#clippy") 232 .querySelector(".cancel")
221 .setAttribute('id', clipButtonID); 233 .setAttribute("disabled", "disabled");
222 234
223 new Clipboard('#' + clipButtonID); 235 new Clipboard('#' + clipButtonID);
224 }); 236 });
225   237
226 // Setup the buttons for all transfers 238 if($('.panel-body').hasClass('fallback')) {
227 // The "add files" button doesn't need to be setup because the config 239 document.querySelector("#actions .start").onclick = function() {
228 // `clickable` has already been specified. 240 myDropzone.enqueueFiles(
229 document.querySelector("#actions .start").onclick = function() { 241 myDropzone
230 myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); 242 .getFilesWithStatus(Dropzone.ADDED));
-   243 };
231 }; 244 document.querySelector("#actions .cancel").onclick = function() {
232 document.querySelector("#actions .cancel").onclick = function() { 245 myDropzone.removeAllFiles(true);
233 myDropzone.removeAllFiles(true); 246 };
234 }; 247 }
235 }); 248 });