AnimateCss
// AnimateCss - Layouts/Assets.html
function isScrolledIntoView(el) {
// check for 5% visible
var percentVisible = 0.05;
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var elemHeight = el.getBoundingClientRect().height;
var overhang = elemHeight * (1 - percentVisible);
var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
return isVisible;
}
function t3sbCssAnimate(ael, dataAnimate, animateRepeat) {
// used w/ button or buttonGroup ???
if (ael.nodeName == 'HEADER') {
// ael = ael.nextSibling;
}
if (isScrolledIntoView(ael)) {
ael.classList.add('bt_visible', dataAnimate);
ael.classList.remove('bt_hidden');
} else {
if (animateRepeat) {
ael.classList.remove('bt_visible', dataAnimate);
ael.classList.add('bt_hidden');
}
}
window.addEventListener('scroll', function() {
if (isScrolledIntoView(ael)) {
ael.classList.add('bt_visible', dataAnimate);
ael.classList.remove('bt_hidden');
} else {
if (animateRepeat) {
ael.classList.remove('bt_visible', dataAnimate);
ael.classList.add('bt_hidden');
}
}
});
}
// AnimateCss-{data.uid} - Partials/Layouts/Assets.html
var animatedElement = document.getElementById('c{data.uid}'),
animateRepeat = '{animateCssRepeat}',
dataAnimate = '{dataAnimate}',
child = animatedElement.firstChild;
if ( animatedElement.nodeType == 1 && animatedElement.classList.contains('animated') ) {
t3sbCssAnimate(animatedElement, dataAnimate, animateRepeat);
} else {
if ( child.nodeType == 1 && child.classList.contains('animated') ) {
t3sbCssAnimate(child, dataAnimate, animateRepeat);
} else {
if (child.nodeName == 'HEADER') {
t3sbCssAnimate(child.nextSibling, dataAnimate, animateRepeat);
}
}
}
// AnimateCss-{data.uid} - Partials/Layouts/Assets.html
var animatedElement = document.getElementById('c{data.uid}'),
animateRepeat = '{animateCssRepeat}',
dataAnimate = '{dataAnimate}';
if (animatedElement) {
t3sbCssAnimate(animatedElement, dataAnimate, animateRepeat);
}
Lightbox - same in News/Detail.html
Baguette Box
// Baguette Box (lightbox) - Partials/Layouts/Assets.html
baguetteBox.run('.gallery, .image-gallery', {
animation: 'fadeIn',
noScrollbars: true
});
Halkabox
// halkabox-{data.uid} (lightbox) - Partials/Layouts/Assets.html
halkaBox.options({animation: 'fade',theme: 'dark'});
halkaBox.run('gallery-{data.uid}');
G Lightbox
// GLightbox (lightbox) - Partials/Layouts/Assets.html
const lightbox = GLightbox({loop: true});