source/js/sidebar.js

   1 /*
   2  | -----------------------------------------------------------------------------
   3  | Functionality for off-canvas menu / sidebar visibility
   4  | -----------------------------------------------------------------------------
   5 */
   6
   7 /*jslint browser:true*/
   8
   9 (function (document) {
  10     'use strict';
  11
  12     document.addEventListener('DOMContentLoaded', function () {
  13         var menu = document.getElementById('mobile-menu'),
  14             wrapper = document.getElementById('site-wrapper'),
  15             content = document.getElementById('site-content'),
  16             menuVisibilityData = 'data-menu-visible';
  17
  18         if (!menu || !wrapper || !content) {
  19             return;
  20         }
  21
  22         /*
  23          | ---------------------------------------------------------------------
  24          | Click on content element results in menu getting closed
  25          | ---------------------------------------------------------------------
  26          */
  27         content.addEventListener('click', function (event) {
  28             if (wrapper.getAttribute(menuVisibilityData)) {
  29                 wrapper.removeAttribute(menuVisibilityData);
  30
  31                 event.preventDefault();
  32                 event.stopPropagation();
  33             }
  34         });
  35
  36         /*
  37          | ---------------------------------------------------------------------
  38          | Click on menu element results in menu getting opened
  39          | ---------------------------------------------------------------------
  40          */
  41         menu.addEventListener('click', function (event) {
  42             if (!wrapper.getAttribute(menuVisibilityData)) {
  43                 wrapper.setAttribute(menuVisibilityData, '1');
  44             } else {
  45                 wrapper.removeAttribute(menuVisibilityData);
  46             }
  47
  48             event.preventDefault();
  49             event.stopPropagation();
  50         });
  51     });
  52 }(document));