KeymailSpecials2/wwwroot/js/modules/hoveranimations.js

157 lines
4.0 KiB
JavaScript
Raw Normal View History

2024-02-19 12:54:56 +00:00
CNVS.HoverAnimations = function() {
var __core = SEMICOLON.Core;
var _t, _x;
var _showOverlay = function(params) {
clearTimeout(_x);
_t = setTimeout( function() {
params.element.classList.add( 'not-animated' );
(params.elAnimateOut + ' not-animated').split(" ").forEach( function(_class) {
params.element.classList.remove(_class);
});
(params.elAnimate + ' animated').split(" ").forEach( function(_class) {
params.element.classList.add(_class);
});
}, params.elDelayT );
};
var _hideOverlay = function(params) {
params.element.classList.add( 'not-animated' );
(params.elAnimate + ' not-animated').split(" ").forEach( function(_class) {
params.element.classList.remove(_class);
});
(params.elAnimateOut + ' animated').split(" ").forEach( function(_class) {
params.element.classList.add(_class);
});
if( params.elReset == 'true' ) {
_x = setTimeout( function() {
(params.elAnimateOut + ' animated').split(" ").forEach( function(_class) {
params.element.classList.remove(_class);
});
params.element.classList.add( 'not-animated' );
}, Number( params.elSpeed ) );
}
clearTimeout(_t);
};
var _isInsideElement = function(touch){
var rect = element.getBoundingClientRect();
return (
touch.clientX >= rect.left &&
touch.clientX <= rect.right &&
touch.clientY >= rect.top &&
touch.clientY <= rect.bottom
);
};
return {
init: function(selector) {
if( __core.getSelector(selector, false, false).length < 1 ){
return true;
}
__core.initFunction({ class: 'has-plugin-hoveranimation', event: 'pluginHoverAnimationReady' });
selector = __core.getSelector( selector, false );
if( selector.length < 1 ){
return true;
}
selector.forEach( function(element) {
var elAnimate = element.getAttribute( 'data-hover-animate' ),
elAnimateOut = element.getAttribute( 'data-hover-animate-out' ) || 'fadeOut',
elSpeed = element.getAttribute( 'data-hover-speed' ) || 600,
elDelay = element.getAttribute( 'data-hover-delay' ),
elParent = element.getAttribute( 'data-hover-parent' ),
elReset = element.getAttribute( 'data-hover-reset' ) || 'false',
elMobile = element.getAttribute( 'data-hover-mobile' ) || 'true';
if( elMobile != 'true' ) {
if( elMobile == 'false' ) {
if( !__core.getVars.elBody.classList.contains('device-up-lg') ) {
return true;
}
} else {
if( !__core.getVars.elBody.classList.contains('device-up-' + elMobile) ) {
return true;
}
}
}
element.classList.add( 'not-animated' );
if( !elParent ) {
if( element.closest( '.bg-overlay' ) ) {
elParent = element.closest( '.bg-overlay' );
} else {
elParent = element;
}
} else {
if( elParent == 'self' ) {
elParent = element;
} else {
elParent = element.closest( elParent );
}
}
var elDelayT = 0;
if( elDelay ) {
elDelayT = Number( elDelay );
}
if( elSpeed ) {
element.style.animationDuration = Number( elSpeed ) + 'ms';
}
var params = {
element: element,
elAnimate: elAnimate,
elAnimateOut: elAnimateOut,
elSpeed: elSpeed,
elDelayT: elDelayT,
elParent: elParent,
elReset: elReset,
}
elParent.addEventListener( 'mouseenter', function(){
_showOverlay(params);
}, false);
elParent.addEventListener( 'mouseleave', function(){
_hideOverlay(params);
}, false);
// elParent.addEventListener( 'touchstart', function(e){
// e.preventDefault();
// _showOverlay(params);
// elParent.addEventListener('touchmove', function(e){
// if (!_isInsideElement(e.touches[0])) {
// _hideOverlay(params);
// elParent.removeEventListener('touchmove');
// }
// });
// elParent.addEventListener('touchend', function(){
// _hideOverlay(params);
// elParent.removeEventListener('touchmove');
// elParent.removeEventListener('touchend');
// });
// });
});
}
};
}();