create a base component

twbs · Sep 22, 2020 · c7a5a15 · c7a5a15
1 parent 7bbfd43
commit c7a5a15
Show file tree

Hide file tree

Showing 23 changed files with 225 additions and 116 deletions.
diff --git a/js/src/alert.js b/js/src/alert.js
@@ -14,6 +14,7 @@ import {
 } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -43,21 +44,17 @@ const CLASSNAME_SHOW = 'show'
  * ------------------------------------------------------------------------
  */
 
-class Alert {
-  constructor(element) {
-    this._element = element
-
-    if (this._element) {
-      Data.setData(element, DATA_KEY, this)
-    }
-  }
-
+class Alert extends BaseComponent {
   // Getters
 
   static get VERSION() {
     return VERSION
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   close(element) {
@@ -133,10 +130,6 @@ class Alert {
       alertInstance.close(this)
     }
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/base-component.js b/js/src/base-component.js
@@ -0,0 +1,24 @@
+import Data from './dom/data'
+
+class BaseComponent {
+  constructor(element) {
+    if (!element) {
+      return
+    }
+
+    this._element = element
+    Data.setData(element, this.constructor.DATA_KEY, this)
+  }
+
+  /** Static */
+
+  static getInstance(element) {
+    return Data.getData(element, this.DATA_KEY)
+  }
+
+  static get DATA_KEY() {
+    return null
+  }
+}
+
+export default BaseComponent
diff --git a/js/src/button.js b/js/src/button.js
@@ -8,6 +8,7 @@
 import { getjQuery } from './util/index'
 import Data from './dom/data'
 import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -33,18 +34,17 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
  * ------------------------------------------------------------------------
  */
 
-class Button {
-  constructor(element) {
-    this._element = element
-    Data.setData(element, DATA_KEY, this)
-  }
-
+class Button extends BaseComponent {
   // Getters
 
   static get VERSION() {
     return VERSION
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -72,10 +72,6 @@ class Button {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/carousel.js b/js/src/carousel.js
@@ -20,6 +20,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -103,8 +104,10 @@ const PointerType = {
  * Class Definition
  * ------------------------------------------------------------------------
  */
-class Carousel {
+class Carousel extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._items = null
     this._interval = null
     this._activeElement = null
@@ -115,7 +118,6 @@ class Carousel {
     this.touchDeltaX = 0
 
     this._config = this._getConfig(config)
-    this._element = element
     this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
     this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
     this._pointerEvent = Boolean(window.PointerEvent)
@@ -134,6 +136,10 @@ class Carousel {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   next() {
@@ -577,10 +583,6 @@ class Carousel {
 
     event.preventDefault()
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -20,6 +20,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -66,10 +67,11 @@ const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
  * ------------------------------------------------------------------------
  */
 
-class Collapse {
+class Collapse extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._isTransitioning = false
-    this._element = element
     this._config = this._getConfig(config)
     this._triggerArray = SelectorEngine.find(
       `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
@@ -113,6 +115,10 @@ class Collapse {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -367,10 +373,6 @@ class Collapse {
       Collapse.collapseInterface(this, config)
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -18,6 +18,7 @@ import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import Popper from 'popper.js'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -95,9 +96,10 @@ const DefaultType = {
  * ------------------------------------------------------------------------
  */
 
-class Dropdown {
+class Dropdown extends BaseComponent {
   constructor(element, config) {
-    this._element = element
+    super(element)
+
     this._popper = null
     this._config = this._getConfig(config)
     this._menu = this._getMenuElement()
@@ -121,6 +123,10 @@ class Dropdown {
     return DefaultType
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle() {
@@ -489,10 +495,6 @@ class Dropdown {
 
     items[index].focus()
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/modal.js b/js/src/modal.js
@@ -19,6 +19,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -80,10 +81,11 @@ const SELECTOR_STICKY_CONTENT = '.sticky-top'
  * ------------------------------------------------------------------------
  */
 
-class Modal {
+class Modal extends BaseComponent {
   constructor(element, config) {
+    super(element)
+
     this._config = this._getConfig(config)
-    this._element = element
     this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
     this._backdrop = null
     this._isShown = false
@@ -104,6 +106,10 @@ class Modal {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   toggle(relatedTarget) {
@@ -562,10 +568,6 @@ class Modal {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**

diff --git a/js/src/popover.js b/js/src/popover.js
@@ -108,7 +108,7 @@ class Popover extends Tooltip {
     this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
     let content = this._getContent()
     if (typeof content === 'function') {
-      content = content.call(this.element)
+      content = content.call(this._element)
     }
 
     this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
@@ -123,7 +123,7 @@ class Popover extends Tooltip {
   }
 
   _getContent() {
-    return this.element.getAttribute('data-content') ||
+    return this._element.getAttribute('data-content') ||
       this.config.content
   }
 
@@ -161,10 +161,6 @@ class Popover extends Tooltip {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 const $ = getjQuery()

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
@@ -16,6 +16,7 @@ import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -65,9 +66,9 @@ const METHOD_POSITION = 'position'
  * ------------------------------------------------------------------------
  */
 
-class ScrollSpy {
+class ScrollSpy extends BaseComponent {
   constructor(element, config) {
-    this._element = element
+    super(element)
     this._scrollElement = element.tagName === 'BODY' ? window : element
     this._config = this._getConfig(config)
     this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
@@ -94,6 +95,10 @@ class ScrollSpy {
     return Default
   }
 
+  static get DATA_KEY() {
+    return DATA_KEY
+  }
+
   // Public
 
   refresh() {
@@ -300,10 +305,6 @@ class ScrollSpy {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**