drawer.js

/**
 * drawer.js
 */

define(['jquery', 'm2base'], function($, m2base) {
  'use strict';

  var Drawer = window.M2base.Drawer = {

    elements: {
      html: $('html'),
      body: $('body'),
      toggle: $('.drawer__toggle'),
      panel: $('.drawer__panel')
    },

    init: function() {
      this.drawerEventHandlers(this.elements);
    },

    getDataAttrValue: function(element, attr) {
      return element.data(attr);
    },

    getDrawerID: function(element) {
      return Drawer.getDataAttrValue(element, 'drawer-id');
    },

    getDrawerDirection: function(element) {
      return Drawer.getDataAttrValue(element, 'drawer-direction');
    },

    addDrawerClasses: function(elements, id, direction) {
      elements.html.addClass('drawer--open drawer-open-animation drawer--' + direction);
      $('.drawer__panel[data-drawer-id=' + id + ']').addClass('is-open');
    },

    removeDrawerClasses: function(elements) {
      elements.html.removeClass('drawer--open drawer--left drawer--right');
      elements.panel.removeClass('is-open');
    },

    delayAnimationEnd: function(elements, delay) {
      function endAnimation() {
        elements.html.removeClass('drawer-open-animation');
      }
      setTimeout(endAnimation, delay);
    },

    drawerEventHandlers: function(elements) {
      elements.toggle.on('click', function(event) {
        var _this = $(this);
        event.preventDefault();
        Drawer.toggleDrawers(elements, _this);
      });
    },

    toggleDrawers: function(elements, clickedToggle) {
      var drawerID = Drawer.getDrawerID(clickedToggle);
      var drawerDirection = Drawer.getDrawerDirection(clickedToggle);

      /**
       * drawerSpeed should match the @drawer-speed variable in:
       * vendor/gpmd/theme-frontend-m2base/web/css/m2base/components/drawer.less
       */
      var drawerSpeed = 350;

      if (!elements.html.hasClass('drawer--open')) {
        this.addDrawerClasses(elements, drawerID, drawerDirection);
      } else {
        this.removeDrawerClasses(elements);
        this.delayAnimationEnd(elements, drawerSpeed);
      }
    }
  };

  Drawer.init();
});