Skip to content

Instantly share code, notes, and snippets.

@matthewharwood
Last active November 21, 2017 23:28
Show Gist options
  • Save matthewharwood/23ea18c8509b8056813d3c3e7df0d1b2 to your computer and use it in GitHub Desktop.
Save matthewharwood/23ea18c8509b8056813d3c3e7df0d1b2 to your computer and use it in GitHub Desktop.
Proposal for scheduling/batch hooks in Angular2
/*
* 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