From 3d037f110af255673c93381bc7a35cc1898bbcd9 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Thu, 3 Dec 2020 19:34:51 +0530
Subject: [PATCH] #se-menu menu work starting code added

---
 src/editor/components/index.js      |  2 ++
 src/editor/components/seMenu.js     | 51 +++++++++++++++++++++++++++++
 src/editor/components/seMenuItem.js | 30 +++++++++++++++++
 src/editor/index.html               |  7 ++++
 4 files changed, 90 insertions(+)
 create mode 100644 src/editor/components/seMenu.js
 create mode 100644 src/editor/components/seMenuItem.js

diff --git a/src/editor/components/index.js b/src/editor/components/index.js
index f26f829e..a29c8d01 100644
--- a/src/editor/components/index.js
+++ b/src/editor/components/index.js
@@ -5,3 +5,5 @@ import './seDropdown.js';
 import './seInput.js';
 import './seSpinInput.js';
 import './sePalette.js';
+import './seMenu.js';
+import './seMenuItem.js';
diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js
new file mode 100644
index 00000000..bdbbe6f8
--- /dev/null
+++ b/src/editor/components/seMenu.js
@@ -0,0 +1,51 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/MenuButton.js';
+import 'elix/define/MenuItem.js';
+
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  :host {
+    padding: 0px;
+  }
+  </style>
+  
+  <elix-menu-button id="sampleMenuButton" aria-label="Sample Menu">
+    welcome
+    <slot></slot>
+  </elix-menu-button>
+  
+`;
+/**
+ * @class SeMenu
+ */
+export class SeMenu extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // 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-button');
+    console.log(this.$menu);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    console.log("connectedCallback");
+    this.$menu.addEventListener('openedchange', (e) => {
+      e.preventDefault();
+      console.log("came");
+    });
+    //this.dispatchEvent(this.$event);
+  }
+}
+
+// Register
+customElements.define('se-menu', SeMenu);
diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js
new file mode 100644
index 00000000..af14a7ee
--- /dev/null
+++ b/src/editor/components/seMenuItem.js
@@ -0,0 +1,30 @@
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Menu.js';
+import 'elix/define/MenuItem.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  </style>
+  
+  <elix-menu-item>New</elix-menu-item>
+  
+`;
+/**
+ * @class SeMenuItem
+ */
+export class SeMenuItem extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // 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');
+  }
+}
+
+// Register
+customElements.define('se-menu-item', SeMenuItem);
diff --git a/src/editor/index.html b/src/editor/index.html
index 34e1b580..781b157b 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -74,6 +74,7 @@
         <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
         </div>
       </div>
+
       <div id="main_button">
         <div id="main_icon" class="tool_button" title="Main Menu">
           <span>SVG-Edit</span>
@@ -124,6 +125,12 @@
           </ul>
         </div> <!-- main_menu -->
       </div> <!-- main_button -->
+      <se-menu>
+        <se-menu-item>new</se-menu-item>
+        <se-menu-item>new1</se-menu-item>
+        <se-menu-item>new2</se-menu-item>
+        <se-menu-item>new3</se-menu-item>
+      </se-menu>
       <div id="tools_top">
         <div id="editor_panel">
           <div class="tool_sep"></div>