From 660505188241418ffda53b5eb848defecd5f57e1 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 7 May 2015 17:07:38 -0700 Subject: button -> es6 --- js/src/button.js | 158 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 js/src/button.js (limited to 'js/src/button.js') 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 -- cgit v1.2.3 From 1b183e2ff796fc22aba8a8cac074a306c083d018 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 7 May 2015 22:26:40 -0700 Subject: carousel -> es6 --- js/src/button.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'js/src/button.js') diff --git a/js/src/button.js b/js/src/button.js index 7e9344923..0f1dab2af 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -49,24 +49,24 @@ const Button = (($) => { class Button { constructor(element) { - this.element = element + this._element = element } // public toggle() { let triggerChangeEvent = true - let rootElement = $(this.element).closest( + let rootElement = $(this._element).closest( Selector.DATA_TOGGLE )[0] if (rootElement) { - let input = $(this.element).find(Selector.INPUT)[0] + let input = $(this._element).find(Selector.INPUT)[0] if (input) { if (input.type === 'radio') { if (input.checked && - $(this.element).hasClass(ClassName.ACTIVE)) { + $(this._element).hasClass(ClassName.ACTIVE)) { triggerChangeEvent = false } else { @@ -79,17 +79,17 @@ const Button = (($) => { } if (triggerChangeEvent) { - input.checked = !$(this.element).hasClass(ClassName.ACTIVE) - $(this.element).trigger('change') + input.checked = !$(this._element).hasClass(ClassName.ACTIVE) + $(this._element).trigger('change') } } } else { - this.element.setAttribute('aria-pressed', - !$(this.element).hasClass(ClassName.ACTIVE)) + this._element.setAttribute('aria-pressed', + !$(this._element).hasClass(ClassName.ACTIVE)) } if (triggerChangeEvent) { - $(this.element).toggleClass(ClassName.ACTIVE) + $(this._element).toggleClass(ClassName.ACTIVE) } } -- cgit v1.2.3 From ca9c850ebbfc880dc5021b451ffc9fa12184ff87 Mon Sep 17 00:00:00 2001 From: fat Date: Sun, 10 May 2015 19:45:38 -0700 Subject: add getters for Version and Default where applicable add modal my gawd --- js/src/button.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'js/src/button.js') diff --git a/js/src/button.js b/js/src/button.js index 0f1dab2af..7520de2f6 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -52,6 +52,14 @@ const Button = (($) => { this._element = element } + + // getters + + static get VERSION() { + return VERSION + } + + // public toggle() { -- cgit v1.2.3 From f8b2569ec8956a1f4d09fe6fc9865bd200ecde43 Mon Sep 17 00:00:00 2001 From: fat Date: Wed, 13 May 2015 12:48:34 -0700 Subject: implement global dispose method --- js/src/button.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) (limited to 'js/src/button.js') diff --git a/js/src/button.js b/js/src/button.js index 7520de2f6..8210e8ae0 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -17,6 +17,8 @@ const Button = (($) => { const NAME = 'button' const VERSION = '4.0.0' const DATA_KEY = 'bs.button' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 @@ -35,8 +37,9 @@ const Button = (($) => { } const Event = { - CLICK : 'click.bs.button.data-api', - FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api' + 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}` } @@ -101,6 +104,11 @@ const Button = (($) => { } } + dispose() { + $.removeData(this._element, DATA_KEY) + this._element = null + } + // static @@ -129,7 +137,7 @@ const Button = (($) => { */ $(document) - .on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) { + .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) { event.preventDefault() let button = event.target @@ -140,7 +148,7 @@ const Button = (($) => { Button._jQueryInterface.call($(button), 'toggle') }) - .on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) { + .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) { var button = $(event.target).closest(Selector.BUTTON)[0] $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)) }) -- cgit v1.2.3