diff --git a/static/css/myEdit.css b/static/css/myEdit.css index e075a59..7e6266a 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -15,6 +15,186 @@ body, html { /*选中可编辑框是 外层隐藏黑线*/ outline: none; + + margin: 0; + padding: 0 +} + +ol, +ul { + list-style: none +} + +a { + color: #000; + text-decoration: none +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: 400 +} + +.fontsize24, +h1 { + font-size: 24px; + font-weight: 400; +} + +.fontsize20, +h2 { + font-size: 20px; + font-weight: 400; +} + +.fontsize18, +h3 { + font-size: 18px; + font-weight: 400; +} + +.fontsize16, +h4 { + font-size: 16px; + font-weight: 400; +} + +.fontsize14, +h5 { + font-size: 14px; + font-weight: 400; +} + +.fontsize12, +h6 { + font-size: 12px; + font-weight: 400; +} + +.fllil li { + float: left +} + +.fllir li { + float: right +} + +.fl { + float: left +} + +.fr { + float: right +} + +.radius { + border-radius: 100% +} + +.positionCenterLeft { + left: 0; + right: 0; + margin: auto +} + +.positionCenterTop { + top: 0; + bottom: 0; + margin: auto +} + +.positionCenter { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto +} + +.distable { + display: table +} + +.distablecell { + display: table-cell; + vertical-align: middle +} + +.textels { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +.marginCenter { + margin: 0 auto +} + +.t_l { + text-align: left +} + +.t_c { + text-align: center +} + +.t_r { + text-align: right +} + +.unLine { + text-decoration: underline +} + +.fiexd { + position: fixed +} + +.absolute { + position: absolute +} + +.relative { + position: relative +} + +.wrapper { + clear: both; + overflow: hidden +} + +.o-hidden { + overflow: hidden +} + +.hidden { + display: none +} + +.block { + display: block +} + +.lblock { + display: inline-block +} + +.clear { + clear: both +} + +.pointer { + cursor: pointer +} + +img { + border: 0; + vertical-align: middle } html { @@ -39,6 +219,7 @@ body { /*line-height: 1.5715;*/ background-color: #fff; font-feature-settings: "tnum", "tnum"; + font-weight: normal; display: flex; flex-direction: column; @@ -76,7 +257,7 @@ header { left: 0; /*right: 0;*/ width: 100%; - min-height: 58rem; + /*min-height: 58rem;*/ /*background-color: #ffebc3;*/ /*background-color: deepskyblue;*/ @@ -88,20 +269,6 @@ header { /*flex-wrap: nowrap;*/ } -/*#head_top {*/ -/* width: 100%;*/ -/* height: 32rem;*/ - -/* border: 1px #f5f5f5 solid;*/ -/* !*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*!*/ -/* background-color: rgb(255, 255, 255);*/ -/* !*background-color: blue;*!*/ - -/* font-size: 16rem;*/ -/* display: flex;*/ -/* justify-content: space-around;*/ -/* align-items: center;*/ -/*}*/ .fixStylePosition { display: block; @@ -123,33 +290,20 @@ header { /*height: 130rem;*/ padding: 5rem 5rem; + font-size: 16rem; + display: flex; justify-content: center; align-items: center; /*align-content: center;*/ + /*flex-direction: column;*/ + /*align-items: center;*/ + /*justify-content: center;*/ + /*align-content: center;*/ } .fixStyleInnerSpan { - margin: 0 3rem; -} - -#_position_more { - position: fixed; - z-index: 99; -} - -#_show_more { - margin: 1rem 0; - font-size: 12rem; - position: relative; - top: 1em; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - /*border: 1px red solid;*/ - min-width: 5em; + margin: 0 1rem; } main { @@ -158,7 +312,7 @@ main { flex-direction: column; align-items: center; - margin-top: 20rem; + margin-top: 30rem; /*min-height: 80%;*/ /*border: 1px greenyellow solid;*/ @@ -204,26 +358,6 @@ main { /*flex: 1 1 100%;*/ } -/*#yxl_note p span[data-flag="span_pre"] {*/ -/* !*border: 1px red solid;*!*/ -/* !*min-width: 2em;*!*/ -/* width: fit-content;*/ -/* height: fit-content;*/ -/* margin: 0 0;*/ -/* text-indent: 0;*/ -/* padding: 0 0;*/ - -/* display: inline;*/ - -/* justify-content: flex-end;*/ -/* -moz-user-select: none;*/ -/* user-select: none;*/ -/* -webkit-user-select: none;*/ - -/* box-sizing: border-box;*/ -/* white-space: nowrap;*/ -/*}*/ - #yxl_note p span[data-flag="span_content"] { /*border: 1px deepskyblue solid;*/ margin: 0 0; @@ -280,7 +414,7 @@ main { background-color: #e9e9eb; width: 1px; height: 18rem; - margin: 0 6rem; + margin: 0 3rem; } footer { diff --git a/static/css/my_drop.css b/static/css/my_drop.css new file mode 100644 index 0000000..0c43469 --- /dev/null +++ b/static/css/my_drop.css @@ -0,0 +1,134 @@ +/*隐藏滑动黑条*/ +::-webkit-scrollbar { + display: none; +} + +.my_style_nav { + font-size: 14rem; + + display: flex; + flex-direction: column; + align-items: flex-end; + + padding: 0 0; + min-width: 10rem; + + /*border: 1px blue solid;*/ +} + + +.my_style_nav ul { + position: fixed; + z-index: 99; + /*left: 0;*/ + top: 26rem; + + /*height: 0;*/ + /*width: 60rem;*/ + transform: translate(1em, 0rem); + + + display: none; + flex-direction: column; + align-items: flex-end; + /*justify-content: center;*/ + /*align-content: center;*/ + + /*opacity: 0;*/ + /*min-height: 70rem;*/ + max-height: 120rem; + /*overflow: hidden;*/ + overflow: auto; + + padding: 5rem 0; + border-radius: 5rem; + box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1); + background-color: rgb(255, 255, 255); + border: 1px #f5f5f5 solid; +} + + +.my_style_nav ul li { + float: none; + /*过渡代码*/ + transition: all .3s; + background-color: rgb(255, 255, 255); + /*opacity: 0;*/ + + font-size: 16px; + line-height: 1.2; + padding: 2rem 5rem; + min-width: 55rem; + /*border-radius: 5rem;*/ + /*min-width: 45rem;*/ + + /*border: 1px blue solid;*/ + + display: flex; + /*flex-direction: column;*/ + /*align-items: center;*/ + justify-content: flex-end; + /*align-content: center;*/ + +} + +.my_style_nav ul li span { + min-width: 20rem; +} + +/*.my_style_nav ul li.done::before{*/ +/* */ +/*}*/ + +.my_style_nav ul li[data-my-select="true"]::before { + content: attr(data-my-select-v); + width: 1.2em; + transform: rotate(-3deg); + + + /*content: "";*/ + /*border-color: black;*/ + /*border-style: solid;*/ + /*border-width: 0 0.1em 0.1em 0;*/ + /*height: 1em;*/ + /*width: 0.5em;*/ + /*transform: rotate(50deg);*/ + /*top: 1em;*/ + margin-right: 1em; +} + +/*!*奇数项初始往右边偏移100%*!*/ +/*.my_style_nav ul li:nth-of-type(1n) {*/ +/* transform: translate3d(100%, 0, 0);*/ +/*}*/ +/*!*偶数项初始往左边偏移100%*!*/ +/*.my_style_nav ul li:nth-of-type(2n) {*/ +/* transform: translate3d(-100%, 0, 0);*/ +/*}*/ + +/*.my_style_nav:focus ul {*/ +/* overflow: visible;*/ +/*}*/ + + +.my_style_nav span { + min-width: 14rem; + min-height: 20rem; + padding: 0 1rem; + /*border: 1px red solid;*/ +} + +/*透明度和互动同时进行*/ +.my_style_nav span:hover { + /*background: whitesmoke;*/ + border-radius: 5rem; +} + +/*兄弟 ul*/ +.my_style_nav span:hover + ul { + display: flex; +} + +.my_style_nav ul:hover { + display: flex; +} \ No newline at end of file diff --git a/static/css/reset.css b/static/css/reset.css new file mode 100644 index 0000000..c8b09a0 --- /dev/null +++ b/static/css/reset.css @@ -0,0 +1,201 @@ +* { + margin: 0; + padding: 0 +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: 400 +} + +ol, +ul { + list-style: none +} + +address, +caption, +cite, +code, +dfn, +em, +strong, +th, +var { + font-style: normal; + font-weight: 400 +} + +fieldset, +img { + border: 0 +} + +textarea { + resize: none +} + +a { + color: #000; + text-decoration: none +} + +.fontsize24, +h1 { + font-size: 24px +} + +.fontsize20, +h2 { + font-size: 20px +} + +.fontsize18, +h3 { + font-size: 18px +} + +.fontsize16, +h4 { + font-size: 16px +} + +.fontsize14, +h5 { + font-size: 14px +} + +.fontsize12, +h6 { + font-size: 12px +} + +.bold { + font-weight: 700 +} + +.fllil li { + float: left +} + +.fllir li { + float: right +} + +.fl { + float: left +} + +.fr { + float: right +} + +.radius { + border-radius: 100% +} + +.positionCenterLeft { + left: 0; + right: 0; + margin: auto +} + +.positionCenterTop { + top: 0; + bottom: 0; + margin: auto +} + +.positionCenter { + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto +} + +.distable { + display: table +} + +.distablecell { + display: table-cell; + vertical-align: middle +} + +.textels { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +.marginCenter { + margin: 0 auto +} + +.t_l { + text-align: left +} + +.t_c { + text-align: center +} + +.t_r { + text-align: right +} + +.unLine { + text-decoration: underline +} + +.fiexd { + position: fixed +} + +.absolute { + position: absolute +} + +.relative { + position: relative +} + +.wrapper { + clear: both; + overflow: hidden +} + +.o-hidden { + overflow: hidden +} + +.hidden { + display: none +} + +.block { + display: block +} + +.lblock { + display: inline-block +} + +.clear { + clear: both +} + +.pointer { + cursor: pointer +} + +img { + border: 0; + vertical-align: middle +} \ No newline at end of file diff --git a/static/js/common/ctx.js b/static/js/common/ctx.js index f65530a..4ce9233 100644 --- a/static/js/common/ctx.js +++ b/static/js/common/ctx.js @@ -9,13 +9,32 @@ define(function (require, exports, module) { console.log(("ctx init")); //可以修改的 - let editFrontSize = localStorage.getItem('editFrontSize'); + let editFrontSize = localStorage.getItem('refreshEditFrontSize'); if (editFrontSize !== undefined && editFrontSize !== null) { this.editFrontSize = editFrontSize; } else { this.editFrontSize = 14; } + //refreshPFontSize + let refreshPFontSize = localStorage.getItem('refreshPFontSize'); + if (refreshPFontSize !== undefined && refreshPFontSize !== null) { + this.refreshPFontSize = refreshPFontSize; + } else { + this.refreshPFontSize = { + "font-weight": "normal", + "font-size": "defaultFontSize", + }; + } + + //refreshEditBgColor + let refreshEditBgColor = localStorage.getItem('refreshEditBgColor'); + if (refreshEditBgColor !== undefined && refreshEditBgColor !== null) { + this.refreshEditBgColor = refreshEditBgColor; + } else { + this.refreshEditBgColor = null; + } + this.usn = "syjSyj"; this.docType = 0; diff --git a/static/js/common/utils.js b/static/js/common/utils.js index b4f8ff9..f5cc22f 100644 --- a/static/js/common/utils.js +++ b/static/js/common/utils.js @@ -168,7 +168,33 @@ define(function (require, exports, module) { } //textContent 性能 准确性更好 return element.textContent || element.innerText; + }, + + GetDpr() { + //获取屏幕像素密度 + let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值 + if (!dpr) { + //devicePixelRatio这个属性是可以获取到设备的dpr + let devicePixelRatio = window?.devicePixelRatio; + //判断dpr是否为整数 + let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g) + if (isRegularDpr) { + // 对于是整数的dpr，对dpr进行操作 + if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { + dpr = 3; + } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { + dpr = 2; + } else { + dpr = 1; + } + } else { + // 其他设备下，仍旧使用1倍的方案 + dpr = 1; + } + } + return dpr; } + } }); \ No newline at end of file diff --git a/static/js/event/MyEventListener.js b/static/js/event/MyEventListener.js index 47febf6..ed52374 100644 --- a/static/js/event/MyEventListener.js +++ b/static/js/event/MyEventListener.js @@ -74,10 +74,6 @@ define(function (require, exports, module) { } - //+/- - document.getElementById("my_fontSize+").addEventListener("click", this.AdjustMyFontSize, true) - document.getElementById("my_fontSize-").addEventListener("click", this.AdjustMyFontSize, true) - // document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true) //::before //样式事件监听 @@ -88,13 +84,19 @@ define(function (require, exports, module) { myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false); } } + + //监听下拉事件 + let dropStyleList = document.querySelectorAll(".my_style_nav ul"); + for (let i = 0; i < dropStyleList.length; i++) { + dropStyleList[i].addEventListener("click", this.DropDownStyleSelectListener, false); + } } - AdjustMyFontSize(e) { - const handle = require('./impl/AdjustMyFontSizeEventImpl'); - handle.handle(e); + DropDownStyleSelectListener(e) { + require('./impl/DropDownStyleSelectEventImpl').handle(e); } + Mousedown(e) { const handle = require('./impl/MouseDownEventImpl'); handle.handle(e); diff --git a/static/js/event/impl/AdjustMyFontSizeEventImpl.js b/static/js/event/impl/AdjustMyFontSizeEventImpl.js deleted file mode 100644 index 079fa2e..0000000 --- a/static/js/event/impl/AdjustMyFontSizeEventImpl.js +++ /dev/null @@ -1,53 +0,0 @@ -"use strict"; -/** - * 使用样式事件 - */ -define(function (require, exports, module) { - - function handle(e) { - const ctx = require("../../common/ctx"); - const utils = require("../../common/utils"); - - let event = utils.ParseEvent(e); - let curEl = utils.GetEventTarget(event); - let curId = curEl.getAttribute("id"); - if (curId === "my_fontSize0") { - localStorage.clear(); - location.reload(); - return - } - - console.log("curId : ", curId, " target: ", curEl) - if (curId === null) { //防止点击到 path - let tmpSvg = curEl.parentElement.closest("span"); - if (tmpSvg !== undefined && tmpSvg !== null) { - curId = tmpSvg.getAttribute("id"); - } - } - if (curId === "my_fontSize+") { - if (ctx.editFrontSize >= 72) { - ctx.editFrontSize = 72; - } else { - ctx.editFrontSize++; - } - } else { - if (ctx.editFrontSize <= 12) { - ctx.editFrontSize = 12 - } else { - ctx.editFrontSize--; - } - } - - //触发resize - let resizeImp = require("./RSizeEventImpl"); - resizeImp.refreshEditFrontSize(); - - //保存在本地 - localStorage.setItem('editFrontSize', ctx.editFrontSize); - //show - document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px" - } - - //导出 - exports.handle = handle; -}); \ No newline at end of file diff --git a/static/js/event/impl/DropDownStyleSelectEventImpl.js b/static/js/event/impl/DropDownStyleSelectEventImpl.js new file mode 100644 index 0000000..6098b38 --- /dev/null +++ b/static/js/event/impl/DropDownStyleSelectEventImpl.js @@ -0,0 +1,153 @@ +"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; +}); \ No newline at end of file diff --git a/static/js/event/impl/MutationObserverImpl.js b/static/js/event/impl/MutationObserverImpl.js index ad0ba2e..6c96eba 100644 --- a/static/js/event/impl/MutationObserverImpl.js +++ b/static/js/event/impl/MutationObserverImpl.js @@ -26,7 +26,7 @@ define(function (require, exports, module) { } function other(mutation) { - console.log("other ", mutation) + // console.log("other ", mutation) // console.log("other -> mutation : ", mutation, // // 观察的变动类型（attributes、characterData或者childList）。 // "\ntype", mutation.type, @@ -55,14 +55,14 @@ define(function (require, exports, module) { // target.clone() if (target.nodeName === "DIV" && mutation.previousSibling !== null) { 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() - ) + // 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); let curNo = ctx.incrementNumThenReturn(); @@ -165,7 +165,7 @@ define(function (require, exports, module) { lastSpan = tmpSpan; } //选区调整 - console.log("lastSpan : ", lastSpan) + // console.log("lastSpan : ", lastSpan) utils.GetSelection().setPosition(lastSpan, 1); } else { console.log("TODO 暂时不支持") diff --git a/static/js/event/impl/RSizeEventImpl.js b/static/js/event/impl/RSizeEventImpl.js index d63b80b..74ca1bc 100644 --- a/static/js/event/impl/RSizeEventImpl.js +++ b/static/js/event/impl/RSizeEventImpl.js @@ -24,6 +24,7 @@ define(function (require, exports, module) { */ function refreshRootFrontSize() { const ctx = require("../../common/ctx"); + const utils = require("../../common/utils"); let designWidth = ctx.designWith; let curDoc = document.documentElement;//当前文档的 root 元素 let curClientW = ctx.getScreenWidth(); @@ -38,7 +39,7 @@ define(function (require, exports, module) { ctx.MyRoot().style.width = "100%"; } - let dpr = getDpr(); + let dpr = utils.GetDpr(); //set 1rem = curClientW / designWidth (支持响应式) let nowFrontSize = '1px'; if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) { @@ -47,10 +48,21 @@ define(function (require, exports, module) { nowFrontSize = (curClientW / designWidth) + 'px'; } + console.log( + "\nuserAgent: ", window.navigator.userAgent, + "\nisTablet: ", ctx.isTablet, + "\nisMobile: ", ctx.isMobile, + "\nisIOS: ", ctx.isIOS, + "\nisAndroid: ", ctx.isAndroid, + "\nwindow.innerWidth: ", window.innerWidth, + "\ngetScreenWidth: ", ctx.getScreenWidth(), + "curClientW : ", curClientW, + "\ndesignWidth: ", designWidth, + "\n1rem = ", nowFrontSize, + "\nnowFrontSize: ", nowFrontSize); // curDoc.style.fontSize = dpr * nowFrontSize; - curDoc.style.fontSize = nowFrontSize; - console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); + curDoc.style.fontSize = nowFrontSize; // let testDiv = document.getElementById("testDevice"); // testDiv.innerText += "\ncurClientW: " + curClientW; // testDiv.innerText += "\ndesignWith: " + designWidth; @@ -69,33 +81,10 @@ define(function (require, exports, module) { } - function getDpr() { - //获取屏幕像素密度 - let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值 - if (!dpr) { - //devicePixelRatio这个属性是可以获取到设备的dpr - let devicePixelRatio = window?.devicePixelRatio; - //判断dpr是否为整数 - let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g) - if (isRegularDpr) { - // 对于是整数的dpr，对dpr进行操作 - if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { - dpr = 3; - } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { - dpr = 2; - } else { - dpr = 1; - } - } else { - // 其他设备下，仍旧使用1倍的方案 - dpr = 1; - } - } - return dpr; - } function refreshEditFrontSize() { const ctx = require("../../common/ctx"); + const utils = require("../../common/utils"); let curClientW = ctx.getScreenWidth(); if (!curClientW) { return @@ -103,7 +92,7 @@ define(function (require, exports, module) { //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html //12～72 px 建议最大字体是48px - let dpr = getDpr(); + let dpr = utils.GetDpr(); let myEditFrontSize = document.getElementById("myEdit_main"); if (ctx.isTablet) { @@ -113,7 +102,19 @@ define(function (require, exports, module) { } //show - document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px" + let curMyFontSizeEl = document.getElementById("cur_my_font_size"); + curMyFontSizeEl.textContent = ctx.editFrontSize + "px"; + //更新默认值 + let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li"); + for (let i = 0; i < liList.length; i++) { + let tmpLi = liList[i]; + if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) { + tmpLi.setAttribute("data-my-select", "true"); + tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v")); + } else { + tmpLi.removeAttribute("data-my-select"); + } + } } diff --git a/static/js/index.js b/static/js/index.js index 8fd3bc5..ec33028 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -1,5 +1,14 @@ "use strict"; define(function (require) { + const isDebug = false; // 控制是否屏蔽全局console.log 日志；isDebug设为false即可屏蔽 + console.log = (function (oldLogFunc) { + return function () { + if (isDebug) { + oldLogFunc.apply(this, arguments); + } + } + })(console.log); + const ctx = require('./common/ctx'); const eventListener = require('./event/MyEventListener') const utils = require('./common/utils') diff --git a/static/yanxuelu.html b/static/yanxuelu.html index 6216068..7cedc79 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -11,7 +11,9 @@ - + + +