cyra
Version:
single page application view engine
260 lines (259 loc) • 9.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var config_1 = require("../config");
var Storage_1 = require("./Storage");
var Cyra_1 = require("./Cyra");
var util_1 = require("../util");
var Page = (function () {
function Page(path) {
this.models = Cyra_1.Cyra.router.models;
this.context = Cyra_1.Cyra.router.context;
this.mode = Cyra_1.Cyra.router.mode;
this.switchRoute = Cyra_1.Cyra.router.switchRoute.bind(Cyra_1.Cyra.router);
this.popAndSwitchRoute = Cyra_1.Cyra.router.popAndSwitchRoute.bind(Cyra_1.Cyra.router);
this.entered = false;
this.leaved = false;
this.path = path;
}
/**
* 设置页面 title
* @return {string}
*/
Page.prototype.title = function () {
return '';
};
/**
* 调用 switchRoute 前执行，执行一些准备工作
* @param {Function} next
* @param {string} toPath
* @param {Function} destinationPagePerform
*/
Page.prototype.prepareForSwitch = function (next, toPath, destinationPagePerform) {
next();
};
/**
* 指示每次进入 Page 时是否需要刷新
* @param {string} previousPath
* @return {boolean}
*/
Page.prototype.shouldReload = function (previousPath) {
return config_1.CyraConfig.ALWAYS_RELOAD;
};
/**
* 模拟拦截点击返回按钮
* @param {Function} next
* @param {Function} cancel
* @param {string} toPath
*/
Page.prototype.beforeLeaving = function (next, cancel, toPath) {
next();
};
/**
* 把当前页面的所有生命周期函数再执行一遍
*/
Page.prototype.reload = function () {
var seq = config_1.CyraConfig.LEAVE_SEQ.concat(config_1.CyraConfig.ENTER_SEQ);
this.execute(seq);
};
Object.defineProperty(Page.prototype, "container", {
/**
* 获取页面的 HTML 容器
* @return {HTMLElement}
*/
get: function () {
if (!this.containerCache) {
var rootContainer = this.context.rootContainer;
var domID = config_1.CyraConfig.DOM_PREFIX + this.path + this.copyIndex;
var el = rootContainer.querySelector('#' + domID);
if (!el) {
el = document.createElement('div');
el.id = domID;
this.setStyles(el, {
position: 'absolute',
left: '0',
top: '0',
width: '100%',
});
if (!config_1.CyraConfig.ANIMATION) {
el.style.display = 'none';
}
rootContainer.appendChild(el);
}
this.containerCache = el;
}
return this.containerCache;
},
enumerable: true,
configurable: true
});
/**
* 通过它执行其他页面函数
* @param {string} funcName
* @param {Array<any>} ...args
*/
Page.prototype.callMethods = function (funcName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var func = this[funcName];
if (func) {
if (this.mode === 'multipage') {
// 多页降级方案，将要执行的函数存储
var methodData = {
funcName: funcName,
args: args,
};
Storage_1.AppStorage.addDestinationMethod(methodData);
}
else {
func.apply(this, args);
}
}
};
/**
* 多页方案进入页面时执行上个页面的 destinationPagePerform
* @param {string} funcName
* @param {Array<any>} ...args
*/
Page.prototype.multiCallMethods = function (funcName) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
var func = this[funcName];
if (func) {
func.apply(this, args);
}
};
/**
* 顺序执行一组函数
* @param {Array<string>} executeSeq
*/
Page.prototype.execute = function (executeSeq) {
var _this = this;
var funs = [];
executeSeq.forEach(function (funcName) {
if (_this[funcName]) {
funs.push(_this[funcName]);
}
});
util_1.sequence(funs, this);
};
/**
* 执行生命周期进入页面部分的函数
* @param {any} data
* @param {number} index
*/
Page.prototype.entering = function (data, index) {
this.inTheActiveState = true;
this.copyIndex = index || 0;
var reload = !this.entered || this.shouldReload(this.context.previousPage.path);
var seq = reload ? config_1.CyraConfig.ENTER_SEQ : config_1.CyraConfig.ENTER_BASIC_SEQ;
this.entered = true;
this.transferedData = data;
// 设置 Page title
var titleContent = this.title();
if (titleContent) {
document.title = titleContent;
}
this.execute(seq);
};
/**
* 执行生命周期离开页面部分的函数
* @param {any} data
* @param {number} index
*/
Page.prototype.leaving = function () {
this.inTheActiveState = false;
var reload = !this.leaved || this.shouldReload(this.context.previousPage.path);
var seq = reload ? config_1.CyraConfig.LEAVE_SEQ : config_1.CyraConfig.LEAVE_BASIC_SEQ;
this.leaved = true;
this.execute(seq);
};
/**
* 进入页面过程中显示页面的钩子
* @param {Function} next
*/
Page.prototype.appearing = function (next) {
// 连续点击返回，跳过中间 View 并且直接隐藏当前正在显示的 View
if (!this.context.useSwitch && this.context.currentPage && this.context.currentContainer &&
this.context.currentContainer !== this.context.currentPage.container) {
this.transitionOut(this.context.currentContainer);
}
// 隐藏上一个 View 的容器
if (this.context.previousPage) {
this.transitionOut(this.context.previousPage.container);
}
if (this.inTheActiveState) {
this.transitionIn(this.container);
this.context.currentContainer = this.container;
}
window.document.body.style.pointerEvents = 'auto';
next();
};
/**
* 离开页面过程中隐藏页面的钩子
* @param {Function} next
*/
Page.prototype.disappearing = function (next) {
window.document.body.style.pointerEvents = 'none';
next();
};
/**
* 视图切换动画进入效果
* @param {HTMLElement} container 即将进入的视图 container
* @param {string} type 动画类型
*/
Page.prototype.transitionIn = function (container) {
if (config_1.CyraConfig.ANIMATION) {
var firstTime = !this.context.previousPage, direction = (firstTime || this.context.useSwitch) ? 'right' : 'left', animation = config_1.CyraConfig.SWITCH_DURATION + "ms " + config_1.CyraConfig.ANIMATION_FUNC + " forwards " + config_1.CyraConfig.ANIMATION_PREFIX + direction + "-move-in";
if (container.attributes['customBack'] || container.attributes['customFront'] || firstTime) {
animation = config_1.CyraConfig.SWITCH_DURATION + "ms " + config_1.CyraConfig.ANIMATION_FUNC + " forwards " + config_1.CyraConfig.ANIMATION_PREFIX + "custom-in";
if (container.attributes['customBack']) {
container.attributes['customBack'] = '';
}
}
this.setStyles(container, {
animation: animation,
webkitAnimation: animation,
});
}
else {
container.style.display = 'block';
}
this.context.useSwitch = false;
};
/**
* 视图切换动画退出效果
* @param {HTMLElement} container 即将退出的视图 container
* @param {string} type 动画类型
*/
Page.prototype.transitionOut = function (container) {
if (config_1.CyraConfig.ANIMATION) {
var direction = this.context.useSwitch ? 'left' : 'right', animation = config_1.CyraConfig.SWITCH_DURATION + "ms " + config_1.CyraConfig.ANIMATION_FUNC + " forwards " + config_1.CyraConfig.ANIMATION_PREFIX + direction + "-move-out";
if (container.attributes['customBack'] || container.attributes['customFront']) {
animation = config_1.CyraConfig.SWITCH_DURATION + "ms " + config_1.CyraConfig.ANIMATION_FUNC + " forwards " + config_1.CyraConfig.ANIMATION_PREFIX + "custom-out";
}
this.setStyles(container, {
animation: animation,
webkitAnimation: animation,
});
}
else {
container.style.display = 'none';
}
};
/**
* 批量设置容器样式
* @param {HTMLElement} element
* @param {any} styles
*/
Page.prototype.setStyles = function (element, styles) {
for (var key in styles) {
element.style[key] = styles[key];
}
};
return Page;
}());
exports.Page = Page;