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");
            if (ctx.getCurRowNo() <= 0) {
                return
            }
            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") {
            // console.log(
            //     "target: ", target,
            //     "\nnodeType: ", target.nodeType,
            //     "\nnodeName: ", target.nodeName,
            //     "\ndata: ", target.value,
            //     "\nparentNode: ", target.parentNode,
            //     "\nparentNode_parentNode: ", target.parentNode.parentNode,
            // )

            // let curSpan = target.parentNode;
            // let curP = target.parentNode.parentNode;


        } else {
            other(mutation);
        }
    }

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