iportal
Version:
web-portal
1,359 lines (1,336 loc) • 91 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
class EventProvider {
constructor() {
this._events = {};
}
on(type, fn) {
const types = type.split(' ');
types.forEach((typ) => {
if (!this._events[typ]) {
this._events[typ] = [fn];
}
else {
this._events[typ].push(fn);
}
});
return this;
}
one(type, fn) {
const once = (...args) => {
fn.apply(null, args);
this.off(type, once);
};
const types = type.split(' ');
types.forEach((typ) => {
if (!this._events[typ]) {
this._events[typ] = [once];
}
else {
this._events[typ].push(once);
}
});
return this;
}
off(type, fn) {
const types = type.split(' ');
types.forEach((typ) => {
if (!this._events[typ])
return;
const index = this._events[typ].indexOf(fn);
if (index > -1) {
this._events[typ].splice(index, 1);
}
});
return this;
}
trigger(type, ...args) {
if (!this._events[type])
return;
this._events[type].forEach(fn => {
try {
fn.apply(null, args);
}
catch (e) {
this.off(type, fn);
this.trigger('error', `Error by event[${type}]`);
}
});
return this;
}
}
class ModuleProptey extends EventProvider {
constructor(id, model, application) {
super();
this.param = {};
this.view = null;
this.events = {
transformStart: () => undefined,
transformEnd: () => undefined,
start: () => undefined,
load: () => undefined,
loadError: () => undefined,
preload: () => undefined,
destroy: () => undefined
};
this.darkTask = [];
this.createTime = Date.now();
this.transient = false;
this.config = {
title: '',
rel: 'module',
level: 0,
source: {},
prerender: [],
apply: ['smart-setTimeout', 'link-in-new-window', ['tap-highlight', 'tap-highlight data-appeared']],
free: true,
background: 'auto'
};
this.components = [];
this.resources = {
script: [],
image: [],
worker: [],
video: [],
audio: [],
font: [],
style: []
};
this.elements = {
container: document.body
};
this.id = id;
this.param = {};
this.model = model;
this.application = application;
const { config, resources, events, components } = this.setDefaultConfig(model);
Object.assign(this.config, config);
Object.assign(this.resources, resources);
Object.assign(this.events, events);
if (components) {
this.components = components;
}
}
setDefaultConfig(manifest) {
var _a, _b, _c, _d;
if (((_a = manifest.config) === null || _a === void 0 ? void 0 : _a.rel) === 'frameworks') ;
if ((_b = manifest.config) === null || _b === void 0 ? void 0 : _b.portal) {
if (!manifest.config.free) {
console.error('[Module.config[free & portal]] conflit! [free] must be true when [portal] sets true');
}
}
if (((_d = (_c = manifest.config) === null || _c === void 0 ? void 0 : _c.level) !== null && _d !== void 0 ? _d : 0) > 10000) {
console.error('[Module.config.level] needs to be less than 9999!');
}
return manifest;
}
}
class ModuleState extends ModuleProptey {
constructor(id, model, application) {
var _a;
super(id, model, application);
this.viewTypeCache = null;
this.visibility = false;
this.status = {
init: false,
preload: false,
prefetch: false,
prerender: false
};
this.nowViewIndex = (_a = this.config.level) !== null && _a !== void 0 ? _a : 0;
}
get sameOrigin() {
if (!this.uri) {
if (this.config.sandbox === undefined)
return true;
if (this.config.sandbox.includes('allow-same-origin'))
return true;
return false;
}
const link = new URL(this.uri, window.location.toString());
const isSameOrigin = link.host === location.host;
return isSameOrigin;
}
get level() {
var _a;
return (_a = this.config.level) !== null && _a !== void 0 ? _a : 0;
}
get viewIndex() {
var _a, _b;
const level = (((_a = this.application.preActiveModule) === null || _a === void 0 ? void 0 : _a.nowViewIndex) || 1) + ((_b = this.config.level) !== null && _b !== void 0 ? _b : 1);
this.nowViewIndex = level;
const baseLevel = this.config.free ? 20000 : 10000;
return baseLevel + level;
}
get rel() {
if (this.id === 'system')
return 'system';
if (this.id === 'frameworks')
return 'frameworks';
return this.config.rel || 'module';
}
get uri() {
var _a, _b;
return ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.src) || '';
}
get viewType() {
var _a;
if (this.viewTypeCache)
return this.viewTypeCache;
if (this.rel !== 'module')
return this.viewTypeCache = 'shadow';
if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.portal) || !this.uri)
return this.viewTypeCache = 'iframe';
return this.viewTypeCache = ('HTMLPortalElement' in window) && this.sameOrigin ? 'portal' : 'iframe';
}
setActionOrigin(origin) {
this.actionOriginMap = origin;
}
getActionOrigin() {
return this.actionOriginMap;
}
}
class ModuleMount extends ModuleState {
constructor(id, model, application) {
super(id, model, application);
}
timeTick() {
if (Date.now() - this.createTime > (this.config.timeout || 3600000)) {
if (this.view)
this.destroy();
}
}
show() {
var _a;
if (this.viewType === 'portal') {
(_a = this.view) === null || _a === void 0 ? void 0 : _a.activate();
return;
}
if (this.viewType !== 'iframe')
return;
for (const task of this.darkTask) {
task();
}
this.darkTask = [];
this.visibility = true;
this.trigger('visible');
this.triggerWindow('module-visible', 'moduleVisibilityState', 'visible');
}
hide() {
this.visibility = false;
this.trigger('hidden');
this.triggerWindow('module-hidden', 'moduleVisibilityState', 'hidden');
}
willShow() {
this.trigger('willShow');
this.triggerWindow('module-will-show', 'moduleVisibilityState', 'willVisible');
}
willHide() {
this.trigger('willHidden');
this.triggerWindow('module-will-hidden', 'moduleVisibilityState', 'willHidden');
}
triggerWindow(type, attributeName, attributeValue) {
var _a;
if (this.viewType !== 'iframe')
return;
const sandbox = this.view;
const contentWindow = (_a = sandbox === null || sandbox === void 0 ? void 0 : sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.window;
if (contentWindow) {
contentWindow.postMessage({
type,
historyDirection: this.application.transform.historyDirection
}, '*');
if (this.sameOrigin && attributeName) {
contentWindow[attributeName] = attributeValue;
}
}
}
mediaGuard() {
return new Promise((resolve, reject) => {
var _a;
try {
if (this.viewType !== 'iframe')
return resolve();
if (this.sandbox === undefined)
return resolve();
const view = this.view;
const contentDocumentElement = (_a = view.contentDocument) === null || _a === void 0 ? void 0 : _a.documentElement;
if (!contentDocumentElement)
return reject();
if (contentDocumentElement.getElementsByTagName('video')[0]) {
const videos = contentDocumentElement.querySelectorAll('video');
for (const index in videos) {
const video = videos[index];
if (!(video === null || video === void 0 ? void 0 : video.paused)) {
video.pause();
this.darkTask.push(() => {
video.play();
});
}
}
}
if (contentDocumentElement.getElementsByTagName('audio')[0]) {
const audios = contentDocumentElement.querySelectorAll('audio');
for (const index in audios) {
const audio = audios[index];
if (!(audio === null || audio === void 0 ? void 0 : audio.paused)) {
audio.pause();
this.darkTask.push(() => {
audio.play();
});
}
}
}
}
catch (error) {
reject();
}
});
}
destroy() {
return new Promise((resolve, reject) => {
var _a, _b, _c;
if (this.rel !== 'module')
return reject();
if (((_a = this.application.transform) === null || _a === void 0 ? void 0 : _a.id) === this.id)
return reject();
if (this.viewType === 'iframe')
this.unload().catch(reject);
(_b = this.elements.container.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(this.elements.container);
this.status.prefetch = this.status.preload = this.status.prerender = false;
this.view = null;
this.status.init = false;
this.darkTask = [];
(_c = this.events) === null || _c === void 0 ? void 0 : _c.destroy.bind(this)();
this.trigger('destroy');
resolve();
});
}
observer(change) {
var _a;
const target = this.sandbox ? (_a = this.sandbox.contentDocument) === null || _a === void 0 ? void 0 : _a.documentElement : this.view;
if (!target)
return;
const observer = new MutationObserver((record) => {
change(record);
});
observer.observe(target, {
subtree: true,
attributes: true,
childList: true,
characterData: true,
attributeOldValue: true,
characterDataOldValue: true
});
return observer;
}
fate() {
return new Promise((resolve, reject) => {
var _a;
if (this.rel !== 'module')
return reject();
if (this.config.background === true)
return reject();
if (this.config.background === false)
return resolve();
if (this.viewType !== 'iframe')
return reject();
if (this.sandbox === undefined)
return reject();
if (this.sameOrigin === false)
return resolve();
const view = this.view;
try {
const contentDocumentElement = (_a = view.contentDocument) === null || _a === void 0 ? void 0 : _a.documentElement;
if (!contentDocumentElement)
return reject();
if (this.config.mediaGuard !== false) {
this.mediaGuard().catch(resolve);
}
if (contentDocumentElement.getElementsByTagName('object')[0])
return resolve();
if (contentDocumentElement.getElementsByTagName('embed')[0])
return resolve();
if (contentDocumentElement.getElementsByTagName('applet')[0])
return resolve();
if (contentDocumentElement.getElementsByTagName('iframe')[0])
return resolve();
if (contentDocumentElement) {
const counter = {
times: 0
};
const observer = this.observer(() => {
counter.times++;
if (counter.times > 1000) {
resolve();
this.mutationObserver.disconnect();
}
});
if (!observer)
return;
this.mutationObserver = observer;
setTimeout(() => {
if (counter.times > 10)
resolve();
}, 3000);
}
else {
reject();
}
}
catch (error) {
reject();
}
});
}
unfate() {
var _a;
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
unload() {
return new Promise((resolve, reject) => {
var _a, _b;
this.unfate();
const sandbox = this.view;
if (!sandbox)
return resolve();
sandbox.style.display = 'none';
sandbox.src = 'about:blank';
try {
const contentWindow = (_a = sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.window;
const contentDocument = sandbox.contentDocument;
contentWindow === null || contentWindow === void 0 ? void 0 : contentWindow.location.reload();
contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.open();
contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.write('');
contentDocument === null || contentDocument === void 0 ? void 0 : contentDocument.close();
}
catch (error) {
reject();
}
(_b = sandbox.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(sandbox);
resolve();
});
}
}
class ModulePrefetch extends ModuleMount {
constructor(id, model, application) {
super(id, model, application);
}
prefetch() {
return new Promise((resolve, reject) => {
Promise.all([
this.prefetchStatic(this.resources.script, 'script'),
this.prefetchStatic(this.resources.image, 'image'),
this.prefetchStatic(this.resources.worker, 'worker'),
this.prefetchStatic(this.resources.video, 'video'),
this.prefetchStatic(this.resources.audio, 'audio'),
this.prefetchStatic(this.resources.font, 'font'),
this.prefetchStatic(this.resources.style, 'style')
]).then(() => {
this.status.prefetch = true;
resolve(true);
}).catch(reject);
});
}
prefetchStatic(list = [], as = 'script') {
return new Promise((resolve, reject) => {
Promise.all([].concat(list).map(url => this.beforehandLink(url, 'preload', as))).then(resolve).catch(reject);
});
}
beforehandLink(url, rel = 'preload', as = 'worker | video | audio | font | script | style | image | document') {
if (!url)
return Promise.resolve();
return new Promise((resolve, reject) => {
var _a;
const link = document.createElement('link');
link.rel = rel;
link.href = url;
link.as = as;
link.onload = resolve;
link.onerror = reject;
if (!((_a = link.relList) === null || _a === void 0 ? void 0 : _a.supports(rel))) {
return resolve('notSupports');
}
document.getElementsByTagName('head')[0].appendChild(link);
resolve();
});
}
}
class Sandbox {
constructor(src, setting) {
const sandbox = this.sandbox = document.createElement('iframe');
sandbox.src = src || 'about:blank';
sandbox.style.display = 'none';
if (setting !== undefined) {
this.set(setting);
}
return this;
}
set src(src) {
this.sandbox.src = src;
}
set unload(beforeunload) {
this.contentWindow.onbeforeunload = beforeunload;
}
set onload(onload) {
this.sandbox.onload = onload;
}
set onerror(onerror) {
this.sandbox.onerror = onerror;
}
set(allow) {
this.sandbox.setAttribute('sandbox', allow);
}
reset(allow) {
this.exit();
this.set(allow);
return this;
}
open() {
this.contentDocument.open();
return this;
}
write(context = '<head><meta charset="utf-8"></head>') {
this.contentDocument.write(context);
return this;
}
close() {
this.contentDocument.close();
return this;
}
append(context, container) {
this.enter(container);
this.attach();
this.open();
this.write(context);
this.close();
}
enter(container) {
container.appendChild(this.sandbox);
}
attach() {
const contentWindow = this.sandbox.contentWindow;
const contentDocument = this.sandbox.contentDocument;
this.contentWindow = contentWindow;
this.contentDocument = contentDocument;
}
exit() {
const parentNode = this.sandbox.parentNode;
parentNode && parentNode.removeChild(this.sandbox);
}
}
var windowOpen = (moduleWindow, application) => {
const realOpen = moduleWindow.open;
const blockClick = (event) => {
var _a;
const path = event['path'] || ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || [];
const anchor = (() => {
for (const el of path) {
if (el.tagName === 'A')
return el;
}
})();
if (!anchor)
return false;
const href = anchor.href || String(anchor);
if (href && anchor.target !== 'self') {
const title = anchor.title || '';
const preset = anchor.getAttribute('preset-effect');
const cloneAs = anchor.getAttribute('clone-as');
event.stopPropagation();
event.preventDefault();
application.pushWindow(href, title, preset, cloneAs, event).catch(() => {
realOpen(href);
});
}
return false;
};
moduleWindow.addEventListener('click', blockClick);
moduleWindow.open = (url, target, features) => {
if (typeof url !== 'string' || target || features) {
return realOpen(url, target, features);
}
if (typeof url === 'string') {
application.pushWindow(url, '').catch(() => {
realOpen(url);
});
}
return null;
};
};
const getTimerHandler = (handler, moduleWindow, stretch) => {
return (..._args) => {
const run = () => {
if (typeof handler === 'function') {
handler(..._args);
}
else if (typeof handler === 'string') {
const evalHander = new moduleWindow['Function'](`return ${handler}`);
evalHander(..._args);
}
};
if (moduleWindow['moduleVisibilityState'] === 'visible') {
run();
}
else if (stretch) {
moduleWindow.addEventListener('module-visible', () => {
run();
});
}
};
};
const smartSetTimeout = (moduleWindow) => {
const realSetTimeout = moduleWindow.setTimeout;
moduleWindow.setTimeout = (handler, timeout, ...args) => {
const fn = getTimerHandler(handler, moduleWindow, true);
const intervalId = realSetTimeout(fn, timeout, ...args);
return intervalId;
};
};
const smartSetInterval = (moduleWindow) => {
const realSetInterval = moduleWindow.setInterval;
moduleWindow.setInterval = (handler, timeout, ...args) => {
const fn = getTimerHandler(handler, moduleWindow);
const intervalId = realSetInterval(fn, timeout, ...args);
return intervalId;
};
};
var tapHighlight = (moduleWindow, capture) => {
const touchActive = {
element: null,
oldStyle: ''
};
const addHighlight = (event) => {
const captureList = capture ? typeof capture === 'string' ? capture.split(' ') : capture : null;
const path = event['path'] || event.composedPath() || [];
path.splice(-3);
const anchor = (() => {
var _a, _b, _c;
for (const el of path) {
if (!((_a = el.children) === null || _a === void 0 ? void 0 : _a.length))
continue;
if (el.tagName === 'A')
return el;
if (captureList) {
for (const attr of captureList) {
if (el === null || el === void 0 ? void 0 : el.getAttribute(attr))
return el;
}
}
}
return (((_c = (_b = path[0]) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c.length) ? path[0] : path[1]) || event.target;
})();
if (!anchor)
return;
touchActive.element = anchor;
touchActive.oldStyle = anchor.style.filter;
setTimeout(() => {
if (touchActive.element === anchor)
anchor.style.filter = touchActive.oldStyle + ' brightness(.8)';
const continueCheck = () => {
setTimeout(() => {
if (touchActive.element !== anchor) {
anchor.style.filter = touchActive.oldStyle;
}
else {
continueCheck();
}
}, 600);
};
continueCheck();
}, 60);
};
const cancelHighlight = () => {
var _a, _b;
if ((_b = (_a = touchActive.element) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.filter) {
touchActive.element.style.filter = touchActive.oldStyle;
}
touchActive.element = null;
touchActive.oldStyle = '';
};
const delayCancelHighlight = () => {
setTimeout(() => {
cancelHighlight();
}, 600);
};
moduleWindow.document.addEventListener('touchstart', addHighlight);
moduleWindow.addEventListener('touchstart', addHighlight);
moduleWindow.addEventListener('touchmove', cancelHighlight);
moduleWindow.addEventListener('touchcancel', cancelHighlight);
moduleWindow.addEventListener('touchend', delayCancelHighlight);
};
var cssVar = (moduleWindow, module) => {
const { config, application } = module;
const globalCSSVariables = application.config.globalCSSVariables;
const docStyle = moduleWindow.document.documentElement.style;
const setGlobalCSSVariables = (variables) => {
for (const key in variables) {
docStyle.setProperty(key, variables[key]);
}
};
const setCSSSafeAreaValue = (data) => {
var _a, _b, _c, _d;
setGlobalCSSVariables({
'--application-safe-area-top': (_a = data[0]) !== null && _a !== void 0 ? _a : data,
'--application-safe-area-right': (_b = data[1]) !== null && _b !== void 0 ? _b : data,
'--application-safe-area-bottom': (_c = data[2]) !== null && _c !== void 0 ? _c : data,
'--application-safe-area-left': (_d = data[3]) !== null && _d !== void 0 ? _d : data
});
};
if (config.safeArea) {
setCSSSafeAreaValue(config.safeArea);
}
else if (application.config.safeArea) {
setCSSSafeAreaValue(application.config.safeArea);
}
if (globalCSSVariables) {
setGlobalCSSVariables(globalCSSVariables);
}
application.on('safeAreaChange', (data) => {
setCSSSafeAreaValue(data);
});
application.on('globalCSSVariablesChange', (data) => {
setGlobalCSSVariables(data);
});
};
var inject = (moduleWindow, module) => {
const { config, application } = module;
const apply = config.apply || [];
if (Array.isArray(apply)) {
for (const item of apply) {
switch (item) {
case 'link-in-new-window':
windowOpen(moduleWindow, application);
break;
case 'smart-setTimeout':
smartSetTimeout(moduleWindow);
break;
case 'smart-setInterval':
smartSetInterval(moduleWindow);
break;
case 'tap-highlight':
tapHighlight(moduleWindow);
break;
default:
if (Array.isArray(item)) {
switch (item[0]) {
case 'tap-highlight':
tapHighlight(moduleWindow, item[1]);
break;
}
}
break;
}
}
}
if (typeof config.inject === 'function') {
config.inject(moduleWindow, module);
}
if (module.components) {
for (const mountComponent of module.components) {
moduleWindow.customElements.define('code-highlight', mountComponent(moduleWindow));
}
}
cssVar(moduleWindow, module);
};
class ModuleView extends ModulePrefetch {
constructor(id, model, application) {
super(id, model, application);
}
attach(element) {
if (!element)
return;
this.status.init = true;
this.elements.container = element;
this.addPanMoveHolder(element);
}
addPanMoveHolder(container) {
const touchBorder = this.config.touchBorder;
if (!touchBorder)
return;
const threshold = 12;
const topHolder = document.createElement('div');
const rightHolder = document.createElement('div');
const bottomHolder = document.createElement('div');
const leftHolder = document.createElement('div');
const mainHolder = document.createElement('div');
topHolder.style.cssText = `position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: ${threshold}px;`;
rightHolder.style.cssText = `position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: ${threshold}px;`;
bottomHolder.style.cssText = `position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; height: ${threshold}px;`;
leftHolder.style.cssText = `position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: ${threshold}px;`;
mainHolder.style.cssText = `display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4;`;
container.appendChild(topHolder);
container.appendChild(rightHolder);
container.appendChild(bottomHolder);
container.appendChild(leftHolder);
container.appendChild(mainHolder);
touchBorder({
topHolder,
rightHolder,
bottomHolder,
leftHolder,
mainHolder
}, this, this.application);
}
createSandbox(uri, config) {
this.sandbox = new Sandbox(uri, config);
return this.sandbox.sandbox;
}
createShadowbox(render) {
const shadowbox = document.createElement('shadow-view');
const shadowboxInner = document.createElement('shadow-inner');
shadowbox === null || shadowbox === void 0 ? void 0 : shadowbox.attachShadow({ mode: 'open' });
const shadowRoot = shadowbox.shadowRoot ? shadowbox.shadowRoot : shadowbox;
shadowRoot.appendChild(shadowboxInner);
render(shadowboxInner);
this.elements.container.appendChild(shadowbox);
return shadowbox;
}
createPortals(uri) {
const portal = document.createElement('portal');
portal.src = uri;
return portal;
}
createView() {
if (this.view)
return this.view;
if (this.config.render) {
return this.view = this.createShadowbox(this.config.render);
}
if (this.rel !== 'module')
return;
if (this.viewType === 'portal') {
this.view = this.createPortals(this.uri);
}
else {
this.view = this.createSandbox(this.uri, this.config.sandbox);
}
return this.view;
}
loadContent() {
var _a, _b, _c;
const container = this.elements.container;
const shadowView = this.view;
if (!shadowView)
return;
switch (this.viewType) {
case 'portal':
container.appendChild(shadowView);
break;
case 'iframe':
default:
if (!this.sandbox) {
if (this.rel === 'frameworks') {
inject(window, this);
}
return;
}
if (this.uri) {
this.sandbox.enter(container);
const contentWindow = shadowView.contentWindow;
if (contentWindow && this.sameOrigin) {
inject(contentWindow === null || contentWindow === void 0 ? void 0 : contentWindow.window, this);
contentWindow === null || contentWindow === void 0 ? void 0 : contentWindow.window.postMessage({
type: 'container-ready'
}, '*');
}
}
else {
this.sandbox.append((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.html, container);
const update = this.loadContent.bind(this);
this.sandbox.unload = update;
inject((_c = this.sandbox.contentWindow) === null || _c === void 0 ? void 0 : _c.window, this);
}
break;
}
}
mountPresetView() {
var _a, _b, _c;
const view = (_b = (_a = window === null || window === void 0 ? void 0 : window.__application_preset) === null || _a === void 0 ? void 0 : _a.modules) === null || _b === void 0 ? void 0 : _b[this.id];
if (view) {
this.view = view;
this.elements.container.appendChild(view);
(_c = window === null || window === void 0 ? void 0 : window.__application_preset) === null || _c === void 0 ? true : delete _c[this.id];
}
}
create(prepare = true) {
this.unfate();
this.timeTick();
this.mountPresetView();
if (this.status.prerender) {
return Promise.resolve('prerender');
}
return new Promise((resolve, reject) => {
this.createTime = Date.now();
const shadowView = this.createView();
if (!shadowView) {
return resolve('null');
}
if (this.viewType === 'shadow') {
return resolve('shadow');
}
shadowView.style.cssText = `
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
border: 0;
transform: translate3d(0, 0, 0);
`;
shadowView.onload = (e) => {
var _a;
this.status.prerender = true;
(_a = this.events) === null || _a === void 0 ? void 0 : _a.load.bind(this)();
this.trigger('load');
setTimeout(() => {
resolve(e);
}, 50);
};
shadowView.onerror = (e) => {
var _a;
(_a = this.events) === null || _a === void 0 ? void 0 : _a.loadError.bind(this)();
this.trigger('loadError');
reject(e);
};
this.loadContent();
if (prepare === false || this.config.animation === false) {
return resolve('instant');
}
setTimeout(() => {
resolve('timeout');
}, this.status.preload ? 800 : 200);
});
}
preload() {
return new Promise((resolve, reject) => {
var _a, _b;
const uri = this.uri;
const head = document.head;
const sandbox = new Sandbox(uri, '');
sandbox.onload = (e) => {
var _a;
this.status.preload = true;
sandbox.exit();
(_a = this.events) === null || _a === void 0 ? void 0 : _a.preload.bind(this)();
this.trigger('preload');
resolve(e);
};
sandbox.onerror = (e) => {
sandbox.exit();
reject(e);
};
if (uri) {
sandbox.enter(head);
}
else {
sandbox.append((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.html, head);
}
});
}
prerender() {
if (this.status.preload || this.status.prerender) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
this.preload().then(resolve).catch(reject);
this.beforehandLink(this.uri, 'prerender', 'document');
});
}
}
class Module extends ModuleView {
constructor(id, model, application) {
super(id, model, application);
this.events.start.bind(this)();
}
}
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
var ease = {
'in': 'ease-in',
'out': 'ease-out',
'in-out': 'ease-in-out',
'snap': 'cubic-bezier(0, 1, .5, 1)',
'linear': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',
'ease-in-quad': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
'ease-in-cubic': 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
'ease-in-quart': 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
'ease-in-quint': 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
'ease-in-sine': 'cubic-bezier(0.470, 0.000, 0.745, 0.715)',
'ease-in-expo': 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
'ease-in-circ': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
'ease-in-back': 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
'ease-out-quad': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
'ease-out-cubic': 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
'ease-out-quart': 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
'ease-out-quint': 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
'ease-out-sine': 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',
'ease-out-expo': 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
'ease-out-circ': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
'ease-out-back': 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
'ease-in-out-quad': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
'ease-in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
'ease-in-out-sine': 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',
'ease-in-out-expo': 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
'ease-in-out-circ': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
'ease-in-out-back': 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
};
const rAF = requestAnimationFrame !== null && requestAnimationFrame !== void 0 ? requestAnimationFrame : setTimeout;
const gCS = getComputedStyle;
/* Animate */
class Animate extends EventProvider {
constructor(el) {
super();
this._props = {};
this._transforms = {};
this._transforming = false;
this._proper = [];
this._caller = [];
this._transitionProps = [];
this.translate = this.to;
this.translate3d = this.to;
this.translateX = this.x;
this.translateY = this.y;
this.translateZ = this.z;
if (!el)
return;
this.el = el;
this.el.style.setProperty('transition-duration', '0ms');
}
transform(transform) {
this.transition('transform');
const propName = (transform.match(/\w+\b/) || [])[0];
if (propName)
this._transforms[propName] = transform;
return this;
}
skew(x, y) {
return this.transform('skew(' + x + 'deg, ' + (y || 0) + 'deg)');
}
skewX(n) {
return this.transform('skewX(' + n + 'deg)');
}
skewY(n) {
return this.transform('skewY(' + n + 'deg)');
}
to(x = 0, y = 0, z = 0) {
// 3d set
this.transform('translate3d(' + (x ? x + 'px' : 0) + ',' + (y ? y + 'px' : 0) + ',' + (z ? z + 'px' : 0) + ')');
return this;
}
x(n) {
return this.transform('translateX(' + n + 'px)');
}
y(n) {
return this.transform('translateY(' + n + 'px)');
}
z(z) {
return this.transform('translateZ(' + z + 'px)');
}
scale(x, y = x) {
return this.transform('scale(' +
x + ', ' +
(y || x) +
')');
}
opacity(o) {
this.transition('opacity');
return this.style('opacity', o);
}
scaleX(n) {
return this.transform('scaleX(' + n + ')');
}
matrix(m11, m12, m21, m22, m31, m32) {
return this.transform('matrix(' + [m11, m12, m21, m22, m31, m32].join(',') + ')');
}
scaleY(n) {
return this.transform('scaleY(' + n + ')');
}
rotate(n) {
return this.transform('rotate(' + n + 'deg)');
}
rotateX(n) {
return this.transform('rotateX(' + n + 'deg)');
}
rotateY(n) {
return this.transform('rotateY(' + n + 'deg)');
}
rotateZ(n) {
return this.transform('rotateZ(' + n + 'deg)');
}
rotate3d(x, y, z, d) {
return this.transform('rotate3d(' + x + ', ' + y + ',' + z + ',' + d + 'deg)');
}
perspective(z) {
const box = this.el.parentElement;
if (box) {
box.style.setProperty('transform-style', 'preserve-3d');
box.style.setProperty('perspective', z + 'px');
}
return this;
}
backface(visibility = true) {
return this.style('backface-visibility', visibility ? 'visible' : 'hidden');
}
ease(s) {
s = ease[s] || s || 'ease';
return this.style('transition-timing-function', s);
}
animate(name, props) {
for (const i in props) {
if (props.hasOwnProperty(i)) {
this.style('animation-' + i, props[i]);
}
}
return this.style('animation-name', name);
}
duration(n) {
n = 'string' === typeof n ?
parseFloat(n) * 1000 :
n;
return this.style('transition-duration', n + 'ms');
}
getDuration() {
return !!parseFloat(gCS(this.el).transitionDuration);
}
delay(n) {
n = 'string' === typeof n ?
parseFloat(n) * 1000 :
n;
return this.style('transition-delay', n + 'ms');
}
origin(x, y = 0) {
let n = 'center';
if (Array.isArray(x)) {
y = x[1] || 0;
x = x[0] || 0;
}
if (typeof x === 'string') {
n = x;
}
else if (typeof x === 'number') {
n = x + 'px' + ' ' + y + 'px';
}
return this.style('transform-origin', n);
}
width(val) {
this.transition('width');
return this.style('width', val === undefined ? '' : val + 'px');
}
height(val) {
this.transition('height');
return this.style('height', val === undefined ? '' : val + 'px');
}
add(prop, val) {
return this.on('start', () => {
const curr = parseInt(this.current(prop), 10);
this.style(prop, curr + val + 'px');
});
}
subc(prop, val) {
return this.on('start', () => {
const curr = parseInt(this.current(prop), 10);
this.style(prop, curr - val + 'px');
});
}
current(prop) {
return gCS(this.el).getPropertyValue(prop);
}
transition(prop) {
if (this._transitionProps.indexOf(prop) === -1)
this._transitionProps.push(prop);
return this;
}
filter(val) {
this.style('filter', val);
this.transition('filter');
return this;
}
style(prop, val) {
this._props[prop] = val === undefined ? '' : val;
return this;
}
onceTransitionend(fn) {
if (!this.getDuration())
return setTimeout(fn, 0);
const onec = (e) => {
if (e.target !== this.el)
return false;
fn();
this.el.removeEventListener('transitionend', onec, false);
};
this.el.addEventListener('transitionend', onec, false);
}
applyTransform() {
const transform = [];
if (!this._transforms['translate3d'] && !this._transforms['translateZ']) {
this._transforms['translateZ'] = 'translateZ(0)';
}
for (const i in this._transforms) {
transform.push(this._transforms[i]);
}
if (transform.length) {
this.style('transform', transform.join(' '));
}
return this;
}
applyProperties() {
const prop = this._proper.shift();
this._transforming = true;
for (const name in prop) {
this.el.style.setProperty(name, prop[name]);
}
this.onceTransitionend(() => {
this.clear();
this.next();
});
return this;
}
next() {
if (this._caller.length) {
const fn = this._caller.shift();
fn === null || fn === void 0 ? void 0 : fn();
}
if (this._caller.length === 0) {
this.init();
}
else {
rAF(() => { this.applyProperties(); });
}
}
clear() {
this._transforms = {};
}
init() {
if (this.getDuration()) {
this.el.style.setProperty('transition-duration', '0ms');
}
this.clear();
this._transforming = false;
return this;
}
then(fn = () => undefined) {
this.applyTransform();
this.style('transition-property', this._transitionProps.join(', '));
this._proper.push(this._props);
this._props = {};
this._caller.push(() => fn === null || fn === void 0 ? void 0 : fn.call(this));
return this;
}
and(fn = () => undefined) {
this.then(fn);
if (this._transforming)
return this;
rAF(() => { this.applyProperties(); });
}
end(fn) {
return new Promise((resolve) => {
fn = fn !== null && fn !== void 0 ? fn : (() => resolve());
this.then(fn);
if (this._transforming)
return;
rAF(() => { this.applyProperties(); });
});
}
}
var flip = (type) => {
return (e) => __awaiter(void 0, void 0, void 0, function* () {
return new Promise((resolve) => __awaiter(void 0, void 0, void 0, function* () {
let origin = 'center';
let minScale = 0.3;
let rotate = 150;
let duration = 1300;
let inDelay = duration / 4;
let rx = 0;
let ry = 1;
const direction = e.direction * e.historyDirection;
switch (type) {
case 0:
origin = 'top';
rx = 1;
ry = 0;
duration = 1600;
inDelay = duration / 4;
break;
case 1:
origin = 'right';
break;
case 2:
origin = 'bottom';
rx = 1;
ry = 0;
duration = 1600;
inDelay = duration / 4;
break;
case 3:
origin = 'left';
break;
case 4:
origin = 'center';
rotate = 90;
minScale = 0.9;
duration = 600;
inDelay = duration;
break;
}
yield e.in.duration(0).ease('ease-out-expo').perspective(1000).origin(origin).to(0, 0, 0).backface(false).opacity(1).rotate3d(rx, ry, 0, rotate * direction).scale(minScale).end();
e.in.delay(inDelay).duration(duration).rotate3d(rx, ry, 0, 0).scale(1).end(() => {
resolve(false);
});
e.out.duration(duration).ease('ease-out-expo').perspective(1000).origin(origin).backface(false).rotate3d(rx, ry, 0, -rotate * direction).scale(minScale).end(() => {
e.out.duration(0).rotate3d(rx, ry, 0, -rotate * direction).opacity(0).end();
});
setTimeout(() => {
resolve(false);
}, 2000);
}));
});
};
var fade = (type) => {
return (e) => {
let inO, outO, inV, outV;
switch (type) {
case 0:
inO = 1;
outO = 0;
inV = e.in;
outV = e.out;
break;
case 1:
default:
inO = 0;
outO = 1;
inV = outV = e.in;
}
inV.duration(0).ease('ease-out-expo').to(0, 0, 0).opacity(inO).end(function () {
outV.duration(767).opacity(outO).end(function () {
e.callback(false);
});
});
setTimeout(() => {
e.callback(false);
}, 1200);
};
};
var zoom = (type) => {
return (e) =