scratch – Blame information for rev 139

Subversion Repositories:
Rev:
Rev Author Line No. Line
115 office 1 <!DOCTYPE html>
125 office 2 <html lang="en" ng-app="scratch">
115 office 3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
7 <meta http-equiv="Pragma" content="no-cache" />
8 <meta http-equiv="Expires" content="0" />
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
11 <meta name="description" content="quick asset upload">
12 <meta name="author" content="Wizardry and Steamworks">
13 <link rel="icon" href="favicon.ico">
14  
15 <title>scratch</title>
16  
17 <!-- Bootstrap core CSS -->
18 <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
19 <!-- Font Awesome -->
20 <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
21 <!-- blueimp gallery -->
22 <link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css">
117 office 23 <!-- Swiper -->
24 <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css">
139 office 25 <!-- Bootstrap TokenField -->
26 <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet">
115 office 27  
28 <!-- Site-wide style CCS -->
29 <link href="css/style.css" rel="stylesheet">
30  
31 <!-- Local style -->
32 <link href="css/gallery/style.css" rel="stylesheet">
125 office 33  
34 <!-- Scratch Angular Includes -->
35 <ng-include src="'html/scratch-head-last.html'"></ng-include>
115 office 36 </head>
37  
38 <body>
125 office 39  
40 <!-- Scratch Angular Includes -->
41 <ng-include src="'html/scratch-body-first.html'"></ng-include>
115 office 42  
43 <!-- Main component for a primary marketing message or call to action -->
44 <div class="paralax-background"></div>
45 <div class="jumbotron">
46 <h1>scratch copy</h1>
47 <p class="quote">the asset sharer</p>
48 </div>
49  
50 <div class="container">
51  
52 <ul class="nav nav-tabs">
53 <li><a href="index.html">Home</a></li>
54 <li><a href="file.html">File</a></li>
55 <li><a href="text.html">Text</a></li>
56 <li><a href="draw.html">Draw</a></li>
57 <li><a href="link.html">Link</a></li>
121 office 58 <li class="active"><a href="#">View</a></li>
115 office 59 </ul>
60  
61 <div id="main-panel" class="panel panel-default">
62 <div class="panel-body">
63 <div class="input-group">
64 <input id="URL" type="text" class="form-control" readonly>
65 <span class="input-group-btn">
66 <button id="copy-url" class="btn btn-default" type="button" data-clipboard-target="#URL" data-toggle="tooltip" data-placement="auto" title="Copy to clipboard."><i class="glyphicon glyphicon-paperclip"></i></button>
67 </span>
68 <span class="input-group-btn">
69 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
70 </span>
71 </div>
139 office 72 <div class="input-group">
73 <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/>
74 <span class="input-group-btn">
75 <button id="btn-filter" class="btn btn-default" type="button"><i class="fa fa-remove"></i></button>
76 </span>
77 </div>
78  
79 <!-- Create swiper container -->
80 <div class="swiper-container">
81 <div id="links" class="swiper-wrapper">
82 </div>
83 <!-- If we need navigation buttons -->
84 <div class="swiper-button-prev"></div>
85 <div class="swiper-button-next"></div>
86 </div>
115 office 87  
88 <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
89 <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
90 <div class="slides"></div>
91 <h3 class="title"></h3>
92 <a class="prev">‹</a>
93 <a class="next">›</a>
94 <a class="play-pause"></a>
119 office 95 <!-- <ol class="indicator"></ol> -->
115 office 96 </div>
117 office 97  
115 office 98 </div>
99 </div>
100  
101 </div> <!-- /container -->
102  
103 <div id="footer">
104 <div class="container">
105 <p class="text-muted credit text-center">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p>
106 </div>
107 </div>
108  
109 <!-- jQuery -->
110 <script src="bower_components/jquery/dist/jquery.min.js"></script>
125 office 111 <!-- Angular JS -->
112 <script src="bower_components/angular/angular.min.js"></script>
115 office 113 <!-- BootStrap -->
114 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
115 <!-- Bootstrap Validator -->
116 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
117 <!-- blueimp-gallery -->
118 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
119 <!-- Clipboard -->
120 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
139 office 121 <!-- BootStrap TokenField -->
122 <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script>
115 office 123 <!-- YAML -->
124 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
117 office 125 <!-- Swiper -->
126 <script src="bower_components/swiper/dist/js/swiper.min.js"></script>
127 <!-- Wizardry and Steamworks -->
128 <script src="bower_components/was/dist/was.min.js"></script>
125 office 129 <!-- Angular Initialization. -->
115 office 130 <script>
125 office 131 var app = angular.module('scratch', []);
132 </script>
133 <script>
115 office 134 $(document).ready(() => {
135  
136 // Extend gallery for HTML.
137 blueimp.Gallery.prototype.textFactory = function (obj, callback) {
138 var $element = $('<div>')
139 .addClass('text-content')
140 .attr('title', obj.title);
117 office 141 $.get(obj.href, {
142 timestamp: window.performance.now()
143 }).done(function (result) {
115 office 144 $element.html(result);
145 callback({
146 type: 'load',
147 target: $element[0]
148 });
149 })
150 .fail(function () {
151 callback({
152 type: 'error',
153 target: $element[0]
154 });
155 });
156 return $element[0];
157 };
158  
139 office 159 function createGallery(tags, swiper) {
160 $.getJSON('view.php', {
161 tags: JSON.stringify(tags),
162 timestamp: window.performance.now()
163 }).then((data) => {
164 // Remove current links.
165 document.getElementById('links').innerHTML = '';
166 // Create slides.
167 var indexPage = 0;
168 data.chunk(50).forEach((page) => {
169 document.getElementById('links')
170 .insertAdjacentHTML(
171 'beforeend',
172 '<div id="swiper-slide-' + indexPage + '" class="swiper-slide"></div>'
173 );
174 page.forEach((link) => {
175 // Generic icon for text / html items.
176 switch(link.type) {
177 case 'text/plain':
178 link.preview ='img/text.png';
179 break;
180 }
181 document.getElementById('swiper-slide-' + indexPage)
182 .insertAdjacentHTML(
183 'beforeend',
184 '<a class="swiper-thumb" href="' +
185 link.url +
186 '" type="' +
187 link.type +
188 '"><img src="' +
189 link.preview +
190 '" width="60" height="40"></a>'
191 );
192 });
119 office 193  
194  
139 office 195 ++indexPage;
196 });
119 office 197  
139 office 198 // Initialize gallery.
199 document.getElementById('links').onclick = function (event) {
200 event = event || window.event;
201 var target = event.target || event.srcElement,
202 link = target.src ? target.parentNode : target,
203 options = {
204 index: link,
205 event: event,
206 carousel: true,
207 container: '#blueimp-gallery-carousel',
208 stretchImages: true,
209 startSlideshow: false,
210 onslideend: function(index, slide) {
211 // Set the URL.
212 $('#URL').val(
213 location.protocol
214 .concat("//")
215 .concat(window.location.hostname)
216 .concat("/").concat(data[index].url)
217 );
119 office 218  
139 office 219 // Check if OpenGraph should be enabled.
220 switch(data[index].opengraph) {
221 case true:
222 // Enable the facebook button.
223 $('#btn-facebook')
224 .prop("disabled", false);
225 break;
226 default:
227 // Disable the facebook button.
228 $('#btn-facebook')
229 .prop("disabled", true);
230 break;
231 }
232  
233 // Change the URL to OpenGraph when the user clicks the button.
234 $('#btn-facebook').on('click', () => {
235 $('#URL')
236 .val(
237 location.protocol.concat("//")
238 .concat(window.location.hostname)
239 .concat("/")
240 .concat("og")
241 .concat("/")
242 .concat(data[index].url)
243 );
244 });
115 office 245 }
139 office 246 },
247 links = this.getElementsByTagName('a');
248 blueimp.Gallery(links, options);
249 };
250  
251 swiper.update();
252 swiper.slideTo(1, 0, false);
253 });
254 }
255  
256 // Create swiper.
257 var swiper = new Swiper ('.swiper-container', {
258 // Optional parameters
259 direction: 'horizontal',
260 // Creates duplicate element IDs if set to true.
261 loop: false,
262  
263 // If we need pagination
264 //pagination: '.swiper-pagination',
265  
266 // Navigation arrows
267 nextButton: '.swiper-button-next',
268 prevButton: '.swiper-button-prev',
269  
270 // And if we need scrollbar
271 //scrollbar: '.swiper-scrollbar'
272 });
273  
274 // Enable the Clipboard button.
275 new Clipboard('#copy-url');
276  
277 // Create token field.
278 $('#file-tags').tokenfield();
279  
280 // Bind to token field tag add and remove events.
281 $('#file-tags')
282 .on('tokenfield:createdtoken', function (e) {
283 createGallery($('#file-tags').tokenfield('getTokens'), swiper);
284 })
285 .on('tokenfield:removedtoken', function (e) {
286 // Happens when all the tags are removed.
287 if(e.attrs.value == null || typeof e.attrs.value === undefined) {
288 createGallery([], swiper);
289 return;
290 }
291 createGallery($('#file-tags').tokenfield('getTokens'));
292 });
293  
294 // Create clear button for tags.
295 $('#btn-filter').click(() => {
296 $('#file-tags').tokenfield('setTokens', []);
297 createGallery([], swiper);
115 office 298 });
139 office 299  
300 // Generate the gallery.
301 createGallery([], swiper);
115 office 302 });
303 </script>
304 <!-- Jumbotron parallax effect -->
305 <script>
306 var jumboHeight = $('.jumbotron').outerHeight();
307 function parallax(){
308 var scrolled = $(window).scrollTop();
309 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
310 }
311  
312 $(window).scroll(function(e){
313 parallax();
314 });
315 </script>
316 </body>
317 </html>