scratch – Blame information for rev 70

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