1 | 'use strict';
|
2 |
|
3 | const animation = require('./animation-13cbbb20.js');
|
4 | const index = require('./index-222357e4.js');
|
5 | require('./helpers-d381ec4d.js');
|
6 | require('./index-a0a08b2a.js');
|
7 |
|
8 | const DURATION = 540;
|
9 | const getClonedElement = (tagName) => {
|
10 | return document.querySelector(`${tagName}.ion-cloned-element`);
|
11 | };
|
12 | const shadow = (el) => {
|
13 | return el.shadowRoot || el;
|
14 | };
|
15 | const getLargeTitle = (refEl) => {
|
16 | const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
|
17 | const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large';
|
18 | if (tabs != null) {
|
19 | const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
|
20 | return (activeTab != null) ? activeTab.querySelector(query) : null;
|
21 | }
|
22 | return refEl.querySelector(query);
|
23 | };
|
24 | const getBackButton = (refEl, backDirection) => {
|
25 | const tabs = (refEl.tagName === 'ION-TABS') ? refEl : refEl.querySelector('ion-tabs');
|
26 | let buttonsList = [];
|
27 | if (tabs != null) {
|
28 | const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
|
29 | if (activeTab != null) {
|
30 | buttonsList = activeTab.querySelectorAll('ion-buttons');
|
31 | }
|
32 | }
|
33 | else {
|
34 | buttonsList = refEl.querySelectorAll('ion-buttons');
|
35 | }
|
36 | for (const buttons of buttonsList) {
|
37 | const parentHeader = buttons.closest('ion-header');
|
38 | const activeHeader = parentHeader && !parentHeader.classList.contains('header-collapse-condense-inactive');
|
39 | const backButton = buttons.querySelector('ion-back-button');
|
40 | const buttonsCollapse = buttons.classList.contains('buttons-collapse');
|
41 | const startSlot = buttons.slot === 'start' || buttons.slot === '';
|
42 | if (backButton !== null && startSlot && ((buttonsCollapse && activeHeader && backDirection) || !buttonsCollapse)) {
|
43 | return backButton;
|
44 | }
|
45 | }
|
46 | return null;
|
47 | };
|
48 | const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringEl, leavingEl) => {
|
49 | const enteringBackButton = getBackButton(enteringEl, backDirection);
|
50 | const leavingLargeTitle = getLargeTitle(leavingEl);
|
51 | const enteringLargeTitle = getLargeTitle(enteringEl);
|
52 | const leavingBackButton = getBackButton(leavingEl, backDirection);
|
53 | const shouldAnimationForward = enteringBackButton !== null && leavingLargeTitle !== null && !backDirection;
|
54 | const shouldAnimationBackward = enteringLargeTitle !== null && leavingBackButton !== null && backDirection;
|
55 | if (shouldAnimationForward) {
|
56 | const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
|
57 | const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
|
58 | animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox);
|
59 | animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox);
|
60 | }
|
61 | else if (shouldAnimationBackward) {
|
62 | const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
|
63 | const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
|
64 | animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox);
|
65 | animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox);
|
66 | }
|
67 | return {
|
68 | forward: shouldAnimationForward,
|
69 | backward: shouldAnimationBackward
|
70 | };
|
71 | };
|
72 | const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, largeTitleBox, backButtonBox) => {
|
73 | const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
|
74 | const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
|
75 | const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';
|
76 | const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';
|
77 | const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
|
78 | const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';
|
79 | const FORWARD_TEXT_KEYFRAMES = [
|
80 | { offset: 0, opacity: 0, transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)` },
|
81 | { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` }
|
82 | ];
|
83 | const BACKWARD_TEXT_KEYFRAMES = [
|
84 | { offset: 0, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
|
85 | { offset: 0.6, opacity: 0 },
|
86 | { offset: 1, opacity: 0, transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)` }
|
87 | ];
|
88 | const TEXT_KEYFRAMES = (backDirection) ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
|
89 | const FORWARD_ICON_KEYFRAMES = [
|
90 | { offset: 0, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
|
91 | { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` }
|
92 | ];
|
93 | const BACKWARD_ICON_KEYFRAMES = [
|
94 | { offset: 0, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
|
95 | { offset: 0.2, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
|
96 | { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` }
|
97 | ];
|
98 | const ICON_KEYFRAMES = (backDirection) ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
|
99 | const enteringBackButtonTextAnimation = animation.createAnimation();
|
100 | const enteringBackButtonIconAnimation = animation.createAnimation();
|
101 | const clonedBackButtonEl = getClonedElement('ion-back-button');
|
102 | const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
|
103 | const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
|
104 | clonedBackButtonEl.text = backButtonEl.text;
|
105 | clonedBackButtonEl.mode = backButtonEl.mode;
|
106 | clonedBackButtonEl.icon = backButtonEl.icon;
|
107 | clonedBackButtonEl.color = backButtonEl.color;
|
108 | clonedBackButtonEl.disabled = backButtonEl.disabled;
|
109 | clonedBackButtonEl.style.setProperty('display', 'block');
|
110 | clonedBackButtonEl.style.setProperty('position', 'fixed');
|
111 | enteringBackButtonIconAnimation.addElement(backButtonIconEl);
|
112 | enteringBackButtonTextAnimation.addElement(backButtonTextEl);
|
113 | enteringBackButtonTextAnimation
|
114 | .beforeStyles({
|
115 | 'transform-origin': `${TEXT_ORIGIN_X} center`
|
116 | })
|
117 | .beforeAddWrite(() => {
|
118 | backButtonEl.style.setProperty('display', 'none');
|
119 | clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
|
120 | })
|
121 | .afterAddWrite(() => {
|
122 | backButtonEl.style.setProperty('display', '');
|
123 | clonedBackButtonEl.style.setProperty('display', 'none');
|
124 | clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
|
125 | })
|
126 | .keyframes(TEXT_KEYFRAMES);
|
127 | enteringBackButtonIconAnimation
|
128 | .beforeStyles({
|
129 | 'transform-origin': `${ICON_ORIGIN_X} center`
|
130 | })
|
131 | .keyframes(ICON_KEYFRAMES);
|
132 | rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
|
133 | };
|
134 | const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, backButtonBox) => {
|
135 | const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
|
136 | const START_TRANSLATE = (rtl) ? '-18px' : '18px';
|
137 | const ORIGIN_X = (rtl) ? 'right' : 'left';
|
138 | const BACKWARDS_KEYFRAMES = [
|
139 | { offset: 0, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
|
140 | { offset: 0.1, opacity: 0 },
|
141 | { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` }
|
142 | ];
|
143 | const FORWARDS_KEYFRAMES = [
|
144 | { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top - 2}px, 0) scale(1)` },
|
145 | { offset: 0.6, opacity: 0 },
|
146 | { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` }
|
147 | ];
|
148 | const KEYFRAMES = (backDirection) ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
|
149 | const clonedTitleEl = getClonedElement('ion-title');
|
150 | const clonedLargeTitleAnimation = animation.createAnimation();
|
151 | clonedTitleEl.innerText = largeTitleEl.innerText;
|
152 | clonedTitleEl.size = largeTitleEl.size;
|
153 | clonedTitleEl.color = largeTitleEl.color;
|
154 | clonedLargeTitleAnimation.addElement(clonedTitleEl);
|
155 | clonedLargeTitleAnimation
|
156 | .beforeStyles({
|
157 | 'transform-origin': `${ORIGIN_X} center`,
|
158 | 'height': '46px',
|
159 | 'display': '',
|
160 | 'position': 'relative',
|
161 | [ORIGIN_X]: TITLE_START_OFFSET
|
162 | })
|
163 | .beforeAddWrite(() => {
|
164 | largeTitleEl.style.setProperty('display', 'none');
|
165 | })
|
166 | .afterAddWrite(() => {
|
167 | largeTitleEl.style.setProperty('display', '');
|
168 | clonedTitleEl.style.setProperty('display', 'none');
|
169 | })
|
170 | .keyframes(KEYFRAMES);
|
171 | rootAnimation.addAnimation(clonedLargeTitleAnimation);
|
172 | };
|
173 | const iosTransitionAnimation = (navEl, opts) => {
|
174 | try {
|
175 | const EASING = 'cubic-bezier(0.32,0.72,0,1)';
|
176 | const OPACITY = 'opacity';
|
177 | const TRANSFORM = 'transform';
|
178 | const CENTER = '0%';
|
179 | const OFF_OPACITY = 0.8;
|
180 | const isRTL = navEl.ownerDocument.dir === 'rtl';
|
181 | const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
|
182 | const OFF_LEFT = isRTL ? '33%' : '-33%';
|
183 | const enteringEl = opts.enteringEl;
|
184 | const leavingEl = opts.leavingEl;
|
185 | const backDirection = (opts.direction === 'back');
|
186 | const contentEl = enteringEl.querySelector(':scope > ion-content');
|
187 | const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
|
188 | const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');
|
189 | const rootAnimation = animation.createAnimation();
|
190 | const enteringContentAnimation = animation.createAnimation();
|
191 | rootAnimation
|
192 | .addElement(enteringEl)
|
193 | .duration(opts.duration || DURATION)
|
194 | .easing(opts.easing || EASING)
|
195 | .fill('both')
|
196 | .beforeRemoveClass('ion-page-invisible');
|
197 | if (leavingEl && navEl) {
|
198 | const navDecorAnimation = animation.createAnimation();
|
199 | navDecorAnimation.addElement(navEl);
|
200 | rootAnimation.addAnimation(navDecorAnimation);
|
201 | }
|
202 | if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) {
|
203 | enteringContentAnimation.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
|
204 | }
|
205 | else {
|
206 | enteringContentAnimation.addElement(contentEl);
|
207 | enteringContentAnimation.addElement(headerEls);
|
208 | }
|
209 | rootAnimation.addAnimation(enteringContentAnimation);
|
210 | if (backDirection) {
|
211 | enteringContentAnimation
|
212 | .beforeClearStyles([OPACITY])
|
213 | .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
|
214 | .fromTo(OPACITY, OFF_OPACITY, 1);
|
215 | }
|
216 | else {
|
217 |
|
218 | enteringContentAnimation
|
219 | .beforeClearStyles([OPACITY])
|
220 | .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
|
221 | }
|
222 | if (contentEl) {
|
223 | const enteringTransitionEffectEl = shadow(contentEl).querySelector('.transition-effect');
|
224 | if (enteringTransitionEffectEl) {
|
225 | const enteringTransitionCoverEl = enteringTransitionEffectEl.querySelector('.transition-cover');
|
226 | const enteringTransitionShadowEl = enteringTransitionEffectEl.querySelector('.transition-shadow');
|
227 | const enteringTransitionEffect = animation.createAnimation();
|
228 | const enteringTransitionCover = animation.createAnimation();
|
229 | const enteringTransitionShadow = animation.createAnimation();
|
230 | enteringTransitionEffect
|
231 | .addElement(enteringTransitionEffectEl)
|
232 | .beforeStyles({ opacity: '1', display: 'block' })
|
233 | .afterStyles({ opacity: '', display: '' });
|
234 | enteringTransitionCover
|
235 | .addElement(enteringTransitionCoverEl)
|
236 | .beforeClearStyles([OPACITY])
|
237 | .fromTo(OPACITY, 0, 0.1);
|
238 | enteringTransitionShadow
|
239 | .addElement(enteringTransitionShadowEl)
|
240 | .beforeClearStyles([OPACITY])
|
241 | .fromTo(OPACITY, 0.03, 0.70);
|
242 | enteringTransitionEffect.addAnimation([enteringTransitionCover, enteringTransitionShadow]);
|
243 | enteringContentAnimation.addAnimation([enteringTransitionEffect]);
|
244 | }
|
245 | }
|
246 | const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
|
247 | const { forward, backward } = createLargeTitleTransition(rootAnimation, isRTL, backDirection, enteringEl, leavingEl);
|
248 | enteringToolBarEls.forEach(enteringToolBarEl => {
|
249 | const enteringToolBar = animation.createAnimation();
|
250 | enteringToolBar.addElement(enteringToolBarEl);
|
251 | rootAnimation.addAnimation(enteringToolBar);
|
252 | const enteringTitle = animation.createAnimation();
|
253 | enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title'));
|
254 | const enteringToolBarButtons = animation.createAnimation();
|
255 | const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
|
256 | const parentHeader = enteringToolBarEl.closest('ion-header');
|
257 | const inactiveHeader = parentHeader && parentHeader.classList.contains('header-collapse-condense-inactive');
|
258 | let buttonsToAnimate;
|
259 | if (backDirection) {
|
260 | buttonsToAnimate = buttons.filter(button => {
|
261 | const isCollapseButton = button.classList.contains('buttons-collapse');
|
262 | return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
|
263 | });
|
264 | }
|
265 | else {
|
266 | buttonsToAnimate = buttons.filter(button => !button.classList.contains('buttons-collapse'));
|
267 | }
|
268 | enteringToolBarButtons.addElement(buttonsToAnimate);
|
269 | const enteringToolBarItems = animation.createAnimation();
|
270 | enteringToolBarItems.addElement(enteringToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])'));
|
271 | const enteringToolBarBg = animation.createAnimation();
|
272 | enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background'));
|
273 | const enteringBackButton = animation.createAnimation();
|
274 | const backButtonEl = enteringToolBarEl.querySelector('ion-back-button');
|
275 | if (backButtonEl) {
|
276 | enteringBackButton.addElement(backButtonEl);
|
277 | }
|
278 | enteringToolBar.addAnimation([enteringTitle, enteringToolBarButtons, enteringToolBarItems, enteringToolBarBg, enteringBackButton]);
|
279 | enteringToolBarButtons.fromTo(OPACITY, 0.01, 1);
|
280 | enteringToolBarItems.fromTo(OPACITY, 0.01, 1);
|
281 | if (backDirection) {
|
282 | if (!inactiveHeader) {
|
283 | enteringTitle
|
284 | .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
|
285 | .fromTo(OPACITY, 0.01, 1);
|
286 | }
|
287 | enteringToolBarItems.fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`);
|
288 |
|
289 | enteringBackButton.fromTo(OPACITY, 0.01, 1);
|
290 | }
|
291 | else {
|
292 |
|
293 | if (!enteringContentHasLargeTitle) {
|
294 | enteringTitle
|
295 | .fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`)
|
296 | .fromTo(OPACITY, 0.01, 1);
|
297 | }
|
298 | enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
|
299 | enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
|
300 | const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
|
301 | if (!translucentHeader) {
|
302 | enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
|
303 | }
|
304 | else {
|
305 | enteringToolBarBg.fromTo('transform', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'), 'translateX(0px)');
|
306 | }
|
307 |
|
308 | if (!forward) {
|
309 | enteringBackButton.fromTo(OPACITY, 0.01, 1);
|
310 | }
|
311 | if (backButtonEl && !forward) {
|
312 | const enteringBackBtnText = animation.createAnimation();
|
313 | enteringBackBtnText
|
314 | .addElement(shadow(backButtonEl).querySelector('.button-text'))
|
315 | .fromTo(`transform`, (isRTL ? 'translateX(-100px)' : 'translateX(100px)'), 'translateX(0px)');
|
316 | enteringToolBar.addAnimation(enteringBackBtnText);
|
317 | }
|
318 | }
|
319 | });
|
320 |
|
321 | if (leavingEl) {
|
322 | const leavingContent = animation.createAnimation();
|
323 | const leavingContentEl = leavingEl.querySelector(':scope > ion-content');
|
324 | const leavingToolBarEls = leavingEl.querySelectorAll(':scope > ion-header > ion-toolbar');
|
325 | const leavingHeaderEls = leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
|
326 | if (!leavingContentEl && leavingToolBarEls.length === 0 && leavingHeaderEls.length === 0) {
|
327 | leavingContent.addElement(leavingEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
|
328 | }
|
329 | else {
|
330 | leavingContent.addElement(leavingContentEl);
|
331 | leavingContent.addElement(leavingHeaderEls);
|
332 | }
|
333 | rootAnimation.addAnimation(leavingContent);
|
334 | if (backDirection) {
|
335 |
|
336 | leavingContent
|
337 | .beforeClearStyles([OPACITY])
|
338 | .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
|
339 | const leavingPage = index.getIonPageElement(leavingEl);
|
340 | rootAnimation.afterAddWrite(() => {
|
341 | if (rootAnimation.getDirection() === 'normal') {
|
342 | leavingPage.style.setProperty('display', 'none');
|
343 | }
|
344 | });
|
345 | }
|
346 | else {
|
347 |
|
348 | leavingContent
|
349 | .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
|
350 | .fromTo(OPACITY, 1, OFF_OPACITY);
|
351 | }
|
352 | if (leavingContentEl) {
|
353 | const leavingTransitionEffectEl = shadow(leavingContentEl).querySelector('.transition-effect');
|
354 | if (leavingTransitionEffectEl) {
|
355 | const leavingTransitionCoverEl = leavingTransitionEffectEl.querySelector('.transition-cover');
|
356 | const leavingTransitionShadowEl = leavingTransitionEffectEl.querySelector('.transition-shadow');
|
357 | const leavingTransitionEffect = animation.createAnimation();
|
358 | const leavingTransitionCover = animation.createAnimation();
|
359 | const leavingTransitionShadow = animation.createAnimation();
|
360 | leavingTransitionEffect
|
361 | .addElement(leavingTransitionEffectEl)
|
362 | .beforeStyles({ opacity: '1', display: 'block' })
|
363 | .afterStyles({ opacity: '', display: '' });
|
364 | leavingTransitionCover
|
365 | .addElement(leavingTransitionCoverEl)
|
366 | .beforeClearStyles([OPACITY])
|
367 | .fromTo(OPACITY, 0.1, 0);
|
368 | leavingTransitionShadow
|
369 | .addElement(leavingTransitionShadowEl)
|
370 | .beforeClearStyles([OPACITY])
|
371 | .fromTo(OPACITY, 0.70, 0.03);
|
372 | leavingTransitionEffect.addAnimation([leavingTransitionCover, leavingTransitionShadow]);
|
373 | leavingContent.addAnimation([leavingTransitionEffect]);
|
374 | }
|
375 | }
|
376 | leavingToolBarEls.forEach(leavingToolBarEl => {
|
377 | const leavingToolBar = animation.createAnimation();
|
378 | leavingToolBar.addElement(leavingToolBarEl);
|
379 | const leavingTitle = animation.createAnimation();
|
380 | leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title'));
|
381 | const leavingToolBarButtons = animation.createAnimation();
|
382 | const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
|
383 | const parentHeader = leavingToolBarEl.closest('ion-header');
|
384 | const inactiveHeader = parentHeader && parentHeader.classList.contains('header-collapse-condense-inactive');
|
385 | const buttonsToAnimate = Array.from(buttons).filter(button => {
|
386 | const isCollapseButton = button.classList.contains('buttons-collapse');
|
387 | return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
|
388 | });
|
389 | leavingToolBarButtons.addElement(buttonsToAnimate);
|
390 | const leavingToolBarItems = animation.createAnimation();
|
391 | const leavingToolBarItemEls = leavingToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])');
|
392 | if (leavingToolBarItemEls.length > 0) {
|
393 | leavingToolBarItems.addElement(leavingToolBarItemEls);
|
394 | }
|
395 | const leavingToolBarBg = animation.createAnimation();
|
396 | leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background'));
|
397 | const leavingBackButton = animation.createAnimation();
|
398 | const backButtonEl = leavingToolBarEl.querySelector('ion-back-button');
|
399 | if (backButtonEl) {
|
400 | leavingBackButton.addElement(backButtonEl);
|
401 | }
|
402 | leavingToolBar.addAnimation([leavingTitle, leavingToolBarButtons, leavingToolBarItems, leavingBackButton, leavingToolBarBg]);
|
403 | rootAnimation.addAnimation(leavingToolBar);
|
404 |
|
405 | leavingBackButton.fromTo(OPACITY, 0.99, 0);
|
406 | leavingToolBarButtons.fromTo(OPACITY, 0.99, 0);
|
407 | leavingToolBarItems.fromTo(OPACITY, 0.99, 0);
|
408 | if (backDirection) {
|
409 | if (!inactiveHeader) {
|
410 |
|
411 | leavingTitle
|
412 | .fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'))
|
413 | .fromTo(OPACITY, 0.99, 0);
|
414 | }
|
415 | leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
|
416 | leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
|
417 |
|
418 |
|
419 | const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
|
420 | if (!translucentHeader) {
|
421 | leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
|
422 | }
|
423 | else {
|
424 | leavingToolBarBg.fromTo('transform', 'translateX(0px)', (isRTL ? 'translateX(-100%)' : 'translateX(100%)'));
|
425 | }
|
426 | if (backButtonEl && !backward) {
|
427 | const leavingBackBtnText = animation.createAnimation();
|
428 | leavingBackBtnText
|
429 | .addElement(shadow(backButtonEl).querySelector('.button-text'))
|
430 | .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
|
431 | leavingToolBar.addAnimation(leavingBackBtnText);
|
432 | }
|
433 | }
|
434 | else {
|
435 |
|
436 | if (!inactiveHeader) {
|
437 | leavingTitle
|
438 | .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
|
439 | .fromTo(OPACITY, 0.99, 0)
|
440 | .afterClearStyles([TRANSFORM, OPACITY]);
|
441 | }
|
442 | leavingToolBarItems
|
443 | .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
|
444 | .afterClearStyles([TRANSFORM, OPACITY]);
|
445 | leavingBackButton.afterClearStyles([OPACITY]);
|
446 | leavingTitle.afterClearStyles([OPACITY]);
|
447 | leavingToolBarButtons.afterClearStyles([OPACITY]);
|
448 | }
|
449 | });
|
450 | }
|
451 | return rootAnimation;
|
452 | }
|
453 | catch (err) {
|
454 | throw err;
|
455 | }
|
456 | };
|
457 |
|
458 | exports.iosTransitionAnimation = iosTransitionAnimation;
|
459 | exports.shadow = shadow;
|