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.

toast.js 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /**
  2. * --------------------------------------------------------------------------
  3. * Bootstrap (v4.5.0): toast.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 = 'toast'
  15. const VERSION = '4.5.0'
  16. const DATA_KEY = 'bs.toast'
  17. const EVENT_KEY = `.${DATA_KEY}`
  18. const JQUERY_NO_CONFLICT = $.fn[NAME]
  19. const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
  20. const EVENT_HIDE = `hide${EVENT_KEY}`
  21. const EVENT_HIDDEN = `hidden${EVENT_KEY}`
  22. const EVENT_SHOW = `show${EVENT_KEY}`
  23. const EVENT_SHOWN = `shown${EVENT_KEY}`
  24. const CLASS_NAME_FADE = 'fade'
  25. const CLASS_NAME_HIDE = 'hide'
  26. const CLASS_NAME_SHOW = 'show'
  27. const CLASS_NAME_SHOWING = 'showing'
  28. const DefaultType = {
  29. animation : 'boolean',
  30. autohide : 'boolean',
  31. delay : 'number'
  32. }
  33. const Default = {
  34. animation : true,
  35. autohide : true,
  36. delay : 500
  37. }
  38. const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
  39. /**
  40. * ------------------------------------------------------------------------
  41. * Class Definition
  42. * ------------------------------------------------------------------------
  43. */
  44. class Toast {
  45. constructor(element, config) {
  46. this._element = element
  47. this._config = this._getConfig(config)
  48. this._timeout = null
  49. this._setListeners()
  50. }
  51. // Getters
  52. static get VERSION() {
  53. return VERSION
  54. }
  55. static get DefaultType() {
  56. return DefaultType
  57. }
  58. static get Default() {
  59. return Default
  60. }
  61. // Public
  62. show() {
  63. const showEvent = $.Event(EVENT_SHOW)
  64. $(this._element).trigger(showEvent)
  65. if (showEvent.isDefaultPrevented()) {
  66. return
  67. }
  68. if (this._config.animation) {
  69. this._element.classList.add(CLASS_NAME_FADE)
  70. }
  71. const complete = () => {
  72. this._element.classList.remove(CLASS_NAME_SHOWING)
  73. this._element.classList.add(CLASS_NAME_SHOW)
  74. $(this._element).trigger(EVENT_SHOWN)
  75. if (this._config.autohide) {
  76. this._timeout = setTimeout(() => {
  77. this.hide()
  78. }, this._config.delay)
  79. }
  80. }
  81. this._element.classList.remove(CLASS_NAME_HIDE)
  82. Util.reflow(this._element)
  83. this._element.classList.add(CLASS_NAME_SHOWING)
  84. if (this._config.animation) {
  85. const transitionDuration = Util.getTransitionDurationFromElement(this._element)
  86. $(this._element)
  87. .one(Util.TRANSITION_END, complete)
  88. .emulateTransitionEnd(transitionDuration)
  89. } else {
  90. complete()
  91. }
  92. }
  93. hide() {
  94. if (!this._element.classList.contains(CLASS_NAME_SHOW)) {
  95. return
  96. }
  97. const hideEvent = $.Event(EVENT_HIDE)
  98. $(this._element).trigger(hideEvent)
  99. if (hideEvent.isDefaultPrevented()) {
  100. return
  101. }
  102. this._close()
  103. }
  104. dispose() {
  105. clearTimeout(this._timeout)
  106. this._timeout = null
  107. if (this._element.classList.contains(CLASS_NAME_SHOW)) {
  108. this._element.classList.remove(CLASS_NAME_SHOW)
  109. }
  110. $(this._element).off(EVENT_CLICK_DISMISS)
  111. $.removeData(this._element, DATA_KEY)
  112. this._element = null
  113. this._config = null
  114. }
  115. // Private
  116. _getConfig(config) {
  117. config = {
  118. ...Default,
  119. ...$(this._element).data(),
  120. ...typeof config === 'object' && config ? config : {}
  121. }
  122. Util.typeCheckConfig(
  123. NAME,
  124. config,
  125. this.constructor.DefaultType
  126. )
  127. return config
  128. }
  129. _setListeners() {
  130. $(this._element).on(EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide())
  131. }
  132. _close() {
  133. const complete = () => {
  134. this._element.classList.add(CLASS_NAME_HIDE)
  135. $(this._element).trigger(EVENT_HIDDEN)
  136. }
  137. this._element.classList.remove(CLASS_NAME_SHOW)
  138. if (this._config.animation) {
  139. const transitionDuration = Util.getTransitionDurationFromElement(this._element)
  140. $(this._element)
  141. .one(Util.TRANSITION_END, complete)
  142. .emulateTransitionEnd(transitionDuration)
  143. } else {
  144. complete()
  145. }
  146. }
  147. // Static
  148. static _jQueryInterface(config) {
  149. return this.each(function () {
  150. const $element = $(this)
  151. let data = $element.data(DATA_KEY)
  152. const _config = typeof config === 'object' && config
  153. if (!data) {
  154. data = new Toast(this, _config)
  155. $element.data(DATA_KEY, data)
  156. }
  157. if (typeof config === 'string') {
  158. if (typeof data[config] === 'undefined') {
  159. throw new TypeError(`No method named "${config}"`)
  160. }
  161. data[config](this)
  162. }
  163. })
  164. }
  165. }
  166. /**
  167. * ------------------------------------------------------------------------
  168. * jQuery
  169. * ------------------------------------------------------------------------
  170. */
  171. $.fn[NAME] = Toast._jQueryInterface
  172. $.fn[NAME].Constructor = Toast
  173. $.fn[NAME].noConflict = () => {
  174. $.fn[NAME] = JQUERY_NO_CONFLICT
  175. return Toast._jQueryInterface
  176. }
  177. export default Toast