Skip to content

Commit baac45d

Browse files
author
Fred Heusschen
committed
WIP
1 parent c232d6c commit baac45d

File tree

8 files changed

+79
-4681
lines changed

8 files changed

+79
-4681
lines changed

‎bin/mburger.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* mburger webcomponent v1.3.1
2+
* mburger webcomponent v1.3.2
33
* mmenujs.com/mburger
44
*
55
* Copyright (c) Fred Heusschen
@@ -32,16 +32,7 @@ customElements.define('m-burger', class extends HTMLElement {
3232
attributeChangedCallback(name, oldValue, newValue) {
3333
if (name == 'menu') {
3434
// Set the new menu node and API.
35-
this.setMenu(newValue);
36-
// Change the hamburger state when opening and closing the menu.
37-
if (this.menuApi) {
38-
this.menuApi.bind('open:after', () => {
39-
this.setAttribute('state', 'cross');
40-
});
41-
this.menuApi.bind('close:after', () => {
42-
this.removeAttribute('state');
43-
});
44-
}
35+
this.initMenu(newValue);
4536
}
4637
}
4738
connectedCallback() {
@@ -56,12 +47,21 @@ customElements.define('m-burger', class extends HTMLElement {
5647
* Set the menu node and API.
5748
* @param {string} id The ID-attribute for the menu node.
5849
*/
59-
setMenu(id) {
50+
initMenu(id) {
6051
this.menuNode = id ? document.getElementById(id) : null;
6152
this.menuApi = null;
6253
if (this.menuNode) {
6354
this.menuApi =
6455
this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
6556
}
57+
// Change the hamburger state when opening and closing the menu.
58+
if (this.menuApi) {
59+
this.menuApi.bind('open:after', () => {
60+
this.setAttribute('state', 'cross');
61+
});
62+
this.menuApi.bind('close:after', () => {
63+
this.removeAttribute('state');
64+
});
65+
}
6666
}
6767
});

‎composer.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"name" : "mburger-css",
3-
"version" : "1.3.1",
4-
"authors" : "Fred Heusschen <info@frebsite.nl>",
5-
"license" : "CC-BY-4.0",
6-
"description" : "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
7-
"keywords" : [
2+
"name": "mburger-css",
3+
"version": "1.3.2",
4+
"authors": "Fred Heusschen <info@mmenujs.com>",
5+
"license": "CC-BY-4.0",
6+
"description": "A small collection of CSS animated hamburgers. All set up to work out of the box with the mmenu.js plugin.",
7+
"keywords": [
88
"hamburger",
99
"icon",
1010
"CSS",

‎dist/mburger.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mburger.js

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* mburger webcomponent v1.3.1
2+
* mburger webcomponent v1.3.2
33
* mmenujs.com/mburger
44
*
55
* Copyright (c) Fred Heusschen
@@ -15,24 +15,47 @@ mBurger.innerHTML = `
1515
<b></b>
1616
<b></b>
1717
<slot></slot>`;
18-
customElements.define('m-burger', class extends HTMLElement {
19-
constructor() {
20-
super();
21-
/** The menu node. */
22-
this.menuNode = null;
23-
/** API for the menu. */
24-
this.menuApi = null;
25-
// Attach shadow DOM
26-
var content = mBurger.content.cloneNode(true);
27-
this.attachShadow({ mode: 'open' }).appendChild(content);
28-
}
29-
static get observedAttributes() {
30-
return ['menu'];
31-
}
32-
attributeChangedCallback(name, oldValue, newValue) {
33-
if (name == 'menu') {
34-
// Set the new menu node and API.
35-
this.setMenu(newValue);
18+
customElements.define(
19+
'm-burger',
20+
class extends HTMLElement {
21+
constructor() {
22+
super();
23+
/** The menu node. */
24+
this.menuNode = null;
25+
/** API for the menu. */
26+
this.menuApi = null;
27+
// Attach shadow DOM
28+
var content = mBurger.content.cloneNode(true);
29+
this.attachShadow({ mode: 'open' }).appendChild(content);
30+
}
31+
static get observedAttributes() {
32+
return ['menu'];
33+
}
34+
attributeChangedCallback(name, oldValue, newValue) {
35+
if (name == 'menu') {
36+
// Set the new menu node and API.
37+
this.initMenu(newValue);
38+
}
39+
}
40+
connectedCallback() {
41+
// Open the menu when clicking the hamburger.
42+
this.addEventListener('click', evnt => {
43+
if (this.menuApi && this.menuApi.open) {
44+
this.menuApi.open();
45+
}
46+
});
47+
}
48+
/**
49+
* Set the menu node and API.
50+
* @param {string} id The ID-attribute for the menu node.
51+
*/
52+
initMenu(id) {
53+
this.menuNode = id ? document.getElementById(id) : null;
54+
this.menuApi = null;
55+
if (this.menuNode) {
56+
this.menuApi =
57+
this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
58+
}
3659
// Change the hamburger state when opening and closing the menu.
3760
if (this.menuApi) {
3861
this.menuApi.bind('open:after', () => {
@@ -44,24 +67,4 @@ customElements.define('m-burger', class extends HTMLElement {
4467
}
4568
}
4669
}
47-
connectedCallback() {
48-
// Open the menu when clicking the hamburger.
49-
this.addEventListener('click', evnt => {
50-
if (this.menuApi && this.menuApi.open) {
51-
this.menuApi.open();
52-
}
53-
});
54-
}
55-
/**
56-
* Set the menu node and API.
57-
* @param {string} id The ID-attribute for the menu node.
58-
*/
59-
setMenu(id) {
60-
this.menuNode = id ? document.getElementById(id) : null;
61-
this.menuApi = null;
62-
if (this.menuNode) {
63-
this.menuApi =
64-
this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
65-
}
66-
}
67-
});
70+
);

0 commit comments

Comments
 (0)