@progressive-development/pd-page 0.1.24 → 0.1.26

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.24",
+  "version": "0.1.26",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -117,15 +117,18 @@ export class PdMenu extends LitElement {
         --pd-icon-stroke-col: var(--pd-default-bg-col);
         --pd-icon-col: var(--pd-default-dark-col);        
         pointer-events: none;
-      }      
+      }               
 
       /* An anderer Stelle teils das Image von außen gestylt, das macht es wahrschweinlich
-        einfacher als hier einzeln zu stylen. noch zu prüfen */
+        einfacher als hier einzeln zu stylen. noch zu prüfen 
+        */
       ::slotted(.logo) {
         max-width: var(--pd-menu-logo-maxwidth, 8rem);
         width: 100%;
-        padding: var(--pd-menu-logo-padding, 2em);
+        padding: var(--pd-menu-logo-padding, 2em);        
+        fill: var(--pd-menu-logo-color, #067394);
       }
+      
 
       /**
        * Style for drop down menu on small screens.
@@ -204,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) => {
@@ -221,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(() => {
@@ -231,9 +234,6 @@ export class PdMenu extends LitElement {
         ticking = true;
       }
     });
-  }
-
-  render() {
 
     installMediaQueryWatcher(`(max-width: 700px)`, matches => {
       if (matches) {
@@ -242,10 +242,13 @@ export class PdMenu extends LitElement {
         this._smallScreen = false;
       }
     });
+  }
 
-    return html`
-    <div class="menu-container">
-      <slot class="logo-icon" name="slotLogo"></slot>
+  render() {    
+
+    return html`    
+    <div class="menu-container"> 
+      <slot @click="${PdMenu._scrollToTop}" name="slotLogo"></slot>      
       <ul>
         ${this._renderItems(this._smallScreen ? [...this.menuItems, ...this.topMenuItems] : this.menuItems, true, this._smallScreen)}
       </ul>
@@ -272,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
@@ -294,20 +296,25 @@ export class PdMenu extends LitElement {
   }
 
   _menuItemClicked(e) {
-    
-    const secParam = e.target.dataset.sec;
-    const routeParam = e.target.dataset.route;
-    if (secParam !== 'undefined' && secParam !== '') {
+
+    // get menu item
+    const keyParam = e.target.dataset.key;
+    const menuItem = this.menuItems.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,
           },
         })
       );
+    } else if (menuItem.action) {
+      // call action
+      menuItem.action();
     }
 
     // close menu if open