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

"use strict";
/**
 * 拷贝事件
 */
define(function (require, exports, module) {

    function handle(event) {
        let utils = require("../../common/utils");
        let curS = utils.GetSelection();
        let curRange = curS.getRangeAt(0); //只考虑一个选区场景
        let curNode = utils.GetEventTarget(event);
        console.dir(curS)
        //只处理选择的是一个范围。
        // if (curS.type !== "Range") {
        //     return;
        // }
        //选区信息
        console.dir(curS)
        console.dir(curRange)

        //获取样式
        let styleK = curNode.getAttribute("data-k");
        let styleV = curNode.getAttribute("data-v");
        if (styleK === undefined || styleK === null) {
            styleK = curNode.closest("span").getAttribute("data-k");
            styleV = curNode.closest("span").getAttribute("data-v");
            // console.log("closest: ", curNode, curNode.closest("span"))
        }
        console.log("before styleK: ", styleK, " styleV: ", styleV);

        //获取开始结束的区域
        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 pStart = getSpanContentOfP(curStartContainerEle);
        let pEnd = getSpanContentOfP(curEndContainerEle);
        console.dir(curStartContainerEle)
        console.dir(curEndContainerEle)
        console.dir(pStart)
        console.dir(pEnd)
        if (pStart.getAttribute("id") === pEnd.getAttribute("id")) {
            taskMap.set(pStart.getAttribute("id"), pStart)
        } else {
            //修正顺序
            let tmp = pStart;
            if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
                pStart = pEnd;
                pEnd = tmp;
            }
            //fill p
            let nextTask = pStart;
            taskMap.set(nextTask.getAttribute("id"), nextTask)
            while (true) {
                nextTask = nextTask.nextSibling;
                taskMap.set(nextTask.getAttribute("id"), nextTask)
                if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
                    break
                }
                console.dir(nextTask)
            }
        }
        //选择单行还是多行
        let total = taskMap.size;
        let hadNum = 0;
        console.dir(taskMap)
        let doneNum = 0;

        let curTxtIndent = CalCurTextIndent(pStart);
        for (let [key, curP] of taskMap) {
            let curSpanContent = curP.querySelector("span[data-flag='span_content']");
            console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent,
                "\npreEle: ", curP.previousElementSibling);

            //设置属性 展示 ::before
            curSpanContent.setAttribute("data-before-style", styleK);
            //无序
            if (styleV === "ol") {
                let tmpV = curSpanContent.getAttribute(styleK);
                if (tmpV !== undefined && tmpV !== null) {
                    hadNum++;
                } else {
                    curSpanContent.style.setProperty("text-indent", curTxtIndent + "em");
                    curSpanContent.setAttribute(styleK, "• ");
                }

                continue;
            }

            //有序
            if (styleV === "ul") {
                let tmpV = curSpanContent.getAttribute(styleK);
                if (tmpV !== undefined && tmpV !== null) {
                    hadNum++;
                } else {
                    curSpanContent.style.setProperty("text-indent", curTxtIndent + "em");
                    //::before
                    doneNum++;
                    curSpanContent.setAttribute(styleK, doneNum + "• ");
                }
                continue;
            }
        }

        // 如果全部已经设置好了 则取消
        if (total === hadNum) {
            for (let [key, curP] of taskMap) {
                let curSpanContent = curP.querySelector("span[data-flag='span_content']");
                curSpanContent.removeAttribute(styleK);
                curSpanContent.removeAttribute("data-before-style");
                curSpanContent.style.setProperty("text-indent", "2em");
            }
        }

    }

    function CalCurTextIndent(curP) {
        let preP = curP.previousElementSibling;
        let curTxtIndent = 4;
        if (preP !== null) {
            let preSpanContent = preP.querySelector("span[data-flag='span_content']");
            if (preSpanContent !== null) {
                let txtIndent = preSpanContent.style.getPropertyValue("text-indent");
                console.log("txtIndent : ", txtIndent, preSpanContent)
                if (txtIndent !== null && txtIndent !== "") {
                    curTxtIndent = parseInt(txtIndent.replace("em", "")) + 2;
                }
            }
        }
        return curTxtIndent;
    }

    function getSpanContentOfP(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.parentNode;
    }


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