init( _menus ) {
      const self = this;

      if ( ! Array.isArray( _menus ) || ! _menus.length ) {
         self.menuError( '[menuHandler] [general] Initialization requires an array of menus to be passed as an argument. see documentation' );
      }

      _menus.forEach( function ( _menu ) {
         const menuTemplate = {
            name: null,
            open: null,
            close: null,
            enterFocus: null,
            exitFocus: null,
            activeOpen: null,
            activeClose: null,
            activeEnterFocus: null,
            activeExitFocus: null,
            container: null,
            innerContainer: null,
            loop: false,
            type: 'menu', // menu, dropdown, popup // TODO: add to README
            isOpen: false, // run time
            isPinned: false, // run time
            isMobile: false, // run time
            openDelay: 0,
            closeDelay: 0,
            debounce: 20,
            openOnMouseEnter: false,
            transitionDelay: 0, // run time
            transitionDuration: 0, // run time
            orientation: 'horizontal', // TODO: add to README
            direction: null, // TODO: add to README
            menuFunc: self.menuFunc,
            pin: false,
            preventBodyScroll: true,
            mobile: {
               breakpoint: '667px',
               open: null,
               close: null,
               pin: false,
               enterFocus: null,
               exitFocus: null,
               orientation: 'vertical',
               preventBodyScroll: true,
            },
            on: {
               beforeInit: null,
               afterInit: null,
               beforeOpen: null,
               afterOpen: null,
               beforeClose: null,
               afterClose: null,
               beforePinOpen: null,
               afterPinOpen: null,
               beforePinClose: null,
               afterPinClose: null,
            },
            submenuOptions: {
               isEnabled: true,
               menuFunc: self.submenuFunc,
               openOnMouseEnter: false,
               closeOnBlur: true,
               closeDelay: 0,
               orientation: 'vertical',
               closeSubmenusOnOpen: true,
               mobile: {
                  closeOnBlur: true,
                  closeDelay: 0,
                  closeSubmenusOnOpen: true,
                  orientation: 'vertical',
               },
               on: {
                  beforeOpen: null,
                  afterOpen: null,
                  beforeClose: null,
                  afterClose: null,
               }
            },
            actions: {},
            submenus: {},
         };

         if ( ! _menu.name ) {
            menuTemplate.name = Math.random().toString( 36 ).substr( 2 ); // create a random menu name from a random number converted to base 36.
         } else {
            menuTemplate.name = _menu.name;
         }

         if ( ! _menu.elements ) {
            self.menuError( `[menuHandler] [menu:${menuTemplate.name}] Error: menu elements object is missing` );
         }
         self.initMenuElements( menuTemplate, _menu.elements );

         if ( _menu.mobile && _menu.mobile.elements ) {
            self.initMenuMobileElements( menuTemplate, _menu.mobile.elements );
         }

         self.initMenuOptions( menuTemplate, _menu );

         menuTemplate.direction = getComputedStyle( menuTemplate.container ).direction;

         // ! important: in order to find the event and remove it by removeEventListener, 
         // we need to pass a reference to the function and bind it to the menuHandler object
         menuTemplate.toggleMenu = self.toggleMenu.bind( self, menuTemplate );

         if ( self.checkRequiredElement( menuTemplate ) ) {
            self.menus.push( menuTemplate );
         }
      } );

      if ( ! self.menus.length ) {
         self.menuError( `[menuHandler] [general] Error: no menus initialized` );
      }

      self.initMenus();
   }
// several menus can't be active at a time.

several menus can't be active at a time.
several menus can ' t be active at a time .
init( _menus ) {
      const self = this;
      if ( ! Array.isArray( _menus ) || ! _menus.length ) {
         self.menuError( '[menuHandler] [general] Initialization requires an array of menus to be passed as an argument. see documentation' );
      }
      _menus.forEach( function ( _menu ) {
         const menuTemplate = {
            name: null,
            open: null,
            close: null,
            enterFocus: null,
            exitFocus: null,
            activeOpen: null,
            activeClose: null,
            activeEnterFocus: null,
            activeExitFocus: null,
            container: null,
            innerContainer: null,
            loop: false,
            type: 'menu', 
            isOpen: false, 
            isPinned: false, 
            isMobile: false, 
            openDelay: 0,
            closeDelay: 0,
            debounce: 20,
            openOnMouseEnter: false,
            transitionDelay: 0, 
            transitionDuration: 0, 
            orientation: 'horizontal', 
            direction: null, 
            menuFunc: self.menuFunc,
            pin: false,
            preventBodyScroll: true,
            mobile: {
               breakpoint: '667px',
               open: null,
               close: null,
               pin: false,
               enterFocus: null,
               exitFocus: null,
               orientation: 'vertical',
               preventBodyScroll: true,
            },
            on: {
               beforeInit: null,
               afterInit: null,
               beforeOpen: null,
               afterOpen: null,
               beforeClose: null,
               afterClose: null,
               beforePinOpen: null,
               afterPinOpen: null,
               beforePinClose: null,
               afterPinClose: null,
            },
            submenuOptions: {
               isEnabled: true,
               menuFunc: self.submenuFunc,
               openOnMouseEnter: false,
               closeOnBlur: true,
               closeDelay: 0,
               orientation: 'vertical',
               closeSubmenusOnOpen: true,
               mobile: {
                  closeOnBlur: true,
                  closeDelay: 0,
                  closeSubmenusOnOpen: true,
                  orientation: 'vertical',
               },
               on: {
                  beforeOpen: null,
                  afterOpen: null,
                  beforeClose: null,
                  afterClose: null,
               }
            },
            actions: {},
            submenus: {},
         };
         if ( ! _menu.name ) {
            menuTemplate.name = Math.random().toString( 36 ).substr( 2 ); 
         } else {
            menuTemplate.name = _menu.name;
         }
         if ( ! _menu.elements ) {
            self.menuError( `[menuHandler] [menu:${menuTemplate.name}] Error: menu elements object is missing` );
         }
         self.initMenuElements( menuTemplate, _menu.elements );
         if ( _menu.mobile && _menu.mobile.elements ) {
            self.initMenuMobileElements( menuTemplate, _menu.mobile.elements );
         }
         self.initMenuOptions( menuTemplate, _menu );
         menuTemplate.direction = getComputedStyle( menuTemplate.container ).direction;
         menuTemplate.toggleMenu = self.toggleMenu.bind( self, menuTemplate );
         if ( self.checkRequiredElement( menuTemplate ) ) {
            self.menus.push( menuTemplate );
         }
      } );
      if ( ! self.menus.length ) {
         self.menuError( `[menuHandler] [general] Error: no menus initialized` );
      }
      self.initMenus();
   }
init ( _menus ) { const self = this ; if ( ! Array . isArray ( _menus ) || ! _menus . length ) { self . menuError ( '[menuHandler] [general] Initialization requires an array of menus to be passed as an argument. see documentation' ) ; } _menus . forEach ( function ( _menu ) { const menuTemplate = { name : null , open : null , close : null , enterFocus : null , exitFocus : null , activeOpen : null , activeClose : null , activeEnterFocus : null , activeExitFocus : null , container : null , innerContainer : null , loop : false , type : 'menu' , isOpen : false , isPinned : false , isMobile : false , openDelay : 0 , closeDelay : 0 , debounce : 20 , openOnMouseEnter : false , transitionDelay : 0 , transitionDuration : 0 , orientation : 'horizontal' , direction : null , menuFunc : self . menuFunc , pin : false , preventBodyScroll : true , mobile : { breakpoint : '667px' , open : null , close : null , pin : false , enterFocus : null , exitFocus : null , orientation : 'vertical' , preventBodyScroll : true , } , on : { beforeInit : null , afterInit : null , beforeOpen : null , afterOpen : null , beforeClose : null , afterClose : null , beforePinOpen : null , afterPinOpen : null , beforePinClose : null , afterPinClose : null , } , submenuOptions : { isEnabled : true , menuFunc : self . submenuFunc , openOnMouseEnter : false , closeOnBlur : true , closeDelay : 0 , orientation : 'vertical' , closeSubmenusOnOpen : true , mobile : { closeOnBlur : true , closeDelay : 0 , closeSubmenusOnOpen : true , orientation : 'vertical' , } , on : { beforeOpen : null , afterOpen : null , beforeClose : null , afterClose : null , } } , actions : { } , submenus : { } , } ; if ( ! _menu . name ) { menuTemplate . name = Math . random ( ) . toString ( 36 ) . substr ( 2 ) ; } else { menuTemplate . name = _menu . name ; } if ( ! _menu . elements ) { self . menuError ( ` ${ menuTemplate . name } ` ) ; } self . initMenuElements ( menuTemplate , _menu . elements ) ; if ( _menu . mobile && _menu . mobile . elements ) { self . initMenuMobileElements ( menuTemplate , _menu . mobile . elements ) ; } self . initMenuOptions ( menuTemplate , _menu ) ; menuTemplate . direction = getComputedStyle ( menuTemplate . container ) . direction ; menuTemplate . toggleMenu = self . toggleMenu . bind ( self , menuTemplate ) ; if ( self . checkRequiredElement ( menuTemplate ) ) { self . menus . push ( menuTemplate ) ; } } ) ; if ( ! self . menus . length ) { self . menuError ( ` ` ) ; } self . initMenus ( ) ; }
several menus can't be active at a time.
several menus can ' t be active at a time .
// menu, dropdown, popup // TODO: add to README
 // run time
 // run time
 // run time
 // run time
 // run time
 // TODO: add to README
 // TODO: add to README
 // create a random menu name from a random number converted to base 36.
 // ! important: in order to find the event and remove it by removeEventListener, 
 // we need to pass a reference to the function and bind it to the menuHandler object
