alert.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. import Util from './util'
  2. /**
  3. * --------------------------------------------------------------------------
  4. * Bootstrap (v4.0.0): alert.js
  5. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  6. * --------------------------------------------------------------------------
  7. */
  8. const Alert = (($) => {
  9. /**
  10. * ------------------------------------------------------------------------
  11. * Constants
  12. * ------------------------------------------------------------------------
  13. */
  14. const NAME = 'alert'
  15. const VERSION = '4.0.0'
  16. const DATA_KEY = 'bs.alert'
  17. const EVENT_KEY = `.${DATA_KEY}`
  18. const DATA_API_KEY = '.data-api'
  19. const JQUERY_NO_CONFLICT = $.fn[NAME]
  20. const TRANSITION_DURATION = 150
  21. const Selector = {
  22. DISMISS : '[data-dismiss="alert"]'
  23. }
  24. const Event = {
  25. CLOSE : `close${EVENT_KEY}`,
  26. CLOSED : `closed${EVENT_KEY}`,
  27. CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
  28. }
  29. const ClassName = {
  30. ALERT : 'alert',
  31. FADE : 'fade',
  32. IN : 'in'
  33. }
  34. /**
  35. * ------------------------------------------------------------------------
  36. * Class Definition
  37. * ------------------------------------------------------------------------
  38. */
  39. class Alert {
  40. constructor(element) {
  41. this._element = element
  42. }
  43. // getters
  44. static get VERSION() {
  45. return VERSION
  46. }
  47. // public
  48. close(element) {
  49. element = element || this._element
  50. let rootElement = this._getRootElement(element)
  51. let customEvent = this._triggerCloseEvent(rootElement)
  52. if (customEvent.isDefaultPrevented()) {
  53. return
  54. }
  55. this._removeElement(rootElement)
  56. }
  57. dispose() {
  58. $.removeData(this._element, DATA_KEY)
  59. this._element = null
  60. }
  61. // private
  62. _getRootElement(element) {
  63. let selector = Util.getSelectorFromElement(element)
  64. let parent = false
  65. if (selector) {
  66. parent = $(selector)[0]
  67. }
  68. if (!parent) {
  69. parent = $(element).closest(`.${ClassName.ALERT}`)[0]
  70. }
  71. return parent
  72. }
  73. _triggerCloseEvent(element) {
  74. let closeEvent = $.Event(Event.CLOSE)
  75. $(element).trigger(closeEvent)
  76. return closeEvent
  77. }
  78. _removeElement(element) {
  79. $(element).removeClass(ClassName.IN)
  80. if (!Util.supportsTransitionEnd() ||
  81. !$(element).hasClass(ClassName.FADE)) {
  82. this._destroyElement(element)
  83. return
  84. }
  85. $(element)
  86. .one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element))
  87. .emulateTransitionEnd(TRANSITION_DURATION)
  88. }
  89. _destroyElement(element) {
  90. $(element)
  91. .detach()
  92. .trigger(Event.CLOSED)
  93. .remove()
  94. }
  95. // static
  96. static _jQueryInterface(config) {
  97. return this.each(function () {
  98. let $element = $(this)
  99. let data = $element.data(DATA_KEY)
  100. if (!data) {
  101. data = new Alert(this)
  102. $element.data(DATA_KEY, data)
  103. }
  104. if (config === 'close') {
  105. data[config](this)
  106. }
  107. })
  108. }
  109. static _handleDismiss(alertInstance) {
  110. return function (event) {
  111. if (event) {
  112. event.preventDefault()
  113. }
  114. alertInstance.close(this)
  115. }
  116. }
  117. }
  118. /**
  119. * ------------------------------------------------------------------------
  120. * Data Api implementation
  121. * ------------------------------------------------------------------------
  122. */
  123. $(document).on(
  124. Event.CLICK_DATA_API,
  125. Selector.DISMISS,
  126. Alert._handleDismiss(new Alert())
  127. )
  128. /**
  129. * ------------------------------------------------------------------------
  130. * jQuery
  131. * ------------------------------------------------------------------------
  132. */
  133. $.fn[NAME] = Alert._jQueryInterface
  134. $.fn[NAME].Constructor = Alert
  135. $.fn[NAME].noConflict = function () {
  136. $.fn[NAME] = JQUERY_NO_CONFLICT
  137. return Alert._jQueryInterface
  138. }
  139. return Alert
  140. })(jQuery)
  141. export default Alert