#se-menu menu item click functionality handled

src/editor/components/seMenu.js

@@ -9,10 +9,12 @@ template.innerHTML = `
   :host {
     padding: 0px;
   }
+  elix-menu-button::part(menu) {
+    background-color: #eee !important;
+  }
   </style>
   
   <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
-    welcome
     <slot></slot>
   </elix-menu-button>
   
@@ -41,9 +43,11 @@ export class SeMenu extends HTMLElement {
     console.log("connectedCallback");
     this.$menu.addEventListener('openedchange', (e) => {
       e.preventDefault();
-      console.log("came");
+      const selectedItem = e?.detail?.closeResult;
+      if (selectedItem !== undefined && selectedItem?.id !== undefined) {
+        document.getElementById(selectedItem.id).click();
+      }
     });
-    //this.dispatchEvent(this.$event);
   }
 }
 

src/editor/components/seMenuItem.js

@@ -5,10 +5,13 @@ import 'elix/define/MenuItem.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  </style>
-  
-  <elix-menu-item>New</elix-menu-item>
-  
+  </style>  
+  <elix-menu-item>
+    <div>
+      <img src="" alt="icon" style="display:none;" /> 
+      <span></span>
+    </div>
+  </elix-menu-item>  
 `;
 /**
  * @class SeMenuItem
@@ -22,7 +25,95 @@ export class SeMenuItem extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.appendChild(template.content.cloneNode(true));
-    // this.$menu = this._shadowRoot.querySelector('elix-menu');
+    this.$img = this._shadowRoot.querySelector('img');
+    this.$label = this._shadowRoot.querySelector('span');
+    this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['label', 'src'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'src':
+      this.$img.setAttribute('src', newValue);
+      this.$img.style.display = 'block';
+      break;
+    case 'label':
+      const shortcut = this.getAttribute('shortcut');
+      this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`;
+      this.$img.remove();
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.getAttribute('label');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    // capture shortcuts
+    const shortcut = this.getAttribute('shortcut');
+    if (shortcut) {
+      // register the keydown event
+      document.addEventListener('keydown', (e) => {
+        // only track keyboard shortcuts for the body containing the SVG-Editor
+        if (e.target.nodeName !== 'BODY') return;
+        // normalize key
+        const key = `${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toUpperCase()}`;
+        if (shortcut !== key) return;
+        // launch the click event
+        if (this.id) {
+          document.getElementById(this.id).click();
+        }
+        e.preventDefault();
+      });
+    }
   }
 }