@vixcom/ui 1.1.0 → 1.3.0

package/src/pages/tier-1/scripts/sidebar.min.js

@@ -0,0 +1,50 @@
+'use strict';
+
+(() => {
+  let p = $('.sidebar-container'),
+    t; // Global scope for 'sidebar-container' and 'sidebar'
+  // const _b = (t, p) => { // Observable callback
+  //     let b = p.find('.sidebar-overlay');
+  //     if (window.screen.width <= 576 && p && t) {
+  //       if (p.is('.sidebar-toggled')) {
+  //         if (b.length == 0) {
+  //           b = $(document.createElement('div'));
+  //           b.on('click', e => {
+  //             p.removeClass('sidebar-toggled');
+  //           });
+  //           p.append(b);
+  //         }
+  //         b.attr('class', t.is('[with-backdrop]') ? 'sidebar-backdrop sidebar-overlay' : 'sidebar-overlay');
+  //       } else {
+  //         b.remove();
+  //       }
+  //     }
+  // };
+  // const _mc = (mt, o) => {
+  //   for (var m of mt) {
+  //     if (m.type == 'attributes' && m.attributeName == 'class') {
+  //       _b(t, p);
+  //     }
+  //   }
+  // };
+  // const _m = new MutationObserver(_mc);
+  // for (const _p of p) _m.observe(_p, {
+  //   attributes: true
+  // }); // Observe change in 'sidebar-container' classList
+  $('.page-container').click(e => { // Close sidebar on page-container shadow clicked
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && !$(e.target).is('[data-toggle="sidebar"]')) p.removeClass('sidebar-toggled');
+  });
+  $('[data-toggle="sidebar"]').click(e => { // Listen for click event on sidebar toggler button
+    t = $(e.target).data('target') && $($(e.target).data('target')) || !!$(e.target).parents('.sidebar').length && $(e.target).parent('.sidebar') || !!$(e.target).next('.sidebar').length && $(e.target).next('.sidebar');
+    if (!t.length) return;
+    p = t.parents('.sidebar-container');
+    p.toggleClass('sidebar-toggled');
+  });
+  document.addEventListener('keyup', e => { // Close sidebar on ESC key pressed
+    if (window.screen.width <= 576 && p && p.is('.sidebar-toggled') && e.keyCode === 27) {
+      e.preventDefault();
+      // Process event...
+      p.removeClass('sidebar-toggled');
+    }
+  }, false);
+})();