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.

Sign up for GitHub

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

feat(loading): support for async and boolean with [until] input. (closes #528) #583

Merged
merged 7 commits into from
May 15, 2017
Merged

feat(loading): support for async and boolean with [until] input. (closes #528) #583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
be7aa2d
feat(loading): support for async and boolean with [until] input
May 11, 2017
2a3d8a8
chore(loading): specify that name is optional in the `until` input usage
May 12, 2017
76fff9a
chore(loading): separate description into 2 properties so it fits bet…
May 12, 2017
5bb65ed
Merge branch 'develop' into feature/loading-until
emoralesb05 May 15, 2017
273b48a
Merge branch 'develop' into feature/loading-until
kyleledbetter May 15, 2017
7f82948
chore(docs): disable loading masks when using obs or timer
emoralesb05 May 15, 2017
c56687e
Merge branch 'develop' into feature/loading-until
kyleledbetter May 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 151 additions & 7 deletions src/app/components/components/loading/loading.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<md-card-content>
<h3 class="md-title">[tdLoading] directive with (*) syntax</h3>
<h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoadingType], overlay [tdLoadingStrategy], accent [tdLoadingColor]</h4>
<md-tab-group md-stretch-tabs>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
Expand Down Expand Up @@ -80,7 +80,7 @@ <h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoading
<md-card-content>
<h3 class="md-title">[tdLoading] directive with template syntax</h3>
<h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType], replace [tdLoadingStrategy], warn [tdLoadingColor]</h4>
<md-tab-group md-stretch-tabs>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<ng-template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
Expand All @@ -98,7 +98,7 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
</div>
</ng-template>
<div layout="row">
<button md-button color="primary" (click)="toggleReplaceTemplateSyntax()" class="text-upper">Toggle Loader</button>
<button md-button color="primary" [disabled]="replaceTemplateSyntaxDisabled" (click)="toggleReplaceTemplateSyntax()" class="text-upper">Toggle Loader</button>
</div>
</md-tab>
<md-tab>
Expand Down Expand Up @@ -160,11 +160,138 @@ <h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType],
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">[tdLoading] until star syntax with variable reference and observables</h3>
<h4 class="md-subhead">with accent [tdLoadingColor]</h4>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div *tdLoading="let items until listObservable | async; color: 'accent'">
<md-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="items">
<md-list-item>
<md-slide-toggle md-line [checked]="item.value">
{{item.label}}
</md-slide-toggle>
</md-list-item>
<md-divider *ngIf="!last"></md-divider>
</ng-template>
</md-list>
</div>
<div layout="row">
<button md-button color="primary" [disabled]="listObservableDisabled" (click)="createObservableList()" class="text-upper">Create observable</button>
</div>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<div *tdLoading="let items until listObservable | async; type: circle; color: accent">
<md-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="items">
<md-list-item>
<md-slide-toggle md-line [checked]="item.value">
{ {item.label} }
</md-slide-toggle>
</md-list-item>
<md-divider *ngIf="!last"></md-divider>
</ng-template>
</md-list>
</div>
<div layout="row">
<button md-button color="primary" (click)="createObservableList()" class="text-upper">Create observable</button>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
...
export class Demo {
listObservable: Observable<any[]>;

createObservableList(): void {
this.listObservable = new Observable<any[]>((subscriber: Subscriber<any[]>) => {
setTimeout(() => {
subscriber.next([{label: 'Light', value: true}, {label: 'Console', value: false}, {label: 'T.V.', value: true}]);
}, 3000);
});
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">[tdLoading] until template syntax with booleans</h3>
<h4 class="md-subhead">with overlay [tdLoadingStrategy]</h4>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
<div layout="column" flex>
<md-input-container flex>
<input mdInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
</md-input-container>
<md-input-container flex>
<textarea mdInput [(ngModel)]="untilOverlayDemo.description" placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</ng-template>
<div class="pad-sm">
<md-slide-toggle [(ngModel)]="loading">Loading Mask</md-slide-toggle>
</div>
</md-tab>
<md-tab>
<ng-template md-tab-label>Code</ng-template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<ng-template tdLoading [tdLoadingUntil]="!loading" tdLoadingStrategy="overlay">
<div layout="column" flex>
<md-input-container flex>
<input mdInput [(ngModel)]="untilOverlayDemo.name" placeholder="Name"/>
</md-input-container>
<md-input-container flex>
<textarea mdInput [(ngModel)]="untilOverlayDemo.description" placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</ng-template>
<div class="pad-sm">
<md-slide-toggle [(ngModel)]="loading">Loading Mask</md-slide-toggle>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
...
export class Demo {
loading: boolean = false;

untilOverlayDemo: any = {
name: '',
description: '',
};
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Preloaded [TdLoading] fullscreen mask</h3>
<h4 class="md-subhead">with indeterminate [mode], circular [type], primary [color] by default</h4>
<md-tab-group md-stretch-tabs>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div layout="row">
Expand Down Expand Up @@ -210,7 +337,7 @@ <h4 class="md-subhead">with indeterminate [mode], circular [type], primary [colo
<md-card-content>
<h3 class="md-title">Custom [TdLoading] fullscreen mask</h3>
<h4 class="md-subhead">with indeterminate [mode], linear [type], accent [color]</h4>
<md-tab-group md-stretch-tabs>
<md-tab-group md-stretch-tabs dynamicHeight>
<md-tab>
<ng-template md-tab-label>Demo</ng-template>
<div layout="row">
Expand Down Expand Up @@ -271,6 +398,7 @@ <h3>Properties:</h3>
<a md-list-item layout-align="row">
<h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
<p md-line> {{attr.description}} </p>
<p md-line *ngIf="attr.additionalDescription"> {{attr.additionalDescription}} </p>
</a>
<md-divider *ngIf="!last"></md-divider>
</ng-template>
Expand All @@ -283,7 +411,15 @@ <h3>Example(after setup):</h3>
...
</div>
]]>
</td-highlight>
</td-highlight>
<p>HTML (*) until async syntax:</p>
<td-highlight lang="html">
<![CDATA[
<div *tdLoading="let item until observable | async; type:'circular'; color:'primary'">
{ {item} }
</div>
]]>
</td-highlight>
<p>HTML <![CDATA[<ng-template>]]> syntax</p>
<td-highlight lang="html">
<![CDATA[
Expand All @@ -292,6 +428,14 @@ <h3>Example(after setup):</h3>
</ng-template>
]]>
</td-highlight>
<p>HTML <![CDATA[<ng-template>]]> until syntax</p>
<td-highlight lang="html">
<![CDATA[
<ng-template tdLoading [tdLoadingUntil]="boolean">
...
</ng-template>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
Expand Down Expand Up @@ -384,7 +528,7 @@ <h3>Example(after setup):</h3>
}

resolveLoading(): void {
this._loadingService.resolve('stringName');
this._loadingService.resolve('stringName'); // or this._loadingService.resolveAll('stringName');
}
}
]]>
Expand Down
44 changes: 42 additions & 2 deletions src/app/components/components/loading/loading.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { Component, ViewContainerRef, OnInit, HostBinding, ChangeDetectionStrategy } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

import { slideInDownAnimation } from '../../../app.animations';

import { TdLoadingService, ITdLoadingConfig, LoadingType, LoadingMode } from '../../../../platform/core';
Expand Down Expand Up @@ -39,18 +42,31 @@ export class LoadingDemoComponent implements OnInit {
Defaults to "primary"`,
name: 'tdLoadingColor?',
type: '"primary" | "accent" | "warn"',
}, {
description: `If its null, undefined or false it will be used to register requests to the mask.
Else if its any value that can be resolved as true, it will resolve the mask.`,
additionalDescription: `[name] is optional when using [until], but can still be used to register/resolve it manually.`,
name: 'tdLoadingUtil?',
type: 'any',
}];

loadingServiceMethods: Object[] = [{
description: `Registers a request for the loading mask referenced by the name parameter.
Can optionally pass registers argument to set a number of register calls.`,
Can optionally pass registers argument to set a number of register calls.
If no paramemeters are used, then default main mask will be used.`,
name: 'register',
type: 'function(name?: string, registers: number = 1)',
}, {
description: `Resolves a request for the loading mask referenced by the name parameter.
Can optionally pass resolves argument to set a number of resolve calls.`,
Can optionally pass resolves argument to set a number of resolve calls.
If no paramemeters are used, then default main mask will be used.`,
name: 'resolve',
type: 'function(name?: string, resolves: number = 1)',
}, {
description: `Resolves all requests for the loading mask referenced by the name parameter.
If no paramemeters are used, then default main mask will be used.`,
name: 'resolveAll',
type: 'function(name?: string)',
}, {
description: `Set value on a loading mask referenced by the name parameter.
Usage only available if its mode is 'determinate'.`,
Expand All @@ -63,6 +79,12 @@ export class LoadingDemoComponent implements OnInit {
type: 'function(options: ITdLoadingConfig)',
}];

loading: boolean = false;
listObservable: Observable<any[]>;

replaceTemplateSyntaxDisabled: boolean = false;
listObservableDisabled: boolean = false;

overlayStarSyntax: boolean = false;

overlayDemo: any = {
Expand All @@ -76,6 +98,11 @@ export class LoadingDemoComponent implements OnInit {
description: '',
};

untilOverlayDemo: any = {
name: '',
description: '',
};

constructor(private _loadingService: TdLoadingService) {
this._loadingService.create({
name: 'configFullscreenDemo',
Expand Down Expand Up @@ -114,6 +141,7 @@ export class LoadingDemoComponent implements OnInit {
}

toggleReplaceTemplateSyntax(): void {
this.replaceTemplateSyntaxDisabled = true;
this._loadingService.register('replaceTemplateSyntax');
let value: number = 0;
let interval: number = setInterval(() => {
Expand All @@ -125,10 +153,22 @@ export class LoadingDemoComponent implements OnInit {
}, 250);
setTimeout(() => {
this._loadingService.resolve('replaceTemplateSyntax');
this.replaceTemplateSyntaxDisabled = false;
}, 3000);
}

startDirectives(): void {
this._loadingService.register('overlayStarSyntax');
this.createObservableList();
}

createObservableList(): void {
this.listObservableDisabled = true;
this.listObservable = new Observable<any[]>((subscriber: Subscriber<any[]>) => {
setTimeout(() => {
subscriber.next([{label: 'Light', value: true}, {label: 'Console', value: false}, {label: 'T.V.', value: true}]);
this.listObservableDisabled = false;
}, 3000);
});
}
}
Loading