Add tests for sticky-header #6074
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# This is the 1st commit message: # This is a combination of 11 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent # This is the commit message angular#2: fix # This is the commit message angular#3: delete sticky-header demo part from this branch # This is the commit message angular#4: revert firebase file # This is the commit message angular#5: change code according to comments in PR # This is the commit message angular#6: revert firbaserc # This is the commit message angular#7: revert demo-app.ts # This is the commit message angular#8: revert routes.ts # This is the commit message angular#9: revert demo-app-module.ts # This is the commit message angular#10: change # This is the commit message angular#11: fix the problem of : 'this.stickyParent' might be 'null' # This is the commit message angular#2: change doc # This is the commit message angular#3: Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' # This is the commit message angular#4: Added prefix 'mat-' for CSS class # This is the commit message angular#5: Delete 'public' before variables # This is the commit message angular#6: Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. # This is the commit message angular#7: IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' # This is the commit message angular#8: Added docs for all variables # This is the commit message angular#9: extract 'generate CSS style'
# This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts # This is the commit message angular#2: imported PlatformModule # This is the commit message angular#3: Add blank lines between these top-level symbol # This is the commit message angular#4: make '_isStickyPositionSupported' private # This is the commit message angular#5: Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any.
# This is the 1st commit message: # This is a combination of 10 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' # This is the commit message angular#2: rename # This is the commit message angular#3: optimize discription for '_stickyRegionBottomThreshold' # This is the commit message angular#4: private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; # This is the commit message angular#5: Deleted 'generateCssStyle()' and 'getCssNumber()' function # This is the commit message angular#6: Deleted 'getCssValue()' function # This is the commit message angular#7: fix CSSStyleDeclaration # This is the commit message angular#8: change sticky width to 'this.upperScrollableContainer.clientWidth' # This is the commit message angular#9: fix # This is the commit message angular#10: nit # This is the commit message angular#2: Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. # This is the commit message angular#3: nit # This is the commit message angular#4: nit # This is the commit message angular#5: update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' # This is the commit message angular#6: changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' # This is the commit message angular#7: fix tslint error # This is the commit message angular#8: for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' # This is the commit message angular#9: Deleted variable 'elemHeight' # This is the commit message angular#10: Chaned to 'if (!this.stickyParent)' # This is the commit message angular#11: Simplified Docs for 'sticker()'. # This is the commit message angular#12: set 'defineRestriction()' function to private # This is the commit message angular#13: use 'RxChain' # This is the commit message angular#14: deleted unused 'tableModule' in modules.ts # This is the commit message angular#15: rename to '_isPositionStickySupported' # This is the commit message angular#16: Use // for comments, /* */ for docs
add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' rename optimize discription for '_stickyRegionBottomThreshold' private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; Deleted 'generateCssStyle()' and 'getCssNumber()' function Deleted 'getCssValue()' function fix CSSStyleDeclaration change sticky width to 'this.upperScrollableContainer.clientWidth' fix nit Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. nit nit update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' fix tslint error for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' Deleted variable 'elemHeight' Chaned to 'if (!this.stickyParent)' Simplified Docs for 'sticker()'. set 'defineRestriction()' function to private use 'RxChain' deleted unused 'tableModule' in modules.ts rename to '_isPositionStickySupported' Use // for comments, /* */ for docs @angular/cdk rename : values -> headerStyles Move closing brace to the next line optimized: [this._onScrollSubscription, this._onScrollSubscription, this._onResizeSubscription] .forEach(s => s && s.unsubscribe()); You should be able to do just '0' instead of '0px' Format like TODO(sllethe): ... private _attachEventListeners? Add a description like "Add listeners for events that affect sticky positioning." optimize doc Rename 'defineRestrictions' to '_measureStickyRegionBounds' rename: private _resetElementStyles let stuckRight: any = this.upperScrollableContainer.getBoundingClientRect().right; chaned 'any' to 'number' nit change doc '/** * Unsticks the header so that it goes back to scrolling normally. * * This should be called when the element reaches the bottom of its cdkStickyRegion so that it * smoothly scrolls out of view as the next sticky-header moves in. */' _unstuckElement -> _unstickElement rename 'sticker()' to '_applyStickyPositionStyles()' rename 'defineRestrictionsAndStick()' to '_updateStickyPositioning()'
googlebot
added
the
cla: yes
tinayuangao
reviewed
Jul 26, 2017
| /** Create a factory for sticky-positioning check to make code more testable */ | ||
| export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER = { | ||
| provide: STICKY_HEADER_SUPPORT_STRATEGY, | ||
| deps: [], |
There was a problem hiding this comment.
Can remove deps if it's empty
| export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER = { | ||
| provide: STICKY_HEADER_SUPPORT_STRATEGY, | ||
| deps: [], | ||
| useFactory: STICKY_HEADER_SUPPORT_STRATEGY_FACTORY |
There was a problem hiding this comment.
You can use useFactory: isPositionStickySupported, and move this part to index.ts:
providers: [{provide: STICKY_HEADER_SUPPORT_STRATEGY, useFactory: isPositionStickySupported}]
There was a problem hiding this comment.
👍
Found that it doesn't work in index.ts. So put it back to sticky-header.ts. Changed it to :
export const STICKY_HEADER_SUPPORT_STRATEGY = new InjectionToken('sticky-header-support-strategy');
/** Create a factory for sticky-positioning check to make code more testable */
export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER: Provider = {
provide: STICKY_HEADER_SUPPORT_STRATEGY,
useFactory: isPositionStickySupported
};`
```
| @@ -97,7 +111,8 @@ export class CdkStickyHeader implements OnDestroy, AfterViewInit { | |||
| constructor(element: ElementRef, | |||
| scrollable: Scrollable, | |||
| @Optional() public parentRegion: CdkStickyRegion, | |||
| platform: Platform) { | |||
| platform: Platform, | |||
| @Inject(STICKY_HEADER_SUPPORT_STRATEGY) public _stickyPositionSupportCheck) { | |||
There was a problem hiding this comment.
Can use _isPositionStickySupported here as variable name and then you can remove line 155
There was a problem hiding this comment.
👍 Changed it to _isPositionStickySupported and removed line155
| imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], | ||
| declarations: [StickyHeaderTest], | ||
| providers: [ | ||
| {provide: STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER, useFactory: mockStickyHeaderCheckFail()}, |
There was a problem hiding this comment.
You can use
providers: [ {provide: STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER, useValue: false}]
and remove mockStickyHeaderCheckFail
| }); | ||
|
|
||
| it('should be able to find stickyParent when sticky positioning is not supported', () => { | ||
| fixture.detectChanges(); |
There was a problem hiding this comment.
nit: can move fixture.detectChanges(); after line 38 so you don't have to call it in every test
There was a problem hiding this comment.
👍 Deleted fixture.detectChanges() after line 38
| imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], | ||
| declarations: [StickyHeaderTest], | ||
| providers: [ | ||
| {provide: STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER, |
There was a problem hiding this comment.
same here, use useValue: true
There was a problem hiding this comment.
👍 Changed it to useValue: true
sllethe
commented
Jul 27, 2017
| /** Create a factory for sticky-positioning check to make code more testable */ | ||
| export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER = { | ||
| provide: STICKY_HEADER_SUPPORT_STRATEGY, | ||
| deps: [], |
| export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER = { | ||
| provide: STICKY_HEADER_SUPPORT_STRATEGY, | ||
| deps: [], | ||
| useFactory: STICKY_HEADER_SUPPORT_STRATEGY_FACTORY |
There was a problem hiding this comment.
👍
Found that it doesn't work in index.ts. So put it back to sticky-header.ts. Changed it to :
export const STICKY_HEADER_SUPPORT_STRATEGY = new InjectionToken('sticky-header-support-strategy');
/** Create a factory for sticky-positioning check to make code more testable */
export const STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER: Provider = {
provide: STICKY_HEADER_SUPPORT_STRATEGY,
useFactory: isPositionStickySupported
};`
```
| @@ -97,7 +111,8 @@ export class CdkStickyHeader implements OnDestroy, AfterViewInit { | |||
| constructor(element: ElementRef, | |||
| scrollable: Scrollable, | |||
| @Optional() public parentRegion: CdkStickyRegion, | |||
| platform: Platform) { | |||
| platform: Platform, | |||
| @Inject(STICKY_HEADER_SUPPORT_STRATEGY) public _stickyPositionSupportCheck) { | |||
There was a problem hiding this comment.
👍 Changed it to _isPositionStickySupported and removed line155
| imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], | ||
| declarations: [StickyHeaderTest], | ||
| providers: [ | ||
| {provide: STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER, |
There was a problem hiding this comment.
👍 Changed it to useValue: true
| }); | ||
|
|
||
| it('should be able to find stickyParent when sticky positioning is not supported', () => { | ||
| fixture.detectChanges(); |
There was a problem hiding this comment.
👍 Deleted fixture.detectChanges() after line 38
| imports: [ OverlayModule, PlatformModule, StickyHeaderModule ], | ||
| declarations: [StickyHeaderTest], | ||
| providers: [ | ||
| {provide: STICKY_HEADER_SUPPORT_STRATEGY_PROVIDER, useFactory: mockStickyHeaderCheckFail()}, |
tinayuangao
reviewed
Jul 27, 2017
| }); | ||
|
|
||
| it('should be able to find stickyParent when sticky positioning is not supported', () => { | ||
| expect(stickyElement.nativeElement.stickyParent).not.toBe(null); |
There was a problem hiding this comment.
Is it stickyHeaderDir.stickyParent?
There was a problem hiding this comment.
Yes 👍
Changed to stickyHeaderDir.stickyParent
| scrollableElement = fixture.debugElement.query(By.directive(Scrollable)); | ||
| }); | ||
|
|
||
| it('should be able to find stickyParent when sticky positioning is not supported', () => { |
There was a problem hiding this comment.
You can remove when sticky positioning is not supported since it's in describe
| }); | ||
|
|
||
| it('should be able to find scrollableContainer when sticky positioning is not supported', () => { | ||
| expect(stickyElement.nativeElement.upperScrollableContainer).not.toBe(null); |
There was a problem hiding this comment.
👍 Changed to stickyHeaderDir.upperScrollableContainer
| useFactory: isPositionStickySupported | ||
| }; | ||
|
|
||
| // /** Create a factory for sticky-positioning check to make code more testable */ |
|
Comments Addressed 👍 |
jelbourn
reviewed
Jul 29, 2017
| testComponent = fixture.debugElement.componentInstance; | ||
| stickyElement = fixture.debugElement.query(By.directive(CdkStickyHeader)); | ||
| stickyParentElement = fixture.debugElement.query(By.directive(CdkStickyRegion)); | ||
| stickyHeaderDir = stickyElement.injector.get<CdkStickyHeader>(CdkStickyHeader); |
There was a problem hiding this comment.
Just stickyHeader is a good name. Dir makes me think it is short for "direction"
There was a problem hiding this comment.
👍 Renamed stickyHeaderDir to stickyHeader
| -moz-appearance: none; | ||
| height: 300px; | ||
| overflow: auto;"> | ||
| <p>test test test</p> |
There was a problem hiding this comment.
Rather than hard-coding a bunch of divs, you could use ngFor to expand the content
There was a problem hiding this comment.
👍 Changed to use 'ngFor' to expand content instead of typing tons of '<p></p>'
|
|
||
| @Component({ | ||
| template: ` | ||
| <div cdk-scrollable style="text-align: center; |
There was a problem hiding this comment.
Add a comment that explains what these inline styles are for? Any reason you can't set them via the styles configuration for the component?
There was a problem hiding this comment.
👍 Added comments on why we need to apply these styles. And put set styles via the styles configuration for the component.
| @@ -46,6 +46,14 @@ const STICK_END_CLASS = 'cdk-sticky-header-end'; | |||
| */ | |||
| const DEBOUNCE_TIME: number = 5; | |||
|
|
|||
| export const STICKY_HEADER_SUPPORT_STRATEGY = new InjectionToken('sticky-header-support-strategy'); | |||
|
|
|||
| /** Create a factory for sticky-positioning check to make code more testable */ | |||
There was a problem hiding this comment.
Should probably mark this as @docs-private
There was a problem hiding this comment.
👍 Added /** @docs-private */
…son you can't set them via the styles configuration for the component?
sllethe
commented
Jul 31, 2017
| testComponent = fixture.debugElement.componentInstance; | ||
| stickyElement = fixture.debugElement.query(By.directive(CdkStickyHeader)); | ||
| stickyParentElement = fixture.debugElement.query(By.directive(CdkStickyRegion)); | ||
| stickyHeaderDir = stickyElement.injector.get<CdkStickyHeader>(CdkStickyHeader); |
There was a problem hiding this comment.
👍 Renamed stickyHeaderDir to stickyHeader
| -moz-appearance: none; | ||
| height: 300px; | ||
| overflow: auto;"> | ||
| <p>test test test</p> |
There was a problem hiding this comment.
👍 Changed to use 'ngFor' to expand content instead of typing tons of '<p></p>'
|
|
||
| @Component({ | ||
| template: ` | ||
| <div cdk-scrollable style="text-align: center; |
There was a problem hiding this comment.
👍 Added comments on why we need to apply these styles. And put set styles via the styles configuration for the component.
| @@ -46,6 +46,14 @@ const STICK_END_CLASS = 'cdk-sticky-header-end'; | |||
| */ | |||
| const DEBOUNCE_TIME: number = 5; | |||
|
|
|||
| export const STICKY_HEADER_SUPPORT_STRATEGY = new InjectionToken('sticky-header-support-strategy'); | |||
|
|
|||
| /** Create a factory for sticky-positioning check to make code more testable */ | |||
There was a problem hiding this comment.
👍 Added /** @docs-private */
sllethe
commented
Jul 31, 2017
| let scrollableContainerTop = stickyHeader.upperScrollableContainer | ||
| .getBoundingClientRect().top; | ||
| expect(stickyHeader.element.getBoundingClientRect().top).not.toBe(scrollableContainerTop); | ||
| tick(0); |
There was a problem hiding this comment.
👍 Added comments to explaining why tick(100) is needed. Changed 'tick(0)' to 'tick()'
// Use tick(100) to tick forward to let stickyHeader's _applyStickyPositionStyles()
// function finished
| it('should find sticky positioning is applied', () => { | ||
| let position = window.getComputedStyle(stickyHeader.element).position; | ||
| expect(position).not.toBe(null); | ||
| if (position != null) { |
There was a problem hiding this comment.
Because in expect(/sticky/i.test(position)).toBe(true);, the test() function's parameter can only be string. And the type of position is string | null, which will cause an error. S we need to add the '!= null' first.
jelbourn
reviewed
Jul 31, 2017
| // Scroll the scrollableContainer up to stick | ||
| fixture.componentInstance.scrollDown(); | ||
| // Use tick(100) to tick forward to let stickyHeader's _applyStickyPositionStyles() | ||
| // function finished |
There was a problem hiding this comment.
Nothing in _applyStickyPositionStyles uses a setTimeout, so it's not clear why you need the 100 instead of just saying tick()
There was a problem hiding this comment.
Because after we calling fixture.componentInstance.scrollDown();, the scrollDown() function dispatches a fake scroll event, which causes the _applyStickyPositionStyles being called. And When it finds that the header needs to be stuck, it will reassign value to the header , so the header will be repainted. And we need to wait till animation has finished.
Changed the comments to //wait till animation has finished'
| import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; | ||
| import {Component, DebugElement, ViewChild} from '@angular/core'; | ||
| import {StickyHeaderModule, CdkStickyRegion, CdkStickyHeader, | ||
| STICKY_HEADER_SUPPORT_STRATEGY} from './index'; |
There was a problem hiding this comment.
If you run the "optimize imports" command in webstorm it will format these imports for you.
| it('should find sticky positioning is applied', () => { | ||
| let position = window.getComputedStyle(stickyHeader.element).position; | ||
| expect(position).not.toBe(null); | ||
| if (position != null) { |
There was a problem hiding this comment.
You can tell typescript that you know something won't be null by adding an ! to the end of an expression:
expect(/sticky/i.test(position!)).toBe(true);Then you don't need the if block
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| height: 300px; | ||
| overflow: auto; |
There was a problem hiding this comment.
-2 indent in the css (the properties are indented as +4 right now, they should be +2)
There was a problem hiding this comment.
👍 Changed the indent to +2
sllethe
commented
Jul 31, 2017
| import {async, ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing'; | ||
| import {Component, DebugElement, ViewChild} from '@angular/core'; | ||
| import {StickyHeaderModule, CdkStickyRegion, CdkStickyHeader, | ||
| STICKY_HEADER_SUPPORT_STRATEGY} from './index'; |
| // Scroll the scrollableContainer up to stick | ||
| fixture.componentInstance.scrollDown(); | ||
| // Use tick(100) to tick forward to let stickyHeader's _applyStickyPositionStyles() | ||
| // function finished |
There was a problem hiding this comment.
Because after we calling fixture.componentInstance.scrollDown();, the scrollDown() function dispatches a fake scroll event, which causes the _applyStickyPositionStyles being called. And When it finds that the header needs to be stuck, it will reassign value to the header , so the header will be repainted. And we need to wait till animation has finished.
Changed the comments to //wait till animation has finished'
| it('should find sticky positioning is applied', () => { | ||
| let position = window.getComputedStyle(stickyHeader.element).position; | ||
| expect(position).not.toBe(null); | ||
| if (position != null) { |
There was a problem hiding this comment.
👍 Changed to expect(/sticky/i.test(position!)).toBe(true);
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| height: 300px; | ||
| overflow: auto; |
There was a problem hiding this comment.
👍 Changed the indent to +2
tinayuangao
reviewed
Aug 1, 2017
| }); | ||
|
|
||
| it('should be able to find stickyParent', () => { | ||
| expect(stickyHeader.stickyParent).not.toBe(null); |
There was a problem hiding this comment.
Add a test case when there's no user-specified cdkStickyRegion?
There was a problem hiding this comment.
👍 Added new test for ' no user-specified cdkStickyRegion'
|
Comments Addressed 👍 |
jelbourn
approved these changes
Aug 2, 2017
|
|
||
| it('should be able to find stickyParent', () => { | ||
| let p = stickyHeader.stickyParent; | ||
| expect(p).not.toBe(null); |
There was a problem hiding this comment.
👍 Changed 'toBe(null)' to 'toBeNull()';
|
Comments Addressed 👍 |
andrewseguin
added
pr: lgtm
action: merge
sllethe
added a commit
to sllethe/material2
that referenced
this pull request
Aug 10, 2017
* # This is a combination of 9 commits. # This is the 1st commit message: # This is a combination of 11 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent # This is the commit message angular#2: fix # This is the commit message angular#3: delete sticky-header demo part from this branch # This is the commit message angular#4: revert firebase file # This is the commit message angular#5: change code according to comments in PR # This is the commit message angular#6: revert firbaserc # This is the commit message angular#7: revert demo-app.ts # This is the commit message angular#8: revert routes.ts # This is the commit message angular#9: revert demo-app-module.ts # This is the commit message angular#10: change # This is the commit message angular#11: fix the problem of : 'this.stickyParent' might be 'null' # This is the commit message angular#2: change doc # This is the commit message angular#3: Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' # This is the commit message angular#4: Added prefix 'mat-' for CSS class # This is the commit message angular#5: Delete 'public' before variables # This is the commit message angular#6: Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. # This is the commit message angular#7: IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' # This is the commit message angular#8: Added docs for all variables # This is the commit message angular#9: extract 'generate CSS style' * # This is a combination of 5 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts # This is the commit message angular#2: imported PlatformModule # This is the commit message angular#3: Add blank lines between these top-level symbol # This is the commit message angular#4: make '_isStickyPositionSupported' private # This is the commit message angular#5: Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. * # This is a combination of 16 commits. # This is the 1st commit message: # This is a combination of 10 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' # This is the commit message angular#2: rename # This is the commit message angular#3: optimize discription for '_stickyRegionBottomThreshold' # This is the commit message angular#4: private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; # This is the commit message angular#5: Deleted 'generateCssStyle()' and 'getCssNumber()' function # This is the commit message angular#6: Deleted 'getCssValue()' function # This is the commit message angular#7: fix CSSStyleDeclaration # This is the commit message angular#8: change sticky width to 'this.upperScrollableContainer.clientWidth' # This is the commit message angular#9: fix # This is the commit message angular#10: nit # This is the commit message angular#2: Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. # This is the commit message angular#3: nit # This is the commit message angular#4: nit # This is the commit message angular#5: update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' # This is the commit message angular#6: changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' # This is the commit message angular#7: fix tslint error # This is the commit message angular#8: for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' # This is the commit message angular#9: Deleted variable 'elemHeight' # This is the commit message angular#10: Chaned to 'if (!this.stickyParent)' # This is the commit message angular#11: Simplified Docs for 'sticker()'. # This is the commit message angular#12: set 'defineRestriction()' function to private # This is the commit message angular#13: use 'RxChain' # This is the commit message angular#14: deleted unused 'tableModule' in modules.ts # This is the commit message angular#15: rename to '_isPositionStickySupported' # This is the commit message angular#16: Use // for comments, /* */ for docs * add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' rename optimize discription for '_stickyRegionBottomThreshold' private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; Deleted 'generateCssStyle()' and 'getCssNumber()' function Deleted 'getCssValue()' function fix CSSStyleDeclaration change sticky width to 'this.upperScrollableContainer.clientWidth' fix nit Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. nit nit update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' fix tslint error for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' Deleted variable 'elemHeight' Chaned to 'if (!this.stickyParent)' Simplified Docs for 'sticker()'. set 'defineRestriction()' function to private use 'RxChain' deleted unused 'tableModule' in modules.ts rename to '_isPositionStickySupported' Use // for comments, /* */ for docs @angular/cdk rename : values -> headerStyles Move closing brace to the next line optimized: [this._onScrollSubscription, this._onScrollSubscription, this._onResizeSubscription] .forEach(s => s && s.unsubscribe()); You should be able to do just '0' instead of '0px' Format like TODO(sllethe): ... private _attachEventListeners? Add a description like "Add listeners for events that affect sticky positioning." optimize doc Rename 'defineRestrictions' to '_measureStickyRegionBounds' rename: private _resetElementStyles let stuckRight: any = this.upperScrollableContainer.getBoundingClientRect().right; chaned 'any' to 'number' nit change doc '/** * Unsticks the header so that it goes back to scrolling normally. * * This should be called when the element reaches the bottom of its cdkStickyRegion so that it * smoothly scrolls out of view as the next sticky-header moves in. */' _unstuckElement -> _unstickElement rename 'sticker()' to '_applyStickyPositionStyles()' rename 'defineRestrictionsAndStick()' to '_updateStickyPositioning()' * added tests for sticky-header * deleted * removed 'deps' in providers * put provider in index * optimize provider * Removed unused 'fixture.detectChanges()' in test * fix * You can remove when sticky positioning is not supported since it's in describe * stickyHeaderDir.stickyParent * remove commented code * rename stickyHeaderDir to stickyHeader * Changed to use 'ngFor' to expand content instead of typing tons of '<p></p>' * Add a comment that explains what these inline styles are for? Any reason you can't set them via the styles configuration for the component? * Added explainations on styles * Added /** @docs-private */ * Added comments to explaining why tick(100) is needed. Changed 'tick(0)' to 'tick()' * nit * explained why need 'tick(100)' * expect(/sticky/i.test(position!)).toBe(true); * change CSS indent to +2 * nit * Added test for sticky-header without StickyRegion * change 'toBe(null)' to 'toBeNull()' * Cool ! tick(debounce time)
sllethe
added a commit
to sllethe/material2
that referenced
this pull request
Aug 10, 2017
* # This is a combination of 9 commits. # This is the 1st commit message: # This is a combination of 11 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent # This is the commit message angular#2: fix # This is the commit message angular#3: delete sticky-header demo part from this branch # This is the commit message angular#4: revert firebase file # This is the commit message angular#5: change code according to comments in PR # This is the commit message angular#6: revert firbaserc # This is the commit message angular#7: revert demo-app.ts # This is the commit message angular#8: revert routes.ts # This is the commit message angular#9: revert demo-app-module.ts # This is the commit message angular#10: change # This is the commit message angular#11: fix the problem of : 'this.stickyParent' might be 'null' # This is the commit message angular#2: change doc # This is the commit message angular#3: Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' # This is the commit message angular#4: Added prefix 'mat-' for CSS class # This is the commit message angular#5: Delete 'public' before variables # This is the commit message angular#6: Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. # This is the commit message angular#7: IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' # This is the commit message angular#8: Added docs for all variables # This is the commit message angular#9: extract 'generate CSS style' * # This is a combination of 5 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts # This is the commit message angular#2: imported PlatformModule # This is the commit message angular#3: Add blank lines between these top-level symbol # This is the commit message angular#4: make '_isStickyPositionSupported' private # This is the commit message angular#5: Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. * # This is a combination of 16 commits. # This is the 1st commit message: # This is a combination of 10 commits. # This is the 1st commit message: add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' # This is the commit message angular#2: rename # This is the commit message angular#3: optimize discription for '_stickyRegionBottomThreshold' # This is the commit message angular#4: private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; # This is the commit message angular#5: Deleted 'generateCssStyle()' and 'getCssNumber()' function # This is the commit message angular#6: Deleted 'getCssValue()' function # This is the commit message angular#7: fix CSSStyleDeclaration # This is the commit message angular#8: change sticky width to 'this.upperScrollableContainer.clientWidth' # This is the commit message angular#9: fix # This is the commit message angular#10: nit # This is the commit message angular#2: Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. # This is the commit message angular#3: nit # This is the commit message angular#4: nit # This is the commit message angular#5: update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' # This is the commit message angular#6: changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' # This is the commit message angular#7: fix tslint error # This is the commit message angular#8: for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' # This is the commit message angular#9: Deleted variable 'elemHeight' # This is the commit message angular#10: Chaned to 'if (!this.stickyParent)' # This is the commit message angular#11: Simplified Docs for 'sticker()'. # This is the commit message angular#12: set 'defineRestriction()' function to private # This is the commit message angular#13: use 'RxChain' # This is the commit message angular#14: deleted unused 'tableModule' in modules.ts # This is the commit message angular#15: rename to '_isPositionStickySupported' # This is the commit message angular#16: Use // for comments, /* */ for docs * add lib files for sticky-header add chose parent add support to 'optional 'cdkStickyRegion' input ' add app-demo for sticky-header fix bugs and deleted unused tag id in HTML files modify fix some code according to PR review comments change some format to pass TSlint check add '_' before private elements delete @Injectable for StickyHeaderDirective. Because we do not need @Injectable refine code encapsulate 'set style for element' change @input() Delete 'Observable.fromEvent(this.upperScrollableContainer, 'scroll')' add const STICK_START_CLASS and STICK_END_CLASS Add doc for [cdkStickyRegion] and 'unstuckElement()'. Delete 'detach()' function, add its content into 'ngOnDestroy()'. change 'MdStickyHeaderModule' to 'CdkStickyHeaderModule'; encapsulate reset css style operation for sticky header. delete unnecessary gloable variables delete global variable '_width' Add doc for 'sticker()' function. explained how it works. add more doc for 'sticker()', explaining 'isStuck' flag 2 space for indent fix delete sticky-header demo part from this branch revert firebase file change code according to comments in PR revert firbaserc revert demo-app.ts revert routes.ts revert demo-app-module.ts change fix the problem of : 'this.stickyParent' might be 'null' change doc Change the constructor of 'cdkStickyRegion' to 'constructor(public readonly _elementRef: ElementRef) { }' Added prefix 'mat-' for CSS class Delete 'public' before variables Object.assign isn't supported in IE11; use extendObject from src/lib/core/util. IE11 will have trouble with `translate3d(0, 0, 0);', change to `translate3d(0px, 0px, 0px);' Added docs for all variables extract 'generate CSS style' created a generateStyleCSS() function, let it be responsible for generating all those CSS styles. reformat add debounce to solve 'getBoundingClientRect() cause slow down' problem. add position:sticky and check whether browser support it. If not , use the naive implementation removed unused import Removed unused 'scrollableRegion' and 'parentRegion' removed commented lines default public Add comments about why setting style top and position for iPhone and not IE. And extract detectBrowser() as a new function format consider all circumstances of browser. use "===" instead of '==' make 'navigator.userAgent.toLocaleLowerCase()' a local variable optimize Added comments on const 'STICK_START_CLASS' and 'STICK_END_CLASS'. change their content to cdk-sticky-header-start and cdk-sticky-header-end Added comments for STICK_START_CLASS and STICK_END_CLASS. Changed the format of one-line JsDoc unsubscribe sbscriptions onDestory Use what modernizr does on compatibility instead of get the browser version directly. add 'padding' and 'stickyRegionHeight' variables to avoid calling 'getComputedStyle()' too many times (which is expensive). move docs above @directive removed the underscore in'_element: ElementRef', expand 'reg' to 'region' use 'if (this.isIE)' instead of 'if(this.isIE === true)' added more newlines between params in 'generateCssStyle()' function to make it easier to understand. Added reference link to Modernizer in docs of getSupportList() Deleted "_supportList" variable renamed 'isIE' to 'isStickyPositionSupported', and removed extra space before Observable Set debounce time as a const variable Added docs for 'const DEBOUNCE_TIME: number = 5;' Changed ' if(this.stickyParent == null)' to ' if(!this.stickyParent)' Removed the @param and @returns and make sure the types are correct in the function signature in 'generateCssStyle(...)' function Added docs for `isStickyPositionSupported` variable changed '+=' to '=' of 'stickyText' in getSupportList() function nit added " " between 'if' and '(' nit Added comments deleted unused import change comments optimize comments deleted unnecessary global variables(padding and stickyRegionHeight) Added check whether we are on browser Array<string> to string[] test? try to reopen the old PR fix after rebase revert list.ts test test 222 revert demo revert list.ts second time Move code to 'src/cdk' revert 'move code to 'src/cdk'' , it should be done in a new PR revert avoid calling 'getComputedStyle()' too many times. rename as sticky-header.ts imported PlatformModule Add blank lines between these top-level symbol make '_isStickyPositionSupported' private Changed the originalCSS to private and use '{} as CSSStyleDeclaration' instead of ''any. Rename '_containerStart' to '_stickyRegionTop' rename optimize discription for '_stickyRegionBottomThreshold' private _originalStyles = { position: '', top: '', right: '', left: '', bottom: '', width: '', zIndex: ''}; Deleted 'generateCssStyle()' and 'getCssNumber()' function Deleted 'getCssValue()' function fix CSSStyleDeclaration change sticky width to 'this.upperScrollableContainer.clientWidth' fix nit Added the 'isPositionStickySupported() ' function to src/cdk/platform/features.ts. Consume that function in this component and just always use both the webkit and unprefixed styles. nit nit update doc 'Debounce time in milliseconds for events that affect the sticky positioning (e.g. scroll, resize, touch move). Set as 5 milliseconds which is the highest delay that doesn't drastically affect the positioning adversely.' changed the doc to '/** z-index to be applied to the sticky header (default is 10). */' fix tslint error for comment 'Can you evaluate each method to make sure their accessor privacy is right? E.g. see which functions need to be public, private, static, etc' Deleted variable 'elemHeight' Chaned to 'if (!this.stickyParent)' Simplified Docs for 'sticker()'. set 'defineRestriction()' function to private use 'RxChain' deleted unused 'tableModule' in modules.ts rename to '_isPositionStickySupported' Use // for comments, /* */ for docs @angular/cdk rename : values -> headerStyles Move closing brace to the next line optimized: [this._onScrollSubscription, this._onScrollSubscription, this._onResizeSubscription] .forEach(s => s && s.unsubscribe()); You should be able to do just '0' instead of '0px' Format like TODO(sllethe): ... private _attachEventListeners? Add a description like "Add listeners for events that affect sticky positioning." optimize doc Rename 'defineRestrictions' to '_measureStickyRegionBounds' rename: private _resetElementStyles let stuckRight: any = this.upperScrollableContainer.getBoundingClientRect().right; chaned 'any' to 'number' nit change doc '/** * Unsticks the header so that it goes back to scrolling normally. * * This should be called when the element reaches the bottom of its cdkStickyRegion so that it * smoothly scrolls out of view as the next sticky-header moves in. */' _unstuckElement -> _unstickElement rename 'sticker()' to '_applyStickyPositionStyles()' rename 'defineRestrictionsAndStick()' to '_updateStickyPositioning()' * added tests for sticky-header * deleted * removed 'deps' in providers * put provider in index * optimize provider * Removed unused 'fixture.detectChanges()' in test * fix * You can remove when sticky positioning is not supported since it's in describe * stickyHeaderDir.stickyParent * remove commented code * rename stickyHeaderDir to stickyHeader * Changed to use 'ngFor' to expand content instead of typing tons of '<p></p>' * Add a comment that explains what these inline styles are for? Any reason you can't set them via the styles configuration for the component? * Added explainations on styles * Added /** @docs-private */ * Added comments to explaining why tick(100) is needed. Changed 'tick(0)' to 'tick()' * nit * explained why need 'tick(100)' * expect(/sticky/i.test(position!)).toBe(true); * change CSS indent to +2 * nit * Added test for sticky-header without StickyRegion * change 'toBe(null)' to 'toBeNull()' * Cool ! tick(debounce time)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added tests for sticky-header. 👍
Please take another look.