forked from TagesschuleElementa/www.tagesschule-elementa.ch
added gallery and portal informations
This commit is contained in:
@@ -85,46 +85,50 @@ $(function() {
|
||||
|
||||
/* DOWNLOADS */
|
||||
|
||||
var download_texts = [];
|
||||
$('.downloads__frame').each(function() {
|
||||
var $frame = $(this);
|
||||
|
||||
$('.download__item__title').each(function() {
|
||||
var text = $(this).text().toLowerCase();
|
||||
text = text + ' ' + $(this).next().text().toLowerCase();
|
||||
text = text + ' ' + $(this).next().next().text().toLowerCase();
|
||||
download_texts.push({
|
||||
$element: $(this).parents('li'),
|
||||
text: text
|
||||
var download_texts = [];
|
||||
|
||||
$frame.find('.download__item__title').each(function() {
|
||||
var text = $(this).text().toLowerCase();
|
||||
text = text + ' ' + $(this).next().text().toLowerCase();
|
||||
text = text + ' ' + $(this).next().next().text().toLowerCase();
|
||||
download_texts.push({
|
||||
$element: $(this).parents('li'),
|
||||
text: text
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$body.on('input', '#downloads_search', function(event) {
|
||||
var query = $(this).val().toLowerCase();
|
||||
var query_list = $.trim(query).split(' ');
|
||||
var matches = [];
|
||||
$frame.on('input', '.downloads_search', function(event) {
|
||||
var query = $(this).val().toLowerCase();
|
||||
var query_list = $.trim(query).split(' ');
|
||||
var matches = [];
|
||||
|
||||
for (var i = 0; i < download_texts.length; i++) {
|
||||
var download_text_item = download_texts[i];
|
||||
var matched = false;
|
||||
if (!matched) {
|
||||
for (var ii = 0; ii < query_list.length; ii++) {
|
||||
var query_item = query_list[ii];
|
||||
if (download_text_item.text.indexOf(query_item) >= 0) {
|
||||
matched = true;
|
||||
matches.push(download_text_item.$element);
|
||||
for (var i = 0; i < download_texts.length; i++) {
|
||||
var download_text_item = download_texts[i];
|
||||
var matched = false;
|
||||
if (!matched) {
|
||||
for (var ii = 0; ii < query_list.length; ii++) {
|
||||
var query_item = query_list[ii];
|
||||
if (download_text_item.text.indexOf(query_item) >= 0) {
|
||||
matched = true;
|
||||
matches.push(download_text_item.$element);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('#downloads li').each(function() {
|
||||
$(this).parents('.downloads__section').css('display', 'none');
|
||||
$(this).css('display', 'none');
|
||||
$frame.find('li').each(function() {
|
||||
$(this).parents('.downloads__section').css('display', 'none');
|
||||
$(this).css('display', 'none');
|
||||
});
|
||||
for (i = 0; i < matches.length; i++) {
|
||||
matches[i].removeAttr('style');
|
||||
matches[i].parents('.downloads__section').removeAttr('style');
|
||||
}
|
||||
});
|
||||
for (i = 0; i < matches.length; i++) {
|
||||
matches[i].removeAttr('style');
|
||||
matches[i].parents('.downloads__section').removeAttr('style');
|
||||
}
|
||||
});
|
||||
|
||||
$('#downloads_search').trigger('input');
|
||||
$frame.find('#downloads_search').trigger('input');
|
||||
});
|
||||
});
|
||||
207
private/js/modules/gallery.js
Normal file
207
private/js/modules/gallery.js
Normal file
@@ -0,0 +1,207 @@
|
||||
var initPhotoSwipeFromDOM = function(gallerySelector) {
|
||||
|
||||
// parse slide data (url, title, size ...) from DOM elements
|
||||
// (children of gallerySelector)
|
||||
var parseThumbnailElements = function(el) {
|
||||
var thumbElements = el.querySelectorAll('figure'),
|
||||
numNodes = thumbElements.length,
|
||||
items = [],
|
||||
figureEl,
|
||||
linkEl,
|
||||
size,
|
||||
item;
|
||||
|
||||
for (var i = 0; i < numNodes; i++) {
|
||||
|
||||
figureEl = thumbElements[i]; // <figure> element
|
||||
|
||||
// include only element nodes
|
||||
if (figureEl.nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
linkEl = figureEl.children[0]; // <a> element
|
||||
|
||||
size = linkEl.getAttribute('data-size').split('x');
|
||||
|
||||
// create slide object
|
||||
item = {
|
||||
src: linkEl.getAttribute('href'),
|
||||
w: parseInt(size[0], 10),
|
||||
h: parseInt(size[1], 10)
|
||||
};
|
||||
|
||||
|
||||
if (figureEl.children.length > 1) {
|
||||
// <figcaption> content
|
||||
item.title = figureEl.children[1].innerHTML;
|
||||
}
|
||||
|
||||
if (linkEl.children.length > 0) {
|
||||
// <img> thumbnail element, retrieving thumbnail url
|
||||
item.msrc = linkEl.children[0].getAttribute('src');
|
||||
}
|
||||
|
||||
item.el = figureEl; // save link to element for getThumbBoundsFn
|
||||
items.push(item);
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
// find nearest parent element
|
||||
var closest = function closest(el, fn) {
|
||||
return el && (fn(el) ? el : closest(el.parentNode, fn));
|
||||
};
|
||||
|
||||
// triggers when user clicks on thumbnail
|
||||
var onThumbnailsClick = function(e) {
|
||||
e = e || window.event;
|
||||
e.preventDefault ? e.preventDefault() : e.returnValue = false;
|
||||
|
||||
var eTarget = e.target || e.srcElement;
|
||||
|
||||
// find root element of slide
|
||||
var clickedListItem = closest(eTarget, function(el) {
|
||||
return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
|
||||
});
|
||||
|
||||
if (!clickedListItem) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find index of clicked item by looping through all child nodes
|
||||
// alternatively, you may define index via data- attribute
|
||||
var clickedGallery = $(clickedListItem).parents(gallerySelector)[0],
|
||||
childNodes = clickedGallery.querySelectorAll('figure'),
|
||||
numChildNodes = childNodes.length,
|
||||
nodeIndex = 0,
|
||||
index;
|
||||
|
||||
for (var i = 0; i < numChildNodes; i++) {
|
||||
if (childNodes[i].nodeType !== 1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (childNodes[i] === clickedListItem) {
|
||||
index = nodeIndex;
|
||||
break;
|
||||
}
|
||||
nodeIndex++;
|
||||
}
|
||||
|
||||
|
||||
if (index >= 0) {
|
||||
// open PhotoSwipe if valid index found
|
||||
openPhotoSwipe(index, clickedGallery);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||
var photoswipeParseHash = function() {
|
||||
var hash = window.location.hash.substring(1),
|
||||
params = {};
|
||||
|
||||
if (hash.length < 5) {
|
||||
return params;
|
||||
}
|
||||
|
||||
var vars = hash.split('&');
|
||||
for (var i = 0; i < vars.length; i++) {
|
||||
if (!vars[i]) {
|
||||
continue;
|
||||
}
|
||||
var pair = vars[i].split('=');
|
||||
if (pair.length < 2) {
|
||||
continue;
|
||||
}
|
||||
params[pair[0]] = pair[1];
|
||||
}
|
||||
|
||||
if (params.gid) {
|
||||
params.gid = parseInt(params.gid, 10);
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
|
||||
var pswpElement = document.querySelectorAll('.pswp')[0],
|
||||
gallery,
|
||||
options,
|
||||
items;
|
||||
|
||||
items = parseThumbnailElements(galleryElement);
|
||||
|
||||
// define options (if needed)
|
||||
options = {
|
||||
showHideOpacity: true,
|
||||
|
||||
shareButtons: [
|
||||
{id: 'download', label: 'Bild herunterladen', url: '{{raw_image_url}}', download: true}
|
||||
],
|
||||
// define gallery index (for URL)
|
||||
galleryUID: galleryElement.getAttribute('data-pswp-uid'),
|
||||
|
||||
getThumbBoundsFn: function(index) {
|
||||
// See Options -> getThumbBoundsFn section of documentation for more info
|
||||
var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
|
||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||
rect = thumbnail.getBoundingClientRect();
|
||||
|
||||
return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// PhotoSwipe opened from URL
|
||||
if (fromURL) {
|
||||
if (options.galleryPIDs) {
|
||||
// parse real index when custom PIDs are used
|
||||
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||
for (var j = 0; j < items.length; j++) {
|
||||
if (items[j].pid == index) {
|
||||
options.index = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// in URL indexes start from 1
|
||||
options.index = parseInt(index, 10) - 1;
|
||||
}
|
||||
} else {
|
||||
options.index = parseInt(index, 10);
|
||||
}
|
||||
|
||||
// exit if index not found
|
||||
if (isNaN(options.index)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (disableAnimation) {
|
||||
options.showAnimationDuration = 0;
|
||||
}
|
||||
|
||||
// Pass data to PhotoSwipe and initialize it
|
||||
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||
gallery.init();
|
||||
};
|
||||
|
||||
// loop through all gallery elements and bind events
|
||||
var galleryElements = document.querySelectorAll(gallerySelector);
|
||||
|
||||
for (var i = 0, l = galleryElements.length; i < l; i++) {
|
||||
galleryElements[i].setAttribute('data-pswp-uid', i + 1);
|
||||
galleryElements[i].onclick = onThumbnailsClick;
|
||||
}
|
||||
|
||||
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||
var hashData = photoswipeParseHash();
|
||||
if (hashData.pid && hashData.gid) {
|
||||
openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
|
||||
}
|
||||
};
|
||||
|
||||
// execute above function
|
||||
initPhotoSwipeFromDOM('.gallery');
|
||||
Reference in New Issue
Block a user