From 0724bd91ff81b5eca0addce0c336c72b3ec10be5 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 7 May 2015 12:48:22 -0700 Subject: es6 alert :| --- js/src/alert.js | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 js/src/alert.js (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js new file mode 100644 index 000000000..bd12b1a55 --- /dev/null +++ b/js/src/alert.js @@ -0,0 +1,168 @@ +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.0.0): alert.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +import Util from 'util' + + +/** + * -------------------------------------------------------------------------- + * Constants + * -------------------------------------------------------------------------- + */ + +const NAME = 'alert' +const VERSION = '4.0.0' +const DATA_KEY = 'bs.alert' +const JQUERY_NO_CONFLICT = $.fn[NAME] +const TRANSITION_DURATION = 150 + +const Selector = { + DISMISS : '[data-dismiss="alert"]' +} + +const Event = { + CLOSE : 'close.bs.alert', + CLOSED : 'closed.bs.alert', + CLICK : 'click.bs.alert.data-api' +} + +const ClassName = { + ALERT : 'alert', + FADE : 'fade', + IN : 'in' +} + + +/** + * -------------------------------------------------------------------------- + * Class Definition + * -------------------------------------------------------------------------- + */ + +export class Alert { + + constructor(element) { + if (element) { + this.element = element + } + } + + + // public + + close(element) { + let rootElement = this._getRootElement(element) + let customEvent = this._triggerCloseEvent(rootElement) + + if (customEvent.isDefaultPrevented()) { + return + } + + this._removeElement(rootElement) + } + + + // private + + _getRootElement(element) { + let parent = false + let selector = Util.getSelectorFromElement(element) + + if (selector) { + parent = $(selector)[0] + } + + if (!parent) { + parent = $(element).closest('.' + ClassName.ALERT)[0] + } + + return parent + } + + _triggerCloseEvent(element) { + var closeEvent = $.Event(Event.CLOSE) + $(element).trigger(closeEvent) + return closeEvent + } + + _removeElement(element) { + $(element).removeClass(ClassName.IN) + + if (!Util.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { + this._destroyElement(element) + return + } + + $(element) + .one(Util.TRANSITION_END, this._destroyElement.bind(this, element)) + .emulateTransitionEnd(TRANSITION_DURATION) + } + + _destroyElement(element) { + $(element) + .detach() + .trigger(Event.CLOSED) + .remove() + } + + + // static + + static _jQueryInterface(config) { + return this.each(function () { + let $element = $(this) + let data = $element.data(DATA_KEY) + + if (!data) { + data = new Alert(this) + $element.data(DATA_KEY, data) + } + + if (config === 'close') { + data[config](this) + } + }) + } + + static _handleDismiss(alertInstance) { + return function (event) { + if (event) { + event.preventDefault() + } + + alertInstance.close(this) + } + } + +} + + +/** + * -------------------------------------------------------------------------- + * 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 +} -- cgit v1.2.3 From c3a79b1a8c2fa8d7fc8edcd3e626dad8b45d5dc3 Mon Sep 17 00:00:00 2001 From: fat Date: Thu, 7 May 2015 16:34:28 -0700 Subject: change the export pattern to protect against leaking globals --- js/src/alert.js | 238 +++++++++++++++++++++++++++++--------------------------- 1 file changed, 124 insertions(+), 114 deletions(-) (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js index bd12b1a55..d69ad8910 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -1,3 +1,6 @@ +import Util from './util' + + /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0): alert.js @@ -5,164 +8,171 @@ * -------------------------------------------------------------------------- */ -import Util from 'util' +const Alert = (() => { -/** - * -------------------------------------------------------------------------- - * Constants - * -------------------------------------------------------------------------- - */ + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ -const NAME = 'alert' -const VERSION = '4.0.0' -const DATA_KEY = 'bs.alert' -const JQUERY_NO_CONFLICT = $.fn[NAME] -const TRANSITION_DURATION = 150 + const NAME = 'alert' + const VERSION = '4.0.0' + const DATA_KEY = 'bs.alert' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const TRANSITION_DURATION = 150 -const Selector = { - DISMISS : '[data-dismiss="alert"]' -} + const Selector = { + DISMISS : '[data-dismiss="alert"]' + } -const Event = { - CLOSE : 'close.bs.alert', - CLOSED : 'closed.bs.alert', - CLICK : 'click.bs.alert.data-api' -} + const Event = { + CLOSE : 'close.bs.alert', + CLOSED : 'closed.bs.alert', + CLICK : 'click.bs.alert.data-api' + } -const ClassName = { - ALERT : 'alert', - FADE : 'fade', - IN : 'in' -} + const ClassName = { + ALERT : 'alert', + FADE : 'fade', + IN : 'in' + } -/** - * -------------------------------------------------------------------------- - * Class Definition - * -------------------------------------------------------------------------- - */ + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ -export class Alert { + class Alert { - constructor(element) { - if (element) { - this.element = element + constructor(element) { + if (element) { + this.element = element + } } - } - // public + // public + + close(element) { + let rootElement = this._getRootElement(element) + let customEvent = this._triggerCloseEvent(rootElement) - close(element) { - let rootElement = this._getRootElement(element) - let customEvent = this._triggerCloseEvent(rootElement) + if (customEvent.isDefaultPrevented()) { + return + } - if (customEvent.isDefaultPrevented()) { - return + this._removeElement(rootElement) } - this._removeElement(rootElement) - } + // private - // private + _getRootElement(element) { + let parent = false + let selector = Util.getSelectorFromElement(element) - _getRootElement(element) { - let parent = false - let selector = Util.getSelectorFromElement(element) + if (selector) { + parent = $(selector)[0] + } - if (selector) { - parent = $(selector)[0] + if (!parent) { + parent = $(element).closest('.' + ClassName.ALERT)[0] + } + + return parent } - if (!parent) { - parent = $(element).closest('.' + ClassName.ALERT)[0] + _triggerCloseEvent(element) { + var closeEvent = $.Event(Event.CLOSE) + $(element).trigger(closeEvent) + return closeEvent } - return parent - } + _removeElement(element) { + $(element).removeClass(ClassName.IN) - _triggerCloseEvent(element) { - var closeEvent = $.Event(Event.CLOSE) - $(element).trigger(closeEvent) - return closeEvent - } + if (!Util.supportsTransitionEnd() || + !$(element).hasClass(ClassName.FADE)) { + this._destroyElement(element) + return + } - _removeElement(element) { - $(element).removeClass(ClassName.IN) + $(element) + .one(Util.TRANSITION_END, this._destroyElement.bind(this, element)) + .emulateTransitionEnd(TRANSITION_DURATION) + } - if (!Util.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { - this._destroyElement(element) - return + _destroyElement(element) { + $(element) + .detach() + .trigger(Event.CLOSED) + .remove() } - $(element) - .one(Util.TRANSITION_END, this._destroyElement.bind(this, element)) - .emulateTransitionEnd(TRANSITION_DURATION) - } - _destroyElement(element) { - $(element) - .detach() - .trigger(Event.CLOSED) - .remove() - } + // static + static _jQueryInterface(config) { + return this.each(function () { + let $element = $(this) + let data = $element.data(DATA_KEY) - // static + if (!data) { + data = new Alert(this) + $element.data(DATA_KEY, data) + } - static _jQueryInterface(config) { - return this.each(function () { - let $element = $(this) - let data = $element.data(DATA_KEY) + if (config === 'close') { + data[config](this) + } + }) + } - if (!data) { - data = new Alert(this) - $element.data(DATA_KEY, data) - } + static _handleDismiss(alertInstance) { + return function (event) { + if (event) { + event.preventDefault() + } - if (config === 'close') { - data[config](this) + alertInstance.close(this) } - }) + } + } - static _handleDismiss(alertInstance) { - return function (event) { - if (event) { - event.preventDefault() - } - alertInstance.close(this) - } - } + /** + * ------------------------------------------------------------------------ + * Data Api implementation + * ------------------------------------------------------------------------ + */ -} + $(document).on( + Event.CLICK, + Selector.DISMISS, + Alert._handleDismiss(new Alert()) + ) -/** - * -------------------------------------------------------------------------- - * Data Api implementation - * -------------------------------------------------------------------------- - */ + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + */ -$(document).on( - Event.CLICK, - Selector.DISMISS, - Alert._handleDismiss(new Alert()) -) + $.fn[NAME] = Alert._jQueryInterface + $.fn[NAME].Constructor = Alert + $.fn[NAME].noConflict = function () { + $.fn[NAME] = Alert._JQUERY_NO_CONFLICT + return Alert._jQueryInterface + } + return Alert -/** - * -------------------------------------------------------------------------- - * jQuery - * -------------------------------------------------------------------------- - */ +})() -$.fn[NAME] = Alert._jQueryInterface -$.fn[NAME].Constructor = Alert -$.fn[NAME].noConflict = function () { - $.fn[NAME] = Alert._JQUERY_NO_CONFLICT - return Alert._jQueryInterface -} +export default Alert -- cgit v1.2.3 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/alert.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'js/src/alert.js') 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 -- 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/alert.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js index 67a1ceda4..e5e8eeacb 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -49,16 +49,14 @@ const Alert = (($) => { class Alert { constructor(element) { - if (element) { - this.element = element - } + this._element = element } // public close(element) { - element = element || this.element + element = element || this._element let rootElement = this._getRootElement(element) let customEvent = this._triggerCloseEvent(rootElement) -- cgit v1.2.3 From 8bab38bb7176d2716b72664dbafcc326824a2ee9 Mon Sep 17 00:00:00 2001 From: fat Date: Sat, 9 May 2015 23:00:59 -0700 Subject: add collapse --- js/src/alert.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js index e5e8eeacb..a712154ab 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -80,7 +80,7 @@ const Alert = (($) => { } if (!parent) { - parent = $(element).closest('.' + ClassName.ALERT)[0] + parent = $(element).closest(`.${ClassName.ALERT}`)[0] } return parent -- 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/alert.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js index a712154ab..57a59746a 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -53,6 +53,13 @@ const Alert = (($) => { } + // getters + + static get VERSION() { + return VERSION + } + + // public close(element) { -- 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/alert.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'js/src/alert.js') diff --git a/js/src/alert.js b/js/src/alert.js index 57a59746a..eda74d706 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -20,6 +20,8 @@ const Alert = (($) => { const NAME = 'alert' const VERSION = '4.0.0' const DATA_KEY = 'bs.alert' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' const JQUERY_NO_CONFLICT = $.fn[NAME] const TRANSITION_DURATION = 150 @@ -28,9 +30,9 @@ const Alert = (($) => { } const Event = { - CLOSE : 'close.bs.alert', - CLOSED : 'closed.bs.alert', - CLICK : 'click.bs.alert.data-api' + CLOSE : `close${EVENT_KEY}`, + CLOSED : `closed${EVENT_KEY}`, + CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` } const ClassName = { @@ -75,6 +77,11 @@ const Alert = (($) => { this._removeElement(rootElement) } + dispose() { + $.removeData(this._element, DATA_KEY) + this._element = null + } + // private @@ -159,7 +166,7 @@ const Alert = (($) => { */ $(document).on( - Event.CLICK, + Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()) ) -- cgit v1.2.3