diff options
-rw-r--r-- | js/src/button.js | 3 | ||||
-rw-r--r-- | js/src/dom/eventHandler.js | 2 | ||||
-rw-r--r-- | js/src/dom/manipulator.js | 24 | ||||
-rw-r--r-- | js/tests/index.html | 1 | ||||
-rw-r--r-- | js/tests/unit/.eslintrc.json | 3 | ||||
-rw-r--r-- | js/tests/unit/button.js | 6 | ||||
-rw-r--r-- | js/tests/visual/button.html | 1 |
7 files changed, 34 insertions, 6 deletions
diff --git a/js/src/button.js b/js/src/button.js index 410da06cb3..acba736af4 100644 --- a/js/src/button.js +++ b/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') } diff --git a/js/src/dom/eventHandler.js b/js/src/dom/eventHandler.js index 476f7af26f..746f84bcb5 100644 --- a/js/src/dom/eventHandler.js +++ b/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' ] diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js new file mode 100644 index 0000000000..c124802349 --- /dev/null +++ b/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 diff --git a/js/tests/index.html b/js/tests/index.html index db0743f0ff..b49bbfa58f 100644 --- a/js/tests/index.html +++ b/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> diff --git a/js/tests/unit/.eslintrc.json b/js/tests/unit/.eslintrc.json index 487ba6c168..cb40cd0ab8 100644 --- a/js/tests/unit/.eslintrc.json +++ b/js/tests/unit/.eslintrc.json @@ -14,7 +14,8 @@ "Simulator": false, "Toast": false, "EventHandler": false, - "Data": false + "Data": false, + "Manipulator": false }, "parserOptions": { "ecmaVersion": 5, diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 68e052e22f..fff6df5bc7 100644 --- a/js/tests/unit/button.js +++ b/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) { diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 774e755eb7..5f2dfa92af 100644 --- a/js/tests/visual/button.html +++ b/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> |