toast-component.js 3.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. import { Component, ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { NavParams } from '../../navigation/nav-params';
  4. import { ViewController } from '../../navigation/view-controller';
  5. /**
  6. * @hidden
  7. */
  8. export class ToastCmp {
  9. constructor(_viewCtrl, _config, _elementRef, params, renderer) {
  10. this._viewCtrl = _viewCtrl;
  11. this._config = _config;
  12. this._elementRef = _elementRef;
  13. this.dismissTimeout = undefined;
  14. renderer.setElementClass(_elementRef.nativeElement, `toast-${_config.get('mode')}`, true);
  15. this.d = params.data;
  16. if (this.d.cssClass) {
  17. this.d.cssClass.split(' ').forEach(cssClass => {
  18. // Make sure the class isn't whitespace, otherwise it throws exceptions
  19. if (cssClass.trim() !== '')
  20. renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
  21. });
  22. }
  23. this.id = (++toastIds);
  24. if (this.d.message) {
  25. this.hdrId = 'toast-hdr-' + this.id;
  26. }
  27. }
  28. ngAfterViewInit() {
  29. // if there's a `duration` set, automatically dismiss.
  30. if (this.d.duration) {
  31. this.dismissTimeout = setTimeout(() => {
  32. this.dismiss('backdrop');
  33. }, this.d.duration);
  34. }
  35. this.enabled = true;
  36. }
  37. ionViewDidEnter() {
  38. const { activeElement } = document;
  39. if (activeElement) {
  40. activeElement.blur();
  41. }
  42. let focusableEle = this._elementRef.nativeElement.querySelector('button');
  43. if (focusableEle) {
  44. focusableEle.focus();
  45. }
  46. }
  47. cbClick() {
  48. if (this.enabled) {
  49. this.dismiss('close');
  50. }
  51. }
  52. dismiss(role) {
  53. clearTimeout(this.dismissTimeout);
  54. this.dismissTimeout = undefined;
  55. return this._viewCtrl.dismiss(null, role, { disableApp: false });
  56. }
  57. }
  58. ToastCmp.decorators = [
  59. { type: Component, args: [{
  60. selector: 'ion-toast',
  61. template: '<div class="toast-wrapper" ' +
  62. '[class.toast-bottom]="d.position === \'bottom\'" ' +
  63. '[class.toast-middle]="d.position === \'middle\'" ' +
  64. '[class.toast-top]="d.position === \'top\'"> ' +
  65. '<div class="toast-container"> ' +
  66. '<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div> ' +
  67. '<button ion-button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()"> ' +
  68. '{{ d.closeButtonText || \'Close\' }} ' +
  69. '</button> ' +
  70. '</div> ' +
  71. '</div>',
  72. host: {
  73. 'role': 'dialog',
  74. '[attr.aria-labelledby]': 'hdrId',
  75. '[attr.aria-describedby]': 'descId',
  76. },
  77. },] },
  78. ];
  79. /** @nocollapse */
  80. ToastCmp.ctorParameters = () => [
  81. { type: ViewController, },
  82. { type: Config, },
  83. { type: ElementRef, },
  84. { type: NavParams, },
  85. { type: Renderer, },
  86. ];
  87. let toastIds = -1;
  88. //# sourceMappingURL=toast-component.js.map