cyra-pure/js/model/Page.js

single page application view engine

var config_1 = require('../config');
var Cyra_1 = require('./Cyra');
var util_1 = require('../util');
/** Class representing a page. */
var Page = (function () {
    /**
     * Create a page.
     * @constructor
     */
    function Page() {
        this.models = Cyra_1.Cyra.models;
        this.context = Cyra_1.Cyra.context;
        // init
        this.data = {};
        this.entered = false;
        this.leaved = false;
    }
    // to be completed by user
    Page.prototype.id = function () {
        return 'Page';
    };
    Page.prototype.title = function () {
        return '';
    };
    Page.prototype.defineActions = function () {
        this.actions = {};
    };
    // when call performAction, will execute prepareForAction
    Page.prototype.prepareForAction = function (next, action) {
        next();
    };
    // if return false, when you enter page again, won't execute user functions
    Page.prototype.shouldReload = function (currentAction) {
        return config_1.default.ALWAYS_RELOAD;
    };
    Page.prototype.beforeLeaving = function (next, cancel, action) {
        next();
    };
    /**
     * perform a action.
     * @param {action} actoin   - Action对象.
     * @param {object} data   - The transform data.
     */
    Page.prototype.performAction = function (toPageID, data, index) {
        if (typeof index !== 'number') {
            index = this.id() === toPageID ? this.copyIndex + 1 : 0;
        }
        if (Cyra_1.Cyra.getPageByID(toPageID, index)) {
            var updateHash = this.updateHash.bind(this, toPageID, index, data);
            this.context.nextAction.fromPageID = this.id();
            this.context.nextAction.toPageID = toPageID;
            this.prepareForAction(updateHash, this.context.nextAction);
        }
    };
    /**
     * reload a page
     * 把当前页面的所有生命周期函数再执行一遍
     */
    Page.prototype.reload = function () {
        this.execute(config_1.default.LEAVE_SEQ.concat(config_1.default.ENTER_SEQ));
    };
    Object.defineProperty(Page.prototype, "container", {
        get: function () {
            if (!this.containerCache) {
                var rootContainer = this.context.rootContainer;
                var domID = config_1.default.DOM_PREFIX + this.id() + this.copyIndex;
                var el = rootContainer.querySelector('#' + domID);
                if (!el) {
                    el = document.createElement("div");
                    el.id = domID;
                    el.style.display = 'none';
                    rootContainer.appendChild(el);
                }
                this.containerCache = el;
            }
            return this.containerCache;
        },
        enumerable: true,
        configurable: true
    });
    Page.prototype.updateHash = function (pageID, index, data) {
        var route;
        var routes = this.models.routes;
        for (var i = 0, length_1 = routes.length; i < length_1; i++) {
            if (routes[i].pageID === pageID) {
                route = routes[i];
            }
        }
        var hashData = {
            path: route.path,
            data: data,
            copyIndex: index,
        };
        util_1.setHashData(hashData);
    };
    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);
    };
    Page.prototype.entering = function (data, index) {
        this.inTheActiveState = true;
        this.copyIndex = index || 0;
        var reload = !this.entered || this.shouldReload(this.context.currentAction);
        var seq = reload ? config_1.default.ENTER_SEQ : config_1.default.ENTER_BASIC_SEQ;
        this.entered = true;
        this.transferedData = data;
        // set page title
        var title = this.title();
        if (title) {
            document.title = title;
        }
        this.execute(seq);
    };
    Page.prototype.leaving = function () {
        this.inTheActiveState = false;
        var reload = !this.leaved || this.shouldReload(this.context.currentAction);
        var seq = reload ? config_1.default.LEAVE_SEQ : config_1.default.LEAVE_BASIC_SEQ;
        this.leaved = true;
        this.execute(seq);
    };
    Page.prototype.appearing = function (next) {
        if (this.inTheActiveState) {
            this.container.style.display = 'block';
        }
        next();
    };
    Page.prototype.disappearing = function (next) {
        this.container.style.display = 'none';
        next();
    };
    return Page;
})();
exports.Page = Page;