@progressive-development/pd-page 0.1.25 → 0.1.27

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -207,7 +207,7 @@ export class PdMenu extends LitElement {
   }
 
   firstUpdated() {
-    const doSomething = scrollPos => {
+    const doSomething = (scrollPos) => {
       let activeSecIndex = -1;
       let distance = scrollPos > 300 ? 5000 : 300; // start value, define when first item is active
       this.menuItems.forEach((item, index) => {
@@ -224,7 +224,7 @@ export class PdMenu extends LitElement {
     };
 
     let ticking = false;
-    document.addEventListener('scroll', () => {
+    this.addEventListener('scroll', () => {
       const lastKnownScrollPosition = window.scrollY;
       if (!ticking) {
         window.requestAnimationFrame(() => {
@@ -234,9 +234,6 @@ export class PdMenu extends LitElement {
         ticking = true;
       }
     });
-  }
-
-  render() {
 
     installMediaQueryWatcher(`(max-width: 700px)`, matches => {
       if (matches) {
@@ -245,6 +242,9 @@ export class PdMenu extends LitElement {
         this._smallScreen = false;
       }
     });
+  }
+
+  render() {    
 
     return html`    
     <div class="menu-container"> 
@@ -275,8 +275,7 @@ export class PdMenu extends LitElement {
               class="item ${checkActiveClass && this._activeSecIndex === index + 1
                 ? 'active'
                 : ''}"
-              data-sec="${item.sec}"
-              data-route="${item.route}"
+              data-key="${item.key}"              
               @click="${this._menuItemClicked}"
             >
             ${item.icon && !disableIcons
@@ -296,21 +295,29 @@ export class PdMenu extends LitElement {
     this._activeBurgerMenu = !this._activeBurgerMenu;
   }
 
-  _menuItemClicked(e) {
-    
-    const secParam = e.target.dataset.sec;
-    const routeParam = e.target.dataset.route;
-    if (secParam !== 'undefined' && secParam !== '') {
+  _menuItemClicked(e) {   
+
+    // get menu item
+    const keyParam = e.target.dataset.key;
+    const menuItem = this.menuItems.filter(mi => mi.key === keyParam)[0] 
+      || this.topMenuItems.filter(mi => mi.key === keyParam)[0];   
+
+    if (menuItem.sec && menuItem.sec !== '') {
       // TODO: Check if element exists
-      this._scrollToContent(secParam);
-    } else if (routeParam !== 'undefined' && routeParam !== '') {
+      this._scrollToContent(menuItem.sec);
+    } else if (menuItem.route && menuItem.route !== '') {
       this.dispatchEvent(
         new CustomEvent('route-event', {
           detail: {
-            route: routeParam === 'back' ? '' : routeParam,
+            route: menuItem.route === 'back' ? '' : menuItem.route,
           },
+          composed: true,
+          bubbles: true,
         })
       );
+    } else if (menuItem.action) {
+      // call action
+      menuItem.action();
     }
 
     // close menu if open