enhanced javascript plugins

- added expand & collapse method in PushMenu
- added expandSidebar & sidebarButtonSelector option in Treeview
- updated docs

build/js/PushMenu.js

@@ -61,7 +61,7 @@ const PushMenu = (($) => {
 
     // Public
 
-    show() {
+    expand() {
       if (this._options.autoCollapseSize) {
         if ($(window).width() <= this._options.autoCollapseSize) {
           $(Selector.BODY).addClass(ClassName.OPEN)
@@ -96,10 +96,10 @@ const PushMenu = (($) => {
     }
 
     toggle() {
-      if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED  )) {
+      if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED)) {
         this.collapse()
       } else {
-        this.show()
+        this.expand()
       }
     }
 
@@ -177,7 +177,7 @@ const PushMenu = (($) => {
           $(this).data(DATA_KEY, data)
         }
 
-        if (operation === 'toggle') {
+        if (typeof operation === 'string' && operation.match(/collapse|expand|toggle/)) {
           data[operation]()
         }
       })

build/js/Treeview.js

@@ -32,16 +32,19 @@ const Treeview = (($) => {
   }
 
   const ClassName = {
-    LI           : 'nav-item',
-    LINK         : 'nav-link',
-    TREEVIEW_MENU: 'nav-treeview',
-    OPEN         : 'menu-open'
+    LI               : 'nav-item',
+    LINK             : 'nav-link',
+    TREEVIEW_MENU    : 'nav-treeview',
+    OPEN             : 'menu-open',
+    SIDEBAR_COLLAPSED: 'sidebar-collapse'
   }
 
   const Default = {
-    trigger       : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
-    animationSpeed: 300,
-    accordion     : true
+    trigger              : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
+    animationSpeed       : 300,
+    accordion            : true,
+    expandSidebar        : true,
+    sidebarButtonSelector: '[data-widget="pushmenu"]'
   }
 
   /**
@@ -73,6 +76,10 @@ const Treeview = (($) => {
         parentLi.addClass(ClassName.OPEN)
         $(this._element).trigger(expandedEvent)
       })
+
+      if (this._config.expandSidebar) {
+        this._expandSidebar()
+      }
     }
 
     collapse(treeviewMenu, parentLi) {
@@ -124,6 +131,12 @@ const Treeview = (($) => {
       })
     }
 
+    _expandSidebar() {
+      if ($('body').hasClass(ClassName.SIDEBAR_COLLAPSED)) {
+        $(this._config.sidebarButtonSelector).PushMenu('expand')
+      }
+    }
+
     // Static
 
     static _jQueryInterface(config) {

dist/js/adminlte.js

@@ -514,7 +514,7 @@
 
       var _proto = PushMenu.prototype;
 
-      _proto.show = function show() {
+      _proto.expand = function expand() {
         if (this._options.autoCollapseSize) {
           if ($(window).width() <= this._options.autoCollapseSize) {
             $(Selector.BODY).addClass(ClassName.OPEN);
@@ -552,7 +552,7 @@
         if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED)) {
           this.collapse();
         } else {
-          this.show();
+          this.expand();
         }
       };
 
@@ -635,7 +635,7 @@
             $(this).data(DATA_KEY, data);
           }
 
-          if (operation === 'toggle') {
+          if (typeof operation === 'string' && operation.match(/collapse|expand|toggle/)) {
             data[operation]();
           }
         });
@@ -710,12 +710,15 @@
       LI: 'nav-item',
       LINK: 'nav-link',
       TREEVIEW_MENU: 'nav-treeview',
-      OPEN: 'menu-open'
+      OPEN: 'menu-open',
+      SIDEBAR_COLLAPSED: 'sidebar-collapse'
     };
     var Default = {
       trigger: Selector.DATA_WIDGET + " " + Selector.LINK,
       animationSpeed: 300,
-      accordion: true
+      accordion: true,
+      expandSidebar: true,
+      sidebarButtonSelector: '[data-widget="pushmenu"]'
     };
     /**
      * Class Definition
@@ -752,6 +755,10 @@
           parentLi.addClass(ClassName.OPEN);
           $(_this._element).trigger(expandedEvent);
         });
+
+        if (this._config.expandSidebar) {
+          this._expandSidebar();
+        }
       };
 
       _proto.collapse = function collapse(treeviewMenu, parentLi) {
@@ -799,6 +806,12 @@
         $(document).on('click', this._config.trigger, function (event) {
           _this3.toggle(event);
         });
+      };
+
+      _proto._expandSidebar = function _expandSidebar() {
+        if ($('body').hasClass(ClassName.SIDEBAR_COLLAPSED)) {
+          $(this._config.sidebarButtonSelector).PushMenu('expand');
+        }
       } // Static
       ;
 

docs/javascript/push-menu.md

@@ -60,6 +60,8 @@ Example: `$(document).on('shown.lte.pushmenu', handleExpandedEvent)`
 | Method | Description
 |-|-
 |toggle | Toggles the state of the menu between expanded and collapsed.
+|collapse | Collapses the sidebar menu.
+|expand | Expands the sidebar menu
 {: .table .table-bordered .bg-light}
 
 Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`

docs/javascript/treeview.md

@@ -40,6 +40,8 @@ $('ul').Treeview(options)
 |animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
 |accordion | Boolean | TRUE | Whether to collapse the open menu when expanding another.
 |trigger | String | `[data-widget="treeview"] .nav-link` |  Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu. 
+|expandSidebar | Boolean | FALSE | Whether to expand sidebar on open menu.
+|sidebarButtonSelector | String | `[data-widget="pushmenu"]` | Selector of the sidebar button.
 {: .table .table-bordered .bg-light}
 
 > ##### Tip!