first commit

public/js/modules/hoveranimations.js

@@ -0,0 +1,156 @@
+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');
+				// 	});
+				// });
+			});
+		}
+	};
+}();