Layout von Websiten mit Bootstrap und Foundation
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.

alert.js 3.8KB

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