Simplify Modal config

twbs · Apr 6, 2021 · 752b001 · 752b001
1 parent 0b34ff2
commit 752b001
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/js/src/modal.js b/js/src/modal.js
@@ -10,12 +10,11 @@ import {
   emulateTransitionEnd,
   getElementFromSelector,
   getTransitionDurationFromElement,
-  isVisible,
   isRTL,
+  isVisible,
   reflow,
   typeCheckConfig
 } from './util/index'
-import Data from './dom/data'
 import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selector-engine'
@@ -222,6 +221,7 @@ class Modal extends BaseComponent {
   _getConfig(config) {
     config = {
       ...Default,
+      ...Manipulator.getDataAttributes(this._element),
       ...config
     }
     typeCheckConfig(NAME, config, DefaultType)
@@ -509,24 +509,17 @@ class Modal extends BaseComponent {
 
   static jQueryInterface(config, relatedTarget) {
     return this.each(function () {
-      let data = Data.get(this, DATA_KEY)
-      const _config = {
-        ...Default,
-        ...Manipulator.getDataAttributes(this),
-        ...(typeof config === 'object' && config ? config : {})
-      }
+      const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {})
 
-      if (!data) {
-        data = new Modal(this, _config)
+      if (typeof config !== 'string') {
+        return
       }
 
-      if (typeof config === 'string') {
-        if (typeof data[config] === 'undefined') {
-          throw new TypeError(`No method named "${config}"`)
-        }
-
-        data[config](relatedTarget)
+      if (typeof data[config] === 'undefined') {
+        throw new TypeError(`No method named "${config}"`)
       }
+
+      data[config](relatedTarget)
     })
   }
 }
@@ -540,7 +533,7 @@ class Modal extends BaseComponent {
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
   const target = getElementFromSelector(this)
 
-  if (this.tagName === 'A' || this.tagName === 'AREA') {
+  if (['A', 'AREA'].includes(this.tagName)) {
     event.preventDefault()
   }
 
@@ -557,15 +550,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
     })
   })
 
-  let data = Data.get(target, DATA_KEY)
-  if (!data) {
-    const config = {
-      ...Manipulator.getDataAttributes(target),
-      ...Manipulator.getDataAttributes(this)
-    }
-
-    data = new Modal(target, config)
-  }
+  const data = Modal.getInstance(target) || new Modal(target, Manipulator.getDataAttributes(this))
 
   data.toggle(this)
 })

diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
@@ -2,7 +2,7 @@ import Modal from '../../src/modal'
 import EventHandler from '../../src/dom/event-handler'
 
 /** Test helpers */
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
 
 describe('Modal', () => {
   let fixtureEl
@@ -1090,6 +1090,23 @@ describe('Modal', () => {
       expect(Modal.getInstance(div)).toBeDefined()
     })
 
+    it('should create a modal with given config', () => {
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      jQueryMock.fn.modal = Modal.jQueryInterface
+      jQueryMock.elements = [div]
+
+      jQueryMock.fn.modal.call(jQueryMock, { keyboard: false })
+      spyOn(Modal.prototype, 'constructor')
+      expect(Modal.prototype.constructor).not.toHaveBeenCalledWith(div, { keyboard: false })
+
+      const modal = Modal.getInstance(div)
+      expect(modal).toBeDefined()
+      expect(modal._config.keyboard).toBe(false)
+    })
+
     it('should not re create a modal', () => {
       fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div></div>'