TheShopCritics2/TSC2/wwwroot/js/modules/animations.js

96 lines
2.6 KiB
JavaScript

CNVS.Animations = function() {
var __core = SEMICOLON.Core;
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-animations', event: 'pluginAnimationsReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
var SELECTOR = '[data-animate]',
ANIMATE_CLASS_NAME = 'animated';
var isAnimated = function(element) {
element.classList.contains(ANIMATE_CLASS_NAME);
};
var intersectionObserver = new IntersectionObserver(
function(entries, observer) {
entries.forEach( function(entry) {
var element = entry.target,
elAnimation = element.getAttribute('data-animate'),
elAnimOut = element.getAttribute('data-animate-out'),
elAnimDelay = element.getAttribute('data-delay'),
elAnimDelayOut = element.getAttribute('data-delay-out'),
elAnimDelayTime = 0,
elAnimDelayOutTime = 3000,
elAnimations = elAnimation.split(' ');
if( element.closest('.fslider.no-thumbs-animate') ) {
return true;
}
if( element.closest('.swiper-slide') ) {
return true;
}
if( elAnimDelay ) {
elAnimDelayTime = Number( elAnimDelay ) + 500;
} else {
elAnimDelayTime = 500;
}
if( elAnimOut && elAnimDelayOut ) {
elAnimDelayOutTime = Number( elAnimDelayOut ) + elAnimDelayTime;
}
if( !element.classList.contains('animated') ) {
element.classList.add('not-animated');
if( entry.intersectionRatio > 0 ) {
setTimeout( function() {
element.classList.remove('not-animated');
elAnimations.forEach( function(item) {
element.classList.add(item);
});
element.classList.add('animated');
}, elAnimDelayTime);
if( elAnimOut ) {
setTimeout( function() {
elAnimations.forEach( function(item) {
element.classList.remove(item);
});
elAnimOut.split(' ').forEach( function(item) {
element.classList.add(item);
});
}, elAnimDelayOutTime);
}
}
}
if( !element.classList.contains('not-animated') ) {
observer.unobserve(element);
}
});
}
);
var elements = [].filter.call(document.querySelectorAll(SELECTOR), function(element) {
return !isAnimated(element, ANIMATE_CLASS_NAME);
});
elements.forEach( function(element) {
return intersectionObserver.observe(element);
});
}
};
}();