https://bostalsee.de/fileadmin/template/js/mburger/js/index.js

1var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2    if (kind === "m") throw new TypeError("Private method is not writable");
3    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6};
7var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11};
12var _instances, _barsNode, _menuNode, _menuObserver, _offClick, _offKeyup, _disconnectMenu;
13const on = (el, ev, cb) => {
14    el.addEventListener(ev, cb);
15    return () => {
16        el.removeEventListener(ev, cb);
17    };
18};
19export default class extends HTMLElement {
20    constructor(template) {
21        super();
22        _instances.add(this);
23        /** Node for the hamburger bars. */
24        _barsNode.set(this, void 0);
25        /** Node for the menu. */
26        _menuNode.set(this, void 0);
27        /** Observer for the menu node. */
28        _menuObserver.set(this, null);
29        /** Function to remove click even listener for the hamburber. */
30        _offClick.set(this, null);
31        /** Function to remove keyUp even listener for the hamburber. */
32        _offKeyup.set(this, null);
33        //	Attach shadowRoot
34        this.attachShadow({ mode: 'open' });
35        this.shadowRoot.appendChild(template.content.cloneNode(true));
36        __classPrivateFieldSet(this, _barsNode, this.shadowRoot.querySelector('[part="bars"]'), "f");
37    }
38    static get observedAttributes() {
39        return ['menu'];
40    }
41    attributeChangedCallback(name, oldValue, newValue) {
42        if (name == 'menu') {
43            if (oldValue) {
44                __classPrivateFieldGet(this, _instances, "m", _disconnectMenu).call(this);
45            }
46            /** Node for the new menu. */
47            const menuNode = document.querySelector(`#mm-clone-${newValue}`) ||
48                document.querySelector(`#mm-${newValue}`) ||
49                document.querySelector(`#${newValue}`);
50            if (!menuNode) {
51                return;
52            }
53            __classPrivateFieldSet(this, _menuNode, menuNode, "f");
54            // for mmenu.js
55            if (menuNode.matches('.mm-menu')) {
56                this.connectMenu('class', () => __classPrivateFieldGet(this, _menuNode, "f").classList.contains('mm-menu--opened'), () => __classPrivateFieldGet(this, _menuNode, "f")['mmApi'].open(), () => __classPrivateFieldGet(this, _menuNode, "f")['mmApi'].close());
57            }
58            // for mmenu-light
59            else if (menuNode.matches('.mm')) {
60                this.connectMenu('class', () => __classPrivateFieldGet(this, _menuNode, "f").classList.contains('mm--open'), () => __classPrivateFieldGet(this, _menuNode, "f").classList.add('mm--open'), () => __classPrivateFieldGet(this, _menuNode, "f").classList.remove('mm--open'));
61            }
62        }
63    }
64    connectedCallback() {
65        const menu = this.getAttribute('menu');
66        if (menu) {
67            // To ensure all JS was fired, a requestAnimationFrame on DOMContentLoaded...
68            document.addEventListener('DOMContentLoaded', () => {
69                requestAnimationFrame(() => {
70                    this.attributeChangedCallback('menu', '', menu);
71                });
72            });
73        }
74    }
75    disconnectedCallback() {
76        __classPrivateFieldGet(this, _instances, "m", _disconnectMenu).call(this);
77    }
78    /**
79     * Set the icons state.
80     * @param {string} state The state to set, either "cross" or "bars".
81     */
82    set state(state) {
83        __classPrivateFieldGet(this, _barsNode, "f").classList[state === 'cross' ? 'add' : 'remove']('is-cross');
84    }
85    /**
86     * Get the icons tate.
87     * @returns {string} The state of the icon, can be "cross" or "bars".
88     */
89    get state() {
90        return __classPrivateFieldGet(this, _barsNode, "f").matches('.is-cross') ? 'cross' : 'bars';
91    }
92    /**
93     * Connect the hamburger to a menu
94     * @param {string} attribute The attribute to observe.
95     * @param {Function} isOpen Function to test whether or not the menu is opened.
96     * @param {Function} open Function that opens the menu.
97     * @param {Function} close Function that closes the menu.
98     */
99    connectMenu(attribute, isOpen, open, close) {

100        if (!__classPrivateFieldGet(this, _menuNode, "f")) {
101            return;
102        }
103        //  Remove previous.
104        __classPrivateFieldGet(this, _instances, "m", _disconnectMenu).call(this);
105        /** Set the state for the hamburber. */
106        const setState = () => {
107            this.state = isOpen() ? 'cross' : 'bars';
108        };
109        /** Toggle menu open / close */
110        const toggle = () => {
111            if (this.state === 'bars') {
112                open();
113            }
114            else {
115                close();
116            }
117        };
118        //  Create new observer.
119        __classPrivateFieldSet(this, _menuObserver, new MutationObserver(mutationsList => {
120            for (const mutation of mutationsList) {
121                if (mutation.attributeName === attribute) {
122                    setState();
123                }
124            }
125        }), "f");
126        //  Observe menu.
127        __classPrivateFieldGet(this, _menuObserver, "f").observe(__classPrivateFieldGet(this, _menuNode, "f"), {
128            attributes: true
129        });
130        //  Immediately check menu.
131        setState();
132        // Click / Enter the hamburber.
133        __classPrivateFieldSet(this, _offClick, on(this, 'click', toggle), "f");
134        __classPrivateFieldSet(this, _offKeyup, on(this, 'keyup', (event) => {
135            if (event.key === 'Enter') {
136                toggle();
137            }
138        }), "f");
139    }
140}
141_barsNode = new WeakMap(), _menuNode = new WeakMap(), _menuObserver = new WeakMap(), _offClick = new WeakMap(), _offKeyup = new WeakMap(), _instances = new WeakSet(), _disconnectMenu = function _disconnectMenu() {
142    var _a, _b, _c;
143    //  Disconnect previous observer.
144    (_a = __classPrivateFieldGet(this, _menuObserver, "f")) === null || _a === void 0 ? void 0 : _a.disconnect();
145    //  Remove previous event listener.
146    (_b = __classPrivateFieldGet(this, _offClick, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
147    (_c = __classPrivateFieldGet(this, _offKeyup, "f")) === null || _c === void 0 ? void 0 : _c.call(this);
148};