mylomen-server/static/js/lib/main.js

"use strict";
import {MyBiz} from './biz/MyBiz.js'
import {MyUtils} from './common/MyUtils.js'
import {MyEventListener} from "./event/MyEventListener.js";

(function () {
    //init
    window.myEdit = {
        /**
         * 优先初始化 工具
         */
        utils: new MyUtils(),

        /**
         * 其次初始化 事件监听
         */
        eventListener: new MyEventListener(),

        /**
         * ctx
         */
        ctx: {
            /**
             * 是否是手机端
             */
            isMobile: /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()),
            isIOS: /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()),
            isAndroid: /android/.test(window.navigator.userAgent.toLocaleLowerCase()),
            //高度 for android
            originHeight: document.documentElement.clientHeight || document.body.clientHeight,
            /**
             * 默认body front-size 单位px
             */
            editFrontSize: 16,
            /**
             * 设计稿宽度 375
             */
            designWith: 375,
            /**
             * 文档的根节点
             */
            MyRoot: null,
            /**
             * 文档的结构树
             */
            MyDocMap: new Map(),

            getMapItem: function (orderNo) {
                return this.MyDocMap.get(orderNo);
            },
            /**
             * 最新修改的元素. 当前只支持撤销一次
             */
            latestOpDoc: null,
            /**
             * 行增加记录。 行号
             */
            rowNo: 0,

            incrementNumThenReturn: function () {
                return this.rowNo++;
            },

            /**
             * 是否开始输入中文
             */
            inCompositionEvent: false,

            showTestText: function () {
                //显示用户的输入内容
                let userInput = document.getElementById("testInput");
                if (userInput) {
                    let obj = {}
                    for (let [k, v] of this.MyDocMap.entries()) {
                        if (v["data-hidden"] && v["data-hidden"] === true) {
                            continue
                        }
                        obj[k] = v
                    }

                    // console.log("userInput : ", userInput)
                    userInput.innerText = JSON.stringify(obj)
                }
            }
        },

        /**
         * 业务处理
         */
        biz: new MyBiz()
    }

    // 直接调用工具函数获取 A4 纸的像素尺寸
    let a4_size = window.myEdit.utils.A4SizeInPixels();
    window.myEdit.ctx.designWith = a4_size.width;

    /**
     * 业务处理
     */
    window.myEdit.biz = new MyBiz();

    /**
     * 窗口重载&文档重载事件 for 响应式
     */
    window.myEdit.utils.RefreshRootFrontSize();
    window.myEdit.utils.RefreshEditFrontSize();
    document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize);
    document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshEditFrontSize);
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            window.myEdit.utils.RefreshRootFrontSize();
            window.myEdit.utils.RefreshEditFrontSize();
        }
    });
    window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize);
    window.addEventListener('resize', window.myEdit.utils.RefreshEditFrontSize);
    /**
     * 窗口撤销事件.
     * js中的键盘事件只有三种：keydown、keyup、keypress。它们触发的顺序是：keydown -> keypress -> keyup。当按下一个键不放开，一般会重复地触发 keydown+keypress，直到放开后触发一个 keyup 事件。
     *
     */
    window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
}());

/**
 * 加载完成后执行
 */
window.onload = function () {
    //样式事件监听
    let styleList = document.getElementsByClassName("fixStyleInnerSpan");
    // console.log("styleList : ", styleList);
    if (styleList && styleList.length > 0) {
        for (let i = 0; i < styleList.length; i++) {
            // console.log(styleList[i]);
            styleList[i].addEventListener('click', window.myEdit.eventListener.SurroundContentsByStyleListener, true);
        }
    }

    //ctx
    window.myEdit.ctx.MyRoot = document.getElementById("noteshare");
    // 初始化第一个输入框
    let newParagraph = document.createElement("p");
    newParagraph.setAttribute("contenteditable", "true");
    let uuid = window.myEdit.utils.Uuid()
    let curOrder = window.myEdit.ctx.incrementNumThenReturn();
    newParagraph.setAttribute("data-id", uuid)
    newParagraph.setAttribute("id", uuid)
    newParagraph.setAttribute("data-order", curOrder)
    newParagraph.onkeyup = window.myEdit.eventListener.KeydownListener
    // newParagraph.innerHTML = "<br>"
    //添加一行
    window.myEdit.utils.AddNewParagraph(newParagraph);

    /**
     * 输入事件
     */
    window.myEdit.eventListener.RegisterEventHandle('input', window.myEdit.eventListener.InputListener);
    window.myEdit.eventListener.RegisterEventHandle('compositionstart', window.myEdit.eventListener.CompositionstartListener);
    window.myEdit.eventListener.RegisterEventHandle('compositionend', window.myEdit.eventListener.CompositionendListener);


    //监听鼠标抬起事件
    document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true);
    //这里监听鼠标按下事件
    document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
        const event = window.myEdit.utils.ParseEvent(e);
        console.log("mousedown: ", event)
        window.myEdit.utils.ProhibitDefaultEvent(event);
    }, false);


    /**
     * 使用说明
     */
    let testDiv = document.getElementById("testDevice");
    testDiv.innerText += "\n\n ### info ###" +
        "\n'#空格': h1" +
        "\n'##空格': h2" +
        "\n'###空格': h3" +
        "\n'####空格': h4" +
        "\n'#####空格': h5" +
        "\n'######空格': h6" +
        "\n'-空格': 无序列表" +
        "\n'1.空格': 有序序列表 形如 1. "
}