Storyline-Tracker: refactor toast to use Renderer

_examples/storyline-tracker/app/core/toast/toast.component.css

@@ -1,4 +1,4 @@
-.toast-container {
+:host {
   /*-webkit-transition-property: opacity, bottom, left, right, width, margin, border-radius;
   transition-property: opacity, bottom, left, right, width, margin, border-radius;
   -webkit-transition-duration: 1.0s;
@@ -9,7 +9,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  overflow: scroll;
   background: rgba(0, 0, 0, 0.4);
   z-index: 9999;
   opacity: 0;
@@ -19,12 +18,11 @@
   transition: opacity 400ms ease-in;
 }
 
-.toast-container > * {
+:host > * {
   text-align: center;
 }
 
 .toast-card {
-  width: 100%;
   z-index: 1;
   padding: 2px;
   position: relative;

_examples/storyline-tracker/app/core/toast/toast.component.html

@@ -1,6 +1,4 @@
-<div id="toast" class="toast-container">
-  <div class="toast-card mdl-shadow--16dp">
-    <h5 class="toast-title">{{title}}</h5>
-    <p class="toast-message">{{message}}</p>
-  </div>
+<div class="toast-card mdl-shadow--16dp">
+  <h5 class="toast-title">{{title}}</h5>
+  <p class="toast-message">{{message}}</p>
 </div>

_examples/storyline-tracker/app/core/toast/toast.component.ts

@@ -1,28 +1,28 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, ElementRef, Renderer } from '@angular/core';
 import { ToastService } from './toast.service';
-
-import { Subscription } from 'rxjs/Subscription'
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
   selector: 'story-toast',
-   templateUrl: './toast.component.html',
+  templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.css']
 })
-export class ToastComponent implements OnDestroy, OnInit {
+export class ToastComponent implements OnDestroy {
   private defaults = {
     title: '',
     message: 'May the Force be with You'
   };
-  private toastElement: any;
   private toastSubscription: Subscription;
 
   title: string;
   message: string;
 
-  constructor(private toastService: ToastService) {
+  constructor(private toastService: ToastService,
+              private renderer: Renderer,
+              private elementRef: ElementRef) {
     this.toastSubscription = this.toastService.toastState.subscribe((toastMessage) => {
-      console.log(`activiting toast: ${toastMessage.message}`)
+      console.log(`activiting toast: ${toastMessage.message}`);
       this.activate(toastMessage.message);
     });
   }
@@ -33,24 +33,20 @@ export class ToastComponent implements OnDestroy, OnInit {
     this.show();
   }
 
-  ngOnInit() {
-    this.toastElement = document.getElementById('toast');
-  }
-
   ngOnDestroy() {
     this.toastSubscription.unsubscribe();
   }
 
   private show() {
     console.log(this.message);
-    this.toastElement.style.opacity = 1;
-    this.toastElement.style.zIndex = 9999;
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '1');
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '9999');
 
     window.setTimeout(() => this.hide(), 2500);
   }
 
   private hide() {
-    this.toastElement.style.opacity = 0;
-    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '0');
+    window.setTimeout(() => this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '0'), 400);
   }
 }

_examples/storyline-tracker/plnkr.no-link.html

@@ -1167,31 +1167,31 @@
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
-*/"><input type="hidden" name="files[app/core/toast/toast.component.ts]" value="import { Component, OnDestroy, OnInit } from '@angular/core';
+*/"><input type="hidden" name="files[app/core/toast/toast.component.ts]" value="import { Component, OnDestroy, ElementRef, Renderer } from '@angular/core';
 import { ToastService } from './toast.service';
-
-import { Subscription } from 'rxjs/Subscription'
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
   selector: 'story-toast',
-   templateUrl: './toast.component.html',
+  templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.css']
 })
-export class ToastComponent implements OnDestroy, OnInit {
+export class ToastComponent implements OnDestroy {
   private defaults = {
     title: '',
     message: 'May the Force be with You'
   };
-  private toastElement: any;
   private toastSubscription: Subscription;
 
   title: string;
   message: string;
 
-  constructor(private toastService: ToastService) {
+  constructor(private toastService: ToastService,
+              private renderer: Renderer,
+              private elementRef: ElementRef) {
     this.toastSubscription = this.toastService.toastState.subscribe((toastMessage) => {
-      console.log(`activiting toast: ${toastMessage.message}`)
+      console.log(`activiting toast: ${toastMessage.message}`);
       this.activate(toastMessage.message);
     });
   }
@@ -1202,25 +1202,21 @@
     this.show();
   }
 
-  ngOnInit() {
-    this.toastElement = document.getElementById('toast');
-  }
-
   ngOnDestroy() {
     this.toastSubscription.unsubscribe();
   }
 
   private show() {
     console.log(this.message);
-    this.toastElement.style.opacity = 1;
-    this.toastElement.style.zIndex = 9999;
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '1');
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '9999');
 
     window.setTimeout(() => this.hide(), 2500);
   }
 
   private hide() {
-    this.toastElement.style.opacity = 0;
-    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '0');
+    window.setTimeout(() => this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '0'), 400);
   }
 }
 
@@ -2536,7 +2532,7 @@ <h4>Inconceivable!</h4>
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
-*/"><input type="hidden" name="files[app/core/toast/toast.component.css]" value=".toast-container {
+*/"><input type="hidden" name="files[app/core/toast/toast.component.css]" value=":host {
   /*-webkit-transition-property: opacity, bottom, left, right, width, margin, border-radius;
   transition-property: opacity, bottom, left, right, width, margin, border-radius;
   -webkit-transition-duration: 1.0s;
@@ -2547,7 +2543,6 @@ <h4>Inconceivable!</h4>
   right: 0;
   bottom: 0;
   left: 0;
-  overflow: scroll;
   background: rgba(0, 0, 0, 0.4);
   z-index: 9999;
   opacity: 0;
@@ -2557,12 +2552,11 @@ <h4>Inconceivable!</h4>
   transition: opacity 400ms ease-in;
 }
 
-.toast-container > * {
+:host > * {
   text-align: center;
 }
 
 .toast-card {
-  width: 100%;
   z-index: 1;
   padding: 2px;
   position: relative;
@@ -13526,11 +13520,9 @@ <h5>{{title}}</h5>
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
--->"><input type="hidden" name="files[app/core/toast/toast.component.html]" value="<div id=&quot;toast&quot; class=&quot;toast-container&quot;>
-  <div class=&quot;toast-card mdl-shadow--16dp&quot;>
-    <h5 class=&quot;toast-title&quot;>{{title}}</h5>
-    <p class=&quot;toast-message&quot;>{{message}}</p>
-  </div>
+-->"><input type="hidden" name="files[app/core/toast/toast.component.html]" value="<div class=&quot;toast-card mdl-shadow--16dp&quot;>
+  <h5 class=&quot;toast-title&quot;>{{title}}</h5>
+  <p class=&quot;toast-message&quot;>{{message}}</p>
 </div>
 
 

resources/live-examples/storyline-tracker/eplnkr.html

@@ -1167,31 +1167,31 @@
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
-*/"><input type="hidden" name="entries[app/core/spinner/spinner.service.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.ts][content]" value="import { Component, OnDestroy, OnInit } from '@angular/core';
+*/"><input type="hidden" name="entries[app/core/spinner/spinner.service.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.ts][content]" value="import { Component, OnDestroy, ElementRef, Renderer } from '@angular/core';
 import { ToastService } from './toast.service';
-
-import { Subscription } from 'rxjs/Subscription'
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
   selector: 'story-toast',
-   templateUrl: './toast.component.html',
+  templateUrl: './toast.component.html',
   styleUrls: ['./toast.component.css']
 })
-export class ToastComponent implements OnDestroy, OnInit {
+export class ToastComponent implements OnDestroy {
   private defaults = {
     title: '',
     message: 'May the Force be with You'
   };
-  private toastElement: any;
   private toastSubscription: Subscription;
 
   title: string;
   message: string;
 
-  constructor(private toastService: ToastService) {
+  constructor(private toastService: ToastService,
+              private renderer: Renderer,
+              private elementRef: ElementRef) {
     this.toastSubscription = this.toastService.toastState.subscribe((toastMessage) => {
-      console.log(`activiting toast: ${toastMessage.message}`)
+      console.log(`activiting toast: ${toastMessage.message}`);
       this.activate(toastMessage.message);
     });
   }
@@ -1202,25 +1202,21 @@
     this.show();
   }
 
-  ngOnInit() {
-    this.toastElement = document.getElementById('toast');
-  }
-
   ngOnDestroy() {
     this.toastSubscription.unsubscribe();
   }
 
   private show() {
     console.log(this.message);
-    this.toastElement.style.opacity = 1;
-    this.toastElement.style.zIndex = 9999;
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '1');
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '9999');
 
     window.setTimeout(() => this.hide(), 2500);
   }
 
   private hide() {
-    this.toastElement.style.opacity = 0;
-    window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
+    this.renderer.setElementStyle(this.elementRef.nativeElement, 'opacity', '0');
+    window.setTimeout(() => this.renderer.setElementStyle(this.elementRef.nativeElement, 'zIndex', '0'), 400);
   }
 }
 
@@ -2536,7 +2532,7 @@ <h4>Inconceivable!</h4>
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
-*/"><input type="hidden" name="entries[app/core/spinner/spinner.component.css][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.css][content]" value=".toast-container {
+*/"><input type="hidden" name="entries[app/core/spinner/spinner.component.css][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.css][content]" value=":host {
   /*-webkit-transition-property: opacity, bottom, left, right, width, margin, border-radius;
   transition-property: opacity, bottom, left, right, width, margin, border-radius;
   -webkit-transition-duration: 1.0s;
@@ -2547,7 +2543,6 @@ <h4>Inconceivable!</h4>
   right: 0;
   bottom: 0;
   left: 0;
-  overflow: scroll;
   background: rgba(0, 0, 0, 0.4);
   z-index: 9999;
   opacity: 0;
@@ -2557,12 +2552,11 @@ <h4>Inconceivable!</h4>
   transition: opacity 400ms ease-in;
 }
 
-.toast-container > * {
+:host > * {
   text-align: center;
 }
 
 .toast-card {
-  width: 100%;
   z-index: 1;
   padding: 2px;
   position: relative;
@@ -13526,11 +13520,9 @@ <h5>{{title}}</h5>
 Copyright 2016 JohnPapa.net, LLC. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://bit.ly/l1cense
--->"><input type="hidden" name="entries[app/core/spinner/spinner.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.html][content]" value="<div id=&quot;toast&quot; class=&quot;toast-container&quot;>
-  <div class=&quot;toast-card mdl-shadow--16dp&quot;>
-    <h5 class=&quot;toast-title&quot;>{{title}}</h5>
-    <p class=&quot;toast-message&quot;>{{message}}</p>
-  </div>
+-->"><input type="hidden" name="entries[app/core/spinner/spinner.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/core/toast/toast.component.html][content]" value="<div class=&quot;toast-card mdl-shadow--16dp&quot;>
+  <h5 class=&quot;toast-title&quot;>{{title}}</h5>
+  <p class=&quot;toast-message&quot;>{{message}}</p>
 </div>