https://www.gjp.org/wp-content/themes/virtuoso/js/mburger.js

1/*
2 * mburger webcomponent v1.3.3
3 * mmenujs.com/mburger
4 *
5 * Copyright (c) Fred Heusschen
6 * www.frebsite.nl
7 *
8 * License: CC-BY-4.0
9 * http://creativecommons.org/licenses/by/4.0/
10 */
11export const mBurger = document.createElement('template');
12mBurger.innerHTML = `
13	<style>:host{--mb-button-size:60px;--mb-bar-width:0.6;--mb-bar-height:4px;--mb-bar-spacing:10px;--mb-animate-timeout:0s}:host{background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;height:var(--mb-button-size);padding:0 0 0 var(--mb-button-size);margin:0;line-height:var(--mb-button-size);vertical-align:middle;appearance:none;outline:0;cursor:pointer}:host b{display:block;position:absolute;left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));width:calc(var(--mb-button-size) * var(--mb-bar-width));height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}:host b:nth-of-type(1){bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease,width .2s ease}:host b:nth-of-type(2){top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease}:host b:nth-of-type(3){top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease,width .2s ease}:host([state=cross]) b:nth-of-type(1){bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)}:host([state=cross]) b:nth-of-type(2){opacity:0}:host([state=cross]) b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)}:host([fx=collapse]) b:nth-of-type(1){transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s}:host([fx=collapse]) b:nth-of-type(2){transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s}:host([fx=collapse]) b:nth-of-type(3){transition:top .2s ease,transform .2s ease}:host([state=cross][fx=collapse]) b:nth-of-type(1){bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-animate-timeout) + .1s),calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)}:host([state=cross][fx=collapse]) b:nth-of-type(2){top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}:host([state=cross][fx=collapse]) b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-animate-timeout) + .3s),calc(var(--mb-animate-timeout) + .3s)}:host([fx=spin]) b:nth-of-type(1){transition-delay:.2s,0s}:host([fx=spin]) b:nth-of-type(2){transition-duration:0s;transition-delay:.2s}:host([fx=spin]) b:nth-of-type(3){transition-delay:.2s,0s}:host([state=cross][fx=spin]) b:nth-of-type(1){transform:rotate(135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}:host([state=cross][fx=spin]) b:nth-of-type(2){transition-delay:calc(var(--mb-animate-timeout) + 0s)}:host([state=cross][fx=spin]) b:nth-of-type(3){transform:rotate(225deg);transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .2s)}:host([fx=squeeze]) b:nth-of-type(1){transition-delay:.1s,0s}:host([fx=squeeze]) b:nth-of-type(2){transition-delay:.1s}:host([fx=squeeze]) b:nth-of-type(3){transition-delay:.1s,0s}:host([state=cross][fx=squeeze]) b:nth-of-type(1){transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)}:host([state=cross][fx=squeeze]) b:nth-of-type(2){transition-delay:calc(var(--mb-animate-timeout) + 0s)}:host([state=cross][fx=squeeze]) b:nth-of-type(3){transition-delay:calc(var(--mb-animate-timeout) + 0s),calc(var(--mb-animate-timeout) + .1s)}:host([fx=tornado]) b:nth-of-type(1){transition:bottom .2s ease,transform .2s ease;transition-delay:.2s}:host([fx=tornado]) b:nth-of-type(2){transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s}:host([fx=tornado]) b:nth-of-type(3){transition:top .2s ease,transform .2s ease;transition-delay:0s}:host([state=cross][fx=tornado]) b:nth-of-type(1){transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + 0s)}:host([state=cross][fx=tornado]) b:nth-of-type(2){opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-animate-timeout) + .4s),calc(var(--mb-animate-timeout) + .1s)}:host([state=cross][fx=tornado]) b:nth-of-type(3){transform:rotate(-225deg);transition-delay:calc(var(--mb-animate-timeout) + .2s)}</style>
14	<b></b>
15	<b></b>
16	<b></b>
17	<slot></slot>`;

18customElements.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            //  Initiate the new menu.
35            this.initMenu(newValue);
36        }
37    }
38    connectedCallback() {
39        //  Open the menu when clicking the hamburger.
40        this.addEventListener('click', evnt => {
41            //  If there is no API for a menu available (the menu isn't yet initiated),
42            //  try to initiate the menu.
43            if (!this.menuApi) {
44                this.initMenu();
45            }
46            //  If there is an API for a menu available,
47            //  open the menu.
48            if (this.menuApi && this.menuApi.open) {
49                this.menuApi.open();
50            }
51        });
52    }
53    /**
54     * Set the menu node and API.
55     * @param {string} [id] The ID-attribute for the menu node.
56     */
57    initMenu(id) {
58        this.menuNode = null;
59        this.menuApi = null;
60        if (!id) {
61            id = this.getAttribute('menu');
62        }
63        if (id) {
64            this.menuNode = document.getElementById(id);
65        }
66        if (this.menuNode) {
67            this.menuApi =
68                this.menuNode['mmApi'] || this.menuNode['mmenu'] || null;
69        }
70        //  Change the hamburger state when opening and closing the menu.
71        if (this.menuApi) {
72            this.menuApi.bind('open:after', () => {
73                this.setAttribute('state', 'cross');
74            });
75            this.menuApi.bind('close:after', () => {
76                this.removeAttribute('state');
77            });
78        }
79    }
80});