alert without jquery

js/src/alert.js

@@ -5,7 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
+import Data from './dom/data'
+import EventHandler from './dom/eventHandler'
+import SelectorEngine from './dom/selectorEngine'
 import Util from './util'
 
 /**
@@ -64,7 +66,7 @@ class Alert {
 
     const customEvent = this._triggerCloseEvent(rootElement)
 
-    if (customEvent.isDefaultPrevented()) {
+    if (customEvent.defaultPrevented) {
       return
     }
 
@@ -72,7 +74,7 @@ class Alert {
   }
 
   dispose() {
-    $.removeData(this._element, DATA_KEY)
+    Data.removeData(this._element, DATA_KEY)
     this._element = null
   }
 
@@ -87,52 +89,45 @@ class Alert {
     }
 
     if (!parent) {
-      parent = $(element).closest(`.${ClassName.ALERT}`)[0]
+      parent = SelectorEngine.closest(element, `.${ClassName.ALERT}`)
     }
 
     return parent
   }
 
   _triggerCloseEvent(element) {
-    const closeEvent = $.Event(Event.CLOSE)
+    return EventHandler.trigger(element, Event.CLOSE)
-
-    $(element).trigger(closeEvent)
-    return closeEvent
   }
 
   _removeElement(element) {
-    $(element).removeClass(ClassName.SHOW)
+    element.classList.remove(ClassName.SHOW)
 
-    if (!$(element).hasClass(ClassName.FADE)) {
+    if (!element.classList.contains(ClassName.FADE)) {
       this._destroyElement(element)
       return
     }
 
     const transitionDuration = Util.getTransitionDurationFromElement(element)
 
-    $(element)
+    EventHandler
-      .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
+      .one(element, Util.TRANSITION_END, (event) => this._destroyElement(element, event))
-
+    Util.emulateTransitionEnd(element, transitionDuration)
-    Util.emulateTransitionEnd(transitionDuration)
   }
 
   _destroyElement(element) {
-    $(element)
+    EventHandler.trigger(element, Event.CLOSED)
-      .detach()
+    element.parentNode.removeChild(element)
-      .trigger(Event.CLOSED)
-      .remove()
   }
 
   // Static
 
   static _jQueryInterface(config) {
     return this.each(function () {
-      const $element = $(this)
+      let data = Data.getData(this, DATA_KEY)
-      let data       = $element.data(DATA_KEY)
 
       if (!data) {
         data = new Alert(this)
-        $element.data(DATA_KEY, data)
+        Data.setData(this, DATA_KEY, data)
       }
 
       if (config === 'close') {

js/src/dom/data.js

@@ -0,0 +1,51 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.0.0-beta): dom/data.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const mapData = (() => {
+  const storeData    = {}
+  return {
+    set(element, key, data) {
+      let id
+      if (element.key === undefined) {
+        element.key = {
+          key,
+          id
+        }
+      }
+
+      storeData[id] = data
+    },
+    get(element, key) {
+      if (element.key === undefined || element.key !== key) {
+        return null
+      }
+      const keyProperties = element.key
+      return storeData[keyProperties.id]
+    },
+    delete(element, key) {
+      if (element.key === undefined || element.key !== key) {
+        return
+      }
+      const keyProperties = element.key
+      delete storeData[keyProperties.id]
+    }
+  }
+})()
+
+const Data = {
+  setData(instance, key, data) {
+    mapData.set(instance, key, data)
+  },
+  getData(instance, key) {
+    mapData.get(instance, key)
+  },
+  removeData(instance, key) {
+    mapData.delete(instance, key)
+  }
+}
+
+export default Data

js/src/dom/eventHandler.js

@@ -1,13 +1,13 @@
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-beta): dom/event.js
+ * Bootstrap (v4.0.0-beta): dom/eventHandler.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-const Event = {
+const EventHandler = {
   on(element, event, handler) {
-    if (typeof event !== 'string') {
+    if (typeof event !== 'string' || typeof element === 'undefined') {
       return
     }
     element.addEventListener(event, handler, false)
@@ -19,12 +19,12 @@ const Event = {
       handler()
       element.removeEventListener(event, complete, false)
     }
-    Event.on(element, event, complete)
+    EventHandler.on(element, event, complete)
   },
 
   trigger(element, event) {
-    if (typeof event !== 'string') {
+    if (typeof event !== 'string' || typeof element === 'undefined') {
-      return
+      return null
     }
 
     const eventToDispatch = new CustomEvent(event, {
@@ -32,7 +32,9 @@ const Event = {
       cancelable: true
     })
     element.dispatchEvent(eventToDispatch)
+
+    return eventToDispatch
   }
 }
 
-export default Event
+export default EventHandler

js/src/dom/selectorEngine.js

@@ -0,0 +1,42 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.0.0-beta): dom/selectorEngine.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const SelectorEngine = {
+  matches: Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector,
+
+  find(selector) {
+    if (typeof selector !== 'string') {
+      return null
+    }
+
+    let selectorType = 'querySelectorAll'
+    if (selector.indexOf('#') === 0) {
+      selectorType = 'getElementById'
+      selector = selector.substr(1, selector.length)
+    }
+    return document[selectorType](selector)
+  },
+
+  closest(element, selector) {
+    let ancestor = element
+    if (!document.documentElement.contains(element)) {
+      return null
+    }
+
+    do {
+      if (SelectorEngine.matches.call(ancestor, selector)) {
+        return ancestor
+      }
+
+      ancestor = ancestor.parentElement
+    } while (ancestor !== null)
+
+    return null
+  }
+}
+
+export default SelectorEngine

js/src/util.js

@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import Event from './dom/event'
+import EventHandler from './dom/eventHandler'
 
 /**
  * ------------------------------------------------------------------------
@@ -78,7 +78,7 @@ const Util = {
   },
 
   triggerTransitionEnd(element) {
-    Event.trigger(element, Util.TRANSITION_END)
+    EventHandler.trigger(element, Util.TRANSITION_END)
   },
 
   // TODO: Remove in v5

js/tests/index.html

@@ -97,7 +97,9 @@
     </script>
 
     <!-- Transpiled Plugins -->
-    <script src="../dist/dom/event.js"></script>
+    <script src="../dist/dom/eventHandler.js"></script>
+    <script src="../dist/dom/selectorEngine.js"></script>
+    <script src="../dist/dom/data.js"></script>
     <script src="../dist/util.js"></script>
     <script src="../dist/alert.js"></script>
     <script src="../dist/button.js"></script>

js/tests/unit/.eslintrc.json

@@ -12,7 +12,8 @@
     "Button": false,
     "Carousel": false,
     "Simulator": false,
-    "Toast": false
+    "Toast": false,
+    "EventHandler": false
   },
   "parserOptions": {
     "ecmaVersion": 5,

js/tests/unit/alert.js

@@ -70,16 +70,19 @@ $(function () {
   QUnit.test('should not fire closed when close is prevented', function (assert) {
     assert.expect(1)
     var done = assert.async()
-    $('<div class="alert"/>')
+    var $alert = $('<div class="alert"/>')
-      .on('close.bs.alert', function (e) {
+    $alert.appendTo('#qunit-fixture')
+
+    EventHandler.on($alert[0], 'close.bs.alert', function (e) {
       e.preventDefault()
       assert.ok(true, 'close event fired')
       done()
     })
-      .on('closed.bs.alert', function () {
+    EventHandler.on($alert[0], 'closed.bs.alert', function () {
       assert.ok(false, 'closed event fired')
     })
-      .bootstrapAlert('close')
+
+    $alert.bootstrapAlert('close')
   })
 
   QUnit.test('close should use internal _element if no element provided', function (assert) {

js/tests/visual/alert.html

@@ -52,7 +52,9 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
+    <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/alert.js"></script>
   </body>

js/tests/visual/button.html

@@ -45,7 +45,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/button.js"></script>
   </body>

js/tests/visual/carousel.html

@@ -46,7 +46,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
     <script>

js/tests/visual/collapse.html

@@ -72,7 +72,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/collapse.js"></script>
   </body>

js/tests/visual/dropdown.html

@@ -205,7 +205,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/dropdown.js"></script>
     <script src="../../dist/collapse.js"></script>

js/tests/visual/modal.html

@@ -207,13 +207,12 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/modal.js"></script>
     <script src="../../dist/collapse.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
-
     <script>
       var firefoxTestDone = false
       function reportFirefoxTestResult(result) {

js/tests/visual/popover.html

@@ -33,11 +33,10 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
-
     <script>
       $(function () {
         $('[data-toggle="popover"]').popover()

js/tests/visual/scrollspy.html

@@ -88,7 +88,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../site/docs/4.2/assets/js/vendor/popper.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/scrollspy.js"></script>
     <script src="../../dist/dropdown.js"></script>

js/tests/visual/tab.html

@@ -227,7 +227,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
-    <script src="../../dist/dom/event.js"></script>
+    <script src="../../dist/dom/eventHandler.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tab.js"></script>
     <script src="../../dist/dropdown.js"></script>