@ionic/core
Version:
Base components for Ionic
171 lines (170 loc) • 5.59 kB
JavaScript
import { attachComponent, detachComponent } from '../../utils/framework-delegate';
import { transition } from '../../utils/transition';
export class RouterOutlet {
constructor() {
this.animated = true;
}
swipeHandlerChanged() {
if (this.gesture) {
this.gesture.setDisabled(this.swipeHandler === undefined);
}
}
componentWillLoad() {
this.ionNavWillLoad.emit();
}
async componentDidLoad() {
this.gesture = (await import('../../utils/gesture/swipe-back')).createSwipeBackGesture(this.el, this.queue, () => !!this.swipeHandler && this.swipeHandler.canStart(), () => this.swipeHandler && this.swipeHandler.onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
if (this.ani) {
this.ani.progressEnd(shouldComplete, step, dur);
}
if (this.swipeHandler) {
this.swipeHandler.onEnd(shouldComplete);
}
});
this.swipeHandlerChanged();
}
componentDidUnload() {
this.activeEl = this.activeComponent = undefined;
if (this.gesture) {
this.gesture.destroy();
this.gesture = undefined;
}
}
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;
}
async setRouteId(id, params, direction) {
const changed = await this.setRoot(id, params, {
duration: direction === 'root' ? 0 : undefined,
direction: direction === 'back' ? 'back' : 'forward',
});
return {
changed,
element: this.activeEl
};
}
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;
}
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;
await this.commit(enteringEl, leavingEl, opts);
await detachComponent(this.delegate, leavingEl);
return true;
}
async transition(enteringEl, leavingEl, opts = {}) {
if (leavingEl === enteringEl) {
return false;
}
this.ionNavWillChange.emit();
const { mode, queue, win, el } = this;
const animated = this.animated && this.config.getBoolean('animated', true);
const animationBuilder = this.animation || opts.animationBuilder || this.config.get('navAnimation');
await transition(Object.assign({ mode,
queue,
animated,
animationBuilder, window: win, enteringEl,
leavingEl, baseEl: el, progressCallback: (opts.progressAnimation
? ani => this.ani = ani
: undefined) }, opts));
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));
}
static get is() { return "ion-router-outlet"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"animated": {
"type": Boolean,
"attr": "animated"
},
"animation": {
"type": "Any",
"attr": "animation"
},
"commit": {
"method": true
},
"config": {
"context": "config"
},
"delegate": {
"type": "Any",
"attr": "delegate"
},
"el": {
"elementRef": true
},
"getRouteId": {
"method": true
},
"mode": {
"type": String,
"attr": "mode"
},
"queue": {
"context": "queue"
},
"setRouteId": {
"method": true
},
"swipeHandler": {
"type": "Any",
"attr": "swipe-handler",
"watchCallbacks": ["swipeHandlerChanged"]
},
"win": {
"context": "window"
}
}; }
static get events() { return [{
"name": "ionNavWillLoad",
"method": "ionNavWillLoad",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionNavWillChange",
"method": "ionNavWillChange",
"bubbles": false,
"cancelable": true,
"composed": true
}, {
"name": "ionNavDidChange",
"method": "ionNavDidChange",
"bubbles": false,
"cancelable": true,
"composed": true
}]; }
static get style() { return "/**style-placeholder:ion-router-outlet:**/"; }
}