maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Abdullah Almsaeed 2016-11-03 16:44:15 -04:00
parent 41f6f8d55a
commit e47cc06a9e
9 changed files with 247 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
build/js/dist/Search.js vendored
View file

@ -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);
}.bind(this));
_this.search(value);
});
}
}, {
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');
this._open_menus.each(function () {
if (!$(this).hasClass(ClassName.OPEN)) {
$(this).addClass(Selector.OPEN).css('display', 'block');
$(this).children(Selector.NAV_TREEVIEW).css('display', 'block');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
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 text = $(this).children(Selector.LINK).first().text();
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
if (!_that._config.case_sensitive) {
text = text.toLowerCase();
try {
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');
}
}
if (text.search(value) == -1) {
// No results
$(this).css('display', 'none');
} else {
// Found the result
// Make the parent LI visible
$(this).parents(Selector.LI).css('display', 'block');
// Make the parent nav-treeview visible
$(this).parents(Selector.NAV_TREEVIEW).addClass('menu-open').css('display', 'block');
// Make this element visible
$(this).css('display', 'block');
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
});
}
}
// Static

2
build/js/dist/Search.js.map vendored
View file

File diff suppressed because one or more lines are too long

65
build/js/src/AdminLTE.js
View file

@ -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)
.css('display', 'block')
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')
this._open_menus.each(function () {
if (!$(this).hasClass(ClassName.OPEN)) {
$(this).addClass(Selector.OPEN).css('display', 'block')
$(this).children(Selector.NAV_TREEVIEW).css('display', 'block')
for (let menu of this._open_menus) {
if (!$(menu).hasClass(ClassName.OPEN)) {
$(menu).addClass(ClassName.OPEN).css('display', 'block')
$(menu).children(Selector.NAV_TREEVIEW).css('display', 'block')
}
})
}
return
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
let text = $(this).children(Selector.LINK).first().text()
// Hide all elements
items.css('display', 'none')
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) {
// No results
$(this).css('display', 'none')
} else { // Found the result
if (text.indexOf(value) != -1) {
// 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
$(this).parents(Selector.NAV_TREEVIEW)
.addClass('menu-open')
// 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
$(this).css('display', 'block')
$(item).css('display', 'block')
}
})
}
}

65
build/js/src/Search.js
View file

@ -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)
.css('display', 'block')
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')
this._open_menus.each(function () {
if (!$(this).hasClass(ClassName.OPEN)) {
$(this).addClass(Selector.OPEN).css('display', 'block')
$(this).children(Selector.NAV_TREEVIEW).css('display', 'block')
for (let menu of this._open_menus) {
if (!$(menu).hasClass(ClassName.OPEN)) {
$(menu).addClass(ClassName.OPEN).css('display', 'block')
$(menu).children(Selector.NAV_TREEVIEW).css('display', 'block')
}
})
}
return
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
let text = $(this).children(Selector.LINK).first().text()
// Hide all elements
items.css('display', 'none')
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) {
// No results
$(this).css('display', 'none')
} else { // Found the result
if (text.indexOf(value) != -1) {
// 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
$(this).parents(Selector.NAV_TREEVIEW)
.addClass('menu-open')
// 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
$(this).css('display', 'block')
$(item).css('display', 'block')
}
})
}
}

112
dist/js/adminlte.js vendored
View file

@ -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);
}.bind(this));
_this5.search(value);
});
}
}, {
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');
this._open_menus.each(function () {
if (!$(this).hasClass(ClassName.OPEN)) {
$(this).addClass(Selector.OPEN).css('display', 'block');
$(this).children(Selector.NAV_TREEVIEW).css('display', 'block');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
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 text = $(this).children(Selector.LINK).first().text();
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
if (!_that._config.case_sensitive) {
text = text.toLowerCase();
try {
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');
}
}
if (text.search(value) == -1) {
// No results
$(this).css('display', 'none');
} else {
// Found the result
// Make the parent LI visible
$(this).parents(Selector.LI).css('display', 'block');
// Make the parent nav-treeview visible
$(this).parents(Selector.NAV_TREEVIEW).addClass('menu-open').css('display', 'block');
// Make this element visible
$(this).css('display', 'block');
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
});
}
}
// Static

2
dist/js/adminlte.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js vendored
View file

File diff suppressed because one or more lines are too long

8
index2.html
View file

@ -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>

4
starter.html
View file

@ -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>