Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ObservableMedia): properly announce 'xs' activation at startup #396

Merged
merged 1 commit into from
Sep 7, 2017

Conversation

ThomasBurleson
Copy link
Contributor

MatchMedia was not properly announcing XS activations for applications with startup viewports < 600px.
Improve the specificity of the 'xs' media query enables proper MatchMedia notifications at startup.

Fixes #388.

@ThomasBurleson
Copy link
Contributor Author

@crisbeto - would you mind reviewing this one ?

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM with a few nitpicks, however I didn't find a new unit test for the fix to #388.

LICENSE Outdated
@@ -10,7 +10,7 @@ copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
all copies or substantial portions of the Software.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like you added an extra space in here.

@@ -130,7 +134,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
* and optional restore it when the mediaQueries deactivate
*/
protected _getDisplayStyle(source?: HTMLElement): string {
let element: HTMLElement = source || this._elementRef.nativeElement;
let element: HTMLElement = source || this.nativeElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of doing element = source || this.nativeElement, you can change the method signature to be protected _getDisplayStyle(source: = this.nativeElement): string.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know you could initialize with a dynamic property:

protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string {

so cool.

Copy link
Contributor Author

@ThomasBurleson ThomasBurleson Aug 29, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@crisbeto - note sure if you default value solves all the scenarios. Your solution essential does this:

if (source === void 0) { source = this.nativeElement; }
return lookupStyle(source, 'display');

screen shot 2017-08-29 at 2 34 32 pm

My solution will account for calls like _getDisplayStyle(null) where your solution will fail with that.

BaseFxDirective.prototype._getDisplayStyle = function (source) {
    if (source === void 0) { source = this.nativeElement; }
    return lookupStyle(source || this.nativeElement, 'display');
};

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, didn't know that scenario had to be handled.

@@ -161,7 +165,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
protected _applyStyleToElement(style: StyleDefinition,
value?: string | number,
nativeElement?: any) {
let element = nativeElement || this._elementRef.nativeElement;
let element = nativeElement || this.nativeElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment above regarding why let element = nativeElement || this.nativeElement is better than a default parameter value.

return {
pass: allPassed,
get message() {
const expectedValueStr = (typeof styles === 'string') ? styles : JSON.stringify(styles);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To make the output of this a little more readable, you can pass in the indentation level to JSON.stringify: JSON.stringify(styles, null, 2).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed.

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@crisbeto crisbeto added pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for the caretaker to presubmit and merge labels Aug 29, 2017
@ThomasBurleson ThomasBurleson force-pushed the thomas/issue-388 branch 4 times, most recently from 6c2b448 to 7b64345 Compare August 29, 2017 20:01
@ThomasBurleson
Copy link
Contributor Author

@crisbeto - I just added a unit tests for XS startup activation announcements.

MatchMedia was not properly announcing XS activations for applications with startup viewports < 600px.
Improve the specificity of the 'xs' media query enables proper MatchMedia notifications at startup.

Fixes #388.
@tinayuangao tinayuangao merged commit 66f3717 into master Sep 7, 2017
@ThomasBurleson ThomasBurleson deleted the thomas/issue-388 branch September 13, 2017 22:12
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for the caretaker to presubmit and merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

subscribing to ObservableMedia doesnt start with value on load of XS mq
4 participants