@websy/websy-designs 1.4.16 → 1.4.18

package/dist/websy-designs-es6.debug.js

@@ -194,7 +194,7 @@ class ButtonGroup {
         }
         this.options.activeItem = index
         if (this.options.onActivate) {
-          this.options.onActivate(this.options.items[index], index)
+          this.options.onActivate(this.options.items[index], index, event)
         }
         const el = document.getElementById(this.elementId)
         let buttons = Array.from(el.querySelectorAll('.websy-button-group-item'))
@@ -2510,6 +2510,35 @@ class WebsyNavigationMenu {
       this.render()      
     }    
   }
+  activateItem (id) {
+    const el = document.getElementById(id)
+    if (el) {
+      el.classList.add('active')
+      let parent = el.parentElement
+      while (parent) {
+        if (parent.tagName === 'UL') {
+          parent.classList.remove('websy-menu-collapsed')
+          parent = parent.parentElement
+        }
+        else if (parent.tagName === 'LI') {
+          parent = parent.parentElement
+        }
+        else {
+          parent = null
+        }
+      }
+    }
+  }
+  collapseAll () {
+    const el = document.getElementById(this.elementId)
+    const menuEls = el.querySelectorAll('.websy-child-list')
+    const headerEls = el.querySelectorAll('.websy-menu-header')
+    Array.from(menuEls).forEach(e => e.classList.add('websy-menu-collapsed')) 
+    Array.from(headerEls).forEach(e => {
+      e.classList.remove('active') 
+      e.classList.remove('menu-open')
+    }) 
+  }
   flattenItems (index, items, level = 0, path = '') {
     if (items[index]) {
       this.lowestLevel = Math.max(level, this.lowestLevel)
@@ -2534,10 +2563,16 @@ class WebsyNavigationMenu {
       if (event.target.classList.contains('trigger-item') && item.level === this.lowestLevel) {
         this.toggleMobileMenu('remove')
       } 
-      if (item.hasChildren === true) {
+      if (item && item.hasChildren === true) {
         event.target.classList.toggle('menu-open')
         this.toggleMenu(item.id)
       }
+      else {
+        const el = document.getElementById(this.elementId)
+        const allEls = el.querySelectorAll('.websy-menu-header')
+        Array.from(allEls).forEach(e => e.classList.remove('active'))
+        event.target.classList.add('active')
+      }      
     }    
     if (event.target.classList.contains('websy-menu-mask')) {
       this.toggleMobileMenu()
@@ -2621,6 +2656,23 @@ class WebsyNavigationMenu {
         html += `</div>`
       }
       el.innerHTML = html
+      // open the menu if an item is set as 'active'
+      const activeEl = el.querySelector('.websy-menu-header.active')
+      if (activeEl) {
+        let parent = activeEl.parentElement
+        while (parent) {
+          if (parent.tagName === 'UL') {
+            parent.classList.remove('websy-menu-collapsed')
+            parent = parent.parentElement
+          }
+          else if (parent.tagName === 'LI') {
+            parent = parent.parentElement
+          }
+          else {
+            parent = null
+          }
+        }
+      }
       if (this.options.enableSearch === true) {
         this.search = new WebsyDesigns.Search(`${this.elementId}_search`, Object.assign({}, {
           onSearch: this.handleSearch.bind(this),
@@ -2649,7 +2701,7 @@ class WebsyNavigationMenu {
       }
       html += `
 			<li class='websy-${this.options.orientation}-list-item ${items[i].alwaysOpen === true ? 'always-open' : ''}'>
-				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
+				<div class='websy-menu-header websy-menu-level-${level} ${items[i].classes || ''} ${selected} ${active}' 
           id='${blockId}' 
           data-id='${currentBlock}'
           data-path='${items[i].path}'

package/dist/websy-designs-es6.js

@@ -250,7 +250,7 @@ var ButtonGroup = /*#__PURE__*/function () {
           this.options.activeItem = index;
 
           if (this.options.onActivate) {
-            this.options.onActivate(this.options.items[index], index);
+            this.options.onActivate(this.options.items[index], index, event);
           }
 
           var el = document.getElementById(this.elementId);
@@ -2642,6 +2642,41 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
   }
 
   _createClass(WebsyNavigationMenu, [{
+    key: "activateItem",
+    value: function activateItem(id) {
+      var el = document.getElementById(id);
+
+      if (el) {
+        el.classList.add('active');
+        var parent = el.parentElement;
+
+        while (parent) {
+          if (parent.tagName === 'UL') {
+            parent.classList.remove('websy-menu-collapsed');
+            parent = parent.parentElement;
+          } else if (parent.tagName === 'LI') {
+            parent = parent.parentElement;
+          } else {
+            parent = null;
+          }
+        }
+      }
+    }
+  }, {
+    key: "collapseAll",
+    value: function collapseAll() {
+      var el = document.getElementById(this.elementId);
+      var menuEls = el.querySelectorAll('.websy-child-list');
+      var headerEls = el.querySelectorAll('.websy-menu-header');
+      Array.from(menuEls).forEach(function (e) {
+        return e.classList.add('websy-menu-collapsed');
+      });
+      Array.from(headerEls).forEach(function (e) {
+        e.classList.remove('active');
+        e.classList.remove('menu-open');
+      });
+    }
+  }, {
     key: "flattenItems",
     value: function flattenItems(index, items) {
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -2677,9 +2712,16 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           this.toggleMobileMenu('remove');
         }
 
-        if (item.hasChildren === true) {
+        if (item && item.hasChildren === true) {
           event.target.classList.toggle('menu-open');
           this.toggleMenu(item.id);
+        } else {
+          var el = document.getElementById(this.elementId);
+          var allEls = el.querySelectorAll('.websy-menu-header');
+          Array.from(allEls).forEach(function (e) {
+            return e.classList.remove('active');
+          });
+          event.target.classList.add('active');
         }
       }
 
@@ -2779,7 +2821,24 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           html += "</div>";
         }
 
-        el.innerHTML = html;
+        el.innerHTML = html; // open the menu if an item is set as 'active'
+
+        var activeEl = el.querySelector('.websy-menu-header.active');
+
+        if (activeEl) {
+          var parent = activeEl.parentElement;
+
+          while (parent) {
+            if (parent.tagName === 'UL') {
+              parent.classList.remove('websy-menu-collapsed');
+              parent = parent.parentElement;
+            } else if (parent.tagName === 'LI') {
+              parent = parent.parentElement;
+            } else {
+              parent = null;
+            }
+          }
+        }
 
         if (this.options.enableSearch === true) {
           this.search = new WebsyDesigns.Search("".concat(this.elementId, "_search"), _extends({}, {
@@ -2814,7 +2873,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
           items[i].classes = items[i].classes.join(' ');
         }
 
-        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n          id='").concat(blockId, "' \n          data-id='").concat(currentBlock, "'\n          data-path='").concat(items[i].path, "'\n          data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n          data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n          data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n          style='padding-left: ").concat(level * this.options.childIndentation, "px'\n          ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
+        html += "\n\t\t\t<li class='websy-".concat(this.options.orientation, "-list-item ").concat(items[i].alwaysOpen === true ? 'always-open' : '', "'>\n\t\t\t\t<div class='websy-menu-header websy-menu-level-").concat(level, " ").concat(items[i].classes || '', " ").concat(selected, " ").concat(active, "' \n          id='").concat(blockId, "' \n          data-id='").concat(currentBlock, "'\n          data-path='").concat(items[i].path, "'\n          data-menu-id='").concat(this.elementId, "_").concat(currentBlock, "_list'\n          data-popout-id='").concat(level > 1 ? block : currentBlock, "'\n          data-text='").concat(items[i].isLink !== true ? items[i].text : '', "'\n          style='padding-left: ").concat(level * this.options.childIndentation, "px'\n          ").concat(items[i].attributes && items[i].attributes.join(' ') || '', "\n        >\n      ");
 
         if (this.options.orientation === 'horizontal') {
           html += items[i].text;