Dropdown.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /**
  2. * --------------------------------------------
  3. * AdminLTE Dropdown.js
  4. * License MIT
  5. * --------------------------------------------
  6. */
  7. const Dropdown = (($) => {
  8. /**
  9. * Constants
  10. * ====================================================
  11. */
  12. const NAME = 'Dropdown'
  13. const DATA_KEY = 'lte.dropdown'
  14. const EVENT_KEY = `.${DATA_KEY}`
  15. const JQUERY_NO_CONFLICT = $.fn[NAME]
  16. const Selector = {
  17. NAVBAR: '.navbar',
  18. DROPDOWN_MENU: '.dropdown-menu',
  19. DROPDOWN_MENU_ACTIVE: '.dropdown-menu.show',
  20. DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
  21. }
  22. const ClassName = {
  23. DROPDOWN_HOVER: 'dropdown-hover',
  24. DROPDOWN_RIGHT: 'dropdown-menu-right'
  25. }
  26. const Default = {
  27. }
  28. /**
  29. * Class Definition
  30. * ====================================================
  31. */
  32. class Dropdown {
  33. constructor(element, config) {
  34. this._config = config
  35. this._element = element
  36. }
  37. // Public
  38. toggleSubmenu() {
  39. this._element.siblings().toggleClass("show")
  40. if (! this._element.next().hasClass('show')) {
  41. this._element.parents('.dropdown-menu').first().find('.show').removeClass("show")
  42. }
  43. this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
  44. $('.dropdown-submenu .show').removeClass("show")
  45. })
  46. }
  47. fixPosition() {
  48. let elm = $(Selector.DROPDOWN_MENU_ACTIVE)
  49. if (elm.length !== 0) {
  50. if (elm.hasClass(ClassName.DROPDOWN_RIGHT)) {
  51. elm.css('left', 'inherit')
  52. elm.css('right', 0)
  53. } else {
  54. elm.css('left', 0)
  55. elm.css('right', 'inherit')
  56. }
  57. let offset = elm.offset()
  58. let width = elm.width()
  59. let windowWidth = $(window).width()
  60. let visiblePart = windowWidth - offset.left
  61. if (offset.left < 0) {
  62. elm.css('left', 'inherit')
  63. elm.css('right', (offset.left - 5))
  64. } else {
  65. if (visiblePart < width) {
  66. elm.css('left', 'inherit')
  67. elm.css('right', 0)
  68. }
  69. }
  70. }
  71. }
  72. // Static
  73. static _jQueryInterface(config) {
  74. return this.each(function () {
  75. let data = $(this).data(DATA_KEY)
  76. const _config = $.extend({}, Default, $(this).data())
  77. if (!data) {
  78. data = new Dropdown($(this), _config)
  79. $(this).data(DATA_KEY, data)
  80. }
  81. if (config === 'toggleSubmenu' || config == 'fixPosition') {
  82. data[config]()
  83. }
  84. })
  85. }
  86. }
  87. /**
  88. * Data API
  89. * ====================================================
  90. */
  91. // $(Selector.DROPDOWN_TOGGLE).on("click", function(event) {
  92. // event.preventDefault()
  93. // event.stopPropagation()
  94. //
  95. // Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
  96. // });
  97. //
  98. // $(Selector.DROPDOWN_TOGGLE).on("click", function(event) {
  99. // event.preventDefault()
  100. //
  101. // setTimeout(function() {
  102. // Dropdown._jQueryInterface.call($(this), 'fixPosition')
  103. // }, 1)
  104. // });
  105. /**
  106. * jQuery API
  107. * ====================================================
  108. */
  109. $.fn[NAME] = Dropdown._jQueryInterface
  110. $.fn[NAME].Constructor = Dropdown
  111. $.fn[NAME].noConflict = function () {
  112. $.fn[NAME] = JQUERY_NO_CONFLICT
  113. return Dropdown._jQueryInterface
  114. }
  115. return Dropdown
  116. })(jQuery)
  117. export default Dropdown