From 9d129a43d6c24d9e60cc8fc7cfbddaaa4c586fdf Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 24 Oct 2016 10:57:32 +0200 Subject: Use a single class name for opened/expanded/shown state of widgets --- js/src/alert.js | 8 ++++---- js/src/collapse.js | 16 ++++++++-------- js/src/dropdown.js | 12 ++++++------ js/src/modal.js | 10 +++++----- js/src/popover.js | 6 +++--- js/src/tooltip.js | 28 ++++++++++++++-------------- 6 files changed, 40 insertions(+), 40 deletions(-) (limited to 'js/src') diff --git a/js/src/alert.js b/js/src/alert.js index a46494070..0456c677d 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -36,9 +36,9 @@ const Alert = (($) => { } const ClassName = { - ALERT : 'alert', - FADE : 'fade', - IN : 'in' + ALERT : 'alert', + FADE : 'fade', + ACTIVE : 'active' } @@ -108,7 +108,7 @@ const Alert = (($) => { } _removeElement(element) { - $(element).removeClass(ClassName.IN) + $(element).removeClass(ClassName.ACTIVE) if (!Util.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { diff --git a/js/src/collapse.js b/js/src/collapse.js index 782d82a2f..f700979e0 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -44,7 +44,7 @@ const Collapse = (($) => { } const ClassName = { - IN : 'in', + ACTIVE : 'active', COLLAPSE : 'collapse', COLLAPSING : 'collapsing', COLLAPSED : 'collapsed' @@ -56,7 +56,7 @@ const Collapse = (($) => { } const Selector = { - ACTIVES : '.card > .in, .card > .collapsing', + ACTIVES : '.card > .active, .card > .collapsing', DATA_TOGGLE : '[data-toggle="collapse"]' } @@ -104,7 +104,7 @@ const Collapse = (($) => { // public toggle() { - if ($(this._element).hasClass(ClassName.IN)) { + if ($(this._element).hasClass(ClassName.ACTIVE)) { this.hide() } else { this.show() @@ -113,7 +113,7 @@ const Collapse = (($) => { show() { if (this._isTransitioning || - $(this._element).hasClass(ClassName.IN)) { + $(this._element).hasClass(ClassName.ACTIVE)) { return } @@ -168,7 +168,7 @@ const Collapse = (($) => { $(this._element) .removeClass(ClassName.COLLAPSING) .addClass(ClassName.COLLAPSE) - .addClass(ClassName.IN) + .addClass(ClassName.ACTIVE) this._element.style[dimension] = '' @@ -194,7 +194,7 @@ const Collapse = (($) => { hide() { if (this._isTransitioning || - !$(this._element).hasClass(ClassName.IN)) { + !$(this._element).hasClass(ClassName.ACTIVE)) { return } @@ -215,7 +215,7 @@ const Collapse = (($) => { $(this._element) .addClass(ClassName.COLLAPSING) .removeClass(ClassName.COLLAPSE) - .removeClass(ClassName.IN) + .removeClass(ClassName.ACTIVE) this._element.setAttribute('aria-expanded', false) @@ -293,7 +293,7 @@ const Collapse = (($) => { _addAriaAndCollapsedClass(element, triggerArray) { if (element) { - let isOpen = $(element).hasClass(ClassName.IN) + let isOpen = $(element).hasClass(ClassName.ACTIVE) element.setAttribute('aria-expanded', isOpen) if (triggerArray.length) { diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 656a05e77..3246e6bef 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -41,7 +41,7 @@ const Dropdown = (($) => { const ClassName = { BACKDROP : 'dropdown-backdrop', DISABLED : 'disabled', - OPEN : 'open' + ACTIVE : 'active' } const Selector = { @@ -86,7 +86,7 @@ const Dropdown = (($) => { } let parent = Dropdown._getParentFromElement(this) - let isActive = $(parent).hasClass(ClassName.OPEN) + let isActive = $(parent).hasClass(ClassName.ACTIVE) Dropdown._clearMenus() @@ -116,7 +116,7 @@ const Dropdown = (($) => { this.focus() this.setAttribute('aria-expanded', 'true') - $(parent).toggleClass(ClassName.OPEN) + $(parent).toggleClass(ClassName.ACTIVE) $(parent).trigger($.Event(Event.SHOWN, relatedTarget)) return false @@ -171,7 +171,7 @@ const Dropdown = (($) => { let parent = Dropdown._getParentFromElement(toggles[i]) let relatedTarget = { relatedTarget : toggles[i] } - if (!$(parent).hasClass(ClassName.OPEN)) { + if (!$(parent).hasClass(ClassName.ACTIVE)) { continue } @@ -190,7 +190,7 @@ const Dropdown = (($) => { toggles[i].setAttribute('aria-expanded', 'false') $(parent) - .removeClass(ClassName.OPEN) + .removeClass(ClassName.ACTIVE) .trigger($.Event(Event.HIDDEN, relatedTarget)) } } @@ -220,7 +220,7 @@ const Dropdown = (($) => { } let parent = Dropdown._getParentFromElement(this) - let isActive = $(parent).hasClass(ClassName.OPEN) + let isActive = $(parent).hasClass(ClassName.ACTIVE) if ((!isActive && event.which !== ESCAPE_KEYCODE) || (isActive && event.which === ESCAPE_KEYCODE)) { diff --git a/js/src/modal.js b/js/src/modal.js index ee78070dd..252637428 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -60,7 +60,7 @@ const Modal = (($) => { BACKDROP : 'modal-backdrop', OPEN : 'modal-open', FADE : 'fade', - IN : 'in' + ACTIVE : 'active' } const Selector = { @@ -169,7 +169,7 @@ const Modal = (($) => { $(document).off(Event.FOCUSIN) - $(this._element).removeClass(ClassName.IN) + $(this._element).removeClass(ClassName.ACTIVE) $(this._element).off(Event.CLICK_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS) @@ -231,7 +231,7 @@ const Modal = (($) => { Util.reflow(this._element) } - $(this._element).addClass(ClassName.IN) + $(this._element).addClass(ClassName.ACTIVE) if (this._config.focus) { this._enforceFocus() @@ -343,7 +343,7 @@ const Modal = (($) => { Util.reflow(this._backdrop) } - $(this._backdrop).addClass(ClassName.IN) + $(this._backdrop).addClass(ClassName.ACTIVE) if (!callback) { return @@ -359,7 +359,7 @@ const Modal = (($) => { .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) } else if (!this._isShown && this._backdrop) { - $(this._backdrop).removeClass(ClassName.IN) + $(this._backdrop).removeClass(ClassName.ACTIVE) let callbackRemove = () => { this._removeBackdrop() diff --git a/js/src/popover.js b/js/src/popover.js index 115cfef9e..289853b32 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -37,8 +37,8 @@ const Popover = (($) => { }) const ClassName = { - FADE : 'fade', - IN : 'in' + FADE : 'fade', + ACTIVE : 'active' } const Selector = { @@ -119,7 +119,7 @@ const Popover = (($) => { $tip .removeClass(ClassName.FADE) - .removeClass(ClassName.IN) + .removeClass(ClassName.ACTIVE) this.cleanupTether() } diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c21eb0cda..90e782dc9 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -70,8 +70,8 @@ const Tooltip = (($) => { } const HoverState = { - IN : 'in', - OUT : 'out' + ACTIVE : 'active', + OUT : 'out' } const Event = { @@ -88,8 +88,8 @@ const Tooltip = (($) => { } const ClassName = { - FADE : 'fade', - IN : 'in' + FADE : 'fade', + ACTIVE : 'active' } const Selector = { @@ -205,7 +205,7 @@ const Tooltip = (($) => { } else { - if ($(this.getTipElement()).hasClass(ClassName.IN)) { + if ($(this.getTipElement()).hasClass(ClassName.ACTIVE)) { this._leave(null, this) return } @@ -291,7 +291,7 @@ const Tooltip = (($) => { Util.reflow(tip) this._tether.position() - $(tip).addClass(ClassName.IN) + $(tip).addClass(ClassName.ACTIVE) let complete = () => { let prevHoverState = this._hoverState @@ -319,7 +319,7 @@ const Tooltip = (($) => { let tip = this.getTipElement() let hideEvent = $.Event(this.constructor.Event.HIDE) let complete = () => { - if (this._hoverState !== HoverState.IN && tip.parentNode) { + if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) { tip.parentNode.removeChild(tip) } @@ -338,7 +338,7 @@ const Tooltip = (($) => { return } - $(tip).removeClass(ClassName.IN) + $(tip).removeClass(ClassName.ACTIVE) if (Util.supportsTransitionEnd() && ($(this.tip).hasClass(ClassName.FADE))) { @@ -372,7 +372,7 @@ const Tooltip = (($) => { $tip .removeClass(ClassName.FADE) - .removeClass(ClassName.IN) + .removeClass(ClassName.ACTIVE) this.cleanupTether() } @@ -492,15 +492,15 @@ const Tooltip = (($) => { ] = true } - if ($(context.getTipElement()).hasClass(ClassName.IN) || - (context._hoverState === HoverState.IN)) { - context._hoverState = HoverState.IN + if ($(context.getTipElement()).hasClass(ClassName.ACTIVE) || + (context._hoverState === HoverState.ACTIVE)) { + context._hoverState = HoverState.ACTIVE return } clearTimeout(context._timeout) - context._hoverState = HoverState.IN + context._hoverState = HoverState.ACTIVE if (!context.config.delay || !context.config.delay.show) { context.show() @@ -508,7 +508,7 @@ const Tooltip = (($) => { } context._timeout = setTimeout(() => { - if (context._hoverState === HoverState.IN) { + if (context._hoverState === HoverState.ACTIVE) { context.show() } }, context.config.delay.show) -- cgit v1.2.3