scratch – Blame information for rev 24

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