mdb-ui-kit/js/drawer.js

import BaseLayout from './baseLayout'

const Drawer = (($) => {

  /**
   * ------------------------------------------------------------------------
   * Constants
   * ------------------------------------------------------------------------
   */
  const NAME = 'drawer'
  const DATA_KEY = `bmd.${NAME}`
  const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
  const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]

  const Keycodes = {
    ESCAPE: 27
    //ENTER: 13,
    //SPACE: 32
  }

  const ClassName = {
    IN: 'in',
    DRAWER_IN: `bmd-drawer-in`,
    DRAWER_OUT: `bmd-drawer-out`,
    DRAWER: 'bmd-layout-drawer',
    CONTAINER: 'bmd-layout-container'
  }

  const Default = {
    focusSelector: `a, button, input`
  }

  /**
   * ------------------------------------------------------------------------
   * Class Definition
   * ------------------------------------------------------------------------
   */
  class Drawer extends BaseLayout {

    // $element is expected to be the trigger
    //  i.e. <button class="btn bmd-btn-icon" for="search" data-toggle="drawer" data-target="#my-side-nav-drawer" aria-expanded="false" aria-controls="my-side-nav-drawer">
    constructor($element, config) {
      super($element, $.extend(true, {}, Default, config))

      this.$toggles = $(`[data-toggle="drawer"][href="#${this.$element[0].id}"], [data-toggle="drawer"][data-target="#${this.$element[0].id}"]`)

      this._addAria()

      // click or escape on the backdrop closes the drawer
      this.$backdrop.keydown((ev) => {
        if (ev.which === Keycodes.ESCAPE) {
          this.hide()
        }
      }).click(() => {
        this.hide()
      })

      // escape on the drawer closes it
      this.$element.keydown((ev) => {
        if (ev.which === Keycodes.ESCAPE) {
          this.hide()
        }
      })

      // any toggle button clicks
      this.$toggles.click(() => {
        this.toggle()
      })
    }

    dispose() {
      super.dispose(DATA_KEY)
      this.$toggles = null
    }

    toggle() {
      if (this._isOpen()) {
        this.hide()
      } else {
        this.show()
      }
    }

    show() {
      if (this._isForcedClosed() || this._isOpen()) {
        return
      }

      this.$toggles.attr('aria-expanded', true)
      this.$element.attr('aria-expanded', true)
      this.$element.attr('aria-hidden', false)

      // focus on the first focusable item
      let $focusOn = this.$element.find(this.config.focusSelector)
      if ($focusOn.length > 0) {
        $focusOn.first().focus()
      }

      this.$container.addClass(ClassName.DRAWER_IN)
      // backdrop is responsively styled based on bmd-drawer-overlay, therefore style is none of our concern, simply add the marker class and let the scss determine if it should be displayed or not.
      this.$backdrop.addClass(ClassName.IN)
    }

    hide() {
      if (!this._isOpen()) {
        return
      }

      this.$toggles.attr('aria-expanded', false)
      this.$element.attr('aria-expanded', false)
      this.$element.attr('aria-hidden', true)

      this.$container.removeClass(ClassName.DRAWER_IN)
      this.$backdrop.removeClass(ClassName.IN)
    }


    // ------------------------------------------------------------------------
    // private

    _isOpen() {
      return this.$container.hasClass(ClassName.DRAWER_IN)
    }

    _isForcedClosed() {
      return this.$container.hasClass(ClassName.DRAWER_OUT)
    }

    _addAria() {
      let isOpen = this._isOpen()
      this.$element.attr('aria-expanded', isOpen)
      this.$element.attr('aria-hidden', isOpen)

      if (this.$toggles.length) {
        this.$toggles.attr('aria-expanded', isOpen)
      }
    }

    // ------------------------------------------------------------------------
    // static
    static _jQueryInterface(config) {
      return this.each(function () {
        let $element = $(this)
        let data = $element.data(DATA_KEY)

        if (!data) {
          data = new Drawer($element, config)
          $element.data(DATA_KEY, data)
        }
      })
    }
  }

  /**
   * ------------------------------------------------------------------------
   * jQuery
   * ------------------------------------------------------------------------
   */
  $.fn[JQUERY_NAME] = Drawer._jQueryInterface
  $.fn[JQUERY_NAME].Constructor = Drawer
  $.fn[JQUERY_NAME].noConflict = () => {
    $.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT
    return Drawer._jQueryInterface
  }

  return Drawer

})(jQuery)

export default Drawer