Add Manipulator object to add shortcuts for dom manipulations

js/src/button.js

@@ -7,6 +7,7 @@
 
 import Data from './dom/data'
 import EventHandler from './dom/eventHandler'
+import Manipulator from './dom/manipulator'
 import SelectorEngine from './dom/selectorEngine'
 
 /**
@@ -93,7 +94,7 @@ class Button {
             rootElement.classList.contains('disabled')) {
             return
           }
-          input.checked = !this._element.classList.contains(ClassName.ACTIVE)
+          Manipulator.setChecked(input, !this._element.classList.contains(ClassName.ACTIVE))
           EventHandler.trigger(input, 'change')
         }
 

js/src/dom/eventHandler.js

@@ -85,7 +85,7 @@ const nativeEvents = [
   'orientationchange',
   'touchstart', 'touchmove', 'touchend', 'touchcancel',
   'gesturestart', 'gesturechange', 'gestureend',
-  'focus', 'blur', 'change', 'reset', 'select', 'submit',
+  'focus', 'blur', 'change', 'reset', 'select', 'submit', 'focusin', 'focusout',
   'load', 'unload', 'beforeunload', 'resize', 'move', 'DOMContentLoaded', 'readystatechange',
   'error', 'abort', 'scroll'
 ]

js/src/dom/manipulator.js

@@ -0,0 +1,24 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.0.0-beta): dom/manipulator.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const Manipulator = {
+  setChecked(input, val) {
+    if (input instanceof HTMLInputElement) {
+      input.checked = val
+      input.bsChecked = val
+    }
+  },
+
+  isChecked(input) {
+    if (input instanceof HTMLInputElement) {
+      return input.bsChecked || input.checked
+    }
+    throw new Error('INPUT parameter is not an HTMLInputElement')
+  }
+}
+
+export default Manipulator

js/tests/index.html

@@ -100,6 +100,7 @@
     <script src="../dist/dom/eventHandler.js"></script>
     <script src="../dist/dom/selectorEngine.js"></script>
     <script src="../dist/dom/data.js"></script>
+    <script src="../dist/dom/manipulator.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

@@ -14,7 +14,8 @@
     "Simulator": false,
     "Toast": false,
     "EventHandler": false,
-    "Data": false
+    "Data": false,
+    "Manipulator": false
   },
   "parserOptions": {
     "ecmaVersion": 5,

js/tests/unit/button.js

@@ -127,21 +127,21 @@ $(function () {
     assert.ok($btn1.hasClass('active'), 'btn1 has active class')
     assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
     assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
-    assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
+    assert.ok(!Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is not checked')
 
     EventHandler.trigger($btn2.find('input')[0], 'click')
 
     assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
     assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
     assert.ok($btn2.hasClass('active'), 'btn2 has active class')
-    assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
+    assert.ok(Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is checked')
 
     EventHandler.trigger($btn2.find('input')[0], 'click') // clicking an already checked radio should not un-check it
 
     assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
     assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
     assert.ok($btn2.hasClass('active'), 'btn2 has active class')
-    assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
+    assert.ok(Manipulator.isChecked($btn2.find('input')[0]), 'btn2 is checked')
   })
 
   QUnit.test('should only toggle selectable inputs', function (assert) {

js/tests/visual/button.html

@@ -46,6 +46,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/util.js"></script>