scratch – Diff between revs 125 and 139

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