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

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

    function handle(e) {
        const utils = require("../../common/utils");
        let event = utils.ParseEvent(e);
        let target = utils.GetEventTarget(event);
        console.log("target: ", target, target.tagName)
        if (target.tagName === "SPAN") {
            target = target.parentElement;
            console.log("cur_target: ", target, target.tagName)
        }
        if (target.tagName === "LI") {
            let curLi = target;
            //处理 下拉选择/取消选择
            let myParent = curLi.parentElement;
            let dataMySelectV = myParent.getAttribute("data-my-select-v");
            let liList = myParent.querySelectorAll("li");
            for (let i = 0; i < liList.length; i++) {
                let tmpLi = liList[i];
                if (tmpLi.textContent === curLi.textContent) {
                    tmpLi.setAttribute("data-my-select", "true");
                    tmpLi.setAttribute("data-my-select-v", dataMySelectV);
                    tmpLi.style.setProperty("background-color", "#f0f0f0");
                    continue;
                }

                tmpLi.setAttribute("data-my-select", "false");
                tmpLi.removeAttribute("data-my-select-v");
                tmpLi.style.removeProperty("background-color");
            }


            //refreshPFontSize ; refreshEditFrontSize ; refreshEditColor ; refreshEditBgColor; other
            let dataMyStyleType = myParent.getAttribute("data-my-style-type");
            switch (dataMyStyleType) {
                case "refreshPFontSize":
                    refreshPFontSize(target);
                    break;
                case "refreshEditFrontSize":
                    refreshEditFrontSize(target);
                    break;
                case "refreshEditColor":
                    refreshEditColor(target);
                    break
                case "refreshEditBgColor":
                    refreshEditBgColor(target);
                    break
                default :
                    console.log("暂时不支持")
                    break
            }
        }
    }

    function refreshEditColor(curLi) {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let select = utils.GetSelection();
        let curP = select.anchorNode.parentElement.closest("p");
        let dataMySelectK = curLi.getAttribute("data-my-style-k");
        let dataMySelectV = curLi.getAttribute("data-my-style-v");

        let tSpan = curLi.parentElement.parentElement.previousElementSibling;
        console.log("refreshEditColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))

        tSpan.setAttribute("data-v", dataMySelectV)

    }

    function refreshEditBgColor(curLi) {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let select = utils.GetSelection();
        let curP = select.anchorNode.parentElement.closest("p");
        let dataMySelectK = curLi.getAttribute("data-my-style-k");
        let dataMySelectV = curLi.getAttribute("data-my-style-v");

        let tSpan = curLi.parentElement.parentElement.previousElementSibling;
        console.log("refreshEditBgColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))

        tSpan.setAttribute("data-v", dataMySelectV)
    }

    function refreshPFontSize(curLi) {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let select = utils.GetSelection();
        let curP = select.anchorNode.parentElement.closest("p");
        let dataMySelectK = curLi.getAttribute("data-my-style-k");
        let dataMySelectV = curLi.getAttribute("data-my-style-v");

        let kList = dataMySelectK.toString().split(",");
        let vList = dataMySelectV.toString().split(",");
        let total = kList.length;
        let num = 0;
        for (let i = 0; i < kList.length; i++) {
            if (curP.style.getPropertyValue(kList[i]) === vList[i]) {
                num++;
            }

            if (vList[i] === "defaultFontSize") {
                let myEditFrontSize = document.getElementById("myEdit_main");
                curP.style.setProperty(kList[i], myEditFrontSize.style.fontSize);
            } else {
                curP.style.setProperty(kList[i], vList[i]);
            }

        }

        //移除
        if (total === num) {
            for (let j = 0; j < kList.length; j++) {
                curP.style.removeProperty(kList[j]);
            }
        }
    }

    function refreshEditFrontSize(curLi) {
        const ctx = require("../../common/ctx");
        const utils = require("../../common/utils");
        let curStyleV = curLi.getAttribute("data-my-style-v");
        //设置当前的尺寸
        ctx.editFrontSize = curStyleV;
        let curClientW = ctx.getScreenWidth();
        if (!curClientW) {
            return
        }
        //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
        //12～72 px 建议最大字体是48px
        let dpr = utils.GetDpr();
        let myEditFrontSize = document.getElementById("myEdit_main");
        if (ctx.isTablet) {
            myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
        } else {
            myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
        }

        console.log("refreshEditFrontSize ", curLi, curStyleV,
            "\nctx.editFrontSize: ", ctx.editFrontSize)

        //保存在本地 refreshEditFrontSize
        localStorage.setItem('refreshEditFrontSize', ctx.editFrontSize);
        //show
        document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
    }

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