mirror of https://github.com/ColorlibHQ/AdminLTE
small NavbarSearch improvements
parent
7224ea32cf
commit
1cacb6aed9
|
@ -18,12 +18,13 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
|
|||
|
||||
const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
|
||||
const SELECTOR_SEARCH_BLOCK = '.navbar-search-block'
|
||||
const SELECTOR_SEARCH_INPUT = '.navbar-search-block .form-control'
|
||||
const SELECTOR_SEARCH_INPUT = '.form-control'
|
||||
|
||||
const CLASS_NAME_OPEN = 'navbar-search-open'
|
||||
|
||||
const Default = {
|
||||
resetOnClose: true
|
||||
resetOnClose: true,
|
||||
target: SELECTOR_SEARCH_BLOCK
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -40,20 +41,20 @@ class NavbarSearch {
|
|||
// Public
|
||||
|
||||
open() {
|
||||
$(SELECTOR_SEARCH_BLOCK).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
|
||||
$(SELECTOR_SEARCH_INPUT).focus()
|
||||
$(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
|
||||
$(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
|
||||
}
|
||||
|
||||
close() {
|
||||
$(SELECTOR_SEARCH_BLOCK).fadeOut().removeClass(CLASS_NAME_OPEN)
|
||||
$(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
|
||||
|
||||
if (this._config.resetOnClose) {
|
||||
$(SELECTOR_SEARCH_INPUT).val('')
|
||||
$(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if ($(SELECTOR_SEARCH_BLOCK).hasClass(CLASS_NAME_OPEN)) {
|
||||
if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
|
||||
this.close()
|
||||
} else {
|
||||
this.open()
|
||||
|
@ -65,9 +66,10 @@ class NavbarSearch {
|
|||
static _jQueryInterface(options) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _options = $.extend({}, Default, $(this).data())
|
||||
|
||||
if (!data) {
|
||||
data = new NavbarSearch(this, options)
|
||||
data = new NavbarSearch(this, _options)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
|
|
|
@ -142,6 +142,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-block {
|
||||
.form-control-navbar {
|
||||
&:focus {
|
||||
&,
|
||||
+ .input-group-append .btn-navbar {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Search
|
||||
|
|
Loading…
Reference in New Issue