Skip to content

Instantly share code, notes, and snippets.

@alvipeo

alvipeo/config.js

Last active March 27, 2016 23:15
Show Gist options
  • Save alvipeo/dadf3f7910ae4e325284 to your computer and use it in GitHub Desktop.
Save alvipeo/dadf3f7910ae4e325284 to your computer and use it in GitHub Desktop.
Download ZIP
Undating the view inside Observable.subscribe
Raw
config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: './src'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
filelist: './filelest.ts',
fileitem: './fileitem.ts',
processingService: './processingService',
typingText: './typingText.ts',
defaultExtension: 'ts'
}
}
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>playground</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
Raw
src\fileitem.ts
export class IlgFileItem {
private _progress: number = 0;
constructor (private _id: number) {}
get progress(): number {
return this._progress;
}
updateProgress(): boolean {
if (this._progress < 100) {
this._progress += 5;
return true;
}
return false;
}
}
Raw
src\filelist.ts
import {Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, OnChanges, SimpleChange, ViewChild} from "angular2/core";
import {Observable} from 'rxjs/Rx';
import {IlgFlyingText} from './typingText';
import {IlgFileItem} from './fileitem';
import {ProcessingService} from './processingService';
@Component({
selector: "ilg-filelist",
template: `<div>
<ul>
<li class="progr" *ngFor="#file of items" [style.width.%]="file.progress"><span>{{file.progress}}</span></li>
</ul>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush // COMMENT OUT THIS LINE TO MAKE EVERYTHING WORK
})
export class IlgFilelist {
@Input() numberOfItems: number;
filesArray$: Observable<Array<IlgFileItem>>;
private _items: Array<IlgFileItem>;
get items(): Array<IlgFileItem> {
return this._items;
}
constructor() {
}
run() {
this._processingService = new ProcessingService(this.numberOfItems);
this._processingService.process()
.subscribe((array: Array<IlgFileItem) => {
this._items = array;
console.log(this._items !== array);
},
null,
() => console.log("COMPLETE");
}
}
Raw
src\main.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
import {IlgFilelist} from "./filelist";
@Component({
selector: 'app',
template: `<div>
<hr/>
<p>If you start process just like this you won't see anything happening in the view (but will see it in the console). But if you comment out ChangeDetectionProperty.OnPush in 'filelist.ts' the component will be updating its view.</p>
<a (click)="$event.preventDefault(); list.run();" href="#">Start process</a>
<hr/>
<ilg-filelist #list [numberOfItems]="5"></ilg-filelist>
<hr/>
</div>`,
directives: [IlgFilelist]
})
export class App {
constructor() {}
}
bootstrap(App, []);
Raw
src\processingService.ts
import {Observable} from 'rxjs/Rx';
import {IlgFileItem} from './fileitem';
export class ProcessingService {
constructor(private _amount: number) {
}
process(): Observable<Array<IlgFileItem>> {
const arr = Array<IlgFileItem>();
for (let i=0; i<this._amount; i++) {
arr[i] = new IlgFileItem(i));
}
const ob$ =
Observable.interval(300)
.map(() => return arr)
.map(arr => {
do {
let rndIdx = this.getRandomIndex();
} while (!arr[rndIdx].updateProgress());
const newArr = new Array<IlgFileItem>(...arr);
newArr.forEach((element) => console.log(element));
return newArr;
})
.takeWhile(arr => !arr.every((item: IlgFileItem) => item.progress == 100));
return ob$;
}
private getRandomIndex(): number {
const min = 0;
const max = this._amount;
return Math.floor(Math.random() * (max - min)) + min;
}
}
Raw
src\typingText.ts
import {Input, Component, ChangeDetectionStrategy, ChangeDetectorRef, AfterViewInit, OnChanges, SimpleChange} from "angular2/core";
import {Observable} from 'rxjs/Rx';
@Component({
selector: "ilg-flying-text",
template: "{{ showError$ | async }}",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IlgFlyingText implements AfterViewInit, OnChanges {
@Input() text: string;
showError$: Observable<string>;
ngAfterViewInit() {
this.initObservable();
}
ngOnChanges(changes: { [propName: string]: SimpleChange }) {
this.initObservable();
}
private initObservable() {
if (!!this.text) {
console.log(this.text);
this.showError$ = this.createErrorObservable(this.text);
} else {
this.showError$ = Observable.of(null);
}
}
private createErrorObservable(errText: string): Observable<string> {
//console.log(err);
let o1$ = Observable.of(errText);
let o2$ = Observable.interval(25);
let o$ = o1$
.switch()
.zip(o2$)
.map(tuple => tuple[0])
.scan((acc, val) => acc += val[0]);
//.do(val => console.log(val));
return o$;
}
}
Raw
styles.css
/* todo: add styles */
.progr {
height: 2rem;
background-color: blue;
color: white;
text-align: center;
display: table;
}
.progr span {
display: table-cell;
vertical-align: middle;
padding: 0.3rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment