scratch – Blame information for rev 57

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