Creating a 3-level menu using the Htmlix framework - part 2 mobile menu version

In the last article , we considered the creation of a menu for a wide screen, this article describes the code change to display the menu on a mobile screen, in our case it will be <600px. And also consider a new way to search for properties using selectors.

→ The finished example can be viewed at the link.
→ The example code can be downloaded here (files top-menu-group-select-mobail.html, /js/top-menu-group-select-mobail.js)

To begin with, let's consider a situation where there are a lot of properties in the container and the html code starts to grow in size. To fix this situation, you can use css selectors to search:
')
So our code looked like before the use of selectors:

<! --        --> <ul data-menu="array" class="nav-menu-3 pc-width"> <li data-item_level_1="container" data-item_level_1-over='mouseover' data-item_level_1-out='mouseout' > <a href="#" > </a> <ul class="hover-non" data-item_level_1-submenuclass="class" data-item_level_1-group="group" > <!--     data-item_level_2="container"    menu_level_2 - ---> </u> </li> </ul> 

Using selectors, the code can be reduced to:

 <! --        --> <ul data-menu="array" > <li data-item_level_1="container" > <a href="#" > </a> <ul > <!--     data-item_level_2="container"    menu_level_2 - ---> </u> </li> </ul> 

In the code above, we removed all the properties from the html code and left only the data-menu = “array” and data-item_level_1 = “container” in the same way as for the entire menu.

Now change our javascrip code:

 var State = { menu: { container: "item_level_1", ///     item_level_1 this.htmlLink.querySelector(selector)     ///        dom   data-item_level_1="container" props: [ ["submenuclass", "class", "ul:first-of-type"], ["group", "group", "ul:first-of-type"], ["toggle", 'click', ""], ["over", 'mouseover', ""], ["out",'mouseout', ""], ["listner_resize",'emiter-resize', ""], ["listner_click",'emiter-click-item_level_1', ""] ], ///    ,         //      toggle -           'emiter-resize' -   , 'emiter-click-item_level_1' -              toggle       , 'emiter-click-item_level_1'      id       prop methods:{ over: function(){ this.parentContainer.props.submenuclass.removeProp("hover-non"); }, out: function(){ this.parentContainer.props.submenuclass.setProp("hover-non"); }, toggle: function(event){//   //      ,    ,     if(event.target.parentElement.dataset['item_level_1'] == undefined)return; ////   emiter-click-item_level_1       id    this.rootLink.eventProps['emiter-click-item_level_1'].setEventProp(this.parentContainer.id); //   toggle this.prop = null   (  ) if(this.prop == null){ ///      ul this.parentContainer.props.submenuclass.removeProp("hover-non"); this.prop = 1; }else{ this.parentContainer.props.submenuclass.setProp("hover-non"); this.prop = null; } }, listner_resize: function(){ ///   'emiter-resize'     ( this.emiter.getEventProp() )      click  hover("mouseover", "mouseout") var windowSize = this.emiter.getEventProp(); var props = this.parentContainer.props; if(windowSize < 600){ props.over.disableEvent("mouseover"); props.out.disableEvent("mouseout"); props.toggle.enableEvent("click"); }else{ props.over.enableEvent("mouseover"); props.out.enableEvent("mouseout"); props.toggle.disableEvent("click"); } }, //    'emiter-click-item_level_1'         (  '') listner_click: function(){ // id   var id = this.emiter.getEventProp(); //       if(this.parentContainer.id != id){ this.parentContainer.props.submenuclass.setProp("hover-non"); this.parentContainer.props.toggle.prop = null; } } } }, virtualArrayComponents: { ////         menu_level_2:{ container: "item_level_2", props: [ ["group_2","group", "ul:first-of-type"], ["submenuclass", "class", "ul:first-of-type"], ["toggle", 'click', ""], ["over", 'mouseover', ""], ["out",'mouseout', ""],["listner_resize",'emiter-resize', ""], ["listner_click",'emiter-click-item_level_2', ""]], methods: { over: function(){ this.parentContainer.props.submenuclass.removeProp("hover-non"); }, out: function(){ this.parentContainer.props.submenuclass.setProp("hover-non"); }, toggle: function(){ this.rootLink.eventProps['emiter-click-item_level_2'].setEventProp(this.parentContainer.id); if(this.prop == null){ this.parentContainer.props.submenuclass.removeProp("hover-non"); this.prop = 1; }else{ this.parentContainer.props.submenuclass.setProp("hover-non"); this.prop = null; } }, listner_resize: function(){ var windowSize = this.emiter.getEventProp(); var props = this.parentContainer.props; if(windowSize < 600){ props.over.disableEvent("mouseover"); props.out.disableEvent("mouseout"); props.toggle.enableEvent("click"); }else{ props.over.enableEvent("mouseover"); props.out.enableEvent("mouseout"); props.toggle.disableEvent("click"); } }, listner_click: function(){ //console.log(this.emiter.getEventProp()); var id = this.emiter.getEventProp(); if(this.parentContainer.id != id){ this.parentContainer.props.submenuclass.setProp("hover-non"); this.parentContainer.props.toggle.prop = null; } } } }, menu_level_3:{ container: "item_level_3", props: [ ], methods: { } }, menu_level_3_img:{ container: "item_level_3_img", props: [ ], methods: { } }, }, eventEmiters: { ['emiter-resize']: {//     prop: null, }, ['emiter-click-item_level_1']: { prop: 'id', //   id      }, ['emiter-click-item_level_2']: { prop: 'id', //   id       } } } window.onload = function(){ ///  HTMLix var HM = new HTMLixState(State); HM.eventProps['emiter-resize'].setEventProp(window.innerWidth);//      //  ['emiter-resize']    window.onresize = function(){ HM.eventProps['emiter-resize'].setEventProp(window.innerWidth) } console.log(HM); } 

The code above can be reduced to almost two by removing the same methods in the object with the general stateMethods methods and calling them from there this.rootLink.stateMethods ["method name"] in each container. But here, for simplicity of understanding, this more extensive version is shown.