WIP

FrDH · May 18, 2019 · baac45d · baac45d
1 parent c232d6c
commit baac45d
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 4,681 deletions.
diff --git a/bin/mburger.js b/bin/mburger.js
@@ -1,5 +1,5 @@
 /*
- * mburger webcomponent v1.3.1
+ * mburger webcomponent v1.3.2
  * mmenujs.com/mburger
  *
  * Copyright (c) Fred Heusschen
@@ -32,16 +32,7 @@ customElements.define('m-burger', class extends HTMLElement {
     attributeChangedCallback(name, oldValue, newValue) {
         if (name == 'menu') {
             //  Set the new menu node and API.
-            this.setMenu(newValue);
-            //  Change the hamburger state when opening and closing the menu.
-            if (this.menuApi) {
-                this.menuApi.bind('open:after', () => {
-                    this.setAttribute('state', 'cross');
-                });
-                this.menuApi.bind('close:after', () => {
-                    this.removeAttribute('state');
-                });
-            }
+            this.initMenu(newValue);
         }
     }
     connectedCallback() {
@@ -56,12 +47,21 @@ customElements.define('m-burger', class extends HTMLElement {
      * Set the menu node and API.
      * @param {string} id The ID-attribute for the menu node.
      */
-    setMenu(id) {
+    initMenu(id) {
         this.menuNode = id ? document.getElementById(id) : null;
         this.menuApi = null;
         if (this.menuNode) {
             this.menuApi =
                 this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
         }
+        //  Change the hamburger state when opening and closing the menu.
+        if (this.menuApi) {
+            this.menuApi.bind('open:after', () => {
+                this.setAttribute('state', 'cross');
+            });
+            this.menuApi.bind('close:after', () => {
+                this.removeAttribute('state');
+            });
+        }
     }
 });
diff --git a/composer.json b/composer.json
@@ -1,10 +1,10 @@
 {
-	"name"			: "mburger-css",
-	"version"		: "1.3.1",
-	"authors"		: "Fred Heusschen <info@frebsite.nl>",
-	"license"		: "CC-BY-4.0",
-	"description"	: "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
-	"keywords"		: [
+	"name": "mburger-css",
+	"version": "1.3.2",
+	"authors": "Fred Heusschen <info@mmenujs.com>",
+	"license": "CC-BY-4.0",
+	"description": "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
+	"keywords": [
 		"hamburger",
 		"icon",
 		"CSS",

diff --git a/dist/mburger.css b/dist/mburger.css
diff --git a/dist/mburger.js b/dist/mburger.js
@@ -1,5 +1,5 @@
 /*
- * mburger webcomponent v1.3.1
+ * mburger webcomponent v1.3.2
  * mmenujs.com/mburger
  *
  * Copyright (c) Fred Heusschen
@@ -15,24 +15,47 @@ mBurger.innerHTML = `
 	<b></b>
 	<b></b>
 	<slot></slot>`;
-customElements.define('m-burger', class extends HTMLElement {
-    constructor() {
-        super();
-        /** The menu node. */
-        this.menuNode = null;
-        /** API for the menu. */
-        this.menuApi = null;
-        //	Attach shadow DOM
-        var content = mBurger.content.cloneNode(true);
-        this.attachShadow({ mode: 'open' }).appendChild(content);
-    }
-    static get observedAttributes() {
-        return ['menu'];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name == 'menu') {
-            //  Set the new menu node and API.
-            this.setMenu(newValue);
+customElements.define(
+    'm-burger',
+    class extends HTMLElement {
+        constructor() {
+            super();
+            /** The menu node. */
+            this.menuNode = null;
+            /** API for the menu. */
+            this.menuApi = null;
+            //	Attach shadow DOM
+            var content = mBurger.content.cloneNode(true);
+            this.attachShadow({ mode: 'open' }).appendChild(content);
+        }
+        static get observedAttributes() {
+            return ['menu'];
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name == 'menu') {
+                //  Set the new menu node and API.
+                this.initMenu(newValue);
+            }
+        }
+        connectedCallback() {
+            //  Open the menu when clicking the hamburger.
+            this.addEventListener('click', evnt => {
+                if (this.menuApi && this.menuApi.open) {
+                    this.menuApi.open();
+                }
+            });
+        }
+        /**
+         * Set the menu node and API.
+         * @param {string} id The ID-attribute for the menu node.
+         */
+        initMenu(id) {
+            this.menuNode = id ? document.getElementById(id) : null;
+            this.menuApi = null;
+            if (this.menuNode) {
+                this.menuApi =
+                    this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
+            }
             //  Change the hamburger state when opening and closing the menu.
             if (this.menuApi) {
                 this.menuApi.bind('open:after', () => {
@@ -44,24 +67,4 @@ customElements.define('m-burger', class extends HTMLElement {
             }
         }
     }
-    connectedCallback() {
-        //  Open the menu when clicking the hamburger.
-        this.addEventListener('click', evnt => {
-            if (this.menuApi && this.menuApi.open) {
-                this.menuApi.open();
-            }
-        });
-    }
-    /**
-     * Set the menu node and API.
-     * @param {string} id The ID-attribute for the menu node.
-     */
-    setMenu(id) {
-        this.menuNode = id ? document.getElementById(id) : null;
-        this.menuApi = null;
-        if (this.menuNode) {
-            this.menuApi =
-                this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
-        }
-    }
-});
+);