Last active
November 21, 2017 23:28
-
-
Save matthewharwood/23ea18c8509b8056813d3c3e7df0d1b2 to your computer and use it in GitHub Desktop.
Proposal for scheduling/batch hooks in Angular2
This file contains hidden or 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
/* | |
* FROM: | |
*/ | |
@Component({ | |
selector: 'some-other-component' | |
}) | |
export class SomeOtherComponent { | |
private _el: any; | |
constructor(private _elementRef: ElementRef, private _renderer: Renderer2){} | |
public ngOnInit() { | |
this._el = this._renderer.selectRootElement(this._elementRef); | |
this.renderLoop_(); | |
} | |
private renderLoop_() { | |
this.renderScrollBar_(); | |
fd.measure(() => this.renderLoop_()); | |
} | |
private renderScrollBar() { | |
fd.measure(() => { | |
const scroll = window.scrollY + 100; | |
fd.mutate(() => { | |
this._el.top = `${scroll}px`; | |
}); | |
}); | |
} | |
} | |
/* | |
* TO: | |
*/ | |
export class SomeOtherComponent { | |
private _el: any; | |
@Mutate() // maybe @HostBinding is naturally a Mutation? | |
@HostBinding('style.top') top = this._calcWindow(); | |
constructor(){} | |
public ngOnInit() { | |
this._renderScrollBar(); | |
} | |
@Measure() | |
private _calcWindow() { | |
return `${window.scrollTop + 100}px` ; | |
} | |
@Measure('loop') | |
private _renderScrollBar() { | |
this._setElTop(); | |
} | |
} | |
/* | |
* TO throttled by scroll: | |
*/ | |
export class SomeOtherComponent { | |
private _el: any; | |
@ViewChild(CdkScrollable) child: cdkScrollable; | |
@Mutate() // maybe @HostBinding is naturally a Mutation? | |
@HostBinding('style.top') top = this._calcWindow(); | |
constructor(){} | |
public ngOnInit() { | |
this._renderScrollBar(); | |
} | |
@Measure() | |
private _calcWindow(event) { | |
return `${event.target.scrollTop + 100}px` ; | |
} | |
/** | |
* Measure decorater could take 3 parameters: optional loop, throttleBy Observable, A return of the throttler | |
* @param {string} loop Will recusively loop the method decorated. | |
* @param {Observable<Event>=} cdkScrollable.elementScrolled() will will cancel and start the requestAnimationFrame Loop based on Obserable. | |
* @param {Array<Event>=} A return of the throttled method. | |
*/ | |
@Measure('loop', cdkScrollable.elementScrolled(), [$event]) | |
private _renderScrollBar() { | |
this._setElTop($event); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment