scratch – Diff between revs 115 and 117

Subversion Repositories:
Rev:
Show entire file – Ignore whitespace
Rev 115 Rev 117
Line 18... Line 18...
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 -->
-   24 <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css">
Line 23... Line 25...
23   25  
24 <!-- Site-wide style CCS --> 26 <!-- Site-wide style CCS -->
Line 25... Line 27...
25 <link href="css/style.css" rel="stylesheet"> 27 <link href="css/style.css" rel="stylesheet">
Line 67... Line 69...
67 <a class="prev">‹</a> 69 <a class="prev">‹</a>
68 <a class="next">›</a> 70 <a class="next">›</a>
69 <a class="play-pause"></a> 71 <a class="play-pause"></a>
70 <ol class="indicator"></ol> 72 <ol class="indicator"></ol>
71 </div> 73 </div>
72 74
-   75 <div class="swiper-container">
-   76 <div id="links" class="swiper-wrapper">
73 <div id="links"> 77 </div>
-   78 <!-- If we need pagination -->
-   79 <div class="swiper-pagination"></div>
-   80
-   81 <!-- If we need navigation buttons -->
-   82 <div class="swiper-button-prev"></div>
-   83 <div class="swiper-button-next"></div>
-   84
-   85 <!-- If we need scrollbar -->
-   86 <div class="swiper-scrollbar"></div>
74 </div> 87 </div>
75 </div> 88 </div>
76 </div> 89 </div>
Line 77... Line 90...
77 90
Line 93... Line 106...
93 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script> 106 <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script>
94 <!-- Clipboard --> 107 <!-- Clipboard -->
95 <script src="bower_components/clipboard/dist/clipboard.min.js"></script> 108 <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
96 <!-- YAML --> 109 <!-- YAML -->
97 <script src="bower_components/yaml.js/dist/yaml.min.js"></script> 110 <script src="bower_components/yaml.js/dist/yaml.min.js"></script>
-   111 <!-- Swiper -->
-   112 <script src="bower_components/swiper/dist/js/swiper.min.js"></script>
-   113 <!-- Wizardry and Steamworks -->
-   114 <script src="bower_components/was/dist/was.min.js"></script>
98 <script> 115 <script>
99 $(document).ready(() => { 116 $(document).ready(() => {
Line 100... Line 117...
100 117
101 // Extend gallery for HTML. 118 // Extend gallery for HTML.
102 blueimp.Gallery.prototype.textFactory = function (obj, callback) { 119 blueimp.Gallery.prototype.textFactory = function (obj, callback) {
103 var $element = $('<div>') 120 var $element = $('<div>')
104 .addClass('text-content') 121 .addClass('text-content')
105 .attr('title', obj.title); 122 .attr('title', obj.title);
-   123 $.get(obj.href, {
106 $.get(obj.href) 124 timestamp: window.performance.now()
107 .done(function (result) { 125 }).done(function (result) {
108 $element.html(result); 126 $element.html(result);
109 callback({ 127 callback({
110 type: 'load', 128 type: 'load',
111 target: $element[0] 129 target: $element[0]
Line 118... Line 136...
118 }); 136 });
119 }); 137 });
120 return $element[0]; 138 return $element[0];
121 }; 139 };
Line 122... Line 140...
122 140
-   141 $.getJSON('gallery.php', {
-   142 timestamp: window.performance.now()
123 $.getJSON('gallery.php').then((data) => { 143 }).then((data) => {
Line 124... Line 144...
124 //alert(JSON.stringify(data, null, 4)); 144 //alert(JSON.stringify(data, null, 4));
125 -  
126 data.forEach((link) => { 145
127 // Generic icon for text / html items. -  
128 switch(link.type) { 146 // Create slides.
129 case 'text/plain': -  
130 link.preview ='img/text.png'; -  
131 break; 147 var index = 0;
132 } 148 data.chunk(50).forEach((page) => {
133 document.getElementById('links') 149 document.getElementById('links')
-   150 .insertAdjacentHTML(
-   151 'beforeend',
-   152 '<div id="swiper-slide-' + index + '" class="swiper-slide"></div>'
-   153 );
-   154 page.forEach((link) => {
-   155 // Generic icon for text / html items.
-   156 switch(link.type) {
-   157 case 'text/plain':
-   158 link.preview ='img/text.png';
-   159 break;
-   160 }
-   161 document.getElementById('swiper-slide-' + index)
134 .insertAdjacentHTML( 162 .insertAdjacentHTML(
135 'beforeend', 163 'beforeend',
136 '<a href="' + 164 '<a href="' +
137 link.url + 165 link.url +
138 '" type="' + 166 '" type="' +
139 link.type + 167 link.type +
140 '"><img src="' + 168 '"><img src="' +
141 link.preview + 169 link.preview +
-   170 '" width="60" height="40"></a>'
-   171 );
142 '" width="60" height="40"></a>' 172 });
143 ); 173 ++index;
144 }); 174 });
145 document.getElementById('links').onclick = function (event) { 175 document.getElementById('links').onclick = function (event) {
146 event = event || window.event; 176 event = event || window.event;
Line 192... Line 222...
192 }, 222 },
193 links = this.getElementsByTagName('a'); 223 links = this.getElementsByTagName('a');
194 blueimp.Gallery(links, options); 224 blueimp.Gallery(links, options);
195 }; 225 };
Line -... Line 226...
-   226
-   227 new Swiper ('.swiper-container', {
-   228 // Optional parameters
-   229 direction: 'horizontal',
-   230 loop: true,
-   231
-   232 // If we need pagination
-   233 pagination: '.swiper-pagination',
-   234
-   235 // Navigation arrows
-   236 nextButton: '.swiper-button-next',
-   237 prevButton: '.swiper-button-prev',
-   238
-   239 // And if we need scrollbar
-   240 scrollbar: '.swiper-scrollbar',
-   241 });
196 242
197 // Enable the Clipboard button. 243 // Enable the Clipboard button.
198 new Clipboard('#copy-url'); 244 new Clipboard('#copy-url');
199 }); 245 });
200 }); 246 });