Skip to content

Commit

Permalink
fixed issue when passing false to activeClass would break things
Browse files Browse the repository at this point in the history
  • Loading branch information
bekzod committed May 22, 2017
1 parent 0a0959b commit fdc3279
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 12 deletions.
24 changes: 15 additions & 9 deletions packages/ember-glimmer/lib/components/link-to.js
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,7 @@ const LinkComponent = EmberComponent.extend({
}
}),

_computeActive(routerState) {
_isActive(routerState) {
if (get(this, 'loading')) { return false; }

let routing = get(this, '_routing');
Expand All @@ -557,7 +557,7 @@ const LinkComponent = EmberComponent.extend({

for (let i = 0; i < currentWhen.length; i++) {
if (routing.isActiveForRoute(models, resolvedQueryParams, currentWhen[i], routerState, isCurrentWhenSpecified)) {
return get(this, 'activeClass');
return true;
}
}

Expand All @@ -578,33 +578,39 @@ const LinkComponent = EmberComponent.extend({
@property active
@private
*/
active: computed('attrs.params', '_routing.currentState', function computeLinkToComponentActive() {
active: computed('attrs.params', '_active', function computeLinkToComponentActiveClass() {
let currentState = get(this, '_routing.currentState');
if (!currentState) { return false; }

return this._computeActive(currentState);
return this.get('_active') ? get(this, 'activeClass') : false;
}),

_active: computed('_routing.currentState', function computeLinkToComponentActive() {
let currentState = get(this, '_routing.currentState');
if (!currentState) { return false; }
return this._isActive(currentState);
}),

willBeActive: computed('_routing.targetState', function computeLinkToComponentWillBeActive() {
let routing = get(this, '_routing');
let targetState = get(routing, 'targetState');
if (get(routing, 'currentState') === targetState) { return; }

return !!this._computeActive(targetState);
return this._isActive(targetState);
}),

transitioningIn: computed('active', 'willBeActive', function computeLinkToComponentTransitioningIn() {
transitioningIn: computed('_active', 'willBeActive', function computeLinkToComponentTransitioningIn() {
let willBeActive = get(this, 'willBeActive');
if (typeof willBeActive === 'undefined') { return false; }

return !get(this, 'active') && willBeActive && 'ember-transitioning-in';
return !get(this, '_active') && willBeActive && 'ember-transitioning-in';
}),

transitioningOut: computed('active', 'willBeActive', function computeLinkToComponentTransitioningOut() {
transitioningOut: computed('_active', 'willBeActive', function computeLinkToComponentTransitioningOut() {
let willBeActive = get(this, 'willBeActive');
if (typeof willBeActive === 'undefined') { return false; }

return get(this, 'active') && !willBeActive && 'ember-transitioning-out';
return get(this, '_active') && !willBeActive && 'ember-transitioning-out';
}),

/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { setTemplates, setTemplate } from 'ember-glimmer';

let Router, App, registry, container;

let aboutDefer, otherDefer;
let aboutDefer, otherDefer, newsDefer;

function bootApplication() {
container.lookup('router:main');
Expand All @@ -20,7 +20,11 @@ function assertHasClass(className) {
while (i < arguments.length) {
let $a = arguments[i];
let shouldHaveClass = arguments[i + 1];
equal($a.hasClass(className), shouldHaveClass, $a.attr('id') + ' should ' + (shouldHaveClass ? '' : 'not ') + 'have class ' + className);
equal(
$a.hasClass(className),
shouldHaveClass,
$a.attr('id') + ' should ' + (shouldHaveClass ? '' : 'not ') + 'have class ' + className
);
i += 2;
}
}
Expand Down Expand Up @@ -72,6 +76,7 @@ QUnit.module('The {{link-to}} helper: .transitioning-in .transitioning-out CSS c
Router.map(function() {
this.route('about');
this.route('other');
this.route('news');
});

App.AboutRoute = Route.extend({
Expand All @@ -88,13 +93,28 @@ QUnit.module('The {{link-to}} helper: .transitioning-in .transitioning-out CSS c
}
});

setTemplate('application', compile('{{outlet}}{{link-to \'Index\' \'index\' id=\'index-link\'}}{{link-to \'About\' \'about\' id=\'about-link\'}}{{link-to \'Other\' \'other\' id=\'other-link\'}}'));
App.NewsRoute = Route.extend({
model() {
newsDefer = RSVP.defer();
return newsDefer.promise;
}
});

setTemplate('application', compile(`
{{outlet}}
{{link-to 'Index' 'index' id='index-link'}}
{{link-to 'About' 'about' id='about-link'}}
{{link-to 'Other' 'other' id='other-link'}}
{{link-to 'News' 'news' activeClass=false id='news-link'}}
`));
});
},

teardown() {
sharedTeardown();
aboutDefer = null;
otherDefer = null;
newsDefer = null;
}
});

Expand All @@ -119,6 +139,27 @@ QUnit.test('while a transition is underway', function() {
assertHasClass('ember-transitioning-out', $index, false, $about, false, $other, false);
});

QUnit.test('while a transition is underway with activeClass is false', function() {
expect(18);
bootApplication();

let $index = jQuery('#index-link');
let $news = jQuery('#news-link');
let $other = jQuery('#other-link');

run($news, 'click');

assertHasClass('active', $index, true, $news, false, $other, false);
assertHasClass('ember-transitioning-in', $index, false, $news, true, $other, false);
assertHasClass('ember-transitioning-out', $index, true, $news, false, $other, false);

run(newsDefer, 'resolve');

assertHasClass('active', $index, false, $news, false, $other, false);
assertHasClass('ember-transitioning-in', $index, false, $news, false, $other, false);
assertHasClass('ember-transitioning-out', $index, false, $news, false, $other, false);
});

QUnit.test('while a transition is underway with nested link-to\'s', function() {
expect(54);

Expand Down

0 comments on commit fdc3279

Please sign in to comment.