stack timeout listener (#23)

* POC - stack all event listener and timeout event

* remove unused comment line

* naming clearAllEventListener

* var -> let

src/event.js

@@ -1,27 +1,43 @@
 import { isTouch } from './utils'
 
 export const customEvents = popup => {
-	const onMouseLeave = e => {
+
+	let eventListenerStack = [],
+		timeoutStack = []
+	const addTimeout = ( func, timeout ) => {
+			const id = setTimeout( func, timeout )
+			timeoutStack.push( id )
+			return id
+		},
+		clearAllTimeout = () => {
+			timeoutStack.forEach( timeoutId => {
+				clearTimeout( timeoutId )
+			} )
+			timeoutStack = []
+		},
+		addEventListener = ( target, type, listener, options = undefined ) => {
+			target.addEventListener( type, listener, options )
+			eventListenerStack.push( [ target, type, listener, options ] )
+		},
+		clearAllEventListener = () => {
+			eventListenerStack.forEach( eventListener => {
+				const [ target, type, listener, options ] = eventListener
+				target.removeEventListener( type, listener, options )
+			} )
+			eventListenerStack = []
+		},
+		onMouseLeave = e => {
 			const toElement = e.toElement || e.relatedTarget || e.target,
 				previewElement = popup.element.currentTargetElement
 
 			if ( toElement !== previewElement && !popup.element.contains( toElement ) ) {
 				let timeoutId
 				const persistPopup = () => {
-						popup.element.removeEventListener( 'mouseenter', persistPopup )
-						popup.timeoutId = null
-						clearTimeout( timeoutId )
-					},
+					clearTimeout( timeoutId )
+				}
 
-					hidePopup = () => {
-						popup.element.removeEventListener( 'mouseenter', persistPopup )
-						popup.timeoutId = null
-						popup.hide()
-					}
-
-				timeoutId = setTimeout( hidePopup, 300 )
-				popup.element.addEventListener( 'mouseenter', persistPopup )
-				popup.timeoutId = timeoutId
+				timeoutId = addTimeout( popup.hide, 300 )
+				addEventListener( popup.element, 'mouseenter', persistPopup )
 			}
 		},
 
@@ -36,16 +52,9 @@ export const customEvents = popup => {
 			}
 		},
 
-		onHide = element => {
-			element.component.closeBtn.removeEventListener( 'click', popup.hide )
-			element.component.readMore.removeEventListener( 'click', onExpand )
-
-			if ( isTouch ) {
-				document.removeEventListener( 'touchstart', onTouchStart, true )
-			} else {
-				element.removeEventListener( 'mouseleave', onMouseLeave )
-				element.currentTargetElement.removeEventListener( 'mouseleave', onMouseLeave )
-			}
+		onHide = () => {
+			clearAllEventListener()
+			clearAllTimeout()
 		},
 
 		onShow = element => {
@@ -61,14 +70,14 @@ export const customEvents = popup => {
 				onExpand( element )
 			}
 
-			element.component.closeBtn.addEventListener( 'click', popup.hide )
-			element.component.readMore.addEventListener( 'click', onExpand )
+			addEventListener( element.component.closeBtn, 'click', popup.hide )
+			addEventListener( element.component.readMore, 'click', onExpand )
 
 			if ( isTouch ) {
-				document.addEventListener( 'touchstart', onTouchStart, true )
+				addEventListener( document, 'touchstart', onTouchStart, true )
 			} else {
-				element.addEventListener( 'mouseleave', onMouseLeave )
-				element.currentTargetElement.addEventListener( 'mouseleave', onMouseLeave )
+				addEventListener( element, 'mouseleave', onMouseLeave )
+				addEventListener( element.currentTargetElement, 'mouseleave', onMouseLeave )
 			}
 		}
 

src/index.js

@@ -16,10 +16,7 @@ function init( {
 			createPopup( popupContainer ),
 		events = customEvents( popup ),
 		showPopup = ( { target } ) => {
-			if ( popup.timeoutId ) {
-				clearTimeout( popup.timeoutId )
-				popup.timeoutId = null
-			}
+			popup.hide()
 
 			const title = target.getAttribute( 'data-wp-title' ) || target.textContent,
 				lang = target.getAttribute( 'data-wp-lang' ) || globalLang