button.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import $ from 'jquery'
  2. /**
  3. * --------------------------------------------------------------------------
  4. * Bootstrap (v4.1.3): button.js
  5. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  6. * --------------------------------------------------------------------------
  7. */
  8. const Button = (($) => {
  9. /**
  10. * ------------------------------------------------------------------------
  11. * Constants
  12. * ------------------------------------------------------------------------
  13. */
  14. const NAME = 'button'
  15. const VERSION = '4.1.3'
  16. const DATA_KEY = 'bs.button'
  17. const EVENT_KEY = `.${DATA_KEY}`
  18. const DATA_API_KEY = '.data-api'
  19. const JQUERY_NO_CONFLICT = $.fn[NAME]
  20. const ClassName = {
  21. ACTIVE : 'active',
  22. BUTTON : 'btn',
  23. FOCUS : 'focus'
  24. }
  25. const Selector = {
  26. DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
  27. DATA_TOGGLE : '[data-toggle="buttons"]',
  28. INPUT : 'input',
  29. ACTIVE : '.active',
  30. BUTTON : '.btn'
  31. }
  32. const Event = {
  33. CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
  34. FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` +
  35. `blur${EVENT_KEY}${DATA_API_KEY}`
  36. }
  37. /**
  38. * ------------------------------------------------------------------------
  39. * Class Definition
  40. * ------------------------------------------------------------------------
  41. */
  42. class Button {
  43. constructor(element) {
  44. this._element = element
  45. }
  46. // Getters
  47. static get VERSION() {
  48. return VERSION
  49. }
  50. // Public
  51. toggle() {
  52. let triggerChangeEvent = true
  53. let addAriaPressed = true
  54. const rootElement = $(this._element).closest(
  55. Selector.DATA_TOGGLE
  56. )[0]
  57. if (rootElement) {
  58. const input = this._element.querySelector(Selector.INPUT)
  59. if (input) {
  60. if (input.type === 'radio') {
  61. if (input.checked &&
  62. this._element.classList.contains(ClassName.ACTIVE)) {
  63. triggerChangeEvent = false
  64. } else {
  65. const activeElement = rootElement.querySelector(Selector.ACTIVE)
  66. if (activeElement) {
  67. $(activeElement).removeClass(ClassName.ACTIVE)
  68. }
  69. }
  70. }
  71. if (triggerChangeEvent) {
  72. if (input.hasAttribute('disabled') ||
  73. rootElement.hasAttribute('disabled') ||
  74. input.classList.contains('disabled') ||
  75. rootElement.classList.contains('disabled')) {
  76. return
  77. }
  78. input.checked = !this._element.classList.contains(ClassName.ACTIVE)
  79. $(input).trigger('change')
  80. }
  81. input.focus()
  82. addAriaPressed = false
  83. }
  84. }
  85. if (addAriaPressed) {
  86. this._element.setAttribute('aria-pressed',
  87. !this._element.classList.contains(ClassName.ACTIVE))
  88. }
  89. if (triggerChangeEvent) {
  90. $(this._element).toggleClass(ClassName.ACTIVE)
  91. }
  92. }
  93. dispose() {
  94. $.removeData(this._element, DATA_KEY)
  95. this._element = null
  96. }
  97. // Static
  98. static _jQueryInterface(config) {
  99. return this.each(function () {
  100. let data = $(this).data(DATA_KEY)
  101. if (!data) {
  102. data = new Button(this)
  103. $(this).data(DATA_KEY, data)
  104. }
  105. if (config === 'toggle') {
  106. data[config]()
  107. }
  108. })
  109. }
  110. }
  111. /**
  112. * ------------------------------------------------------------------------
  113. * Data Api implementation
  114. * ------------------------------------------------------------------------
  115. */
  116. $(document)
  117. .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
  118. event.preventDefault()
  119. let button = event.target
  120. if (!$(button).hasClass(ClassName.BUTTON)) {
  121. button = $(button).closest(Selector.BUTTON)
  122. }
  123. Button._jQueryInterface.call($(button), 'toggle')
  124. })
  125. .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
  126. const button = $(event.target).closest(Selector.BUTTON)[0]
  127. $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
  128. })
  129. /**
  130. * ------------------------------------------------------------------------
  131. * jQuery
  132. * ------------------------------------------------------------------------
  133. */
  134. $.fn[NAME] = Button._jQueryInterface
  135. $.fn[NAME].Constructor = Button
  136. $.fn[NAME].noConflict = function () {
  137. $.fn[NAME] = JQUERY_NO_CONFLICT
  138. return Button._jQueryInterface
  139. }
  140. return Button
  141. })($)
  142. export default Button