You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NavbarSearch.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /**
  2. * --------------------------------------------
  3. * AdminLTE NavbarSearch.js
  4. * License MIT
  5. * --------------------------------------------
  6. */
  7. import $ from 'jquery'
  8. /**
  9. * Constants
  10. * ====================================================
  11. */
  12. const NAME = 'NavbarSearch'
  13. const DATA_KEY = 'lte.navbar-search'
  14. const JQUERY_NO_CONFLICT = $.fn[NAME]
  15. const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
  16. const SELECTOR_SEARCH_BLOCK = '.navbar-search-block'
  17. const SELECTOR_SEARCH_INPUT = '.form-control'
  18. const CLASS_NAME_OPEN = 'navbar-search-open'
  19. const Default = {
  20. resetOnClose: true,
  21. target: SELECTOR_SEARCH_BLOCK
  22. }
  23. /**
  24. * Class Definition
  25. * ====================================================
  26. */
  27. class NavbarSearch {
  28. constructor(_element, _options) {
  29. this._element = _element
  30. this._config = $.extend({}, Default, _options)
  31. }
  32. // Public
  33. static _jQueryInterface(options) {
  34. return this.each(function () {
  35. let data = $(this).data(DATA_KEY)
  36. const _options = $.extend({}, Default, $(this).data())
  37. if (!data) {
  38. data = new NavbarSearch(this, _options)
  39. $(this).data(DATA_KEY, data)
  40. }
  41. if (!/toggle|close|open/.test(options)) {
  42. throw new Error(`Undefined method ${options}`)
  43. }
  44. data[options]()
  45. })
  46. }
  47. open() {
  48. $(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
  49. $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
  50. }
  51. close() {
  52. $(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
  53. if (this._config.resetOnClose) {
  54. $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
  55. }
  56. }
  57. // Static
  58. toggle() {
  59. if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
  60. this.close()
  61. } else {
  62. this.open()
  63. }
  64. }
  65. }
  66. /**
  67. * Data API
  68. * ====================================================
  69. */
  70. $(document).on('click', SELECTOR_TOGGLE_BUTTON, event => {
  71. event.preventDefault()
  72. let button = $(event.currentTarget)
  73. if (button.data('widget') !== 'navbar-search') {
  74. button = button.closest(SELECTOR_TOGGLE_BUTTON)
  75. }
  76. NavbarSearch._jQueryInterface.call(button, 'toggle')
  77. })
  78. /**
  79. * jQuery API
  80. * ====================================================
  81. */
  82. $.fn[NAME] = NavbarSearch._jQueryInterface
  83. $.fn[NAME].Constructor = NavbarSearch
  84. $.fn[NAME].noConflict = function () {
  85. $.fn[NAME] = JQUERY_NO_CONFLICT
  86. return NavbarSearch._jQueryInterface
  87. }
  88. export default NavbarSearch