github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

small NavbarSearch improvements

pull/3385/head
REJack 2021-02-02 08:15:50 +01:00
parent 7224ea32cf
commit 1cacb6aed9
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
build/js/NavbarSearch.js
View File

@ -18,12 +18,13 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]' const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
const SELECTOR_SEARCH_BLOCK = '.navbar-search-block' 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 CLASS_NAME_OPEN = 'navbar-search-open'
const Default = { const Default = {
resetOnClose: true resetOnClose: true,
target: SELECTOR_SEARCH_BLOCK
} }
/** /**
@ -40,20 +41,20 @@ class NavbarSearch {
// Public // Public
open() { open() {
$(SELECTOR_SEARCH_BLOCK).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN) $(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
$(SELECTOR_SEARCH_INPUT).focus() $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
} }
close() { close() {
$(SELECTOR_SEARCH_BLOCK).fadeOut().removeClass(CLASS_NAME_OPEN) $(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
if (this._config.resetOnClose) { if (this._config.resetOnClose) {
$(SELECTOR_SEARCH_INPUT).val('') $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
} }
} }
toggle() { toggle() {
if ($(SELECTOR_SEARCH_BLOCK).hasClass(CLASS_NAME_OPEN)) { if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
this.close() this.close()
} else { } else {
this.open() this.open()
@ -65,9 +66,10 @@ class NavbarSearch {
static _jQueryInterface(options) { static _jQueryInterface(options) {
return this.each(function () { return this.each(function () {
let data = $(this).data(DATA_KEY) let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) { if (!data) {
data = new NavbarSearch(this, options) data = new NavbarSearch(this, _options)
$(this).data(DATA_KEY, data) $(this).data(DATA_KEY, data)
} }

11
build/scss/_main-header.scss
View File

@ -142,6 +142,17 @@
} }
} }
} }
.navbar-search-block {
.form-control-navbar {
&:focus {
&,
+ .input-group-append .btn-navbar {
color: $main-header-light-placeholder-color;
}
}
}
}
} }
// Navbar Search // Navbar Search