toast-transitions.js 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Animation } from '../../animations/animation';
  12. import { Transition } from '../../transitions/transition';
  13. var ToastSlideIn = (function (_super) {
  14. __extends(ToastSlideIn, _super);
  15. function ToastSlideIn() {
  16. return _super !== null && _super.apply(this, arguments) || this;
  17. }
  18. ToastSlideIn.prototype.init = function () {
  19. // DOM READS
  20. var ele = this.enteringView.pageRef().nativeElement;
  21. var wrapperEle = ele.querySelector('.toast-wrapper');
  22. var wrapper = new Animation(this.plt, wrapperEle);
  23. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  24. // top
  25. // by default, it is -100% hidden (above the screen)
  26. // so move from that to 10px below top: 0px;
  27. wrapper.fromTo('translateY', '-100%', 10 + "px");
  28. }
  29. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  30. // Middle
  31. // just center it and fade it in
  32. var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  33. // DOM WRITE
  34. wrapperEle.style.top = topPosition + "px";
  35. wrapper.fromTo('opacity', 0.01, 1);
  36. }
  37. else {
  38. // bottom
  39. // by default, it is 100% hidden (below the screen),
  40. // so move from that to 10 px above bottom: 0px
  41. wrapper.fromTo('translateY', '100%', 0 - 10 + "px");
  42. }
  43. this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
  44. };
  45. return ToastSlideIn;
  46. }(Transition));
  47. export { ToastSlideIn };
  48. var ToastSlideOut = (function (_super) {
  49. __extends(ToastSlideOut, _super);
  50. function ToastSlideOut() {
  51. return _super !== null && _super.apply(this, arguments) || this;
  52. }
  53. ToastSlideOut.prototype.init = function () {
  54. var ele = this.leavingView.pageRef().nativeElement;
  55. var wrapperEle = ele.querySelector('.toast-wrapper');
  56. var wrapper = new Animation(this.plt, wrapperEle);
  57. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  58. // top
  59. // reverse arguments from enter transition
  60. wrapper.fromTo('translateY', 10 + "px", '-100%');
  61. }
  62. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  63. // Middle
  64. // just fade it out
  65. wrapper.fromTo('opacity', 0.99, 0);
  66. }
  67. else {
  68. // bottom
  69. // reverse arguments from enter transition
  70. wrapper.fromTo('translateY', 0 - 10 + "px", '100%');
  71. }
  72. this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
  73. };
  74. return ToastSlideOut;
  75. }(Transition));
  76. export { ToastSlideOut };
  77. var ToastMdSlideIn = (function (_super) {
  78. __extends(ToastMdSlideIn, _super);
  79. function ToastMdSlideIn() {
  80. return _super !== null && _super.apply(this, arguments) || this;
  81. }
  82. ToastMdSlideIn.prototype.init = function () {
  83. // DOM reads
  84. var ele = this.enteringView.pageRef().nativeElement;
  85. var wrapperEle = ele.querySelector('.toast-wrapper');
  86. var wrapper = new Animation(this.plt, wrapperEle);
  87. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  88. // top
  89. // by default, it is -100% hidden (above the screen)
  90. // so move from that to top: 0px;
  91. wrapper.fromTo('translateY', '-100%', "0%");
  92. }
  93. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  94. // Middle
  95. // just center it and fade it in
  96. var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  97. // DOM WRITE
  98. wrapperEle.style.top = topPosition + "px";
  99. wrapper.fromTo('opacity', 0.01, 1);
  100. }
  101. else {
  102. // bottom
  103. // by default, it is 100% hidden (below the screen),
  104. // so move from that to bottom: 0px
  105. wrapper.fromTo('translateY', '100%', "0%");
  106. }
  107. this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
  108. };
  109. return ToastMdSlideIn;
  110. }(Transition));
  111. export { ToastMdSlideIn };
  112. var ToastMdSlideOut = (function (_super) {
  113. __extends(ToastMdSlideOut, _super);
  114. function ToastMdSlideOut() {
  115. return _super !== null && _super.apply(this, arguments) || this;
  116. }
  117. ToastMdSlideOut.prototype.init = function () {
  118. var ele = this.leavingView.pageRef().nativeElement;
  119. var wrapperEle = ele.querySelector('.toast-wrapper');
  120. var wrapper = new Animation(this.plt, wrapperEle);
  121. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  122. // top
  123. // reverse arguments from enter transition
  124. wrapper.fromTo('translateY', 0 + "%", '-100%');
  125. }
  126. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  127. // Middle
  128. // just fade it out
  129. wrapper.fromTo('opacity', 0.99, 0);
  130. }
  131. else {
  132. // bottom
  133. // reverse arguments from enter transition
  134. wrapper.fromTo('translateY', 0 + "%", '100%');
  135. }
  136. this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(wrapper);
  137. };
  138. return ToastMdSlideOut;
  139. }(Transition));
  140. export { ToastMdSlideOut };
  141. var ToastWpPopIn = (function (_super) {
  142. __extends(ToastWpPopIn, _super);
  143. function ToastWpPopIn() {
  144. return _super !== null && _super.apply(this, arguments) || this;
  145. }
  146. ToastWpPopIn.prototype.init = function () {
  147. var ele = this.enteringView.pageRef().nativeElement;
  148. var wrapperEle = ele.querySelector('.toast-wrapper');
  149. var wrapper = new Animation(this.plt, wrapperEle);
  150. if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
  151. // top
  152. wrapper.fromTo('opacity', 0.01, 1);
  153. wrapper.fromTo('scale', 1.3, 1);
  154. }
  155. else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
  156. // Middle
  157. // just center it and fade it in
  158. var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
  159. // DOM WRITE
  160. wrapperEle.style.top = topPosition + "px";
  161. wrapper.fromTo('opacity', 0.01, 1);
  162. wrapper.fromTo('scale', 1.3, 1);
  163. }
  164. else {
  165. // bottom
  166. wrapper.fromTo('opacity', 0.01, 1);
  167. wrapper.fromTo('scale', 1.3, 1);
  168. }
  169. this.easing('cubic-bezier(0,0,0.05,1)').duration(200).add(wrapper);
  170. };
  171. return ToastWpPopIn;
  172. }(Transition));
  173. export { ToastWpPopIn };
  174. var ToastWpPopOut = (function (_super) {
  175. __extends(ToastWpPopOut, _super);
  176. function ToastWpPopOut() {
  177. return _super !== null && _super.apply(this, arguments) || this;
  178. }
  179. ToastWpPopOut.prototype.init = function () {
  180. // DOM reads
  181. var ele = this.leavingView.pageRef().nativeElement;
  182. var wrapperEle = ele.querySelector('.toast-wrapper');
  183. var wrapper = new Animation(this.plt, wrapperEle);
  184. if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
  185. // top
  186. // reverse arguments from enter transition
  187. wrapper.fromTo('opacity', 0.99, 0);
  188. wrapper.fromTo('scale', 1, 1.3);
  189. }
  190. else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
  191. // Middle
  192. // just fade it out
  193. wrapper.fromTo('opacity', 0.99, 0);
  194. wrapper.fromTo('scale', 1, 1.3);
  195. }
  196. else {
  197. // bottom
  198. // reverse arguments from enter transition
  199. wrapper.fromTo('opacity', 0.99, 0);
  200. wrapper.fromTo('scale', 1, 1.3);
  201. }
  202. // DOM writes
  203. var EASE = 'ease-out';
  204. var DURATION = 150;
  205. this.easing(EASE).duration(DURATION).add(wrapper);
  206. };
  207. return ToastWpPopOut;
  208. }(Transition));
  209. export { ToastWpPopOut };
  210. var TOAST_POSITION_TOP = 'top';
  211. var TOAST_POSITION_MIDDLE = 'middle';
  212. //# sourceMappingURL=toast-transitions.js.map