/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> |