button without jquery

1 files changed, 50 insertions, 32 deletions

diff --git a/js/src/button.js b/js/src/button.js
index fcf805502a..410da06cb3 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -5,7 +5,9 @@
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
+import Data from './dom/data'
+import EventHandler from './dom/eventHandler'
+import SelectorEngine from './dom/selectorEngine'
 
 /**
  * ------------------------------------------------------------------------
@@ -18,7 +20,6 @@ const VERSION             = '4.3.1'
 const DATA_KEY            = 'bs.button'
 const EVENT_KEY           = `.${DATA_KEY}`
 const DATA_API_KEY        = '.data-api'
-const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
 const ClassName = {
   ACTIVE : 'active',
@@ -36,8 +37,8 @@ const Selector = {
 
 const Event = {
   CLICK_DATA_API      : `click${EVENT_KEY}${DATA_API_KEY}`,
-  FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` +
-                          `blur${EVENT_KEY}${DATA_API_KEY}`
+  FOCUS_DATA_API      : `focus${EVENT_KEY}${DATA_API_KEY}`,
+  BLUR_DATA_API       : `blur${EVENT_KEY}${DATA_API_KEY}`
 }
 
 /**
@@ -62,12 +63,14 @@ class Button {
   toggle() {
     let triggerChangeEvent = true
     let addAriaPressed = true
-    const rootElement = $(this._element).closest(
+
+    const rootElement = SelectorEngine.closest(
+      this._element,
       Selector.DATA_TOGGLE
-    )[0]
+    )
 
     if (rootElement) {
-      const input = this._element.querySelector(Selector.INPUT)
+      const input = SelectorEngine.findOne(Selector.INPUT, this._element)
 
       if (input) {
         if (input.type === 'radio') {
@@ -75,10 +78,10 @@ class Button {
             this._element.classList.contains(ClassName.ACTIVE)) {
             triggerChangeEvent = false
           } else {
-            const activeElement = rootElement.querySelector(Selector.ACTIVE)
+            const activeElement = SelectorEngine.findOne(Selector.ACTIVE, rootElement)
 
             if (activeElement) {
-              $(activeElement).removeClass(ClassName.ACTIVE)
+              activeElement.classList.remove(ClassName.ACTIVE)
             }
           }
         }
@@ -91,7 +94,7 @@ class Button {
             return
           }
           input.checked = !this._element.classList.contains(ClassName.ACTIVE)
-          $(input).trigger('change')
+          EventHandler.trigger(input, 'change')
         }
 
         input.focus()
@@ -105,12 +108,12 @@ class Button {
     }
 
     if (triggerChangeEvent) {
-      $(this._element).toggleClass(ClassName.ACTIVE)
+      this._element.classList.toggle(ClassName.ACTIVE)
     }
   }
 
   dispose() {
-    $.removeData(this._element, DATA_KEY)
+    Data.removeData(this._element, DATA_KEY)
     this._element = null
   }
 
@@ -118,11 +121,11 @@ class Button {
 
   static _jQueryInterface(config) {
     return this.each(function () {
-      let data = $(this).data(DATA_KEY)
+      let data = Data.getData(this, DATA_KEY)
 
       if (!data) {
         data = new Button(this)
-        $(this).data(DATA_KEY, data)
+        Data.setData(this, DATA_KEY, data)
       }
 
       if (config === 'toggle') {
@@ -138,34 +141,49 @@ class Button {
  * ------------------------------------------------------------------------
  */
 
-$(document)
-  .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
-    event.preventDefault()
+EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
+  event.preventDefault()
 
-    let button = event.target
+  let button = event.target
+  if (!button.classList.contains(ClassName.BUTTON)) {
+    button = SelectorEngine.closest(button, Selector.BUTTON)
+  }
 
-    if (!$(button).hasClass(ClassName.BUTTON)) {
-      button = $(button).closest(Selector.BUTTON)
-    }
+  let data = Data.getData(button, DATA_KEY)
+  if (!data) {
+    data = new Button(button)
+    Data.setData(button, DATA_KEY, data)
+  }
+  data.toggle()
+})
 
-    Button._jQueryInterface.call($(button), 'toggle')
-  })
-  .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
-    const button = $(event.target).closest(Selector.BUTTON)[0]
-    $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
-  })
+EventHandler.on(document, Event.FOCUS_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
+  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+  button.classList.add(ClassName.FOCUS)
+})
+
+EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
+  const button = SelectorEngine.closest(event.target, Selector.BUTTON)
+  button.classList.remove(ClassName.FOCUS)
+})
 
 /**
  * ------------------------------------------------------------------------
  * jQuery
  * ------------------------------------------------------------------------
+ * add .button to jQuery only if jQuery is present
  */
 
-$.fn[NAME] = Button._jQueryInterface
-$.fn[NAME].Constructor = Button
-$.fn[NAME].noConflict = () => {
-  $.fn[NAME] = JQUERY_NO_CONFLICT
-  return Button._jQueryInterface
+if (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined') {
+  const $                   = window.$ || window.jQuery
+  const JQUERY_NO_CONFLICT  = $.fn[NAME]
+  $.fn[NAME]                = Button._jQueryInterface
+  $.fn[NAME].Constructor    = Button
+
+  $.fn[NAME].noConflict  = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Button._jQueryInterface
+  }
 }
 
 export default Button