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

Create Search plugin

Browse source
This commit is contained in:
Abdullah Almsaeed 2016-10-26 09:30:59 -04:00
parent e8507e21d7
commit 41f6f8d55a
10 changed files with 762 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
build/js/dist/Search.js vendored Normal file
View file

@ -0,0 +1,193 @@
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* --------------------------------------------
* AdminLTE Search.js
* License MIT
* --------------------------------------------
*/
var Search = function ($) {
/**
* Constants
* ====================================================
*/
var NAME = 'Search';
var DATA_KEY = 'lte.search';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];
var Event = {
LOAD_DATA_API: 'load' + EVENT_KEY
};
var Selector = {
LI: '.nav-item',
LINK: '.nav-link',
OPEN: '.menu-open',
ACTIVE: '.active',
TREEVIEW_MENU: '[data-widget="treeview"]',
NAV_TREEVIEW: '.nav-treeview',
DATA_WIDGET: '[data-widget="search"]'
};
var ClassName = {
LI: 'nav-item',
LINK: 'nav-link',
NAV_TREEVIEW: 'nav-treeview',
OPEN: 'menu-open'
};
var Default = {
target: '',
case_sensitive: false
};
/**
* Class Definition
* ====================================================
*/
var Search = function () {
function Search(element, config) {
_classCallCheck(this, Search);
this._config = config;
this._element = element;
this._open_menus = null;
}
// Public
_createClass(Search, [{
key: 'init',
value: function init() {
if (this._config.target === '') {
this._config.target = this._element.closest(Selector.TREEVIEW_MENU);
} else {
this._config.target = $(this._config.target);
}
// Set treeview original state
this._open_menus = this._config.target.find(Selector.OPEN);
// Prevent form submission
this._element.parents('form').first().submit(function (event) {
event.preventDefault();
});
// Setup search function
this._element.keyup(function (event) {
event.preventDefault();
var value = $(event.currentTarget).val();
if (!this._config.case_sensitive) {
value = value.toLowerCase();
}
this.search(value);
}.bind(this));
}
}, {
key: 'search',
value: function search(value) {
var _that = this;
// If the value is back to null
if (!value) {
// Close all treeviews
this._config.target.find(Selector.LI).css('display', 'block').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');
}
});
return;
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
var text = $(this).children(Selector.LINK).first().text();
if (!_that._config.case_sensitive) {
text = text.toLowerCase();
}
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');
}
});
}
// Static
}], [{
key: '_jQueryInterface',
value: function _jQueryInterface(config) {
return this.each(function () {
var data = $(this).data(DATA_KEY);
var _config = $.extend({}, Default, $(this).data());
if (!data) {
data = new Search($(this), _config);
$(this).data(DATA_KEY, data);
}
if (config === 'init') {
data[config]();
}
});
}
}]);
return Search;
}();
/**
* Data API
* ====================================================
*/
$(window).on(Event.LOAD_DATA_API, function () {
$(Selector.DATA_WIDGET).each(function () {
Search._jQueryInterface.call($(this), 'init');
});
});
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Search._jQueryInterface;
$.fn[NAME].Constructor = Search;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Search._jQueryInterface;
};
return Search;
}(jQuery);
//# sourceMappingURL=Search.js.map

1
build/js/dist/Search.js.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -144,31 +144,31 @@ const Treeview = (($) => {
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
SELECTED: `selected${EVENT_KEY}`,
EXPANDED: `expanded${EVENT_KEY}`,
COLLAPSED: `collapsed${EVENT_KEY}`,
SELECTED : `selected${EVENT_KEY}`,
EXPANDED : `expanded${EVENT_KEY}`,
COLLAPSED : `collapsed${EVENT_KEY}`,
LOAD_DATA_API: `load${EVENT_KEY}`
}
const Selector = {
LI: '.nav-item',
LINK: '.nav-link',
LI : '.nav-item',
LINK : '.nav-link',
TREEVIEW_MENU: '.nav-treeview',
OPEN: '.menu-open',
DATA_WIDGET: '[data-widget="treeview"]'
OPEN : '.menu-open',
DATA_WIDGET : '[data-widget="treeview"]'
}
const ClassName = {
LI: 'nav-item',
LINK: 'nav-link',
LI : 'nav-item',
LINK : 'nav-link',
TREEVIEW_MENU: 'nav-treeview',
OPEN: 'menu-open'
OPEN : 'menu-open'
}
const Default = {
trigger: `${Selector.DATA_WIDGET} ${Selector.LINK}`,
trigger : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
animationSpeed: 300,
accordion: true
accordion : true
}
/**
@ -565,3 +565,180 @@ const ControlSidebar = (($) => {
return ControlSidebar
})(jQuery)
const Search = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Search'
const DATA_KEY = 'lte.search'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
LOAD_DATA_API: `load${EVENT_KEY}`
}
const Selector = {
LI : '.nav-item',
LINK : '.nav-link',
OPEN : '.menu-open',
ACTIVE : '.active',
TREEVIEW_MENU: '[data-widget="treeview"]',
NAV_TREEVIEW : '.nav-treeview',
DATA_WIDGET : '[data-widget="search"]'
}
const ClassName = {
LI : 'nav-item',
LINK : 'nav-link',
NAV_TREEVIEW: 'nav-treeview',
OPEN : 'menu-open'
}
const Default = {
target : '',
case_sensitive: false
}
/**
* Class Definition
* ====================================================
*/
class Search {
constructor(element, config) {
this._config = config
this._element = element
this._open_menus = null
}
// Public
init() {
if (this._config.target === '') {
this._config.target = this._element.closest(Selector.TREEVIEW_MENU)
} else {
this._config.target = $(this._config.target)
}
// Set treeview original state
this._open_menus = this._config.target.find(Selector.OPEN)
// Prevent form submission
this._element.parents('form').first().submit(function (event) {
event.preventDefault()
})
// Setup search function
this._element.keyup(function (event) {
event.preventDefault()
let value = $(event.currentTarget).val()
if (!this._config.case_sensitive) {
value = value.toLowerCase()
}
this.search(value)
}.bind(this))
}
search(value) {
let _that = this
// If the value is back to null
if (!value) {
// Close all treeviews
this._config.target.find(Selector.LI)
.css('display', 'block')
.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')
}
})
return
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
let text = $(this).children(Selector.LINK).first().text()
if (!_that._config.case_sensitive) {
text = text.toLowerCase()
}
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')
}
})
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
let _config = $.extend({}, Default, $(this).data())
if (!data) {
data = new Search($(this), _config)
$(this).data(DATA_KEY, data)
}
if (config === 'init') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(window).on(Event.LOAD_DATA_API, () => {
$(Selector.DATA_WIDGET).each(function () {
Search._jQueryInterface.call($(this), 'init')
})
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Search._jQueryInterface
$.fn[NAME].Constructor = Search
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Search._jQueryInterface
}
return Search
})(jQuery)

183
build/js/src/Search.js Normal file
View file

@ -0,0 +1,183 @@
/**
* --------------------------------------------
* AdminLTE Search.js
* License MIT
* --------------------------------------------
*/
const Search = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Search'
const DATA_KEY = 'lte.search'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
LOAD_DATA_API: `load${EVENT_KEY}`
}
const Selector = {
LI : '.nav-item',
LINK : '.nav-link',
OPEN : '.menu-open',
ACTIVE : '.active',
TREEVIEW_MENU: '[data-widget="treeview"]',
NAV_TREEVIEW : '.nav-treeview',
DATA_WIDGET : '[data-widget="search"]'
}
const ClassName = {
LI : 'nav-item',
LINK : 'nav-link',
NAV_TREEVIEW: 'nav-treeview',
OPEN : 'menu-open'
}
const Default = {
target : '',
case_sensitive: false
}
/**
* Class Definition
* ====================================================
*/
class Search {
constructor(element, config) {
this._config = config
this._element = element
this._open_menus = null
}
// Public
init() {
if (this._config.target === '') {
this._config.target = this._element.closest(Selector.TREEVIEW_MENU)
} else {
this._config.target = $(this._config.target)
}
// Set treeview original state
this._open_menus = this._config.target.find(Selector.OPEN)
// Prevent form submission
this._element.parents('form').first().submit(function (event) {
event.preventDefault()
})
// Setup search function
this._element.keyup(function (event) {
event.preventDefault()
let value = $(event.currentTarget).val()
if (!this._config.case_sensitive) {
value = value.toLowerCase()
}
this.search(value)
}.bind(this))
}
search(value) {
let _that = this
// If the value is back to null
if (!value) {
// Close all treeviews
this._config.target.find(Selector.LI)
.css('display', 'block')
.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')
}
})
return
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
let text = $(this).children(Selector.LINK).first().text()
if (!_that._config.case_sensitive) {
text = text.toLowerCase()
}
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')
}
})
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
let _config = $.extend({}, Default, $(this).data())
if (!data) {
data = new Search($(this), _config)
$(this).data(DATA_KEY, data)
}
if (config === 'init') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(window).on(Event.LOAD_DATA_API, () => {
$(Selector.DATA_WIDGET).each(function () {
Search._jQueryInterface.call($(this), 'init')
})
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Search._jQueryInterface
$.fn[NAME].Constructor = Search
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Search._jQueryInterface
}
return Search
})(jQuery)

24
build/js/src/Treeview.js
View file

@ -18,31 +18,31 @@ const Treeview = (($) => {
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
SELECTED: `selected${EVENT_KEY}`,
EXPANDED: `expanded${EVENT_KEY}`,
COLLAPSED: `collapsed${EVENT_KEY}`,
SELECTED : `selected${EVENT_KEY}`,
EXPANDED : `expanded${EVENT_KEY}`,
COLLAPSED : `collapsed${EVENT_KEY}`,
LOAD_DATA_API: `load${EVENT_KEY}`
}
const Selector = {
LI: '.nav-item',
LINK: '.nav-link',
LI : '.nav-item',
LINK : '.nav-link',
TREEVIEW_MENU: '.nav-treeview',
OPEN: '.menu-open',
DATA_WIDGET: '[data-widget="treeview"]'
OPEN : '.menu-open',
DATA_WIDGET : '[data-widget="treeview"]'
}
const ClassName = {
LI: 'nav-item',
LINK: 'nav-link',
LI : 'nav-item',
LINK : 'nav-link',
TREEVIEW_MENU: 'nav-treeview',
OPEN: 'menu-open'
OPEN : 'menu-open'
}
const Default = {
trigger: `${Selector.DATA_WIDGET} ${Selector.LINK}`,
trigger : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
animationSpeed: 300,
accordion: true
accordion : true
}
/**

180
dist/js/adminlte.js vendored
View file

@ -616,4 +616,184 @@ var ControlSidebar = function ($) {
return ControlSidebar;
}(jQuery);
var Search = function ($) {
/**
* Constants
* ====================================================
*/
var NAME = 'Search';
var DATA_KEY = 'lte.search';
var EVENT_KEY = '.' + DATA_KEY;
var JQUERY_NO_CONFLICT = $.fn[NAME];
var Event = {
LOAD_DATA_API: 'load' + EVENT_KEY
};
var Selector = {
LI: '.nav-item',
LINK: '.nav-link',
OPEN: '.menu-open',
ACTIVE: '.active',
TREEVIEW_MENU: '[data-widget="treeview"]',
NAV_TREEVIEW: '.nav-treeview',
DATA_WIDGET: '[data-widget="search"]'
};
var ClassName = {
LI: 'nav-item',
LINK: 'nav-link',
NAV_TREEVIEW: 'nav-treeview',
OPEN: 'menu-open'
};
var Default = {
target: '',
case_sensitive: false
};
/**
* Class Definition
* ====================================================
*/
var Search = function () {
function Search(element, config) {
_classCallCheck(this, Search);
this._config = config;
this._element = element;
this._open_menus = null;
}
// Public
_createClass(Search, [{
key: 'init',
value: function init() {
if (this._config.target === '') {
this._config.target = this._element.closest(Selector.TREEVIEW_MENU);
} else {
this._config.target = $(this._config.target);
}
// Set treeview original state
this._open_menus = this._config.target.find(Selector.OPEN);
// Prevent form submission
this._element.parents('form').first().submit(function (event) {
event.preventDefault();
});
// Setup search function
this._element.keyup(function (event) {
event.preventDefault();
var value = $(event.currentTarget).val();
if (!this._config.case_sensitive) {
value = value.toLowerCase();
}
this.search(value);
}.bind(this));
}
}, {
key: 'search',
value: function search(value) {
var _that = this;
// If the value is back to null
if (!value) {
// Close all treeviews
this._config.target.find(Selector.LI).css('display', 'block').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');
}
});
return;
}
// Search through the tree elements
this._config.target.find(Selector.LI).each(function () {
var text = $(this).children(Selector.LINK).first().text();
if (!_that._config.case_sensitive) {
text = text.toLowerCase();
}
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');
}
});
}
// Static
}], [{
key: '_jQueryInterface',
value: function _jQueryInterface(config) {
return this.each(function () {
var data = $(this).data(DATA_KEY);
var _config = $.extend({}, Default, $(this).data());
if (!data) {
data = new Search($(this), _config);
$(this).data(DATA_KEY, data);
}
if (config === 'init') {
data[config]();
}
});
}
}]);
return Search;
}();
/**
* Data API
* ====================================================
*/
$(window).on(Event.LOAD_DATA_API, function () {
$(Selector.DATA_WIDGET).each(function () {
Search._jQueryInterface.call($(this), 'init');
});
});
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Search._jQueryInterface;
$.fn[NAME].Constructor = Search;
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Search._jQueryInterface;
};
return Search;
}(jQuery);
//# sourceMappingURL=adminlte.js.map

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

2
starter.html
View file

@ -185,7 +185,7 @@ to get the desired effect
<form action="#" method="get" class="sidebar-form">
<div class="form-group has-icon">
<input type="search" name="q" class="form-control" placeholder="Search" data-widget="treeview-search" data-target="#searchable-treeview">
<input type="search" name="q" class="form-control" placeholder="Search" data-widget="search" data-target="#searchable-treeview">
<button type="submit" class="form-icon"><i class="fa fa-search"></i></button>
</div>
</form><!-- /.sidebar-form -->