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 ++++++++++++++-------------- js/tests/unit/alert.js | 6 +++--- js/tests/unit/collapse.js | 32 ++++++++++++++++---------------- js/tests/unit/dropdown.js | 34 +++++++++++++++++----------------- js/tests/unit/popover.js | 2 +- js/tests/unit/tooltip.js | 40 ++++++++++++++++++++-------------------- js/tests/visual/alert.html | 4 ++-- js/tests/visual/collapse.html | 2 +- js/tests/visual/modal.html | 2 +- 14 files changed, 101 insertions(+), 101 deletions(-) (limited to 'js') 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) diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js index 97818960a..3128e20be 100644 --- a/js/tests/unit/alert.js +++ b/js/tests/unit/alert.js @@ -34,7 +34,7 @@ $(function () { QUnit.test('should fade element out on clicking .close', function (assert) { assert.expect(1) - var alertHTML = '
' + var alertHTML = '
' + '×' + '

Holy guacamole! Best check yo self, you\'re not looking too good.

' + '
' @@ -43,12 +43,12 @@ $(function () { $alert.find('.close').trigger('click') - assert.strictEqual($alert.hasClass('in'), false, 'remove .in class on .close click') + assert.strictEqual($alert.hasClass('active'), false, 'remove .active class on .close click') }) QUnit.test('should remove element when clicking .close', function (assert) { assert.expect(2) - var alertHTML = '
' + var alertHTML = '
' + '×' + '

Holy guacamole! Best check yo self, you\'re not looking too good.

' + '
' diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index dba15e865..25bb7772e 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -48,7 +48,7 @@ $(function () { assert.expect(2) var $el = $('
').bootstrapCollapse('show') - assert.ok($el.hasClass('in'), 'has class "in"') + assert.ok($el.hasClass('active'), 'has class "active"') assert.ok(!/height/i.test($el.attr('style')), 'has height reset') }) @@ -62,7 +62,7 @@ $(function () { '
', '
', '
', - '
', + '
', '
', '
' ].join('') @@ -71,15 +71,15 @@ $(function () { var $el2 = $('#collapse2') $el1.bootstrapCollapse('show') - assert.ok($el1.hasClass('in')) - assert.ok($el2.hasClass('in')) + assert.ok($el1.hasClass('active')) + assert.ok($el2.hasClass('active')) }) QUnit.test('should hide a collapsed element', function (assert) { assert.expect(1) var $el = $('
').bootstrapCollapse('hide') - assert.ok(!$el.hasClass('in'), 'does not have class "in"') + assert.ok(!$el.hasClass('active'), 'does not have class "active"') }) QUnit.test('should not fire shown when show is prevented', function (assert) { @@ -150,7 +150,7 @@ $(function () { var $target = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed'), 'target has collapsed class') @@ -185,7 +185,7 @@ $(function () { var $target = $('').appendTo('#qunit-fixture') var $alt = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed'), 'target has collapsed class') @@ -200,7 +200,7 @@ $(function () { assert.expect(0) var done = assert.async() - var $test = $('
') + var $test = $('
') .appendTo('#qunit-fixture') .on('hide.bs.collapse', function () { assert.ok(false) @@ -244,7 +244,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('
') + $('
') .appendTo('#qunit-fixture') .on('hide.bs.collapse', function () { assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called') @@ -267,7 +267,7 @@ $(function () { var $target1 = $('
').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') @@ -379,7 +379,7 @@ $(function () { var $target = $('').appendTo('#qunit-fixture') var $alt = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') @@ -403,7 +403,7 @@ $(function () { var $target1 = $('').appendTo($groups.eq(0)) - $('
').appendTo($groups.eq(0)) + $('
').appendTo($groups.eq(0)) var $target2 = $('').appendTo('#qunit-fixture') - $('
') + $('
') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed')) diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index e6cda58d4..becd1d089 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -59,7 +59,7 @@ $(function () { + '' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click') - assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click') + assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click') }) QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) { @@ -128,10 +128,10 @@ $(function () { + '' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click') - assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click') + assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click') }) - QUnit.test('should add class open to menu if clicked', function (assert) { + QUnit.test('should add class active to menu if clicked', function (assert) { assert.expect(1) var dropdownHTML = '
    ' + '
' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click') - assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click') + assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click') }) QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) { @@ -164,11 +164,11 @@ $(function () { + '' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click') - assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click') + assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click') }) - QUnit.test('should remove "open" class if body is clicked', function (assert) { + QUnit.test('should remove "active" class if body is clicked', function (assert) { assert.expect(2) var dropdownHTML = '
    ' + '