196 lines
6.6 KiB
JavaScript
Executable file
196 lines
6.6 KiB
JavaScript
Executable file
import { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
|
|
import { b as getIonMode, c as config } from './ionic-global.js';
|
|
import { g as getTimeGivenProgression } from './cubic-bezier.js';
|
|
import { a as attachComponent, d as detachComponent } from './framework-delegate.js';
|
|
import { t as transition } from './index4.js';
|
|
|
|
const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
|
|
|
|
const RouterOutlet = class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.__registerHost();
|
|
attachShadow(this);
|
|
this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
|
|
this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
|
|
this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
|
|
this.gestureOrAnimationInProgress = false;
|
|
/**
|
|
* The mode determines which platform styles to use.
|
|
*/
|
|
this.mode = getIonMode(this);
|
|
/**
|
|
* If `true`, the router-outlet should animate the transition of components.
|
|
*/
|
|
this.animated = true;
|
|
}
|
|
swipeHandlerChanged() {
|
|
if (this.gesture) {
|
|
this.gesture.enable(this.swipeHandler !== undefined);
|
|
}
|
|
}
|
|
async connectedCallback() {
|
|
const onStart = () => {
|
|
this.gestureOrAnimationInProgress = true;
|
|
if (this.swipeHandler) {
|
|
this.swipeHandler.onStart();
|
|
}
|
|
};
|
|
this.gesture = (await import('./swipe-back.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
|
|
if (this.ani) {
|
|
this.ani.onFinish(() => {
|
|
this.gestureOrAnimationInProgress = false;
|
|
if (this.swipeHandler) {
|
|
this.swipeHandler.onEnd(shouldComplete);
|
|
}
|
|
}, { oneTimeCallback: true });
|
|
// Account for rounding errors in JS
|
|
let newStepValue = (shouldComplete) ? -0.001 : 0.001;
|
|
/**
|
|
* Animation will be reversed here, so need to
|
|
* reverse the easing curve as well
|
|
*
|
|
* Additionally, we need to account for the time relative
|
|
* to the new easing curve, as `stepValue` is going to be given
|
|
* in terms of a linear curve.
|
|
*/
|
|
if (!shouldComplete) {
|
|
this.ani.easing('cubic-bezier(1, 0, 0.68, 0.28)');
|
|
newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], step)[0];
|
|
}
|
|
else {
|
|
newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], step)[0];
|
|
}
|
|
this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
|
|
}
|
|
else {
|
|
this.gestureOrAnimationInProgress = false;
|
|
}
|
|
});
|
|
this.swipeHandlerChanged();
|
|
}
|
|
componentWillLoad() {
|
|
this.ionNavWillLoad.emit();
|
|
}
|
|
disconnectedCallback() {
|
|
if (this.gesture) {
|
|
this.gesture.destroy();
|
|
this.gesture = undefined;
|
|
}
|
|
}
|
|
/** @internal */
|
|
async commit(enteringEl, leavingEl, opts) {
|
|
const unlock = await this.lock();
|
|
let changed = false;
|
|
try {
|
|
changed = await this.transition(enteringEl, leavingEl, opts);
|
|
}
|
|
catch (e) {
|
|
console.error(e);
|
|
}
|
|
unlock();
|
|
return changed;
|
|
}
|
|
/** @internal */
|
|
async setRouteId(id, params, direction, animation) {
|
|
const changed = await this.setRoot(id, params, {
|
|
duration: direction === 'root' ? 0 : undefined,
|
|
direction: direction === 'back' ? 'back' : 'forward',
|
|
animationBuilder: animation
|
|
});
|
|
return {
|
|
changed,
|
|
element: this.activeEl
|
|
};
|
|
}
|
|
/** @internal */
|
|
async getRouteId() {
|
|
const active = this.activeEl;
|
|
return active ? {
|
|
id: active.tagName,
|
|
element: active,
|
|
} : undefined;
|
|
}
|
|
async setRoot(component, params, opts) {
|
|
if (this.activeComponent === component) {
|
|
return false;
|
|
}
|
|
// attach entering view to DOM
|
|
const leavingEl = this.activeEl;
|
|
const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'ion-page-invisible'], params);
|
|
this.activeComponent = component;
|
|
this.activeEl = enteringEl;
|
|
// commit animation
|
|
await this.commit(enteringEl, leavingEl, opts);
|
|
await detachComponent(this.delegate, leavingEl);
|
|
return true;
|
|
}
|
|
async transition(enteringEl, leavingEl, opts = {}) {
|
|
if (leavingEl === enteringEl) {
|
|
return false;
|
|
}
|
|
// emit nav will change event
|
|
this.ionNavWillChange.emit();
|
|
const { el, mode } = this;
|
|
const animated = this.animated && config.getBoolean('animated', true);
|
|
const animationBuilder = opts.animationBuilder || this.animation || config.get('navAnimation');
|
|
await transition(Object.assign(Object.assign({ mode,
|
|
animated,
|
|
enteringEl,
|
|
leavingEl, baseEl: el, progressCallback: (opts.progressAnimation
|
|
? ani => {
|
|
/**
|
|
* Because this progress callback is called asynchronously
|
|
* it is possible for the gesture to start and end before
|
|
* the animation is ever set. In that scenario, we should
|
|
* immediately call progressEnd so that the transition promise
|
|
* resolves and the gesture does not get locked up.
|
|
*/
|
|
if (ani !== undefined && !this.gestureOrAnimationInProgress) {
|
|
this.gestureOrAnimationInProgress = true;
|
|
ani.onFinish(() => {
|
|
this.gestureOrAnimationInProgress = false;
|
|
if (this.swipeHandler) {
|
|
this.swipeHandler.onEnd(false);
|
|
}
|
|
}, { oneTimeCallback: true });
|
|
/**
|
|
* Playing animation to beginning
|
|
* with a duration of 0 prevents
|
|
* any flickering when the animation
|
|
* is later cleaned up.
|
|
*/
|
|
ani.progressEnd(0, 0, 0);
|
|
}
|
|
else {
|
|
this.ani = ani;
|
|
}
|
|
}
|
|
: undefined) }, opts), { animationBuilder }));
|
|
// emit nav changed event
|
|
this.ionNavDidChange.emit();
|
|
return true;
|
|
}
|
|
async lock() {
|
|
const p = this.waitPromise;
|
|
let resolve;
|
|
this.waitPromise = new Promise(r => resolve = r);
|
|
if (p !== undefined) {
|
|
await p;
|
|
}
|
|
return resolve;
|
|
}
|
|
render() {
|
|
return (h("slot", null));
|
|
}
|
|
get el() { return this; }
|
|
static get watchers() { return {
|
|
"swipeHandler": ["swipeHandlerChanged"]
|
|
}; }
|
|
static get style() { return routeOutletCss; }
|
|
};
|
|
|
|
const IonRouterOutlet = /*@__PURE__*/proxyCustomElement(RouterOutlet, [1,"ion-router-outlet",{"mode":[1025],"delegate":[16],"animated":[4],"animation":[16],"swipeHandler":[16]}]);
|
|
|
|
export { IonRouterOutlet };
|