scratch – Blame information for rev 21

Subversion Repositories:
Rev:
Rev Author Line No. Line
5 office 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
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 -->
21 office 8 <meta name="description" content="quick asset upload">
5 office 9 <meta name="author" content="Wizardry and Steamworks">
10 <link rel="icon" href="favicon.ico">
11  
12 <title>Quickload</title>
13  
14 <!-- Bootstrap core CSS -->
15 <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
16  
17 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
18 <link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet">
19  
20 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
21 <!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]-->
22 <script src="js/bootstrap/ie-emulation-modes-warning.js"></script>
23  
24 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
25 <!--[if lt IE 9]>
26 <script src="js/bootstrap/html5shiv.min.js"></script>
27 <script src="js/bootstrap/respond.min.js"></script>
28 <![endif]-->
29  
30 <!-- DropZone -->
31 <link href="css/dropzone/dropzone.min.css" rel="stylesheet">
32 <!-- Local style -->
33 <link href="css/style.css" rel="stylesheet">
34 </head>
35  
36 <body>
37  
38 <div class="container">
39  
40 <!-- Main component for a primary marketing message or call to action -->
41 <div class="jumbotron">
42 <h1>Quickload</h1>
18 office 43 <p>Asset sharing platform.</p>
5 office 44 </div>
45  
46 <ul class="nav nav-tabs">
47 <li class="active"><a href="#">Files</a></li>
48 </ul>
49  
20 office 50 <div class="panel panel-default">
51 <div class="panel-heading">
21 office 52 <div id="actions" class="row">
20 office 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">
21 office 57 <button id="uploadbutton" type="button" class="btn btn-default">
20 office 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>
21 office 77 </div>
78 <div class="panel-body" id="uploadpanel">
20 office 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>
21 office 83 <span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span>
20 office 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>
21 office 110 <button id="remove" data-dz-remove class="btn btn-danger remove">
111 <i class="glyphicon glyphicon-remove"></i>
112 <span>Remove</span>
20 office 113 </button>
114 </div>
115 </div>
5 office 116  
20 office 117 </div>
118 </div>
119 <!-- The global file processing state -->
120 <div class="fileupload-process">
5 office 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>
20 office 124 </div>
5 office 125 </div>
126  
127 </div> <!-- /container -->
128  
10 office 129 <div id="footer">
130 <div class="container">
131 <p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
132 </div>
133 </div>
5 office 134  
135 <script src="js/jquery/jquery.min.js"></script>
136 <script src="js/bootstrap/bootstrap.min.js"></script>
137 <!-- 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  
20 office 158 var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
5 office 159 url: "upload.php", // Set the url
160 paramName: "file",
161 thumbnailWidth: 80,
162 thumbnailHeight: 80,
20 office 163 //parallelUploads: 20,
5 office 164 previewTemplate: previewTemplate,
165 autoQueue: false, // Make sure the files aren't queued until manually added
166 previewsContainer: "#previews", // Container to display the previews
21 office 167 clickable: [
168 "#uploadbutton",
169 "#uploadpanel"
170 ],
171 //clickable: "#uploadbutton" // Element that should be used as click trigger to select files.
20 office 172 }).on("addedfile", (file) => {
5 office 173 // Hookup the start button
174 file.previewElement.querySelector(".start").onclick = () => {
175 myDropzone.enqueueFile(file);
176 };
20 office 177 }).on("totaluploadprogress", (progress) => {
5 office 178 document
179 .querySelector("#total-progress .progress-bar")
180 .style
181 .width = progress + "%";
20 office 182 }).on("sending", (file) => {
5 office 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");
20 office 193 }).on("queuecomplete", (progress) => {
5 office 194 document.querySelector("#total-progress")
195 .style
196 .opacity = "0";
20 office 197 }).on("success", (file, data) => {
5 office 198  
20 office 199 var boxURLID = '_' + Math
200 .random()
201 .toString(36)
202 .substr(2, 9);
5 office 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.
20 office 214 clipButtonID = '_' + Math
215 .random()
216 .toString(36)
217 .substr(2, 9);
5 office 218 file
219 .previewElement
20 office 220 .querySelector("#btn-clipboard")
5 office 221 .setAttribute('data-clipboard-target', '#' + boxURLID)
222  
223 file
224 .previewElement
20 office 225 .querySelector("#btn-clipboard")
5 office 226 .setAttribute('id', clipButtonID);
20 office 227  
228 file
229 .previewElement
230 .querySelector(".start")
231 .setAttribute("disabled", "disabled");
232 file
233 .previewElement
234 .querySelector(".cancel")
235 .setAttribute("disabled", "disabled");
5 office 236  
237 new Clipboard('#' + clipButtonID);
238 });
20 office 239  
21 office 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 };
5 office 249 });
250 </script>
251 </body>
252 </html>