Merge pull request #5906 from dmackerman/2.0

feat(toast): add toast component

ionic/components.core.scss

@@ -26,6 +26,7 @@
   "components/show-hide-when/show-hide-when",
   "components/slides/slides",
   "components/spinner/spinner",
+  "components/toast/toast",
   "components/virtual-scroll/virtual-scroll";
 
 

ionic/components.ios.scss

@@ -27,6 +27,7 @@
   "components/select/select.ios",
   "components/tabs/tabs.ios",
   "components/toggle/toggle.ios",
+  "components/toast/toast.ios",
   "components/toolbar/toolbar.ios";
 
 

ionic/components.md.scss

@@ -27,6 +27,7 @@
   "components/select/select.md",
   "components/tabs/tabs.md",
   "components/toggle/toggle.md",
+  "components/toast/toast.md",
   "components/toolbar/toolbar.md";
 
 

ionic/components.ts

@@ -47,5 +47,6 @@ export * from './components/tabs/tabs'
 export * from './components/tabs/tab'
 export * from './components/tap-click/tap-click'
 export * from './components/toggle/toggle'
+export * from './components/toast/toast'
 export * from './components/toolbar/toolbar'
 export * from './components/virtual-scroll/virtual-scroll'

ionic/components.wp.scss

@@ -27,6 +27,7 @@
   "components/select/select.wp",
   "components/tabs/tabs.wp",
   "components/toggle/toggle.wp",
+  "components/toast/toast.wp",
   "components/toolbar/toolbar.wp";
 
 

ionic/components/toast/test/basic/e2e.ts

@@ -0,0 +1,8 @@
+
+it('should open action sheet', function() {
+  element(by.css('.e2eOpenActionSheet')).click();
+});
+
+it('should close with backdrop click', function() {
+  element(by.css('.backdrop')).click();
+});

ionic/components/toast/test/basic/index.ts

@@ -0,0 +1,64 @@
+import {App, Page, Toast, NavController} from 'ionic-angular';
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+
+  private dismissMessage: string;
+
+
+  constructor(private nav: NavController) { }
+
+  showToast() {
+    const toast = Toast.create({
+      message: 'User was created successfully',
+    });
+
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  showLongToast() {
+    const toast = Toast.create({
+      message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
+    });
+
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  showDismissDurationToast() {
+    const toast = Toast.create({
+      message: 'I am dismissed after 1.5 seconds',
+      duration: 1500
+    });
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  showToastWithCloseButton() {
+    const toast = Toast.create({
+      message: 'Your internet connection appears to be offline. Data integrity is not gauranteed.',
+      showCloseButton: true,
+      closeButtonText: 'Ok'
+    });
+    toast.onDismiss(this.dismissHandler);
+    this.nav.present(toast);
+  }
+
+  private dismissHandler(toast: Toast) {
+    console.info('Toast onDismiss()');
+
+  }
+
+}
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

ionic/components/toast/test/basic/main.html

@@ -0,0 +1,13 @@
+<ion-navbar *navbar>
+  <ion-title>Toasts</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <button block (click)="showToast()">Show Toast</button>
+  <button block (click)="showLongToast()">Show Long Toast</button>
+  <br />
+  <button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
+  <button block (click)="showToastWithCloseButton()">With closeButtonText</button>
+
+  {{ dismissMessage }}
+</ion-content>

ionic/components/toast/toast.ios.scss

@@ -0,0 +1,39 @@
+// iOS Toast
+// --------------------------------------------------
+$toast-ios-text-align:                            left !default;
+$toast-ios-background:                            rgba(0, 0, 0, 0.70) !default;
+$toast-ios-border-radius:                         0.65rem !default;
+
+$toast-ios-title-color:                           #fff !default;
+$toast-ios-title-font-size:                       1.4rem !default;
+$toast-ios-title-padding:                         1.5rem !default;
+
+ion-toast {
+  display: block;
+  height: $toast-width;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: $toast-width;
+  z-index: $z-index-overlay;
+}
+
+.toast-wrapper {
+  background: $toast-ios-background;
+  border-radius: $toast-ios-border-radius;
+  bottom: 10px;
+  display: block;
+  left: 10px;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 10px;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-ios-title-color;
+  font-size: $toast-ios-title-font-size;
+  padding: $toast-ios-title-padding;
+}

ionic/components/toast/toast.md.scss

@@ -0,0 +1,41 @@
+@import "../../globals.md";
+
+// Material Design Toast
+// --------------------------------------------------
+$toast-md-text-align:                            left !default;
+$toast-md-background:                            #333333 !default;
+$toast-md-group-margin-bottom:                   8px !default;
+
+$toast-md-title-color:                           #fff !default;
+$toast-md-title-font-size:                       1.5rem !default;
+$toast-md-title-padding:                         19px 16px 17px !default;
+
+ion-toast {
+  display: block;
+  height: $toast-width;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: $toast-width;
+  z-index: $z-index-overlay;
+}
+
+.toast-wrapper {
+  background: $toast-md-background;
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 0;
+  transform: translate3d(0, 100%, 0);
+  width: $toast-width;
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-md-title-color;
+  font-size: $toast-md-title-font-size;
+  padding: $toast-md-title-padding;
+}

ionic/components/toast/toast.scss

@@ -0,0 +1,43 @@
+@import "../../globals.ios";
+
+// Action Sheet
+// --------------------------------------------------
+
+$toast-width:                             100% !default;
+$toast-max-width:                         700px !default;
+
+ion-toast {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+  display: block;
+  width: $toast-width;
+  height: $toast-width;
+}
+
+.toast-container {
+  display: flex;
+  align-items: center;
+
+  button {
+    font-size: 1.5rem;
+    padding: 19px 16px 17px;
+  }
+}
+
+.toast-message {
+  flex: 1;
+}
+
+.toast-wrapper {
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 0;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}

ionic/components/toast/toast.ts

@@ -0,0 +1,292 @@
+import {Component, ElementRef, Renderer, Output, EventEmitter} from 'angular2/core';
+import {NgClass, NgIf, NgFor} from 'angular2/common';
+
+import {Button} from '../button/button';
+import {Icon} from '../icon/icon';
+import {ActionSheet, ActionSheetOptions} from '../action-sheet/action-sheet';
+import {Animation} from '../../animations/animation';
+import {Transition, TransitionOptions} from '../../transitions/transition';
+
+import {Config} from '../../config/config';
+import {isPresent} from '../../util/util';
+import {NavParams} from '../nav/nav-params';
+import {NavController} from '../nav/nav-controller';
+import {ViewController} from '../nav/view-controller';
+
+/**
+ * @name Toast
+ * @description
+ * An Toast is a small message that appears in the lower part of the screen.
+ * It's useful for displaying success messages, error messages, etc.
+ *
+ * @usage
+ * ```ts
+ * constructor(nav: NavController) {
+ *   this.nav = nav;
+ * }
+ *
+ * presentToast() {
+ *   let toast = Toast.create({
+ *     message: 'User was added successfully',
+ *     duration: 3000
+ *   });
+ *   this.nav.present(toast);
+ * }
+ * ```
+ *
+ * @demo /docs/v2/demos/toast/
+ */
+export class Toast extends ViewController {
+
+  constructor(opts: ToastOptions = {}) {
+    opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
+    super(ToastCmp, opts);
+
+
+    this.viewType = 'toast';
+    this.isOverlay = false;
+
+    // by default, toasts should not fire lifecycle events of other views
+    // for example, when an toast enters, the current active view should
+    // not fire its lifecycle events because it's not conceptually leaving
+    this.fireOtherLifecycles = false;
+  }
+
+
+
+  /**
+  * @private
+  */
+  getTransitionName(direction: string) {
+    let key = 'toast' + (direction === 'back' ? 'Leave' : 'Enter');
+    return this._nav && this._nav.config.get(key);
+  }
+
+  /**
+   * @param {string} message  Toast message content
+   */
+  setMessage(message: string) {
+    this.data.message = message;
+  }
+
+  /**
+   *
+   *  Toast options
+   *
+   *  | Property              | Type      | Description                                                                   |
+   *  |-----------------------|-----------|---------------------------------------------------------------------------    |
+   *  | message               | `string`  | The message for the toast. Long strings will wrap and the toast container will expand. **(required)**                                                     |
+   *  | duration              | `number`  | The amount of time in milliseconds the toast should appear *(optional)*         |
+   *  | cssClass              | `string`  | Any additional class for the toast *(optional)*                                 |
+   *  | showCloseButton       | `boolean` | Whether or not to show an optional button to close the toast. *(optional)*      |
+   *  | closeButtonText       | `string`  | Text to display in the close button. *(optional)*                               |
+   *  | enableBackdropDismiss | `boolean` | Whether the the toast should be dismissed by tapping the backdrop *(optional)*  |
+   *
+   * @param {object} ToastOptions Toast. See the above table for available options.
+   */
+  static create(opts: ToastOptions = {}) {
+    return new Toast(opts);
+  }
+
+}
+
+
+/**
+* @private
+*/
+@Component({
+  selector: 'ion-toast',
+  template: `
+    <div (click)="bdClick()" tappable disable-activated class="backdrop" role="presentation"></div>
+    <div class="toast-wrapper">
+      <div class="toast-container">
+        <div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
+        <button clear class="toast-button" *ngIf="d.showCloseButton" (click)="bdClick()">
+          {{ d.closeButtonText }}
+          <ion-button-effect></ion-button-effect>
+         </button>
+      </div>
+    </div>
+  `,
+  host: {
+    'role': 'dialog',
+    '[attr.aria-labelledby]': 'hdrId',
+    '[attr.aria-describedby]': 'descId'
+  },
+  directives: [NgIf, Icon, Button]
+})
+class ToastCmp {
+  private d: any;
+  private descId: string;
+  private hdrId: string;
+  private created: number;
+  private dismissTimeout: number = undefined;
+
+  constructor(
+    private _nav: NavController,
+    private _viewCtrl: ViewController,
+    private _config: Config,
+    private _elementRef: ElementRef,
+    params: NavParams,
+    renderer: Renderer
+  ) {
+
+    this.d = params.data;
+    this.created = Date.now();
+
+    if (this.d.cssClass) {
+      renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
+    }
+
+    if (this.d.message) {
+      this.hdrId = 'acst-hdr-' + this.id;
+    }
+  }
+
+  onPageDidEnter() {
+    const { activeElement }: any = document;
+    if (activeElement) {
+      activeElement.blur();
+    }
+
+    let focusableEle = this._elementRef.nativeElement.querySelector('button');
+
+    if (focusableEle) {
+      focusableEle.focus();
+    }
+
+    // if there's a `duration` set, automatically dismiss.
+    this.dismissTimeout = setTimeout(() => this.dismiss('backdrop'), this.d.duration ? this.d.duration : 3000)
+  }
+
+  click(button, dismissDelay?) {
+    if (!this.isEnabled()) {
+      return;
+    }
+    let shouldDismiss = true;
+
+    if (shouldDismiss) {
+      setTimeout(() => {
+        this.dismiss(button.role);
+      }, dismissDelay || this._config.get('pageTransitionDelay'));
+    }
+  }
+
+  bdClick() {
+    if (this.isEnabled() && this.d.enableBackdropDismiss) {
+      this.dismiss('backdrop');
+    }
+  }
+
+  dismiss(role): Promise<any> {
+    clearTimeout(this.dismissTimeout);
+    this.dismissTimeout = undefined;
+    return this._viewCtrl.dismiss(null, role);
+  }
+
+  isEnabled() {
+    let tm = this._config.getNumber('overlayCreatedDiff', 750);
+    return (this.created + tm < Date.now());
+  }
+
+}
+
+export interface ToastOptions {
+  title?: string;
+  cssClass?: string;
+  buttons?: Array<any>;
+  duration?: number,
+  showCloseButton?: boolean;
+  closeButtonText?: string;
+  enableBackdropDismiss?: boolean;
+}
+
+class ToastSlideIn extends Transition {
+  constructor(enteringView, leavingView, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('translateY', '100%', '0%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
+  }
+}
+
+class ToastSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('translateY', '0%', '100%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
+  }
+}
+
+class ToastMdSlideIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    backdrop.fromTo('opacity', 0, 0);
+    wrapper.fromTo('translateY', '100%', '0%');
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper)
+  }
+}
+
+class ToastMdSlideOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+
+    wrapper.fromTo('translateY', '0%', '100%');
+    backdrop.fromTo('opacity', 0, 0);
+    this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(backdrop).add(wrapper);
+  }
+}
+
+class ToastWpPopIn extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = enteringView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.3', '1');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this.easing('cubic-bezier(0,0 0.05,1)').duration(200).add(backdrop).add(wrapper);
+  }
+}
+
+class ToastWpPopOut extends Transition {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+    super(opts);
+
+    let ele = leavingView.pageRef().nativeElement;
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));
+
+    wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '1.3');
+    backdrop.fromTo('opacity', 0, 0);
+
+    this.easing('ease-out').duration(150).add(backdrop).add(wrapper);
+  }
+}
+
+
+Transition.register('toast-slide-in', ToastSlideIn);
+Transition.register('toast-slide-out', ToastSlideOut);
+Transition.register('toast-md-slide-in', ToastMdSlideIn);
+Transition.register('toast-md-slide-out', ToastMdSlideOut);
+Transition.register('toast-wp-slide-out', ToastWpPopOut);
+Transition.register('toast-wp-slide-in', ToastWpPopIn);

ionic/components/toast/toast.wp.scss

@@ -0,0 +1,33 @@
+// Windows Phone Toast
+// --------------------------------------------------
+$toast-wp-text-align:                            left !default;
+$toast-wp-background:                            rgba(0, 0, 0, 1) !default;
+$toast-wp-border-radius:                         0 !default;
+$toast-wp-button-color:                          #fff !default;
+
+$toast-wp-title-color:                           #fff !default;
+$toast-wp-title-font-size:                       1.4rem !default;
+$toast-wp-title-padding:                         1.5rem !default;
+
+.toast-wrapper {
+  background: $toast-wp-background;
+  border-radius: $toast-wp-border-radius;
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-wp-title-color;
+  font-size: $toast-wp-title-font-size;
+  padding: $toast-wp-title-padding;
+}
+
+.toast-button {
+  color: $toast-wp-button-color;
+}

ionic/config/modes.ts

@@ -9,6 +9,9 @@ Config.setModeConfig('ios', {
   actionSheetEnter: 'action-sheet-slide-in',
   actionSheetLeave: 'action-sheet-slide-out',
 
+  toastEnter: 'toast-slide-in',
+  toastLeave: 'toast-slide-out',
+
   alertEnter: 'alert-pop-in',
   alertLeave: 'alert-pop-out',
 
@@ -41,6 +44,9 @@ Config.setModeConfig('md', {
   actionSheetEnter: 'action-sheet-md-slide-in',
   actionSheetLeave: 'action-sheet-md-slide-out',
 
+  toastEnter: 'toast-md-slide-in',
+  toastLeave: 'toast-md-slide-out',
+
   alertEnter: 'alert-md-pop-in',
   alertLeave: 'alert-md-pop-out',
 
@@ -76,6 +82,9 @@ Config.setModeConfig('wp', {
   actionSheetEnter: 'action-sheet-wp-slide-in',
   actionSheetLeave: 'action-sheet-wp-slide-out',
 
+  toastEnter: 'toast-wp-slide-in',
+  toastLeave: 'toast-wp-slide-out',
+
   alertEnter: 'alert-wp-pop-in',
   alertLeave: 'alert-wp-pop-out',