| /view.html |
|---|
| @@ -22,6 +22,8 @@ |
|---|
| <link rel="stylesheet" href="bower_components/blueimp-gallery/css/blueimp-gallery.min.css"> |
| <!-- Swiper --> |
| <link rel="stylesheet" href="bower_components/swiper/dist/css/swiper.min.css"> |
| <!-- Bootstrap TokenField --> |
| <link href="bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.min.css" rel="stylesheet"> |
| |
| <!-- Site-wide style CCS --> |
| <link href="css/style.css" rel="stylesheet"> |
| @@ -67,7 +69,22 @@ |
|---|
| <button id="btn-facebook" class="btn btn-default" type="button" disabled><i class="fa fa-facebook"></i></button> |
| </span> |
| </div> |
| <div class="input-group"> |
| <input type="text" class="form-control tokenfield file-tags" id="file-tags" data-minLength="3" data-delimiter=" "/> |
| <span class="input-group-btn"> |
| <button id="btn-filter" class="btn btn-default" type="button"><i class="fa fa-remove"></i></button> |
| </span> |
| </div> |
| |
| <!-- Create swiper container --> |
| <div class="swiper-container"> |
| <div id="links" class="swiper-wrapper"> |
| </div> |
| <!-- If we need navigation buttons --> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-button-next"></div> |
| </div> |
| |
| <!-- The Gallery as inline carousel, can be positioned anywhere on the page --> |
| <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel"> |
| <div class="slides"></div> |
| @@ -78,15 +95,8 @@ |
|---|
| <!-- <ol class="indicator"></ol> --> |
| </div> |
| |
| <div class="swiper-container"> |
| <div id="links" class="swiper-wrapper"> |
| </div> |
| <!-- If we need navigation buttons --> |
| <div class="swiper-button-prev"></div> |
| <div class="swiper-button-next"></div> |
| </div> |
| </div> |
| </div> |
| |
| </div> <!-- /container --> |
| |
| @@ -108,6 +118,8 @@ |
|---|
| <script src="bower_components/blueimp-gallery/js/blueimp-gallery.min.js"></script> |
| <!-- Clipboard --> |
| <script src="bower_components/clipboard/dist/clipboard.min.js"></script> |
| <!-- BootStrap TokenField --> |
| <script src="bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.min.js"></script> |
| <!-- YAML --> |
| <script src="bower_components/yaml.js/dist/yaml.min.js"></script> |
| <!-- Swiper --> |
| @@ -144,9 +156,13 @@ |
|---|
| return $element[0]; |
| }; |
| |
| function createGallery(tags, swiper) { |
| $.getJSON('view.php', { |
| tags: JSON.stringify(tags), |
| timestamp: window.performance.now() |
| }).then((data) => { |
| // Remove current links. |
| document.getElementById('links').innerHTML = ''; |
| // Create slides. |
| var indexPage = 0; |
| data.chunk(50).forEach((page) => { |
| @@ -165,7 +181,7 @@ |
|---|
| document.getElementById('swiper-slide-' + indexPage) |
| .insertAdjacentHTML( |
| 'beforeend', |
| '<a href="' + |
| '<a class="swiper-thumb" href="' + |
| link.url + |
| '" type="' + |
| link.type + |
| @@ -232,7 +248,13 @@ |
|---|
| blueimp.Gallery(links, options); |
| }; |
| |
| new Swiper ('.swiper-container', { |
| swiper.update(); |
| swiper.slideTo(1, 0, false); |
| }); |
| } |
| |
| // Create swiper. |
| var swiper = new Swiper ('.swiper-container', { |
| // Optional parameters |
| direction: 'horizontal', |
| // Creates duplicate element IDs if set to true. |
| @@ -246,13 +268,38 @@ |
|---|
| prevButton: '.swiper-button-prev', |
| |
| // And if we need scrollbar |
| //scrollbar: '.swiper-scrollbar', |
| //scrollbar: '.swiper-scrollbar' |
| }); |
| |
| // Enable the Clipboard button. |
| new Clipboard('#copy-url'); |
| |
| // Create token field. |
| $('#file-tags').tokenfield(); |
| |
| // Bind to token field tag add and remove events. |
| $('#file-tags') |
| .on('tokenfield:createdtoken', function (e) { |
| createGallery($('#file-tags').tokenfield('getTokens'), swiper); |
| }) |
| .on('tokenfield:removedtoken', function (e) { |
| // Happens when all the tags are removed. |
| if(e.attrs.value == null || typeof e.attrs.value === undefined) { |
| createGallery([], swiper); |
| return; |
| } |
| createGallery($('#file-tags').tokenfield('getTokens')); |
| }); |
| |
| // Create clear button for tags. |
| $('#btn-filter').click(() => { |
| $('#file-tags').tokenfield('setTokens', []); |
| createGallery([], swiper); |
| }); |
| |
| // Generate the gallery. |
| createGallery([], swiper); |
| }); |
| </script> |
| <!-- Jumbotron parallax effect --> |
| <script> |
