scratch – Blame information for rev 119

Subversion Repositories:
Rev:
Rev Author Line No. Line
115 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 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">
115 office 25  
26 <!-- Site-wide style CCS -->
27 <link href="css/style.css" rel="stylesheet">
28  
29 <!-- Local style -->
30 <link href="css/gallery/style.css" rel="stylesheet">
31 </head>
32  
33 <body>
34  
35 <!-- Main component for a primary marketing message or call to action -->
36 <div class="paralax-background"></div>
37 <div class="jumbotron">
38 <h1>scratch copy</h1>
39 <p class="quote">the asset sharer</p>
40 </div>
41  
42 <div class="container">
43  
44 <ul class="nav nav-tabs">
45 <li><a href="index.html">Home</a></li>
46 <li><a href="file.html">File</a></li>
47 <li><a href="text.html">Text</a></li>
48 <li><a href="draw.html">Draw</a></li>
49 <li><a href="link.html">Link</a></li>
50 <li class="active"><a href="#">Gallery</a></li>
51 </ul>
52  
53 <div id="main-panel" class="panel panel-default">
54 <div class="panel-body">
55 <div class="input-group">
56 <input id="URL" type="text" class="form-control" readonly>
57 <span class="input-group-btn">
58 <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>
59 </span>
60 <span class="input-group-btn">
61 <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button>
62 </span>
63 </div>
64  
65 <!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
66 <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
67 <div class="slides"></div>
68 <h3 class="title"></h3>
69 <a class="prev">‹</a>
70 <a class="next">›</a>
71 <a class="play-pause"></a>
119 office 72 <!-- <ol class="indicator"></ol> -->
115 office 73 </div>
117 office 74  
75 <div class="swiper-container">
76 <div id="links" class="swiper-wrapper">
77 </div>
78 <!-- If we need navigation buttons -->
79 <div class="swiper-button-prev"></div>
80 <div class="swiper-button-next"></div>
115 office 81 </div>
82 </div>
83 </div>
84  
85 </div> <!-- /container -->
86  
87 <div id="footer">
88 <div class="container">
89 <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>
90 </div>
91 </div>
92  
93 <!-- jQuery -->
94 <script src="bower_components/jquery/dist/jquery.min.js"></script>
95 <!-- BootStrap -->
96 <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
97 <!-- Bootstrap Validator -->
98 <script src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
99 <!-- blueimp-gallery -->
100 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
101 <!-- Clipboard -->
102 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
103 <!-- YAML -->
104 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
117 office 105 <!-- Swiper -->
106 <script src="bower_components/swiper/dist/js/swiper.min.js"></script>
107 <!-- Wizardry and Steamworks -->
108 <script src="bower_components/was/dist/was.min.js"></script>
115 office 109 <script>
110 $(document).ready(() => {
111  
112 // Extend gallery for HTML.
113 blueimp.Gallery.prototype.textFactory = function (obj, callback) {
114 var $element = $('<div>')
115 .addClass('text-content')
116 .attr('title', obj.title);
117 office 117 $.get(obj.href, {
118 timestamp: window.performance.now()
119 }).done(function (result) {
115 office 120 $element.html(result);
121 callback({
122 type: 'load',
123 target: $element[0]
124 });
125 })
126 .fail(function () {
127 callback({
128 type: 'error',
129 target: $element[0]
130 });
131 });
132 return $element[0];
133 };
134  
117 office 135 $.getJSON('gallery.php', {
136 timestamp: window.performance.now()
137 }).then((data) => {
138 // Create slides.
119 office 139 var indexPage = 0;
117 office 140 data.chunk(50).forEach((page) => {
115 office 141 document.getElementById('links')
142 .insertAdjacentHTML(
117 office 143 'beforeend',
119 office 144 '<div id="swiper-slide-' + indexPage + '" class="swiper-slide"></div>'
117 office 145 );
146 page.forEach((link) => {
147 // Generic icon for text / html items.
148 switch(link.type) {
149 case 'text/plain':
150 link.preview ='img/text.png';
151 break;
152 }
119 office 153 document.getElementById('swiper-slide-' + indexPage)
117 office 154 .insertAdjacentHTML(
155 'beforeend',
156 '<a href="' +
157 link.url +
158 '" type="' +
159 link.type +
160 '"><img src="' +
161 link.preview +
162 '" width="60" height="40"></a>'
163 );
164 });
119 office 165  
166  
167 ++indexPage;
115 office 168 });
119 office 169  
170 // Initialize gallery.
115 office 171 document.getElementById('links').onclick = function (event) {
172 event = event || window.event;
173 var target = event.target || event.srcElement,
174 link = target.src ? target.parentNode : target,
175 options = {
176 index: link,
177 event: event,
119 office 178 carousel: true,
115 office 179 container: '#blueimp-gallery-carousel',
180 stretchImages: true,
181 startSlideshow: false,
182 onslideend: function(index, slide) {
183 // Set the URL.
184 $('#URL').val(
185 location.protocol
186 .concat("//")
187 .concat(window.location.hostname)
188 .concat("/").concat(data[index].url)
189 );
119 office 190  
115 office 191 // Check if OpenGraph should be enabled.
192 switch(data[index].opengraph) {
193 case true:
194 // Enable the facebook button.
195 $('#btn-facebook')
196 .prop("disabled", false);
197 break;
198 default:
199 // Disable the facebook button.
200 $('#btn-facebook')
201 .prop("disabled", true);
202 break;
203 }
119 office 204  
115 office 205 // Change the URL to OpenGraph when the user clicks the button.
206 $('#btn-facebook').on('click', () => {
207 $('#URL')
208 .val(
209 location.protocol.concat("//")
210 .concat(window.location.hostname)
211 .concat("/")
212 .concat("og")
213 .concat("/")
214 .concat(data[index].url)
215 );
216 });
217 }
218 },
219 links = this.getElementsByTagName('a');
220 blueimp.Gallery(links, options);
221 };
222  
117 office 223 new Swiper ('.swiper-container', {
224 // Optional parameters
225 direction: 'horizontal',
119 office 226 // Creates duplicate element IDs if set to true.
227 loop: false,
117 office 228  
229 // If we need pagination
119 office 230 //pagination: '.swiper-pagination',
117 office 231  
232 // Navigation arrows
233 nextButton: '.swiper-button-next',
234 prevButton: '.swiper-button-prev',
235  
236 // And if we need scrollbar
119 office 237 //scrollbar: '.swiper-scrollbar',
117 office 238 });
239  
115 office 240 // Enable the Clipboard button.
241 new Clipboard('#copy-url');
242 });
243 });
244 </script>
245 <!-- Jumbotron parallax effect -->
246 <script>
247 var jumboHeight = $('.jumbotron').outerHeight();
248 function parallax(){
249 var scrolled = $(window).scrollTop();
250 $('.paralax-background').css('height', (jumboHeight-scrolled) + 'px');
251 }
252  
253 $(window).scroll(function(e){
254 parallax();
255 });
256 </script>
257 </body>
258 </html>