TheShopCritics2/TSC2/wwwroot/js/modules/hoveranimations.js

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');
				// 	});
				// });
			});
		}
	};
}();