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 curStartContainerEle = curRange.startContainer;
            let curEndContainerEle = curRange.endContainer;
            let taskMap = new Map;
            let start = curRange.startOffset;
            let end = curRange.endOffset;
            if (start > end) {
                let tmpS = start;
                start = end;
                end = tmpS;
            }

            let tmpStart = getSpanContent(curStartContainerEle);
            let tmpEnd = getSpanContent(curEndContainerEle);
            if (tmpStart.getAttribute("id") === tmpEnd.getAttribute("id")) {
                taskMap.set(tmpStart.getAttribute("id"), tmpStart)
            } else {
                let tmp = tmpStart;
                if (parseInt(tmpStart.getAttribute("data-order")) > parseInt(tmpEnd.getAttribute("data-order"))) {
                    tmpStart = tmpEnd;
                    tmpEnd = tmp;
                }
                taskMap.set(tmpStart.getAttribute("id"), tmpStart)
                while (true) {
                    let nextTask = tmpStart.nextSibling;
                    taskMap.set(nextTask.getAttribute("id"), nextTask);
                    if (nextTask.getAttribute("id") === tmpEnd.getAttribute("id")) {
                        break
                    }
                }
            }
            if (taskMap.size === 1 && start === end) {
                continue
            }

            for (let [key, curSpanContent] of taskMap) {
                console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size);
                console.dir(taskMap)
                console.dir(curS)
                console.dir(curRange)

                if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || 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;

                    //光标保持. for 单行
                    if (taskMap.size === 1) {
                        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]);
        }
    }


    function getSpanContent(item) {
        let tmp = item;
        if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") {
            tmp = item.parentElement.closest("span[data-flag='span_content']");
        }
        return tmp
    }

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