feature(loading): improvements and bug fixes (#38)

* added white background and shadow to loading circle

* added width to circle, to fix bug

* removed depricated methods, made loading comp creationg sync, added onDestroy and remove comp methods

* updated loading docs

* added max diameter and height for loading

* called loading and change detection from start, added more docs

* fixed unit tests

* removed white brackground (will be added later as optional)

config/karma-test-shim.js

@@ -38,14 +38,16 @@ System.import('system-config.js').then(function() {
     System.import('@angular/router'),
     System.import('@angular/http'),
     System.import('@angular/forms'),
-    System.import('@angular2-material/icon')
+    System.import('@angular/core'),
+    System.import('@angular2-material/icon'),
   ]).then(function (providers) {
     var testing = providers[0];
     var testingBrowser = providers[1];
     var testingRouter = providers[2];
     var testingHttp = providers[3];
     var testingForms = providers[4];
-    var testingIcon = providers[5];
+    var testingCore = providers[5];
+    var testingIcon = providers[6];
     testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
       testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
       );
@@ -59,6 +61,7 @@ System.import('system-config.js').then(function() {
         testingIcon.MdIconRegistry,
         { provide: testingRouter.Router, useValue: {} },
         { provide: testingRouter.ActivatedRoute, useValue: {} },
+        testingCore.ChangeDetectorRef,
       ]);
     });
   });

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { ROUTER_DIRECTIVES } from '@angular/router';
 import { MdIcon } from '@angular2-material/icon';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
 
-import { TdLayoutComponent } from '../platform/core';
+import { TdLayoutComponent, TD_LOADING_ENTRY_COMPONENTS } from '../platform/core';
 
 @Component({
   directives: [
@@ -17,6 +17,7 @@ import { TdLayoutComponent } from '../platform/core';
   selector: 'td-docs-app',
   styleUrls: ['app.component.css'],
   templateUrl: 'app.component.html',
+  precompile: [ TD_LOADING_ENTRY_COMPONENTS ],
 })
 export class DocsAppComponent {
 

src/app/components/components/loading/loading.component.html

@@ -38,6 +38,7 @@ <h2><code>tdLoading</code></h2>
     <p>Simply add the <code>tdLoading</code> attibute with a "name" value to the element you want to mask.</p>
     <p>Dont forget to add the asterisk syntax before the <code>tdLoading</code> directive if its not used in a <code><![CDATA[<template>]]></code> element.</p>
     <p>More info on the asterisk (*) syntax <a target="_blank" href="https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template">here</a></p>
+    <p>Note: when used on load, should be registered in [TdLoadingService] after 'AfterViewInit#ngAfterViewInit()' component hook cycle.</p>
     <h3>Properties:</h3>
     <p>The <code>tdLoading</code> component has {{loadingAttrs.length}} properties:</p>
     <md-list>
@@ -69,10 +70,11 @@ <h3>Example:</h3>
     <p>Typescript:</p>
     <td-highlight lang="typescript">
       <![CDATA[
-        import { TdLoadingDirective, TdLoadingService } from '@covalent/core';
+        import { TdLoadingDirective, TdLoadingService, TD_LOADING_ENTRY_COMPONENTS } from '@covalent/core';
         ...
           directives: [ TdLoadingDirective ],
-          providers: [ TdLoadingService ]
+          providers: [ TdLoadingService ],
+          precompile: [ TD_LOADING_ENTRY_COMPONENTS ],
         })
         export class Demo {
           constructor(private _loadingService: TdLoadingService) {
@@ -122,9 +124,10 @@ <h3>Example:</h3>
     <td-highlight lang="typescript">
       <![CDATA[
         import { ViewContainerRef } from '@angular/core';
-        import { TdLoadingService, ILoadingOptions, LoadingType } from '@covalent/core';
+        import { TdLoadingService, ILoadingOptions, LoadingType, TD_LOADING_ENTRY_COMPONENTS } from '@covalent/core';
         ...
-          providers: [ TdLoadingService ]
+          providers: [ TdLoadingService ],
+          precompile: [ TD_LOADING_ENTRY_COMPONENTS ],
         })
         export class Demo {
           constructor(private _loadingService: TdLoadingService, viewContainerRef: ViewContainerRef) {

src/app/components/components/loading/loading.component.spec.ts

@@ -7,10 +7,10 @@ import {
   inject,
 } from '@angular/core/testing';
 import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
-import { Component, DebugElement, ViewContainerRef, Injector } from '@angular/core';
+import { Component, DebugElement, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { LoadingDemoComponent } from './loading.component';
-import { TdLoadingService } from '../../../../platform/core';
+import { TdLoadingService, TD_LOADING_ENTRY_COMPONENTS } from '../../../../platform/core';
 
 describe('Component: LoadingDemo', () => {
   let builder: TestComponentBuilder;
@@ -21,6 +21,11 @@ describe('Component: LoadingDemo', () => {
       Injector,
       ViewContainerRef,
       TdLoadingService,
+      { provide: ComponentFactoryResolver, useValue: {resolveComponentFactory: function(): any{
+        return {create: function(): any{
+          return {instance: {}};
+        }};
+      }}},
     ]);
   });
 
@@ -48,6 +53,7 @@ describe('Component: LoadingDemo', () => {
   template: `
     <td-loading-demo></td-loading-demo>
   `,
+  precompile: [ TD_LOADING_ENTRY_COMPONENTS ],
 })
 class LoadingDemoTestControllerComponent {
 }

src/app/components/components/loading/loading.component.ts

@@ -1,5 +1,4 @@
-import { Component, ViewContainerRef } from '@angular/core';
-import { TimerWrapper } from '@angular/core/src/facade/async';
+import { Component, ViewContainerRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 
 import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
 import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
@@ -24,7 +23,7 @@ import { TdHighlightComponent } from '../../../../platform/highlight';
   styleUrls: [ 'loading.component.css' ],
   templateUrl: 'loading.component.html',
 })
-export class LoadingDemoComponent {
+export class LoadingDemoComponent implements AfterViewInit {
 
   demo: {name?: string, description?: string} = {};
   demo2: {name?: string, description?: string} = {};
@@ -41,21 +40,25 @@ export class LoadingDemoComponent {
   }];
 
   loadingServiceMethods: Object[] = [{
-    description: 'Registers a request for the loading mask referenced by the name parameter.',
+    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.`,
     name: 'register',
-    type: 'function(name: string)',
+    type: 'function(name: string, registers: number = 1)',
   }, {
-    description: 'Resolves a request for the loading mask referenced by the name parameter.',
+    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.`,
     name: 'resolve',
-    type: 'function(name: string)',
+    type: 'function(name: string, resolves: number = 1)',
   }, {
     description: `Creates a fullscreen loading mask and attaches it to the viewContainerRef.
                   Only displayed when the mask has a request registered on it.`,
     name: 'createOverlayComponent',
     type: 'function(options: ILoadingOptions, viewContainerRef: ViewContainerRef)',
   }];
 
-  constructor(viewContainer: ViewContainerRef, private _loadingService: TdLoadingService) {
+  constructor(viewContainer: ViewContainerRef,
+              private _changeDetectorRef: ChangeDetectorRef,
+              private _loadingService: TdLoadingService) {
     let options: ILoadingOptions = {
       name: 'test.overlay',
       type: LoadingType.Circular,
@@ -68,28 +71,29 @@ export class LoadingDemoComponent {
     this._loadingService.createOverlayComponent(options2, viewContainer);
   }
 
+  ngAfterViewInit(): void {
+    this.registerLoadingReplace();
+    this._changeDetectorRef.detectChanges();
+  }
+
   registerCircleLoadingOverlay(): void {
     this._loadingService.register('test.overlay');
-    TimerWrapper.setTimeout(
-      () => {
-        this._loadingService.resolve('test.overlay');
-      },
-      3000);
+    setTimeout(() => {
+      this._loadingService.resolve('test.overlay');
+    }, 3000);
   }
 
   registerLinearLoadingOverlay(): void {
     this._loadingService.register('test.overlay2');
-    TimerWrapper.setTimeout(
-      () => {
-        this._loadingService.resolve('test.overlay2');
-      },
-      3000);
+    setTimeout(() => {
+      this._loadingService.resolve('test.overlay2');
+    }, 3000);
   }
 
   registerLoadingReplace(): void {
-    this.replaceRegistered++;
     this._loadingService.register('test');
     this._loadingService.register('test2');
+    this.replaceRegistered++;
   }
 
   resolveLoadingReplace(): void {

src/platform/core/index.ts

@@ -43,6 +43,12 @@ export { TdStepComponent, StepState } from './steps/step.component';
 export { TdStepsComponent, IStepChangeEvent } from './steps/steps.component';
 
 // Loading
+import { TdLoadingComponent } from './loading/loading.component';
+
+export const TD_LOADING_ENTRY_COMPONENTS: Type[] = [
+  TdLoadingComponent,
+];
+
 export { LoadingType } from './loading/loading.component';
 export { TdLoadingService, ILoadingOptions } from './loading/services/loading.service';
 export { TdLoadingDirective } from './loading/directives/loading.directive';

src/platform/core/loading/directives/loading.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Input, OnInit } from '@angular/core';
+import { Directive, Input, OnInit, OnDestroy } from '@angular/core';
 import { ViewContainerRef, TemplateRef } from '@angular/core';
 
 import { LoadingType } from '../loading.component';
@@ -7,7 +7,7 @@ import { TdLoadingService, ILoadingOptions } from '../services/loading.service';
 @Directive({
   selector: '[tdLoading]',
 })
-export class TdLoadingDirective implements OnInit {
+export class TdLoadingDirective implements OnInit, OnDestroy {
 
   private _type: LoadingType;
   private _name: string;
@@ -38,15 +38,19 @@ export class TdLoadingDirective implements OnInit {
     }
   }
 
-  constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<Object>,
-              private _loadingService: TdLoadingService) {
-    this._viewContainer.createEmbeddedView(this._templateRef);
-  }
+  constructor(private _viewContainer: ViewContainerRef,
+              private _templateRef: TemplateRef<Object>,
+              private _loadingService: TdLoadingService) {}
 
   ngOnInit(): void {
+    this._viewContainer.createEmbeddedView(this._templateRef);
     this._registerComponent();
   }
 
+  ngOnDestroy(): void {
+    this._loadingService.removeComponent(this._name);
+  }
+
   /**
    * Creates [TdLoadingComponent] and attaches it to this directive's [ViewContainerRef].
    * Passes this directive's [TemplateRef] to detach/attach it from DOM when loading mask is on.

src/platform/core/loading/loading.component.html

@@ -11,7 +11,8 @@
     <md-progress-circle *ngIf="isCircular()" 
                         mode="indeterminate" 
                         color="primary" 
-                        [style.height]="getCircleDiameter()">
+                        [style.height]="getCircleDiameter()"
+                        [style.width]="getCircleDiameter()">
     </md-progress-circle>
     <md-progress-bar *ngIf="isLinear()" 
                      mode="indeterminate" 

src/platform/core/loading/loading.component.ts

@@ -69,14 +69,17 @@ export class TdLoadingComponent {
     if (this.height) {
       return `${this.height}px`;
     }
-    return 'auto';
+    return '150px';
   }
 
   getCircleDiameter(): string {
     if (this.height) {
-      return `${this.height / 2}px`;
+      let diameter: number = this.height * (2 / 3);
+      if (diameter < 80) {
+        return `${diameter}px`;
+      }
     }
-    return 'auto';
+    return '80px';
   }
 
   isCircular(): boolean {