scratch – Diff between revs 21 and 23

Subversion Repositories:
Rev:
Show entire file – Ignore whitespace
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>
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> -  
Line 125... Line 48...
125 </div> 48 </ul>
Line 126... Line 49...
126   49  
127 </div> <!-- /container --> 50 </div> <!-- /container -->
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>