Changes to Alert component to match the others (#33402)

Alert.js: Refactor code to match the other components
* Use this._element
* Remove handleDismiss method and keep its functionality on event
* Change JqueryInterface to be more generic
* Correct docs to be aligned with code, and add undocumented functionality
* Update alerts.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

1 files changed, 32 insertions, 37 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 75dbec71bc..0bbe62af59 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -7,7 +7,8 @@
 
 import {
   defineJQueryPlugin,
-  getElementFromSelector
+  getElementFromSelector,
+  isDisabled
 } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
@@ -48,38 +49,24 @@ class Alert extends BaseComponent {
 
   // Public
 
-  close(element) {
-    const rootElement = element ? this._getRootElement(element) : this._element
-    const customEvent = this._triggerCloseEvent(rootElement)
+  close() {
+    const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
 
-    if (customEvent === null || customEvent.defaultPrevented) {
+    if (closeEvent.defaultPrevented) {
       return
     }
 
-    this._removeElement(rootElement)
-  }
-
-  // Private
-
-  _getRootElement(element) {
-    return getElementFromSelector(element) || element.closest(`.${CLASS_NAME_ALERT}`)
-  }
+    this._element.classList.remove(CLASS_NAME_SHOW)
 
-  _triggerCloseEvent(element) {
-    return EventHandler.trigger(element, EVENT_CLOSE)
+    const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+    this._queueCallback(() => this._destroyElement(), this._element, isAnimated)
   }
 
-  _removeElement(element) {
-    element.classList.remove(CLASS_NAME_SHOW)
-
-    const isAnimated = element.classList.contains(CLASS_NAME_FADE)
-    this._queueCallback(() => this._destroyElement(element), element, isAnimated)
-  }
-
-  _destroyElement(element) {
-    element.remove()
-
-    EventHandler.trigger(element, EVENT_CLOSED)
+  // Private
+  _destroyElement() {
+    this._element.remove()
+    EventHandler.trigger(this._element, EVENT_CLOSED)
+    this.dispose()
   }
 
   // Static
@@ -88,20 +75,16 @@ class Alert extends BaseComponent {
     return this.each(function () {
       const data = Alert.getOrCreateInstance(this)
 
-      if (config === 'close') {
-        data[config](this)
+      if (typeof config !== 'string') {
+        return
       }
-    })
-  }
 
-  static handleDismiss(alertInstance) {
-    return function (event) {
-      if (event) {
-        event.preventDefault()
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
       }
 
-      alertInstance.close(this)
-    }
+      data[config](this)
+    })
   }
 }
 
@@ -111,7 +94,19 @@ class Alert extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, function (event) {
+  if (['A', 'AREA'].includes(this.tagName)) {
+    event.preventDefault()
+  }
+
+  if (isDisabled(this)) {
+    return
+  }
+
+  const target = getElementFromSelector(this) || this.closest(`.${CLASS_NAME_ALERT}`)
+  const alert = Alert.getOrCreateInstance(target)
+  alert.close()
+})
 
 /**
  * ------------------------------------------------------------------------