From 660505188241418ffda53b5eb848defecd5f57e1 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 7 May 2015 17:07:38 -0700 Subject: [PATCH] button -> es6 --- Gruntfile.js | 3 +- js/dist/alert.js | 8 +- js/dist/alert.js.map | Bin 7082 -> 7182 bytes js/dist/button.js | 158 +++++++++++++++++++ js/dist/button.js.map | Bin 0 -> 7577 bytes js/dist/util.js | 4 +- js/dist/util.js.map | Bin 5162 -> 5189 bytes js/script-compiled.js | 305 ------------------------------------ js/src/alert.js | 8 +- js/src/button.js | 158 +++++++++++++++++++ js/src/util.js | 4 +- js/tests/index.html | 2 +- js/tests/unit/button.js | 58 ------- js/tests/visual/button.html | 8 +- 14 files changed, 335 insertions(+), 381 deletions(-) create mode 100644 js/dist/button.js create mode 100644 js/dist/button.js.map delete mode 100644 js/script-compiled.js create mode 100644 js/src/button.js diff --git a/Gruntfile.js b/Gruntfile.js index 09268ecb1..c32f79f0e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -64,7 +64,8 @@ module.exports = function (grunt) { dist: { files: { 'js/dist/util.js': 'js/src/util.js', - 'js/dist/alert.js': 'js/src/alert.js' + 'js/dist/alert.js': 'js/src/alert.js', + 'js/dist/button.js': 'js/src/button.js', } } }, diff --git a/js/dist/alert.js b/js/dist/alert.js index 76b280a0c..4226dd61a 100644 --- a/js/dist/alert.js +++ b/js/dist/alert.js @@ -11,7 +11,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons * -------------------------------------------------------------------------- */ -var Alert = (function () { +var Alert = (function ($) { /** * ------------------------------------------------------------------------ @@ -62,6 +62,8 @@ var Alert = (function () { // public value: function close(element) { + element = element || this.element; + var rootElement = this._getRootElement(element); var customEvent = this._triggerCloseEvent(rootElement); @@ -167,10 +169,10 @@ var Alert = (function () { $.fn[NAME] = Alert._jQueryInterface; $.fn[NAME].Constructor = Alert; $.fn[NAME].noConflict = function () { - $.fn[NAME] = Alert._JQUERY_NO_CONFLICT; + $.fn[NAME] = JQUERY_NO_CONFLICT; return Alert._jQueryInterface; }; return Alert; -})(); +})(jQuery); //# sourceMappingURL=alert.js.map \ No newline at end of file diff --git a/js/dist/alert.js.map b/js/dist/alert.js.map index f3bc7ad7fcb0e300cd27e3737628201b4be8429e..aa106df1e8a16ce4b0677f1cb539872cac5717da 100644 GIT binary patch delta 226 zcmZ2w-e)l(Ln_qK(OJhCM7TOSdRs$*qhoNv#)@Dj-Bd?Me;s#6M|T~65X;li(Gx;| zwSdKdEJtf=M@QGJ$&Ad>lRMaCHZilYi)6UF>v$s>2~=UUS&A!_Q83%d(J|WzWT_)i z&{^MU@+@vQJ|Nds$Jf!(7wnqNPq=Fs8C5nX@G7$?r{<*QrskC>*ebwSH8lz)8JWd; dP<~9_=4!$1oRcl3gW0kIOH+#~C-+Fp0RUFSK{5aU delta 138 zcmeCPSY#@V(ODwHx~1-@79z z(z3Je9U2#KW%BO1yXQVgwSTo9MOkG<-a35cx2j@YrlM*cUbXJ4PF1Fz+qINM9^6;0 zYrmBzOWK6TWwKgj`3yu`UH8NJg!==|&-^p|>T}-rBhDj#f?xC$bADn}IKL=EB??Ld zlz#~Q3s^>3-UX#qr1poL4{=}k^klYky-hl>o%$a*|4?f`>g|V+kU?OeyfCiB>L*#J zH3KZQ<`OiQp^605DIDGf&*F~ue8l;P_R-yWh@qbO5M`eN!Nq%b@dV?C#XBDqPf&0` zA$9vCNcIuFr{Xq&^-*W)S1J&K{{qinLR^0v`2xd+<%z$sY;4RzWdwv@TWpFi{{WmhAZLK{6#XC{A9_H155eX{HBhHMXMA)*5n`;7pYV6@ zRlpICW0hk7h`T?B{2lN|E`ezO68Y6hG&Rw8YT|@Pk72i)h5Wd$wZLG)FOGdI0;2J~ z{}C~4QS`B936yH?O{fH@luXif`5M8fwy8ICSw;}PDd5NyV+2(WOlnEzXFXFkwBVCL#?Q9Q0(YypH?_Sb)huxiCTTuHf-2T^c~zsb7%S3FnEDv>uqDu$4sX zfwgPZ%#+I0tDbAYcn8IaGeRSiaidn}A9i;I2yz@NHR?nVOY{!P6uz(_dO8ETM2#(} zY@H}>iOfcMlIefRH@O3mK%Alu=t(S_O3NW3KoE)$NhTJ2W$BWdI^Q2A3(7p)@^-(*aX&~#FNs`73)93_F zJGKifBmsdxkD(9cy~WZl2he~M5g|ZDyn)F~)tzD`kS*$Fa@sfrX4Lp0VCxWJ8llLa8(YVa{)@nOmtgoCPXFqrt(NOtkgolfJ4`?SW>JHlC!K?-|U(-2V8yDRSJtxDCz^3w_~TW z3A}*|wI)=j(S}VK#W3%EL!Fc;8Y)^-7NiUpVB1x@Y?Csj5ab3}iZs{Y&Tfg@rAMZ8 zngPQY12=|GgaZ74HzcbD40MH+uOtiUosu0f&)aLWqhHuxxW||xj(tb!5EbAcca=>a(n>EpI#rRG^jwLMN(Dg z@WKyUkRNn_N8`b-F*{`YNh-5PvG1$(a55eP1gzi6+$_EuMw1c4#c7eQD~jo>YhWZ6 zB9%pH@hRBxu-`w8Zz6tqIUJ+<)m3_tOxST3MRu5%%U>6%ZmMmpevfrMfw1z(vLqH z&rPp1*_bC4jUBHZK7ne%_7*(kWEcC>WKjYAn})tZnk!*zz?jGMs9tsxRi-82Aq;?HEEvH9#)@(APG~ zb4?wJC_)CjsvYbY-|A|(IlgO9t7(qG`c%?-#uuk}LiHa~ z%{B?rWU=sSM4#=Ono=01R4jY;I`yw9d`wD9(Vpj$WRLb{Omupv`mNm!l(WqtLN5BO z^E+Lk;Y4o#XRi}TyfA26a0<6g6Hx9j+Gi_&HJXUfXS&ka*A>N({yx&fCupV}eX%-0 zgfDvP?gvGyN~Ix^7a%l+yPd?>BikNzXIMDc-+rm0=$W3uPZT4{=#t$K#LoHJ_7shj TF7cWEDdA4FU+r=0`s@Dyg>LUZ literal 0 HcmV?d00001 diff --git a/js/dist/util.js b/js/dist/util.js index 4c8c4e639..4f25e200d 100644 --- a/js/dist/util.js +++ b/js/dist/util.js @@ -7,7 +7,7 @@ 'use strict'; -var Util = (function () { +var Util = (function ($) { /** * ------------------------------------------------------------------------ @@ -119,5 +119,5 @@ var Util = (function () { setTransitionEndSupport(); return Util; -})(); +})(jQuery); //# sourceMappingURL=util.js.map \ No newline at end of file diff --git a/js/dist/util.js.map b/js/dist/util.js.map index 71ad2163a154791a73e09aae29bb7a6bed853550..5f640b50e359900c933bfc49526d48785379055c 100644 GIT binary patch delta 75 zcmZ3baa3bMvQ(&}qqB}Ph;Vgu^tOfqN5|m2jm0_~d_Wmj9bZRBU$C0Zi#ehg8C5p_ TGcU~zSHbl<$4BZ`qtQ^D3wp?Y$+K-6SELAK2m MT&p-IYlz4K06>-z{r~^~ diff --git a/js/script-compiled.js b/js/script-compiled.js deleted file mode 100644 index 2a50eb3b3..000000000 --- a/js/script-compiled.js +++ /dev/null @@ -1,305 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { - value: true -}); - -var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } - -/** - * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0): alert.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - * -------------------------------------------------------------------------- - */ - -var _util = require('util'); - -var _util2 = _interopRequireDefault(_util); - -/** - * -------------------------------------------------------------------------- - * Constants - * -------------------------------------------------------------------------- - */ - -var NAME = 'alert'; -var VERSION = '4.0.0'; -var DATA_KEY = 'bs.alert'; -var JQUERY_NO_CONFLICT = $.fn[NAME]; -var TRANSITION_DURATION = 150; - -var Selector = { - DISMISS: '[data-dismiss="alert"]' -}; - -var Event = { - CLOSE: 'close.bs.alert', - CLOSED: 'closed.bs.alert', - CLICK: 'click.bs.alert.data-api' -}; - -var ClassName = { - ALERT: 'alert', - FADE: 'fade', - IN: 'in' -}; - -/** - * -------------------------------------------------------------------------- - * Class Definition - * -------------------------------------------------------------------------- - */ - -var Alert = (function () { - function Alert(element) { - _classCallCheck(this, Alert); - - if (element) { - this.element = element; - } - } - - _createClass(Alert, [{ - key: 'close', - - // public - - value: function close(element) { - var rootElement = this._getRootElement(element); - var customEvent = this._triggerCloseEvent(rootElement); - - if (customEvent.isDefaultPrevented()) { - return; - } - - this._removeElement(rootElement); - } - }, { - key: '_getRootElement', - - // private - - value: function _getRootElement(element) { - var parent = false; - var selector = _util2['default'].getSelectorFromElement(element); - - if (selector) { - parent = $(selector)[0]; - } - - if (!parent) { - parent = $(element).closest('.' + ClassName.ALERT)[0]; - } - - return parent; - } - }, { - key: '_triggerCloseEvent', - value: function _triggerCloseEvent(element) { - var closeEvent = $.Event(Event.CLOSE); - $(element).trigger(closeEvent); - return closeEvent; - } - }, { - key: '_removeElement', - value: function _removeElement(element) { - $(element).removeClass(ClassName.IN); - - if (!_util2['default'].supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { - this._destroyElement(element); - return; - } - - $(element).one(_util2['default'].TRANSITION_END, this._destroyElement.bind(this, element)).emulateTransitionEnd(TRANSITION_DURATION); - } - }, { - key: '_destroyElement', - value: function _destroyElement(element) { - $(element).detach().trigger(Event.CLOSED).remove(); - } - }], [{ - key: '_jQueryInterface', - - // static - - value: function _jQueryInterface(config) { - return this.each(function () { - var $element = $(this); - var data = $element.data(DATA_KEY); - - if (!data) { - data = new Alert(this); - $element.data(DATA_KEY, data); - } - - if (config === 'close') { - data[config](this); - } - }); - } - }, { - key: '_handleDismiss', - value: function _handleDismiss(alertInstance) { - return function (event) { - if (event) { - event.preventDefault(); - } - - alertInstance.close(this); - }; - } - }]); - - return Alert; -})(); - -exports.Alert = Alert; - -/** - * -------------------------------------------------------------------------- - * Data Api implementation - * -------------------------------------------------------------------------- - */ - -$(document).on(Event.CLICK, Selector.DISMISS, Alert._handleDismiss(new Alert())); - -/** - * -------------------------------------------------------------------------- - * jQuery - * -------------------------------------------------------------------------- - */ - -$.fn[NAME] = Alert._jQueryInterface; -$.fn[NAME].Constructor = Alert; -$.fn[NAME].noConflict = function () { - $.fn[NAME] = Alert._JQUERY_NO_CONFLICT; - return Alert._jQueryInterface; -}; -'use strict'; - -Object.defineProperty(exports, '__esModule', { - value: true -}); -/** - * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0): util.js - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) - * -------------------------------------------------------------------------- - */ - -/** - * -------------------------------------------------------------------------- - * Public Util Api - * -------------------------------------------------------------------------- - */ - -var Util = { - - TRANSITION_END: 'bsTransitionEnd', - - getUID: function getUID(prefix) { - do prefix += ~ ~(Math.random() * 1000000); while (document.getElementById(prefix)); - return prefix; - }, - - getSelectorFromElement: function getSelectorFromElement(element) { - var selector = element.getAttribute('data-target'); - - if (!selector) { - selector = element.getAttribute('href') || ''; - selector = /^#[a-z]/i.test(selector) ? selector : null; - } - - return selector; - }, - - reflow: function reflow(element) { - new Function('bs', 'return bs')(element.offsetHeight); - }, - - supportsTransitionEnd: function supportsTransitionEnd() { - return !!transition; - } - -}; - -exports['default'] = Util; - -/** - * -------------------------------------------------------------------------- - * Private TransitionEnd Helpers - * -------------------------------------------------------------------------- - */ - -var transition = false; - -var TransitionEndEvent = { - WebkitTransition: 'webkitTransitionEnd', - MozTransition: 'transitionend', - OTransition: 'oTransitionEnd otransitionend', - transition: 'transitionend' -}; - -function getSpecialTransitionEndEvent() { - return { - bindType: transition.end, - delegateType: transition.end, - handle: function handle(event) { - if ($(event.target).is(this)) { - return event.handleObj.handler.apply(this, arguments); - } - } - }; -} - -function transitionEndTest() { - if (window.QUnit) { - return false; - } - - var el = document.createElement('bootstrap'); - - for (var name in TransitionEndEvent) { - if (el.style[name] !== undefined) { - return { end: TransitionEndEvent[name] }; - } - } - - return false; -} - -function transitionEndEmulator(duration) { - var _this = this; - - var called = false; - - $(this).one(Util.TRANSITION_END, function () { - called = true; - }); - - setTimeout(function () { - if (!called) { - $(_this).trigger(transition.end); - } - }, duration); - - return this; -} - -function setTransitionEndSupport() { - transition = transitionEndTest(); - - $.fn.emulateTransitionEnd = transitionEndEmulator; - - if (Util.supportsTransitionEnd()) { - $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent(); - } -} - -setTransitionEndSupport(); -module.exports = exports['default']; diff --git a/js/src/alert.js b/js/src/alert.js index d69ad8910..67a1ceda4 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -8,7 +8,7 @@ import Util from './util' * -------------------------------------------------------------------------- */ -const Alert = (() => { +const Alert = (($) => { /** @@ -58,6 +58,8 @@ const Alert = (() => { // public close(element) { + element = element || this.element + let rootElement = this._getRootElement(element) let customEvent = this._triggerCloseEvent(rootElement) @@ -167,12 +169,12 @@ const Alert = (() => { $.fn[NAME] = Alert._jQueryInterface $.fn[NAME].Constructor = Alert $.fn[NAME].noConflict = function () { - $.fn[NAME] = Alert._JQUERY_NO_CONFLICT + $.fn[NAME] = JQUERY_NO_CONFLICT return Alert._jQueryInterface } return Alert -})() +})(jQuery) export default Alert diff --git a/js/src/button.js b/js/src/button.js new file mode 100644 index 000000000..7e9344923 --- /dev/null +++ b/js/src/button.js @@ -0,0 +1,158 @@ +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.0.0): button.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +const Button = (($) => { + + + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + + const NAME = 'button' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.button' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const TRANSITION_DURATION = 150 + + const ClassName = { + ACTIVE : 'active', + BUTTON : 'btn', + FOCUS : 'focus' + } + + const Selector = { + DATA_TOGGLE_CARROT : '[data-toggle^="button"]', + DATA_TOGGLE : '[data-toggle="buttons"]', + INPUT : 'input', + ACTIVE : '.active', + BUTTON : '.btn' + } + + const Event = { + CLICK : 'click.bs.button.data-api', + FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api' + } + + + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + + class Button { + + constructor(element) { + this.element = element + } + + // public + + toggle() { + let triggerChangeEvent = true + let rootElement = $(this.element).closest( + Selector.DATA_TOGGLE + )[0] + + if (rootElement) { + let input = $(this.element).find(Selector.INPUT)[0] + + if (input) { + if (input.type === 'radio') { + if (input.checked && + $(this.element).hasClass(ClassName.ACTIVE)) { + triggerChangeEvent = false + + } else { + let activeElement = $(rootElement).find(Selector.ACTIVE)[0] + + if (activeElement) { + $(activeElement).removeClass(ClassName.ACTIVE) + } + } + } + + if (triggerChangeEvent) { + input.checked = !$(this.element).hasClass(ClassName.ACTIVE) + $(this.element).trigger('change') + } + } + } else { + this.element.setAttribute('aria-pressed', + !$(this.element).hasClass(ClassName.ACTIVE)) + } + + if (triggerChangeEvent) { + $(this.element).toggleClass(ClassName.ACTIVE) + } + } + + + // static + + static _jQueryInterface(config) { + return this.each(function () { + let data = $(this).data(DATA_KEY) + + if (!data) { + data = new Button(this) + $(this).data(DATA_KEY, data) + } + + if (config === 'toggle') { + data[config]() + } + }) + } + + } + + + /** + * ------------------------------------------------------------------------ + * Data Api implementation + * ------------------------------------------------------------------------ + */ + + $(document) + .on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) { + event.preventDefault() + + let button = event.target + + if (!$(button).hasClass(ClassName.BUTTON)) { + button = $(button).closest(Selector.BUTTON) + } + + Button._jQueryInterface.call($(button), 'toggle') + }) + .on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) { + var button = $(event.target).closest(Selector.BUTTON)[0] + $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)) + }) + + + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + */ + + $.fn[NAME] = Button._jQueryInterface + $.fn[NAME].Constructor = Button + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return Button._jQueryInterface + } + + return Button + +})(jQuery) + +export default Button diff --git a/js/src/util.js b/js/src/util.js index 68205edef..abc548a45 100644 --- a/js/src/util.js +++ b/js/src/util.js @@ -5,7 +5,7 @@ * -------------------------------------------------------------------------- */ -const Util = (() => { +const Util = (($) => { /** @@ -119,6 +119,6 @@ const Util = (() => { return Util -})() +})(jQuery) export default Util diff --git a/js/tests/index.html b/js/tests/index.html index 536e34c74..29c84e2cc 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -132,9 +132,9 @@ + - diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 691796c42..5648506cf 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -32,64 +32,6 @@ $(function () { assert.strictEqual($button[0], $el[0], 'collection contains element') }) - QUnit.test('should return set state to loading', function (assert) { - assert.expect(4) - var $btn = $('') - assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo') - $btn.bootstrapButton('loading') - var done = assert.async() - setTimeout(function () { - assert.strictEqual($btn.html(), 'fat', 'btn text equals fat') - assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled') - assert.ok($btn.hasClass('disabled'), 'btn has disabled class') - done() - }, 0) - }) - - QUnit.test('should return reset state', function (assert) { - assert.expect(7) - var $btn = $('') - assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo') - $btn.bootstrapButton('loading') - var doneOne = assert.async() - setTimeout(function () { - assert.strictEqual($btn.html(), 'fat', 'btn text equals fat') - assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled') - assert.ok($btn.hasClass('disabled'), 'btn has disabled class') - doneOne() - var doneTwo = assert.async() - $btn.bootstrapButton('reset') - setTimeout(function () { - assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo') - assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled') - assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class') - doneTwo() - }, 0) - }, 0) - }) - - QUnit.test('should work with an empty string as reset state', function (assert) { - assert.expect(7) - var $btn = $('') diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index d92a08329..a6eed7e05 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -22,10 +22,6 @@

Button Bootstrap Visual Test

- -
@@ -56,8 +52,8 @@ - - + +