olympus-r-dom/dom/utils/SkinUtil.js

Olympus的DOM表现层库

import { assetsManager } from "olympus-r/engine/assets/AssetsManager";
import MediatorStatus from "olympus-r/engine/mediator/MediatorStatus";
import { listenApply } from 'olympus-r/utils/ConstructUtil';
/**
 * @author Raykid
 * @email initial_r@qq.com
 * @create date 2017-10-26
 * @modify date 2017-10-26
 *
 * 为DOM提供皮肤转换的工具集
*/
/**
 * 为中介者包装皮肤
 *
 * @export
 * @param {IMediator} mediator 中介者
 * @param {(Element|string|string[])} skin 皮肤，可以是Element，也可以是皮肤字符串，也可以是皮肤模板地址或地址数组
 * @returns {Element} 皮肤的Element形式，可能会稍后再填充内容，如果想在皮肤加载完毕后再拿到皮肤请使用complete参数
 */
export function wrapSkin(mediator, skin) {
    var result = (skin instanceof Element ? skin : document.createElement("div"));
    // 判断中介者当前状态
    if (mediator.status < MediatorStatus.OPENING) {
        listenApply(mediator, "__beforeOnOpen", doWrapSkin);
    }
    else {
        // 直接执行要执行的
        doWrapSkin();
    }
    // 同步返回皮肤
    return result;
    function doWrapSkin() {
        if (skin instanceof Element) {
            // 拷贝引用
            doCopyRef(result, skin.innerHTML, mediator);
        }
        else {
            // 转换皮肤
            skin = getHTMLContent(skin);
            // 赋值皮肤内容
            result.innerHTML = skin;
            // 拷贝引用
            doCopyRef(result, skin, mediator);
        }
    }
}
/**
 * 判断是否是DOM字符串
 *
 * @export
 * @param {string} str 字符串
 * @returns {boolean}
 */
export function isDOMStr(str) {
    return str && (str.indexOf("<") >= 0 && str.indexOf(">") >= 0);
}
var reg = /(\.htm|\.html|\.tpl)$/;
/**
 * 判断是否是DOM模板路径
 *
 * @export
 * @param {string} path 路径字符串
 * @returns {boolean}
 */
export function isDOMPath(path) {
    return path && reg.test(path);
}
/**
 * 将from中的所有拥有id属性的节点引用复制到to对象上
 *
 * @export
 * @param {Element} from 复制源DOM节点
 * @param {*} to 复制目标对象
 */
export function copyRef(from, to) {
    doCopyRef(from, from.innerHTML, to);
}
function doCopyRef(fromEle, fromStr, to) {
    // 使用正则表达式将拥有id的节点赋值给mediator
    var reg = /id=("([^"]+)"|'([^']+)')/g;
    var res;
    while (res = reg.exec(fromStr)) {
        var id = res[2] || res[3];
        var desc = Object.getOwnPropertyDescriptor(to, id);
        if (desc && desc.hasOwnProperty("value") && !desc.writable) {
            desc.writable = true;
        }
        try {
            if (desc)
                Object.defineProperty(to, id, desc);
            to[id] = fromEle.querySelector("#" + id);
        }
        catch (err) {
        }
    }
}
/**
 * 转换皮肤为Element
 *
 * @export
 * @param {(Element|string|string[])} skin 皮肤
 * @returns {Element}
 */
export function toHTMLElement(skin) {
    if (skin instanceof Element)
        return skin;
    var result = document.createElement("div");
    result.innerHTML = getHTMLContent(skin);
    return result;
}
/**
 * 将皮肤字符串/字符串数组或皮肤路径转变为HTML内容字符串
 *
 * @export
 * @param {(string|string[])} skin 可以是皮肤字符串、皮肤字符串数组或皮肤路径
 * @returns {string}
 */
export function getHTMLContent(skin) {
    if (skin instanceof Array) {
        // 是字符串数组，拆分后皮肤化再连接起来
        return skin.map(getHTMLContent).join("");
    }
    else if (isDOMStr(skin)) {
        // 是皮肤字符串，直接返回
        return skin;
    }
    else {
        // 是皮肤路径或路径短名称，获取后返回
        return assetsManager.getAssets(skin);
    }
}