Skip to content

Commit

Permalink
feat(loading): support for async and boolean with [until] input. (closes
Browse files Browse the repository at this point in the history 
 #528) (#583)

* feat(loading): support for async and boolean with [until] input

introducing a new syntax to use the tdLoading directive which lets the users leverage the async angular pipe and assign a reference from the result to use within the context.

also leveraging this, we can use booleans to show and hide annonymous loading directives.

* chore(loading): specify that name is optional in the `until` input usage

* chore(loading): separate description into 2 properties so it fits better on screen

this will change later on when we move everything to the README.md

* chore(docs): disable loading masks when using obs or timer
  • Loading branch information
@emoralesb05 @kyleledbetter
emoralesb05 authored and kyleledbetter committed May 15, 2017
1 parent 141550f commit d57bf67
Show file tree
Hide file tree
Showing 7 changed files with 462 additions and 19 deletions.
158 changes: 151 additions & 7 deletions src/app/components/components/loading/loading.component.html
View file
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
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

0 comments on commit d57bf67

Please sign in to comment.