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

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

    function handle(mutationList) {
        for (let mutation of mutationList) {


            switch (mutation.type) {
                case "childList":
                    addNewP(mutation);
                    break;
                case "characterData":
                    updateText(mutation);
                    break;
                case "attributes":
                    //暂时忽略属性变化
                    break
                default: {
                    other(mutation);
                }
            }
        }
    }

    function other(mutation) {
        console.log("mutation : ", mutation,
            // 观察的变动类型（attributes、characterData或者childList）。
            "\ntype", mutation.type,
            //发生变动的DOM节点。
            "\ntarget", mutation.target,
            "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
            //新增的DOM节点。
            "\naddedNodes", mutation.addedNodes,
            //删除的DOM节点。
            "\nremovedNodes", mutation.removedNodes,
            //前一个同级节点，如果没有则返回null。
            "\npreviousSibling", mutation.previousSibling,
            //下一个同级节点，如果没有则返回null。
            "\nnextSibling", mutation.nextSibling,
            //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
            "\nattributeName", mutation.attributeName,
            //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
            "\noldValue", mutation.oldValue);
    }

    function addNewP(mutation) {
        //div 下新增p元素
        let target = mutation.target;
        // target.clone()
        if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
            let utils = require("../../common/utils");
            let ctx = require("../../common/ctx");
            let newParagraph = mutation.previousSibling.nextSibling;
            console.log(
                "addNewP target: ", target,
                "\nnodeType: ", target.nodeType,
                "\nnodeName: ", target.nodeName,
                "\ndata: ", target.value,
                "\n next: ", newParagraph,
                "\ncurRowNo: ", ctx.getCurRowNo()
            )
            if (newParagraph !== undefined && newParagraph !== null) {
                newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
                newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());

                // let newParagraph = document.getElementById(targetP.id);
                //前置 span
                let preSpan = newParagraph.querySelector("span[data-flag='span_pre']");
                if (preSpan === undefined || preSpan === null) {
                    preSpan = document.createElement("span");
                    preSpan.setAttribute("contenteditable", "false")
                    preSpan.setAttribute("data-flag", "span_pre")
                    // newParagraph.appendChild(preSpan);
                    //添加到元素首位
                    newParagraph.insertBefore(preSpan, newParagraph.firstChild);
                } else {
                    console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan)
                }

                //内置span
                let spanContent = newParagraph.querySelector("span[data-flag='span_content']");
                if (spanContent === undefined || spanContent === null) {
                    spanContent = document.createElement("span");
                    spanContent.append(document.createElement("br"));
                    spanContent.setAttribute("data-flag", "span_content")
                    newParagraph.appendChild(spanContent);
                } else {
                    console.log("newParagraph preSpan spanContent ", newParagraph)
                }

                utils.GetSelection().setPosition(spanContent, 0);
                spanContent.focus();
            }
        }

    }

    function updateText(mutation) {
        let target = mutation.target;
        if (target.nodeType === 3 && target.nodeName === "#text") {
            let testDiv = document.getElementById("testDevice");
            testDiv.innerText=""
            // console.log(
            //     "updateText target: ", target,
            //     "\nnodeType: ", target.nodeType,
            //     "\nnodeName: ", target.nodeName,
            //     "\ndata: ", target.value,
            //     "\nparentNode: ", target.parentNode,
            //     "\nparentNode_parentNode: ", target.parentNode?.parentNode,
            // )

            let grandfatherElement = target.parentNode?.parentElement;
            if (grandfatherElement != null && grandfatherElement.getAttribute("data-flag") === "span_content") {
                let utils = require("../../common/utils");
                let ctx = require("../../common/ctx");
                //正在输入中文直接忽略
                if (ctx.Compositionstart) {
                    return;
                }
                let select = utils.GetSelection();
                let selectRange = select.getRangeAt(0);
                if (select.isCollapsed) { //输入场景
                    let tmpSpan = selectRange.startContainer.parentElement;
                    console.log(utils.GetText(tmpSpan))
                    let curTxt = utils.GetText(tmpSpan);
                    if (curTxt.trim().length <= 1) {
                        return
                    }
                    console.dir(select)
                    console.dir(mutation)
                    console.dir(grandfatherElement)
                    console.dir(tmpSpan)
                    console.log(tmpSpan)
                    console.log(curTxt.split(''))
                    let curTxtArr = curTxt.split('');
                    //保留一个
                    tmpSpan.innerText = curTxtArr[0];
                    let lastSpan = tmpSpan;
                    for (let i = 1; i < curTxtArr.length; i++) {
                        let tmpSpan = document.createElement("span");
                        tmpSpan.innerText = curTxtArr[i];
                        utils.InsertAfter(lastSpan, tmpSpan);
                        lastSpan = tmpSpan;
                    }
                    //选区调整
                    console.log("lastSpan : ", lastSpan)
                    utils.GetSelection().setPosition(lastSpan, 1);
                } else {
                    console.log("TODO 暂时不支持")
                }
            } else {
                console.log("TODO 暂时不支持")
            }
        } else {
            other(mutation);
        }
    }

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