toast-transitions.js 10KB

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