Update search to remove headers and keep parent menus open if a search match is found

build/js/dist/Search.js

@@ -34,6 +34,7 @@ var Search = function ($) {
     ACTIVE: '.active',
     TREEVIEW_MENU: '[data-widget="treeview"]',
     NAV_TREEVIEW: '.nav-treeview',
+    NAV_HEADER: '.nav-header',
     DATA_WIDGET: '[data-widget="search"]'
   };
 
@@ -68,6 +69,8 @@ var Search = function ($) {
     _createClass(Search, [{
       key: 'init',
       value: function init() {
+        var _this = this;
+
         if (this._config.target === '') {
           this._config.target = this._element.closest(Selector.TREEVIEW_MENU);
         } else {
@@ -88,57 +91,106 @@ var Search = function ($) {
 
           var value = $(event.currentTarget).val();
 
-          if (!this._config.case_sensitive) {
+          if (!_this._config.case_sensitive) {
             value = value.toLowerCase();
           }
 
-          this.search(value);
+          _this.search(value);
-        }.bind(this));
+        });
       }
     }, {
       key: 'search',
       value: function search(value) {
-        var _that = this;
+        var items = this._config.target.find(Selector.LI);
+        var headers = this._config.target.find(Selector.NAV_HEADER);
 
         // If the value is back to null
         if (!value) {
+          // Show all headers
+          headers.css('display', 'block');
+
           // Close all treeviews
-          this._config.target.find(Selector.LI).css('display', 'block').find(Selector.NAV_TREEVIEW).css('display', 'none');
+          items.css('display', 'block').removeClass(ClassName.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'none');
 
           // Open the originally opened treeviews
-          this._config.target.find(Selector.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'block');
+          var _iteratorNormalCompletion = true;
-          this._open_menus.each(function () {
+          var _didIteratorError = false;
-            if (!$(this).hasClass(ClassName.OPEN)) {
+          var _iteratorError = undefined;
-              $(this).addClass(Selector.OPEN).css('display', 'block');
+
-              $(this).children(Selector.NAV_TREEVIEW).css('display', 'block');
+          try {
+            for (var _iterator = this._open_menus[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var menu = _step.value;
+
+              if (!$(menu).hasClass(ClassName.OPEN)) {
+                $(menu).addClass(ClassName.OPEN).css('display', 'block');
+                $(menu).children(Selector.NAV_TREEVIEW).css('display', 'block');
+              }
             }
-          });
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+
           return;
         }
 
+        // Hide all elements
+        items.css('display', 'none');
+        headers.css('display', 'none');
+
         // Search through the tree elements
-        this._config.target.find(Selector.LI).each(function () {
+        var _iteratorNormalCompletion2 = true;
-          var text = $(this).children(Selector.LINK).first().text();
+        var _didIteratorError2 = false;
+        var _iteratorError2 = undefined;
 
-          if (!_that._config.case_sensitive) {
+        try {
-            text = text.toLowerCase();
+          for (var _iterator2 = items[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var item = _step2.value;
+
+            var text = $(item).children('a').text();
+
+            if (!this._config.case_sensitive) {
+              text = text.toLowerCase();
+            }
+
+            if (text.indexOf(value) != -1) {
+              // Found the result
+              // Make the parent LI visible
+              $(item).parents(Selector.LI).css('display', 'block').addClass('menu-open');
+
+              $(item).parents(Selector.NAV_TREEVIEW).css('display', 'block');
+
+              // If this is a treeview parent, make all of its children visible
+              $(item).children(Selector.NAV_TREEVIEW).css('display', 'block').children(Selector.LI).css('display', 'block').addClass('menu-open');
+
+              // Make this element visible
+              $(item).css('display', 'block');
+            }
           }
-
+        } catch (err) {
-          if (text.search(value) == -1) {
+          _didIteratorError2 = true;
-            // No results
+          _iteratorError2 = err;
-            $(this).css('display', 'none');
+        } finally {
-          } else {
+          try {
-            // Found the result
+            if (!_iteratorNormalCompletion2 && _iterator2.return) {
-            // Make the parent LI visible
+              _iterator2.return();
-            $(this).parents(Selector.LI).css('display', 'block');
+            }
-
+          } finally {
-            // Make the parent nav-treeview visible
+            if (_didIteratorError2) {
-            $(this).parents(Selector.NAV_TREEVIEW).addClass('menu-open').css('display', 'block');
+              throw _iteratorError2;
-
+            }
-            // Make this element visible
-            $(this).css('display', 'block');
           }
-        });
+        }
       }
 
       // Static

build/js/src/AdminLTE.js

@@ -589,6 +589,7 @@ const Search = (($) => {
     ACTIVE       : '.active',
     TREEVIEW_MENU: '[data-widget="treeview"]',
     NAV_TREEVIEW : '.nav-treeview',
+    NAV_HEADER   : '.nav-header',
     DATA_WIDGET  : '[data-widget="search"]'
   }
 
@@ -629,12 +630,12 @@ const Search = (($) => {
       this._open_menus = this._config.target.find(Selector.OPEN)
 
       // Prevent form submission
-      this._element.parents('form').first().submit(function (event) {
+      this._element.parents('form').first().submit((event) => {
         event.preventDefault()
       })
 
       // Setup search function
-      this._element.keyup(function (event) {
+      this._element.keyup((event) => {
         event.preventDefault()
 
         let value = $(event.currentTarget).val()
@@ -644,56 +645,68 @@ const Search = (($) => {
         }
 
         this.search(value)
-      }.bind(this))
+      })
     }
 
     search(value) {
-      let _that = this
+      let items   = this._config.target.find(Selector.LI)
+      let headers = this._config.target.find(Selector.NAV_HEADER)
 
       // If the value is back to null
       if (!value) {
+        // Show all headers
+        headers.css('display', 'block')
+
         // Close all treeviews
-        this._config.target.find(Selector.LI)
+        items.css('display', 'block')
-          .css('display', 'block')
+          .removeClass(ClassName.OPEN)
           .find(Selector.NAV_TREEVIEW)
           .css('display', 'none')
 
         // Open the originally opened treeviews
-        this._config.target.find(Selector.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'block')
+        for (let menu of this._open_menus) {
-        this._open_menus.each(function () {
+          if (!$(menu).hasClass(ClassName.OPEN)) {
-          if (!$(this).hasClass(ClassName.OPEN)) {
+            $(menu).addClass(ClassName.OPEN).css('display', 'block')
-            $(this).addClass(Selector.OPEN).css('display', 'block')
+            $(menu).children(Selector.NAV_TREEVIEW).css('display', 'block')
-            $(this).children(Selector.NAV_TREEVIEW).css('display', 'block')
           }
-        })
+        }
+
         return
       }
 
-      // Search through the tree elements
+      // Hide all elements
-      this._config.target.find(Selector.LI).each(function () {
+      items.css('display', 'none')
-        let text = $(this).children(Selector.LINK).first().text()
+      headers.css('display', 'none')
 
-        if (!_that._config.case_sensitive) {
+      // Search through the tree elements
+      for (let item of items) {
+        let text = $(item).children('a').text()
+
+        if (!this._config.case_sensitive) {
           text = text.toLowerCase()
         }
 
-        if (text.search(value) == -1) {
+        if (text.indexOf(value) != -1) {
-          // No results
+          // Found the result
-          $(this).css('display', 'none')
-        } else { // Found the result
           // Make the parent LI visible
-          $(this).parents(Selector.LI)
+          $(item).parents(Selector.LI)
+            .css('display', 'block')
+            .addClass('menu-open')
+
+          $(item).parents(Selector.NAV_TREEVIEW)
             .css('display', 'block')
 
-          // Make the parent nav-treeview visible
+          // If this is a treeview parent, make all of its children visible
-          $(this).parents(Selector.NAV_TREEVIEW)
+          $(item).children(Selector.NAV_TREEVIEW)
-            .addClass('menu-open')
             .css('display', 'block')
+            .children(Selector.LI)
+            .css('display', 'block')
+            .addClass('menu-open')
 
           // Make this element visible
-          $(this).css('display', 'block')
+          $(item).css('display', 'block')
         }
-      })
+      }
     }
 
 

build/js/src/Search.js

@@ -28,6 +28,7 @@ const Search = (($) => {
     ACTIVE       : '.active',
     TREEVIEW_MENU: '[data-widget="treeview"]',
     NAV_TREEVIEW : '.nav-treeview',
+    NAV_HEADER   : '.nav-header',
     DATA_WIDGET  : '[data-widget="search"]'
   }
 
@@ -68,12 +69,12 @@ const Search = (($) => {
       this._open_menus = this._config.target.find(Selector.OPEN)
 
       // Prevent form submission
-      this._element.parents('form').first().submit(function (event) {
+      this._element.parents('form').first().submit((event) => {
         event.preventDefault()
       })
 
       // Setup search function
-      this._element.keyup(function (event) {
+      this._element.keyup((event) => {
         event.preventDefault()
 
         let value = $(event.currentTarget).val()
@@ -83,56 +84,68 @@ const Search = (($) => {
         }
 
         this.search(value)
-      }.bind(this))
+      })
     }
 
     search(value) {
-      let _that = this
+      let items   = this._config.target.find(Selector.LI)
+      let headers = this._config.target.find(Selector.NAV_HEADER)
 
       // If the value is back to null
       if (!value) {
+        // Show all headers
+        headers.css('display', 'block')
+
         // Close all treeviews
-        this._config.target.find(Selector.LI)
+        items.css('display', 'block')
-          .css('display', 'block')
+          .removeClass(ClassName.OPEN)
           .find(Selector.NAV_TREEVIEW)
           .css('display', 'none')
 
         // Open the originally opened treeviews
-        this._config.target.find(Selector.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'block')
+        for (let menu of this._open_menus) {
-        this._open_menus.each(function () {
+          if (!$(menu).hasClass(ClassName.OPEN)) {
-          if (!$(this).hasClass(ClassName.OPEN)) {
+            $(menu).addClass(ClassName.OPEN).css('display', 'block')
-            $(this).addClass(Selector.OPEN).css('display', 'block')
+            $(menu).children(Selector.NAV_TREEVIEW).css('display', 'block')
-            $(this).children(Selector.NAV_TREEVIEW).css('display', 'block')
           }
-        })
+        }
+
         return
       }
 
-      // Search through the tree elements
+      // Hide all elements
-      this._config.target.find(Selector.LI).each(function () {
+      items.css('display', 'none')
-        let text = $(this).children(Selector.LINK).first().text()
+      headers.css('display', 'none')
 
-        if (!_that._config.case_sensitive) {
+      // Search through the tree elements
+      for (let item of items) {
+        let text = $(item).children('a').text()
+
+        if (!this._config.case_sensitive) {
           text = text.toLowerCase()
         }
 
-        if (text.search(value) == -1) {
+        if (text.indexOf(value) != -1) {
-          // No results
+          // Found the result
-          $(this).css('display', 'none')
-        } else { // Found the result
           // Make the parent LI visible
-          $(this).parents(Selector.LI)
+          $(item).parents(Selector.LI)
+            .css('display', 'block')
+            .addClass('menu-open')
+
+          $(item).parents(Selector.NAV_TREEVIEW)
             .css('display', 'block')
 
-          // Make the parent nav-treeview visible
+          // If this is a treeview parent, make all of its children visible
-          $(this).parents(Selector.NAV_TREEVIEW)
+          $(item).children(Selector.NAV_TREEVIEW)
-            .addClass('menu-open')
             .css('display', 'block')
+            .children(Selector.LI)
+            .css('display', 'block')
+            .addClass('menu-open')
 
           // Make this element visible
-          $(this).css('display', 'block')
+          $(item).css('display', 'block')
         }
-      })
+      }
     }
 
 

dist/js/adminlte.js

@@ -640,6 +640,7 @@ var Search = function ($) {
     ACTIVE: '.active',
     TREEVIEW_MENU: '[data-widget="treeview"]',
     NAV_TREEVIEW: '.nav-treeview',
+    NAV_HEADER: '.nav-header',
     DATA_WIDGET: '[data-widget="search"]'
   };
 
@@ -674,6 +675,8 @@ var Search = function ($) {
     _createClass(Search, [{
       key: 'init',
       value: function init() {
+        var _this5 = this;
+
         if (this._config.target === '') {
           this._config.target = this._element.closest(Selector.TREEVIEW_MENU);
         } else {
@@ -694,57 +697,106 @@ var Search = function ($) {
 
           var value = $(event.currentTarget).val();
 
-          if (!this._config.case_sensitive) {
+          if (!_this5._config.case_sensitive) {
             value = value.toLowerCase();
           }
 
-          this.search(value);
+          _this5.search(value);
-        }.bind(this));
+        });
       }
     }, {
       key: 'search',
       value: function search(value) {
-        var _that = this;
+        var items = this._config.target.find(Selector.LI);
+        var headers = this._config.target.find(Selector.NAV_HEADER);
 
         // If the value is back to null
         if (!value) {
+          // Show all headers
+          headers.css('display', 'block');
+
           // Close all treeviews
-          this._config.target.find(Selector.LI).css('display', 'block').find(Selector.NAV_TREEVIEW).css('display', 'none');
+          items.css('display', 'block').removeClass(ClassName.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'none');
 
           // Open the originally opened treeviews
-          this._config.target.find(Selector.OPEN).find(Selector.NAV_TREEVIEW).css('display', 'block');
+          var _iteratorNormalCompletion = true;
-          this._open_menus.each(function () {
+          var _didIteratorError = false;
-            if (!$(this).hasClass(ClassName.OPEN)) {
+          var _iteratorError = undefined;
-              $(this).addClass(Selector.OPEN).css('display', 'block');
+
-              $(this).children(Selector.NAV_TREEVIEW).css('display', 'block');
+          try {
+            for (var _iterator = this._open_menus[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var menu = _step.value;
+
+              if (!$(menu).hasClass(ClassName.OPEN)) {
+                $(menu).addClass(ClassName.OPEN).css('display', 'block');
+                $(menu).children(Selector.NAV_TREEVIEW).css('display', 'block');
+              }
             }
-          });
+          } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+          } finally {
+            try {
+              if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+              }
+            } finally {
+              if (_didIteratorError) {
+                throw _iteratorError;
+              }
+            }
+          }
+
           return;
         }
 
+        // Hide all elements
+        items.css('display', 'none');
+        headers.css('display', 'none');
+
         // Search through the tree elements
-        this._config.target.find(Selector.LI).each(function () {
+        var _iteratorNormalCompletion2 = true;
-          var text = $(this).children(Selector.LINK).first().text();
+        var _didIteratorError2 = false;
+        var _iteratorError2 = undefined;
 
-          if (!_that._config.case_sensitive) {
+        try {
-            text = text.toLowerCase();
+          for (var _iterator2 = items[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+            var item = _step2.value;
+
+            var text = $(item).children('a').text();
+
+            if (!this._config.case_sensitive) {
+              text = text.toLowerCase();
+            }
+
+            if (text.indexOf(value) != -1) {
+              // Found the result
+              // Make the parent LI visible
+              $(item).parents(Selector.LI).css('display', 'block').addClass('menu-open');
+
+              $(item).parents(Selector.NAV_TREEVIEW).css('display', 'block');
+
+              // If this is a treeview parent, make all of its children visible
+              $(item).children(Selector.NAV_TREEVIEW).css('display', 'block').children(Selector.LI).css('display', 'block').addClass('menu-open');
+
+              // Make this element visible
+              $(item).css('display', 'block');
+            }
           }
-
+        } catch (err) {
-          if (text.search(value) == -1) {
+          _didIteratorError2 = true;
-            // No results
+          _iteratorError2 = err;
-            $(this).css('display', 'none');
+        } finally {
-          } else {
+          try {
-            // Found the result
+            if (!_iteratorNormalCompletion2 && _iterator2.return) {
-            // Make the parent LI visible
+              _iterator2.return();
-            $(this).parents(Selector.LI).css('display', 'block');
+            }
-
+          } finally {
-            // Make the parent nav-treeview visible
+            if (_didIteratorError2) {
-            $(this).parents(Selector.NAV_TREEVIEW).addClass('menu-open').css('display', 'block');
+              throw _iteratorError2;
-
+            }
-            // Make this element visible
-            $(this).css('display', 'block');
           }
-        });
+        }
       }
 
       // Static

index2.html

@@ -1035,9 +1035,7 @@ to get the desired effect
             <div class="info-box-content">
               <span class="info-box-text">Inventory</span>
               <span class="info-box-number">5,200</span>
-
               <progress class="progress" value="50" max="100"></progress>
-              <span class="progress-description">50% Increase in 30 Days</span>
             </div>
             <!-- /.info-box-content -->
           </div>
@@ -1048,9 +1046,7 @@ to get the desired effect
             <div class="info-box-content">
               <span class="info-box-text">Mentions</span>
               <span class="info-box-number">92,050</span>
-
               <progress class="progress" value="20" max="100"></progress>
-              <span class="progress-description">20% Increase in 30 Days</span>
             </div>
             <!-- /.info-box-content -->
           </div>
@@ -1061,9 +1057,7 @@ to get the desired effect
             <div class="info-box-content">
               <span class="info-box-text">Downloads</span>
               <span class="info-box-number">114,381</span>
-
               <progress class="progress" value="70" max="100"></progress>
-              <span class="progress-description">70% Increase in 30 Days</span>
             </div>
             <!-- /.info-box-content -->
           </div>
@@ -1074,9 +1068,7 @@ to get the desired effect
             <div class="info-box-content">
               <span class="info-box-text">Direct Messages</span>
               <span class="info-box-number">163,921</span>
-
               <progress class="progress" value="40" max="100"></progress>
-              <span class="progress-description">40% Increase in 30 Days</span>
             </div>
             <!-- /.info-box-content -->
           </div>

starter.html

@@ -38,7 +38,7 @@ to get the desired effect
 |               | sidebar-mini                            |
 |---------------------------------------------------------|
 -->
-<body class="hold-transition skin-blue sidebar-mini control-sidebar-open">
+<body class="hold-transition skin-blue">
 <div class="wrapper">
   <!-- Navbar -->
   <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
@@ -154,7 +154,7 @@ to get the desired effect
         </div>
       </li>
       <li class="nav-item">
-        <a class="nav-link" data-widget="control-sidebar" data-slide="false" href="#"><i class="fa fa-th-large"></i></a>
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa fa-th-large"></i></a>
       </li>
     </ul>
   </nav>