UNPKG

7.05 kBJavaScriptView Raw
1'use strict';
2
3const index = require('./index-a0a08b2a.js');
4const helpers = require('./helpers-d381ec4d.js');
5
6const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
7const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
8const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
9const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
10const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
11
12const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-ce21ff9f.js'); });
13const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-59017746.js'); });
14const transition = (opts) => {
15 return new Promise((resolve, reject) => {
16 index.writeTask(() => {
17 beforeTransition(opts);
18 runTransition(opts).then(result => {
19 if (result.animation) {
20 result.animation.destroy();
21 }
22 afterTransition(opts);
23 resolve(result);
24 }, error => {
25 afterTransition(opts);
26 reject(error);
27 });
28 });
29 });
30};
31const beforeTransition = (opts) => {
32 const enteringEl = opts.enteringEl;
33 const leavingEl = opts.leavingEl;
34 setZIndex(enteringEl, leavingEl, opts.direction);
35 if (opts.showGoBack) {
36 enteringEl.classList.add('can-go-back');
37 }
38 else {
39 enteringEl.classList.remove('can-go-back');
40 }
41 setPageHidden(enteringEl, false);
42 /**
43 * When transitioning, the page should not
44 * respond to click events. This resolves small
45 * issues like users double tapping the ion-back-button.
46 * These pointer events are removed in `afterTransition`.
47 */
48 enteringEl.style.setProperty('pointer-events', 'none');
49 if (leavingEl) {
50 setPageHidden(leavingEl, false);
51 leavingEl.style.setProperty('pointer-events', 'none');
52 }
53};
54const runTransition = async (opts) => {
55 const animationBuilder = await getAnimationBuilder(opts);
56 const ani = (animationBuilder && index.Build.isBrowser)
57 ? animation(animationBuilder, opts)
58 : noAnimation(opts); // fast path for no animation
59 return ani;
60};
61const afterTransition = (opts) => {
62 const enteringEl = opts.enteringEl;
63 const leavingEl = opts.leavingEl;
64 enteringEl.classList.remove('ion-page-invisible');
65 enteringEl.style.removeProperty('pointer-events');
66 if (leavingEl !== undefined) {
67 leavingEl.classList.remove('ion-page-invisible');
68 leavingEl.style.removeProperty('pointer-events');
69 }
70};
71const getAnimationBuilder = async (opts) => {
72 if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
73 return undefined;
74 }
75 if (opts.animationBuilder) {
76 return opts.animationBuilder;
77 }
78 const getAnimation = (opts.mode === 'ios')
79 ? (await iosTransitionAnimation()).iosTransitionAnimation
80 : (await mdTransitionAnimation()).mdTransitionAnimation;
81 return getAnimation;
82};
83const animation = async (animationBuilder, opts) => {
84 await waitForReady(opts, true);
85 const trans = animationBuilder(opts.baseEl, opts);
86 fireWillEvents(opts.enteringEl, opts.leavingEl);
87 const didComplete = await playTransition(trans, opts);
88 if (opts.progressCallback) {
89 opts.progressCallback(undefined);
90 }
91 if (didComplete) {
92 fireDidEvents(opts.enteringEl, opts.leavingEl);
93 }
94 return {
95 hasCompleted: didComplete,
96 animation: trans
97 };
98};
99const noAnimation = async (opts) => {
100 const enteringEl = opts.enteringEl;
101 const leavingEl = opts.leavingEl;
102 await waitForReady(opts, false);
103 fireWillEvents(enteringEl, leavingEl);
104 fireDidEvents(enteringEl, leavingEl);
105 return {
106 hasCompleted: true
107 };
108};
109const waitForReady = async (opts, defaultDeep) => {
110 const deep = opts.deepWait !== undefined ? opts.deepWait : defaultDeep;
111 const promises = deep ? [
112 deepReady(opts.enteringEl),
113 deepReady(opts.leavingEl),
114 ] : [
115 shallowReady(opts.enteringEl),
116 shallowReady(opts.leavingEl),
117 ];
118 await Promise.all(promises);
119 await notifyViewReady(opts.viewIsReady, opts.enteringEl);
120};
121const notifyViewReady = async (viewIsReady, enteringEl) => {
122 if (viewIsReady) {
123 await viewIsReady(enteringEl);
124 }
125};
126const playTransition = (trans, opts) => {
127 const progressCallback = opts.progressCallback;
128 const promise = new Promise(resolve => {
129 trans.onFinish((currentStep) => resolve(currentStep === 1));
130 });
131 // cool, let's do this, start the transition
132 if (progressCallback) {
133 // this is a swipe to go back, just get the transition progress ready
134 // kick off the swipe animation start
135 trans.progressStart(true);
136 progressCallback(trans);
137 }
138 else {
139 // only the top level transition should actually start "play"
140 // kick it off and let it play through
141 // ******** DOM WRITE ****************
142 trans.play();
143 }
144 // create a callback for when the animation is done
145 return promise;
146};
147const fireWillEvents = (enteringEl, leavingEl) => {
148 lifecycle(leavingEl, LIFECYCLE_WILL_LEAVE);
149 lifecycle(enteringEl, LIFECYCLE_WILL_ENTER);
150};
151const fireDidEvents = (enteringEl, leavingEl) => {
152 lifecycle(enteringEl, LIFECYCLE_DID_ENTER);
153 lifecycle(leavingEl, LIFECYCLE_DID_LEAVE);
154};
155const lifecycle = (el, eventName) => {
156 if (el) {
157 const ev = new CustomEvent(eventName, {
158 bubbles: false,
159 cancelable: false,
160 });
161 el.dispatchEvent(ev);
162 }
163};
164const shallowReady = (el) => {
165 if (el) {
166 return new Promise(resolve => helpers.componentOnReady(el, resolve));
167 }
168 return Promise.resolve();
169};
170const deepReady = async (el) => {
171 const element = el;
172 if (element) {
173 if (element.componentOnReady != null) {
174 const stencilEl = await element.componentOnReady();
175 if (stencilEl != null) {
176 return;
177 }
178 }
179 await Promise.all(Array.from(element.children).map(deepReady));
180 }
181};
182const setPageHidden = (el, hidden) => {
183 if (hidden) {
184 el.setAttribute('aria-hidden', 'true');
185 el.classList.add('ion-page-hidden');
186 }
187 else {
188 el.hidden = false;
189 el.removeAttribute('aria-hidden');
190 el.classList.remove('ion-page-hidden');
191 }
192};
193const setZIndex = (enteringEl, leavingEl, direction) => {
194 if (enteringEl !== undefined) {
195 enteringEl.style.zIndex = (direction === 'back')
196 ? '99'
197 : '101';
198 }
199 if (leavingEl !== undefined) {
200 leavingEl.style.zIndex = '100';
201 }
202};
203const getIonPageElement = (element) => {
204 if (element.classList.contains('ion-page')) {
205 return element;
206 }
207 const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
208 if (ionPage) {
209 return ionPage;
210 }
211 // idk, return the original element so at least something animates and we don't have a null pointer
212 return element;
213};
214
215exports.LIFECYCLE_DID_ENTER = LIFECYCLE_DID_ENTER;
216exports.LIFECYCLE_DID_LEAVE = LIFECYCLE_DID_LEAVE;
217exports.LIFECYCLE_WILL_ENTER = LIFECYCLE_WILL_ENTER;
218exports.LIFECYCLE_WILL_LEAVE = LIFECYCLE_WILL_LEAVE;
219exports.LIFECYCLE_WILL_UNLOAD = LIFECYCLE_WILL_UNLOAD;
220exports.deepReady = deepReady;
221exports.getIonPageElement = getIonPageElement;
222exports.lifecycle = lifecycle;
223exports.setPageHidden = setPageHidden;
224exports.transition = transition;