| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- var __extends = (this && this.__extends) || (function () {
- var extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
- return function (d, b) {
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- })();
- import { Animation } from '../../animations/animation';
- import { Transition } from '../../transitions/transition';
- var ToastSlideIn = (function (_super) {
- __extends(ToastSlideIn, _super);
- function ToastSlideIn() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastSlideIn.prototype.init = function () {
- // DOM READS
- var ele = this.enteringView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
- // top
- // by default, it is -100% hidden (above the screen)
- // so move from that to 10px below top: 0px;
- wrapper.fromTo('translateY', '-100%', 10 + "px");
- }
- else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just center it and fade it in
- var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
- // DOM WRITE
- wrapperEle.style.top = topPosition + "px";
- wrapper.fromTo('opacity', 0.01, 1);
- }
- else {
- // bottom
- // by default, it is 100% hidden (below the screen),
- // so move from that to 10 px above bottom: 0px
- wrapper.fromTo('translateY', '100%', 0 - 10 + "px");
- }
- this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
- };
- return ToastSlideIn;
- }(Transition));
- export { ToastSlideIn };
- var ToastSlideOut = (function (_super) {
- __extends(ToastSlideOut, _super);
- function ToastSlideOut() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastSlideOut.prototype.init = function () {
- var ele = this.leavingView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
- // top
- // reverse arguments from enter transition
- wrapper.fromTo('translateY', 10 + "px", '-100%');
- }
- else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just fade it out
- wrapper.fromTo('opacity', 0.99, 0);
- }
- else {
- // bottom
- // reverse arguments from enter transition
- wrapper.fromTo('translateY', 0 - 10 + "px", '100%');
- }
- this.easing('cubic-bezier(.36,.66,.04,1)').duration(300).add(wrapper);
- };
- return ToastSlideOut;
- }(Transition));
- export { ToastSlideOut };
- var ToastMdSlideIn = (function (_super) {
- __extends(ToastMdSlideIn, _super);
- function ToastMdSlideIn() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastMdSlideIn.prototype.init = function () {
- // DOM reads
- var ele = this.enteringView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
- // top
- // by default, it is -100% hidden (above the screen)
- // so move from that to top: 0px;
- wrapper.fromTo('translateY', '-100%', "0%");
- }
- else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just center it and fade it in
- var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
- // DOM WRITE
- wrapperEle.style.top = topPosition + "px";
- wrapper.fromTo('opacity', 0.01, 1);
- }
- else {
- // bottom
- // by default, it is 100% hidden (below the screen),
- // so move from that to bottom: 0px
- wrapper.fromTo('translateY', '100%', "0%");
- }
- this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(wrapper);
- };
- return ToastMdSlideIn;
- }(Transition));
- export { ToastMdSlideIn };
- var ToastMdSlideOut = (function (_super) {
- __extends(ToastMdSlideOut, _super);
- function ToastMdSlideOut() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastMdSlideOut.prototype.init = function () {
- var ele = this.leavingView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
- // top
- // reverse arguments from enter transition
- wrapper.fromTo('translateY', 0 + "%", '-100%');
- }
- else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just fade it out
- wrapper.fromTo('opacity', 0.99, 0);
- }
- else {
- // bottom
- // reverse arguments from enter transition
- wrapper.fromTo('translateY', 0 + "%", '100%');
- }
- this.easing('cubic-bezier(.36,.66,.04,1)').duration(450).add(wrapper);
- };
- return ToastMdSlideOut;
- }(Transition));
- export { ToastMdSlideOut };
- var ToastWpPopIn = (function (_super) {
- __extends(ToastWpPopIn, _super);
- function ToastWpPopIn() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastWpPopIn.prototype.init = function () {
- var ele = this.enteringView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_TOP) {
- // top
- wrapper.fromTo('opacity', 0.01, 1);
- wrapper.fromTo('scale', 1.3, 1);
- }
- else if (this.enteringView.data && this.enteringView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just center it and fade it in
- var topPosition = Math.floor(ele.clientHeight / 2 - wrapperEle.clientHeight / 2);
- // DOM WRITE
- wrapperEle.style.top = topPosition + "px";
- wrapper.fromTo('opacity', 0.01, 1);
- wrapper.fromTo('scale', 1.3, 1);
- }
- else {
- // bottom
- wrapper.fromTo('opacity', 0.01, 1);
- wrapper.fromTo('scale', 1.3, 1);
- }
- this.easing('cubic-bezier(0,0,0.05,1)').duration(200).add(wrapper);
- };
- return ToastWpPopIn;
- }(Transition));
- export { ToastWpPopIn };
- var ToastWpPopOut = (function (_super) {
- __extends(ToastWpPopOut, _super);
- function ToastWpPopOut() {
- return _super !== null && _super.apply(this, arguments) || this;
- }
- ToastWpPopOut.prototype.init = function () {
- // DOM reads
- var ele = this.leavingView.pageRef().nativeElement;
- var wrapperEle = ele.querySelector('.toast-wrapper');
- var wrapper = new Animation(this.plt, wrapperEle);
- if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_TOP) {
- // top
- // reverse arguments from enter transition
- wrapper.fromTo('opacity', 0.99, 0);
- wrapper.fromTo('scale', 1, 1.3);
- }
- else if (this.leavingView.data && this.leavingView.data.position === TOAST_POSITION_MIDDLE) {
- // Middle
- // just fade it out
- wrapper.fromTo('opacity', 0.99, 0);
- wrapper.fromTo('scale', 1, 1.3);
- }
- else {
- // bottom
- // reverse arguments from enter transition
- wrapper.fromTo('opacity', 0.99, 0);
- wrapper.fromTo('scale', 1, 1.3);
- }
- // DOM writes
- var EASE = 'ease-out';
- var DURATION = 150;
- this.easing(EASE).duration(DURATION).add(wrapper);
- };
- return ToastWpPopOut;
- }(Transition));
- export { ToastWpPopOut };
- var TOAST_POSITION_TOP = 'top';
- var TOAST_POSITION_MIDDLE = 'middle';
- //# sourceMappingURL=toast-transitions.js.map
|