diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-22 19:19:26 +0100 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-22 19:19:26 +0100 |
| commit | d42c8b528eb595101954f478e0024e3f079f6fbf (patch) | |
| tree | 61a528cf94f1f6941f4683ae8736a4a0135c035e /templates/assets/bootstrap/js/src/tab.js | |
| download | minionlivesmatter-d42c8b528eb595101954f478e0024e3f079f6fbf.tar.gz minionlivesmatter-d42c8b528eb595101954f478e0024e3f079f6fbf.zip | |
first implementation of fun stats site
Diffstat (limited to 'templates/assets/bootstrap/js/src/tab.js')
| -rw-r--r-- | templates/assets/bootstrap/js/src/tab.js | 284 |
1 files changed, 284 insertions, 0 deletions
diff --git a/templates/assets/bootstrap/js/src/tab.js b/templates/assets/bootstrap/js/src/tab.js new file mode 100644 index 0000000..d5669b7 --- /dev/null +++ b/templates/assets/bootstrap/js/src/tab.js @@ -0,0 +1,284 @@ +import Util from './util' + + +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.0.0-alpha.6): tab.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +const Tab = (($) => { + + + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + + const NAME = 'tab' + const VERSION = '4.0.0-alpha.6' + const DATA_KEY = 'bs.tab' + const EVENT_KEY = `.${DATA_KEY}` + const DATA_API_KEY = '.data-api' + const JQUERY_NO_CONFLICT = $.fn[NAME] + const TRANSITION_DURATION = 150 + + const Event = { + HIDE : `hide${EVENT_KEY}`, + HIDDEN : `hidden${EVENT_KEY}`, + SHOW : `show${EVENT_KEY}`, + SHOWN : `shown${EVENT_KEY}`, + CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}` + } + + const ClassName = { + DROPDOWN_MENU : 'dropdown-menu', + ACTIVE : 'active', + DISABLED : 'disabled', + FADE : 'fade', + SHOW : 'show' + } + + const Selector = { + A : 'a', + LI : 'li', + DROPDOWN : '.dropdown', + LIST : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu), .list-group:not(.dropdown-menu)', + FADE_CHILD : '> .nav-item .fade, > .list-group-item .fade, > .fade', + ACTIVE : '.active', + ACTIVE_CHILD : '> .nav-item > .active, > .list-group-item > .active, > .active', + DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]', + DROPDOWN_TOGGLE : '.dropdown-toggle', + DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' + } + + + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + + class Tab { + + constructor(element) { + this._element = element + } + + + // getters + + static get VERSION() { + return VERSION + } + + + // public + + show() { + if (this._element.parentNode && + this._element.parentNode.nodeType === Node.ELEMENT_NODE && + $(this._element).hasClass(ClassName.ACTIVE) || + $(this._element).hasClass(ClassName.DISABLED)) { + return + } + + let target + let previous + const listElement = $(this._element).closest(Selector.LIST)[0] + const selector = Util.getSelectorFromElement(this._element) + + if (listElement) { + previous = $.makeArray($(listElement).find(Selector.ACTIVE)) + previous = previous[previous.length - 1] + } + + const hideEvent = $.Event(Event.HIDE, { + relatedTarget: this._element + }) + + const showEvent = $.Event(Event.SHOW, { + relatedTarget: previous + }) + + if (previous) { + $(previous).trigger(hideEvent) + } + + $(this._element).trigger(showEvent) + + if (showEvent.isDefaultPrevented() || + hideEvent.isDefaultPrevented()) { + return + } + + if (selector) { + target = $(selector)[0] + } + + this._activate( + this._element, + listElement + ) + + const complete = () => { + const hiddenEvent = $.Event(Event.HIDDEN, { + relatedTarget: this._element + }) + + const shownEvent = $.Event(Event.SHOWN, { + relatedTarget: previous + }) + + $(previous).trigger(hiddenEvent) + $(this._element).trigger(shownEvent) + } + + if (target) { + this._activate(target, target.parentNode, complete) + } else { + complete() + } + } + + dispose() { + $.removeClass(this._element, DATA_KEY) + this._element = null + } + + + // private + + _activate(element, container, callback) { + const active = $(container).find(Selector.ACTIVE_CHILD)[0] + const isTransitioning = callback + && Util.supportsTransitionEnd() + && (active && $(active).hasClass(ClassName.FADE) + || Boolean($(container).find(Selector.FADE_CHILD)[0])) + + const complete = () => this._transitionComplete( + element, + active, + isTransitioning, + callback + ) + + if (active && isTransitioning) { + $(active) + .one(Util.TRANSITION_END, complete) + .emulateTransitionEnd(TRANSITION_DURATION) + + } else { + complete() + } + + if (active) { + $(active).removeClass(ClassName.SHOW) + } + } + + _transitionComplete(element, active, isTransitioning, callback) { + if (active) { + $(active).removeClass(ClassName.ACTIVE) + if ($(active).hasClass('list-group-item')) { + $(active).find('a.nav-link').removeClass(ClassName.ACTIVE) + } + + const dropdownChild = $(active.parentNode).find( + Selector.DROPDOWN_ACTIVE_CHILD + )[0] + + if (dropdownChild) { + $(dropdownChild).removeClass(ClassName.ACTIVE) + } + + active.setAttribute('aria-expanded', false) + } + + $(element).addClass(ClassName.ACTIVE) + if ($(element.parentNode).hasClass('list-group-item')) { + $(element.parentNode).addClass(ClassName.ACTIVE) + } + element.setAttribute('aria-expanded', true) + + if (isTransitioning) { + Util.reflow(element) + $(element).addClass(ClassName.SHOW) + } else { + $(element).removeClass(ClassName.FADE) + } + + if (element.parentNode && + $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { + + const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] + if (dropdownElement) { + $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE) + } + + element.setAttribute('aria-expanded', true) + } + + if (callback) { + callback() + } + } + + + // static + + static _jQueryInterface(config) { + return this.each(function () { + const $this = $(this) + let data = $this.data(DATA_KEY) + + if (!data) { + data = new Tab(this) + $this.data(DATA_KEY, data) + } + + if (typeof config === 'string') { + if (data[config] === undefined) { + throw new Error(`No method named "${config}"`) + } + data[config]() + } + }) + } + + } + + + /** + * ------------------------------------------------------------------------ + * Data Api implementation + * ------------------------------------------------------------------------ + */ + + $(document) + .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { + event.preventDefault() + Tab._jQueryInterface.call($(this), 'show') + }) + + + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + */ + + $.fn[NAME] = Tab._jQueryInterface + $.fn[NAME].Constructor = Tab + $.fn[NAME].noConflict = function () { + $.fn[NAME] = JQUERY_NO_CONFLICT + return Tab._jQueryInterface + } + + return Tab + +})(jQuery) + +export default Tab |
