mylomen-server/static/js/event/impl/ApplyStyleEventImpl.js

"use strict";
/**
 * 使用样式事件
 */
define(function (require, exports, module) {

    function handle(event) {
        let utils = require("../../common/utils");
        let curS = utils.GetSelection();

        let curP = utils.GetEventTarget(event);
        let styleK = curP.getAttribute("data-k");
        let styleV = curP.getAttribute("data-v");
        if (styleK === undefined || styleK === null) {
            styleK = curP.closest("span").getAttribute("data-k");
            styleV = curP.closest("span").getAttribute("data-v");
            // console.log("closest: ", curP, curP.closest("span"))
        }

        for (let i = 0; i < curS.rangeCount; i++) {
            let curRange = curS.getRangeAt(i);
            let curCommonEle = curRange.commonAncestorContainer;
            let start = curRange.startOffset;
            let end = curRange.endOffset;
            if (start > end) {
                let tmpS = start;
                start = end;
                end = tmpS;
            }
            if (start === end) {
                continue
            }

            // //一个元素节点，例如 <p> 和 <div>。
            // let curComIsSpan = curCommonEle.nodeType === 1 && curCommonEle.nodeName === "SPAN";
            // let curComParentIsP = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "P";
            // let curComParentIsDiv = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "DIV";
            // let curComParentIsSpan = curCommonEle.parentNode.nodeType === 1 && (curCommonEle.parentNode.nodeName === 'SPAN"' || curCommonEle.parentNode.nodeName === 'SPAN');
            // console.log(" 当前选区信息 : ", curRange,
            //     "\ncurCommonEle: ", curCommonEle,
            //     "\ncurCommonEleParent: ", curCommonEle.parentNode, curCommonEle.parentNode.nodeType, curCommonEle.parentNode.nodeName,
            //     "\ncurCommonEleParentParent: ", curCommonEle.parentNode.parentNode, curCommonEle.parentNode.parentNode.nodeType, curCommonEle.parentNode.parentNode.nodeName,
            //
            //     "\ncurComParentIsSpan: ", curComParentIsSpan,
            //     "\ncurComParentIsP : ", curComParentIsP,
            //     "\ncurComParentIsDiv", curComParentIsDiv,
            //     "\ncurComIsSpan", curComIsSpan,
            //
            //     "\nstyleK: ", styleK,
            //     "\nstyleV: ", styleV,
            //     "\ntart: ", start,
            //     "\nend: ", end);

            let curSpanContent = curCommonEle;
            if (curSpanContent.nodeName !== "SPAN" || curSpanContent.getAttribute("data-flag") !== "span_content") {
                curSpanContent = curSpanContent.parentElement.closest("span[data-flag='span_content']");
            }
            console.log("curSpanContent : ", curSpanContent, curCommonEle);
            if (curSpanContent.childNodes.length <= 0) {
                continue
            }
            let firstItem = curSpanContent.childNodes[0];
            console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType);
            let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
            if (isEmptyStyle) {
                let copySpan = curSpanContent.cloneNode();
                copySpan.innerHTML = "";
                for (let j = 0; j < curSpanContent.innerText.length; j++) {
                    // console.log(curStartP.innerText.charAt(j))
                    if (j >= start && j < end) {
                        let tmpSpan = document.createElement("span");
                        tmpSpan.innerText = curSpanContent.innerText.charAt(j);
                        applySpanStyleKV(tmpSpan, styleK, styleV);
                        copySpan.append(tmpSpan);
                    } else {
                        let tmpSpan = document.createElement("span");
                        tmpSpan.innerText = curSpanContent.innerText.charAt(j);
                        copySpan.append(tmpSpan);
                    }
                }

                curSpanContent.innerHTML = copySpan.innerHTML;

                //光标保持
                let s = window.getSelection();
                if (s.rangeCount > 0) s.removeAllRanges();
                let newR = document.createRange();
                //重新获取元素
                let tmpP = curSpanContent;
                let childrenSize = tmpP.childNodes.length;
                console.log("debug007: ", tmpP, start, end, childrenSize)
                newR.setStart(tmpP, start);
                newR.setEnd(tmpP, end);
                //区域 添加 到选区
                s.addRange(newR);
            } else {
                let total = 0, effectNum = 0;
                for (let j = 0; j < curSpanContent.childNodes.length; j++) {
                    let tmpSpan = curSpanContent.childNodes[j];
                    if (curS.containsNode(tmpSpan, true)) {
                        total++;
                        if (spanContainsStyleKV(tmpSpan, styleK, styleV)) {
                            console.dir(tmpSpan);
                        } else {
                            effectNum++;
                            applySpanStyleKV(tmpSpan, styleK, styleV);
                        }
                    }
                }

                //如果没有设置任何一个 则取消
                if (effectNum === 0) {
                    for (let j = 0; j < curSpanContent.childNodes.length; j++) {
                        let tmpSpan = curSpanContent.childNodes[j];
                        if (curS.containsNode(tmpSpan, true)) {
                            removeSpanStyleKV(tmpSpan, styleK, styleV);
                        }
                    }
                }
            }
        }
    }

    function removeSpanStyleKV(span, styleK, styleV) {
        let kList = styleK.toString().split(",");
        let vList = styleV.toString().split(",");
        for (let i = 0; i < kList.length; i++) {
            if (span.style.getPropertyValue(kList[0]) === vList[0]) {
                span.style.removeProperty(kList[0]);
            }
        }
    }

    function spanContainsStyleKV(span, styleK, styleV) {
        let kList = styleK.toString().split(",");
        let vList = styleV.toString().split(",");
        let total = kList.length, match = 0;
        for (let i = 0; i < kList.length; i++) {
            if (span.style.getPropertyValue(kList[0]) === vList[0]) {
                match++;
            }
        }

        return total === match;
    }

    function applySpanStyleKV(span, styleK, styleV) {
        let kList = styleK.toString().split(",");
        let vList = styleV.toString().split(",");
        for (let i = 0; i < kList.length; i++) {
            span.style.setProperty(kList[i], vList[i]);
        }
    }

    //导出
    exports.handle = handle;
});