rewrite toast plugin without jquery

1 files changed, 36 insertions, 28 deletions

diff --git a/js/src/toast.js b/js/src/toast.js
index 4aef2d40c..6e878e5c8 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -5,7 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
+import Data from './dom/data'
+import EventHandler from './dom/eventHandler'
+import Manipulator from './dom/manipulator'
 import Util from './util'
 
 /**
@@ -14,11 +16,10 @@ import Util from './util'
  * ------------------------------------------------------------------------
  */
 
-const NAME               = 'toast'
-const VERSION            = '4.3.1'
-const DATA_KEY           = 'bs.toast'
-const EVENT_KEY          = `.${DATA_KEY}`
-const JQUERY_NO_CONFLICT = $.fn[NAME]
+const NAME      = 'toast'
+const VERSION   = '4.3.1'
+const DATA_KEY  = 'bs.toast'
+const EVENT_KEY = `.${DATA_KEY}`
 
 const Event = {
   CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
@@ -63,6 +64,7 @@ class Toast {
     this._config  = this._getConfig(config)
     this._timeout = null
     this._setListeners()
+    Data.setData(element, DATA_KEY, this)
   }
 
   // Getters
@@ -82,7 +84,7 @@ class Toast {
   // Public
 
   show() {
-    $(this._element).trigger(Event.SHOW)
+    EventHandler.trigger(this._element, Event.SHOW)
 
     if (this._config.animation) {
       this._element.classList.add(ClassName.FADE)
@@ -92,7 +94,7 @@ class Toast {
       this._element.classList.remove(ClassName.SHOWING)
       this._element.classList.add(ClassName.SHOW)
 
-      $(this._element).trigger(Event.SHOWN)
+      EventHandler.trigger(this._element, Event.SHOWN)
 
       if (this._config.autohide) {
         this.hide()
@@ -104,9 +106,8 @@ class Toast {
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
-      $(this._element)
-        .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(transitionDuration)
+      EventHandler.one(this._element, Util.TRANSITION_END, complete)
+      Util.emulateTransitionEnd(this._element, transitionDuration)
     } else {
       complete()
     }
@@ -117,7 +118,7 @@ class Toast {
       return
     }
 
-    $(this._element).trigger(Event.HIDE)
+    EventHandler.trigger(this._element, Event.HIDE)
 
     if (withoutTimeout) {
       this._close()
@@ -136,9 +137,9 @@ class Toast {
       this._element.classList.remove(ClassName.SHOW)
     }
 
-    $(this._element).off(Event.CLICK_DISMISS)
+    EventHandler.off(this._element, Event.CLICK_DISMISS)
+    Data.removeData(this._element, DATA_KEY)
 
-    $.removeData(this._element, DATA_KEY)
     this._element = null
     this._config  = null
   }
@@ -148,7 +149,7 @@ class Toast {
   _getConfig(config) {
     config = {
       ...Default,
-      ...$(this._element).data(),
+      ...Manipulator.getDataAttributes(this._element),
       ...typeof config === 'object' && config ? config : {}
     }
 
@@ -162,7 +163,8 @@ class Toast {
   }
 
   _setListeners() {
-    $(this._element).on(
+    EventHandler.on(
+      this._element,
       Event.CLICK_DISMISS,
       Selector.DATA_DISMISS,
       () => this.hide(true)
@@ -172,16 +174,15 @@ class Toast {
   _close() {
     const complete = () => {
       this._element.classList.add(ClassName.HIDE)
-      $(this._element).trigger(Event.HIDDEN)
+      EventHandler.trigger(this._element, Event.HIDDEN)
     }
 
     this._element.classList.remove(ClassName.SHOW)
     if (this._config.animation) {
       const transitionDuration = Util.getTransitionDurationFromElement(this._element)
 
-      $(this._element)
-        .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(transitionDuration)
+      EventHandler.one(this._element, Util.TRANSITION_END, complete)
+      Util.emulateTransitionEnd(this._element, transitionDuration)
     } else {
       complete()
     }
@@ -191,13 +192,11 @@ class Toast {
 
   static _jQueryInterface(config) {
     return this.each(function () {
-      const $element = $(this)
-      let data       = $element.data(DATA_KEY)
+      let data       = Data.getData(this, DATA_KEY)
       const _config  = typeof config === 'object' && config
 
       if (!data) {
         data = new Toast(this, _config)
-        $element.data(DATA_KEY, data)
       }
 
       if (typeof config === 'string') {
@@ -209,19 +208,28 @@ class Toast {
       }
     })
   }
+
+  static _getInstance(element) {
+    return Data.getData(element, DATA_KEY)
+  }
 }
 
 /**
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
+ *  add .toast to jQuery only if jQuery is present
  */
 
-$.fn[NAME]             = Toast._jQueryInterface
-$.fn[NAME].Constructor = Toast
-$.fn[NAME].noConflict  = () => {
-  $.fn[NAME] = JQUERY_NO_CONFLICT
-  return Toast._jQueryInterface
+const $ = Util.jQuery
+if (typeof $ !== 'undefined') {
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  $.fn[NAME]               = Toast._jQueryInterface
+  $.fn[NAME].Constructor   = Toast
+  $.fn[NAME].noConflict    = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Toast._jQueryInterface
+  }
 }
 
 export default Toast