AdminLTE/build/js/NavbarSearch.js

/**
 * --------------------------------------------
 * AdminLTE NavbarSearch.js
 * License MIT
 * --------------------------------------------
 */

import $ from 'jquery'

/**
 * Constants
 * ====================================================
 */

const NAME = 'NavbarSearch'
const DATA_KEY = 'lte.navbar-search'
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 = '.form-control'

const CLASS_NAME_OPEN = 'navbar-search-open'

const Default = {
  resetOnClose: true,
  target: SELECTOR_SEARCH_BLOCK
}

/**
 * Class Definition
 * ====================================================
 */

class NavbarSearch {
  constructor(_element, _options) {
    this._element = _element
    this._config = _options
  }

  // Public

  open() {
    $(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
    $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
  }

  close() {
    $(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)

    if (this._config.resetOnClose) {
      $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
    }
  }

  toggle() {
    if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
      this.close()
    } else {
      this.open()
    }
  }

  // Static
  static _jQueryInterface(config) {
    return this.each(function () {
      let data = $(this).data(DATA_KEY)
      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())

      if (!data) {
        data = new NavbarSearch($(this), _config)
        $(this).data(DATA_KEY, data)
      } else if (typeof config === 'string') {
        if (typeof data[config] === 'undefined') {
          throw new TypeError(`No method named "${config}"`)
        }

        data[config]()
      }
    })
  }
}

/**
 * Data API
 * ====================================================
 */
$(document).on('click', SELECTOR_TOGGLE_BUTTON, event => {
  event.preventDefault()

  let button = $(event.currentTarget)

  if (button.data('widget') !== 'navbar-search') {
    button = button.closest(SELECTOR_TOGGLE_BUTTON)
  }

  NavbarSearch._jQueryInterface.call(button, 'toggle')
})

/**
 * jQuery API
 * ====================================================
 */

$.fn[NAME] = NavbarSearch._jQueryInterface
$.fn[NAME].Constructor = NavbarSearch
$.fn[NAME].noConflict = function () {
  $.fn[NAME] = JQUERY_NO_CONFLICT
  return NavbarSearch._jQueryInterface
}

export default NavbarSearch