@progressive-development/pd-page 0.1.26 → 0.1.28

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

package/src/PdMenu.js

@@ -184,9 +184,9 @@ export class PdMenu extends LitElement {
   static get properties() {
     return {
       menuItems: { type: Array },
-      topMenuItems: { type: Array },
-      teaserClosed: { type: Boolean }, // TODO: Definiert um scroll position anzugleichen, unabhängiger machen...
-      scrollFix: { type: Number }, // fix scrollposition (for margin/padding/fixed content reasons)
+      topMenuItems: { type: Array },      
+      // At the moment needed for scroll to pistion => Refactor possible?
+      headerSize: { type: Number },
       _activeSecIndex: { type: Number },
       _smallScreen: { type: Boolean, state: true },
       _activeBurgerMenu: { type: Boolean, reflect: true },
@@ -199,11 +199,9 @@ export class PdMenu extends LitElement {
     super();
     this.menuItems = [];
     this.topMenuItems = [];
-    this.teaserClosed = false;
-
     this._activeSecIndex = 0;
     this._activeBurgerMenu = false;
-    this.scrollFix = 30;
+    this.headerSize = 0;
   }
 
   firstUpdated() {
@@ -295,11 +293,12 @@ export class PdMenu extends LitElement {
     this._activeBurgerMenu = !this._activeBurgerMenu;
   }
 
-  _menuItemClicked(e) {
+  _menuItemClicked(e) {   
 
     // get menu item
     const keyParam = e.target.dataset.key;
-    const menuItem = this.menuItems.filter(mi => mi.key === keyParam)[0];   
+    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
@@ -310,6 +309,8 @@ export class PdMenu extends LitElement {
           detail: {
             route: menuItem.route === 'back' ? '' : menuItem.route,
           },
+          composed: true,
+          bubbles: true,
         })
       );
     } else if (menuItem.action) {
@@ -332,6 +333,7 @@ export class PdMenu extends LitElement {
   }
 
   _scrollToContent(section) {
+    
     // check reference
     const selMenuItem =
       this.menuItems.filter(item => item.sec === section)[0] || {};
@@ -340,7 +342,7 @@ export class PdMenu extends LitElement {
       const rect = el.getBoundingClientRect();
       // https://www.mediaevent.de/javascript/scroll.html
       window.scrollBy({
-        top: rect.top - (this.teaserClosed ? this.scrollFix : (350 + this.scrollFix)),
+        top: rect.top - (this.headerSize),
         left: 0,
         behavior: 'smooth',
       });