157 lines
4.0 KiB
JavaScript
157 lines
4.0 KiB
JavaScript
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');
|
|
// });
|
|
// });
|
|
});
|
|
}
|
|
};
|
|
}();
|