JAVASCRIPT   13

toast

Guest on 6th July 2022 01:05:19 AM

  1. /**
  2.  * --------------------------------------------------------------------------
  3.  * Bootstrap (v4.3.1): toast.js
  4.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  5.  * --------------------------------------------------------------------------
  6.  */
  7.  
  8. import $ from 'jquery'
  9. import Util from './util'
  10.  
  11. /**
  12.  * ------------------------------------------------------------------------
  13.  * Constants
  14.  * ------------------------------------------------------------------------
  15.  */
  16.  
  17. const NAME               = 'toast'
  18. const VERSION            = '4.3.1'
  19. const DATA_KEY           = 'bs.toast'
  20. const EVENT_KEY          = `.${DATA_KEY}`
  21. const JQUERY_NO_CONFLICT = $.fn[NAME]
  22.  
  23. const Event = {
  24.   CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
  25.   HIDE          : `hide${EVENT_KEY}`,
  26.   HIDDEN        : `hidden${EVENT_KEY}`,
  27.   SHOW          : `show${EVENT_KEY}`,
  28.   SHOWN         : `shown${EVENT_KEY}`
  29. }
  30.  
  31. const ClassName = {
  32.   FADE    : 'fade',
  33.   HIDE    : 'hide',
  34.   SHOW    : 'show',
  35.   SHOWING : 'showing'
  36. }
  37.  
  38. const DefaultType = {
  39.   animation : 'boolean',
  40.   autohide  : 'boolean',
  41.   delay     : 'number'
  42. }
  43.  
  44. const Default = {
  45.   animation : true,
  46.   autohide  : true,
  47.   delay     : 500
  48. }
  49.  
  50. const Selector = {
  51.   DATA_DISMISS : '[data-dismiss="toast"]'
  52. }
  53.  
  54. /**
  55.  * ------------------------------------------------------------------------
  56.  * Class Definition
  57.  * ------------------------------------------------------------------------
  58.  */
  59.  
  60. class Toast {
  61.   constructor(element, config) {
  62.     this._element = element
  63.     this._config  = this._getConfig(config)
  64.     this._timeout = null
  65.     this._setListeners()
  66.   }
  67.  
  68.   // Getters
  69.  
  70.   static get VERSION() {
  71.     return VERSION
  72.   }
  73.  
  74.   static get DefaultType() {
  75.     return DefaultType
  76.   }
  77.  
  78.   static get Default() {
  79.     return Default
  80.   }
  81.  
  82.   // Public
  83.  
  84.   show() {
  85.     $(this._element).trigger(Event.SHOW)
  86.  
  87.     if (this._config.animation) {
  88.       this._element.classList.add(ClassName.FADE)
  89.     }
  90.  
  91.     const complete = () => {
  92.       this._element.classList.remove(ClassName.SHOWING)
  93.       this._element.classList.add(ClassName.SHOW)
  94.  
  95.       $(this._element).trigger(Event.SHOWN)
  96.  
  97.       if (this._config.autohide) {
  98.         this.hide()
  99.       }
  100.     }
  101.  
  102.     this._element.classList.remove(ClassName.HIDE)
  103.     this._element.classList.add(ClassName.SHOWING)
  104.     if (this._config.animation) {
  105.       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
  106.  
  107.       $(this._element)
  108.         .one(Util.TRANSITION_END, complete)
  109.         .emulateTransitionEnd(transitionDuration)
  110.     } else {
  111.       complete()
  112.     }
  113.   }
  114.  
  115.   hide(withoutTimeout) {
  116.     if (!this._element.classList.contains(ClassName.SHOW)) {
  117.       return
  118.     }
  119.  
  120.     $(this._element).trigger(Event.HIDE)
  121.  
  122.     if (withoutTimeout) {
  123.       this._close()
  124.     } else {
  125.       this._timeout = setTimeout(() => {
  126.         this._close()
  127.       }, this._config.delay)
  128.     }
  129.   }
  130.  
  131.   dispose() {
  132.     clearTimeout(this._timeout)
  133.     this._timeout = null
  134.  
  135.     if (this._element.classList.contains(ClassName.SHOW)) {
  136.       this._element.classList.remove(ClassName.SHOW)
  137.     }
  138.  
  139.     $(this._element).off(Event.CLICK_DISMISS)
  140.  
  141.     $.removeData(this._element, DATA_KEY)
  142.     this._element = null
  143.     this._config  = null
  144.   }
  145.  
  146.   // Private
  147.  
  148.   _getConfig(config) {
  149.     config = {
  150.       ...Default,
  151.       ...$(this._element).data(),
  152.       ...typeof config === 'object' && config ? config : {}
  153.     }
  154.  
  155.     Util.typeCheckConfig(
  156.       NAME,
  157.       config,
  158.       this.constructor.DefaultType
  159.     )
  160.  
  161.     return config
  162.   }
  163.  
  164.   _setListeners() {
  165.     $(this._element).on(
  166.       Event.CLICK_DISMISS,
  167.       Selector.DATA_DISMISS,
  168.       () => this.hide(true)
  169.     )
  170.   }
  171.  
  172.   _close() {
  173.     const complete = () => {
  174.       this._element.classList.add(ClassName.HIDE)
  175.       $(this._element).trigger(Event.HIDDEN)
  176.     }
  177.  
  178.     this._element.classList.remove(ClassName.SHOW)
  179.     if (this._config.animation) {
  180.       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
  181.  
  182.       $(this._element)
  183.         .one(Util.TRANSITION_END, complete)
  184.         .emulateTransitionEnd(transitionDuration)
  185.     } else {
  186.       complete()
  187.     }
  188.   }
  189.  
  190.   // Static
  191.  
  192.   static _jQueryInterface(config) {
  193.     return this.each(function () {
  194.       const $element = $(this)
  195.       let data       = $element.data(DATA_KEY)
  196.       const _config  = typeof config === 'object' && config
  197.  
  198.       if (!data) {
  199.         data = new Toast(this, _config)
  200.         $element.data(DATA_KEY, data)
  201.       }
  202.  
  203.       if (typeof config === 'string') {
  204.         if (typeof data[config] === 'undefined') {
  205.           throw new TypeError(`No method named "${config}"`)
  206.         }
  207.  
  208.         data[config](this)
  209.       }
  210.     })
  211.   }
  212. }
  213.  
  214. /**
  215.  * ------------------------------------------------------------------------
  216.  * jQuery
  217.  * ------------------------------------------------------------------------
  218.  */
  219.  
  220. $.fn[NAME]             = Toast._jQueryInterface
  221. $.fn[NAME].Constructor = Toast
  222. $.fn[NAME].noConflict  = () => {
  223.   $.fn[NAME] = JQUERY_NO_CONFLICT
  224.   return Toast._jQueryInterface
  225. }
  226.  
  227. export default Toast

Raw Paste

Login or Register to edit or fork this paste. It's free.