minsky-kit/js/components/MenuOverlay.js

Kit of components for MINSKY web agency

// imports
import Overlay from "./Overlay";
import Hamburger from "./Hamburger";
import { strToCssClass, strToCssSelector } from "../utils/css";

// static const

// class definition
export default class MenuOverlay extends Overlay {
  // static properties

  // constructor
  constructor(args = {}, objectName = "Menu Overlay") {
    // set basic args
    const components = args.$el ? args.$el.components || {} : null;
    args.$el = {
      content: args.$el ? args.$el.content : undefined,
      components: {
        backdrop:
          components && components.backdrop ? components.backdrop : true,
        closeButton:
          components && components.closeButton ? components.closeButton : false,
      },
      attributes: args.$el ? args.$el.attributes : undefined,
    };

    const source = {
      $el: args.$source,
      $parent: args.$source.parentNode,
      $prevSibling: args.$source.previousSibling,
      $nextSibling: args.$source.nextSibling,
    };

    // call super
    super(args, objectName);

    // set properties
    if (args.$hamburger) this.hamburger = new Hamburger(args.$hamburger);
    this._source = source;

    // move source to new content container
    this.$el
      .querySelector(strToCssSelector("overlay", "content"))
      .appendChild(this._source.$el);

    // add listeners
    if (this.hamburger)
      this.hamburger.on(
        ["toggle"],
        this.blm.add("mobileNav.hamburger.toggle", onHamburgerToggle)
      );
  }

  show(hard = false) {
    // silently activate hamburger
    if (this.hamburger) this.hamburger.activate(true);
    // add body class
    document.body.classList.add(strToCssClass("menuOverlayOpen"));
    // super
    super.show(hard);
  }

  hide(hard = false) {
    // silently activate hamburger
    if (this.hamburger) this.hamburger.deactivate(true);
    // remove body class
    document.body.classList.remove(strToCssClass("menuOverlayOpen"));
    // super
    super.hide(hard);
  }

  // methods
  destroy() {
    if (this.hamburger) {
      // remove listeners
      this.hamburger.off(
        ["toggle"],
        this.blm.remove("mobileNav.hamburger.toggle")
      );

      // destroy hamburger
      this.hamburger.destroy();
    }
    // remove body class if present
    if (document.body.classList.contains(strToCssClass("menuOverlayOpen"))) {
      document.body.classList.remove(strToCssClass("menuOverlayOpen"));
    }

    // put source back in original container
    // using different ways of determining its target location
    if (this._source.$nextSibling) {
      this._source.$parent.insertBefore(
        this._source.$el,
        this._source.$nextSibling
      );
    } else if (this._source.$prevSibling) {
      this._source.$parent.insertBefore(
        this._source.$el,
        this._source.$prevSibling.nextSibling
      );
    } else {
      this._source.$parent.append(this._source.$el);
    }

    // destroy super
    super.destroy();
  }

  // getters & setters
}

// handlers
function onHamburgerToggle() {
  if (this.hamburger.active) {
    this.show();
  } else {
    this.hide();
  }
}