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

View File

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

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