implement global dispose method

1 files changed, 28 insertions, 9 deletions

diff --git a/js/src/carousel.js b/js/src/carousel.js
index 8c9b452478..a4b6da2981 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -20,6 +20,8 @@ const Carousel = (($) => {
   const NAME                = 'carousel'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.carousel'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 600
 
@@ -37,10 +39,13 @@ const Carousel = (($) => {
   }
 
   const Event = {
-    SLIDE : 'slide.bs.carousel',
-    SLID  : 'slid.bs.carousel',
-    CLICK : 'click.bs.carousel.data-api',
-    LOAD  : 'load'
+    SLIDE          : `slide${EVENT_KEY}`,
+    SLID           : `slid${EVENT_KEY}`,
+    KEYDOWN        : `keydown${EVENT_KEY}`,
+    MOUSEENTER     : `mouseenter${EVENT_KEY}`,
+    MOUSELEAVE     : `mouseleave${EVENT_KEY}`,
+    LOAD_DATA_API  : `load${EVENT_KEY}${DATA_API_KEY}`,
+    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -171,20 +176,34 @@ const Carousel = (($) => {
       this._slide(direction, this._items[index])
     }
 
+    dispose() {
+      $(this._element).off(EVENT_KEY)
+      $.removeData(this._element, DATA_KEY)
+
+      this._items             = null
+      this._config            = null
+      this._element           = null
+      this._interval          = null
+      this._isPaused          = null
+      this._isSliding         = null
+      this._activeElement     = null
+      this._indicatorsElement = null
+    }
+
 
     // private
 
     _addEventListeners() {
       if (this._config.keyboard) {
         $(this._element)
-          .on('keydown.bs.carousel', $.proxy(this._keydown, this))
+          .on(Event.KEYDOWN, $.proxy(this._keydown, this))
       }
 
       if (this._config.pause == 'hover' &&
         !('ontouchstart' in document.documentElement)) {
         $(this._element)
-          .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
-          .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
+          .on(Event.MOUSEENTER, $.proxy(this.pause, this))
+          .on(Event.MOUSELEAVE, $.proxy(this.cycle, this))
       }
     }
 
@@ -405,9 +424,9 @@ const Carousel = (($) => {
    */
 
   $(document)
-    .on(Event.CLICK, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
+    .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
 
-  $(window).on(Event.LOAD, function () {
+  $(window).on(Event.LOAD_DATA_API, function () {
     $(Selector.DATA_RIDE).each(function () {
       let $carousel = $(this)
       Carousel._jQueryInterface.call($carousel, $carousel.data())