From 07dcd13877201d17ce3829eed77f0f05c3f9960f Mon Sep 17 00:00:00 2001
From: shaoyongjun <mylomen.shao@freebrio.com>
Date: Sun, 10 Nov 2024 22:57:28 +0800
Subject: [PATCH] to:sync
---
static/css/myEdit.css | 248 ++++++++++++++----
static/css/my_drop.css | 134 ++++++++++
static/css/reset.css | 201 ++++++++++++++
static/js/common/ctx.js | 21 +-
static/js/common/utils.js | 26 ++
static/js/event/MyEventListener.js | 16 +-
.../event/impl/AdjustMyFontSizeEventImpl.js | 53 ----
.../impl/DropDownStyleSelectEventImpl.js | 153 +++++++++++
static/js/event/impl/MutationObserverImpl.js | 20 +-
static/js/event/impl/RSizeEventImpl.js | 59 +++--
static/js/index.js | 9 +
static/yanxuelu.html | 194 +++++++++-----
12 files changed, 905 insertions(+), 229 deletions(-)
create mode 100644 static/css/my_drop.css
create mode 100644 static/css/reset.css
delete mode 100644 static/js/event/impl/AdjustMyFontSizeEventImpl.js
create mode 100644 static/js/event/impl/DropDownStyleSelectEventImpl.js
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 @@
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
- <script src="./js/lib/sea.js"></script>
+ <link rel="stylesheet" type="text/css" href="./css/my_drop.css">
+ <!-- <script src="./js/lib/sea.js"></script>-->
+ <script src="https://www.mylomen.com/js/lib/sea.js"></script>
<script>
seajs.config({
// base:'path',
@@ -32,56 +34,43 @@
<body>
<header>
- <!-- 顶部 -->
- <!-- <div id="head_top" style="font-size: 12rem">-->
- <!-- <div>测试</div>-->
- <!-- <div></div>-->
- <!-- <div>-->
- <!-- <span><button id="my_fontSize0">cls</button></span>-->
- <!-- <span>｜</span>-->
- <!-- <span><button id="my_fontSize+">+</button></span>-->
- <!-- <span>｜</span>-->
- <!-- <span><button id="my_fontSize-">-</button></span>-->
- <!-- </div>-->
- <!-- </div>-->
<div class="fixStylePosition" id="_style_utils">
<div class="fixStyleOut">
- <div style="display: flex;margin: 0 0; ">
- <div style="display: flex; margin: 0 0; align-items: center">
- <!-- <div>-->
- <!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"-->
- <!-- xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">-->
- <!-- <path-->
- <!-- d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"-->
- <!-- fill="currentColor"></path>-->
- <!-- </svg>-->
- <!-- </div>-->
- <span id="my_fontSize-" style=" transform: rotate(90deg); align-content: center;
- border-radius: 3rem;
- background-color:lightgrey;">
- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
- xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
- <path
- d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
- fill="currentColor"></path>
- </svg>
- </span>
- <div style="margin: 0 2rem">
- <span id="cur_my_font_size" style="font-size: 14px">14px</span>
- </div>
- <span id="my_fontSize+" style=" transform: rotate(-90deg); align-content: center;
- margin-left: 2rem;
- border-radius: 3rem;
- background-color: lightgrey;">
- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
+
+ <!-- 字体 -->
+ <div style="display: flex;">
+ <span>
+ <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
+ xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
+ <path
+ d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
+ fill="currentColor"></path>
+ </svg>
+ </span>
+ <div class="my_style_nav">
+ <span>
+ <svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<path
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
fill="currentColor"></path>
</svg>
</span>
+ <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshPFontSize">
+ <li data-my-select="true" data-my-select-v="✔" data-my-style-k="font-weight,font-size"
+ data-my-style-v="normal,defaultFontSize"><span>正文</span>
+ </li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,24px"><span>H1</span></li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,20px"><span>H2</span></li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,18px"><span>H3</span></li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,16px"><span>H4</span></li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,14px"><span>H5</span></li>
+ <li data-my-style-k="font-weight,font-size" data-my-style-v="500,12px"><span>H6</span></li>
+ </ul>
</div>
</div>
+
+
<div class="my-divider-item"></div>
<div style="display: flex;">
@@ -93,14 +82,6 @@
fill="currentColor"></path>
</svg>
</span>
- <!-- <div>-->
- <!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"-->
- <!-- xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">-->
- <!-- <path-->
- <!-- d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"-->
- <!-- fill="currentColor"></path>-->
- <!-- </svg>-->
- <!-- </div>-->
</div>
<div style="width: 10rem"></div>
<div>
@@ -152,7 +133,8 @@
</div>
<div class="my-divider-item"></div>
- <div>
+
+ <div style="display: flex; ">
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
xmlns="http://www.w3.org/2000/svg">
@@ -173,6 +155,34 @@
</g>
</svg>
</span>
+
+ <span class="my_style_nav">
+ <span>
+ <svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
+ xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
+ <path
+ d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
+ fill="currentColor">
+ </path>
+ </svg>
+ </span>
+ <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditColor">
+ <li data-my-select="true" data-my-select-v="✔" data-my-style-k="color"
+ data-my-style-v="white">
+ <span>无色</span>
+ </li>
+ <li data-my-style-k="color" data-my-style-v="red"><span style="color: red">红色</span></li>
+ <li data-my-style-k="color" data-my-style-v="#edce02"><span style="color: #edce02">黄色</span>
+ </li>
+ <li data-my-style-k="color" data-my-style-v="blue"><span style="color: blue">蓝色</span></li>
+ <li data-my-style-k="color" data-my-style-v="black"><span style="color: black">黑色</span>
+ </li>
+ <li data-my-style-k="color" data-my-style-v="gray"><span style="color: gray">灰色</span></li>
+ </ul>
+ </span>
+ </div>
+
+ <div style="display: flex;">
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
xmlns="http://www.w3.org/2000/svg">
@@ -199,10 +209,64 @@
</g>
</svg>
</span>
+
+ <span class="my_style_nav">
+ <span>
+ <svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
+ xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
+ <path
+ d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
+ fill="currentColor"></path>
+ </svg>
+ </span>
+ <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditBgColor">
+ <li data-my-select="true" data-my-select-v="✔" data-my-style-k="background-color"
+ data-my-style-v="transparent">
+ <span>空白</span>
+ </li>
+ <li data-my-style-k="background-color" data-my-style-v="lightcoral"><span
+ style="color: lightcoral">浅红</span></li>
+ <li data-my-style-k="background-color" data-my-style-v="#fff897"><span
+ style="color: #fff897">浅黄</span>
+ </li>
+ <li data-my-style-k="background-color" data-my-style-v="lightblue"><span
+ style="color: lightblue">浅蓝</span></li>
+ </ul>
+ </span>
</div>
<div class="my-divider-item"></div>
- <div style="display: flex; flex-direction:column; align-items: flex-end">
+ <div style="display: flex;margin: 0 0; ">
+ <span>
+ <span id="cur_my_font_size" style="font-size: 14px">14px</span>
+ </span>
+
+ <div class="my_style_nav">
+ <span>
+ <svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
+ xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
+ <path
+ d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
+ fill="currentColor"></path>
+ </svg>
+ </span>
+
+ <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditFrontSize">
+ <li data-my-style-k="font-size" data-my-style-v="12"><span>12px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="14"><span>14px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="16"><span>16px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="18"><span>18px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="20"><span>21px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="24"><span>24px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="36"><span>36px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="48"><span>48px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="60"><span>60px</span></li>
+ <li data-my-style-k="font-size" data-my-style-v="72"><span>72px</span></li>
+ </ul>
+ </div>
+ </div>
+
+ <div>
<span>
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
@@ -210,28 +274,14 @@
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
fill="#535353"></path>
</svg>
-
-
+ <!-- <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="other">-->
+ <!-- <li data-my-select="true" data-my-select-v="✔">h1</li>-->
+ <!-- <li>h2</li>-->
+ <!-- <li>h3</li>-->
+ <!-- <li>h4</li>-->
+ <!-- <li>h5</li>-->
+ <!-- </ul>-->
</span>
-
- <div id="_position_more">
- <div id="_show_more">
- <!-- <div id="my_fontSize0">-->
- <!-- cls-->
- <!-- </div>-->
- <!-- <div>-->
- <!-- <span id="my_fontSize-" style="border: 1px red solid; min-width: 2em">-</span>-->
- <!-- <span style="border: 1px red solid;">14px</span>-->
- <!-- <span id="my_fontSize+" style="border: 1px red solid; min-width: 6rem">+</span>-->
- <!-- </div>-->
- <!-- <div style="display: flex;align-content:space-between;">-->
- <!-- <span>-->
- <!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="PrinterOutlined"><path d="M18.788 10.74a.97.97 0 1 1-1.94 0 .97.97 0 0 1 1.94 0Z" fill="currentColor"></path><path d="M6.5 1.333h11c1.15 0 1.97.967 1.967 1.967v3.367h.29a2.91 2.91 0 0 1 2.91 2.909v5.814c0 1.11-.976 1.943-1.937 1.943h-1.942v3.394c0 1.07-.956 1.94-1.94 1.94H7.153c-1.063 0-1.94-.942-1.94-1.94v-3.394h-1.94c-.932 0-1.942-.833-1.938-1.94V9.577a2.91 2.91 0 0 1 2.909-2.91h.29V3.3c0-1.05.867-1.97 1.967-1.967Zm11.027 5.334V3.273H6.473v3.394h11.054ZM5.212 15.394v-.485c0-1.088.945-1.94 1.94-1.94h9.697c1.077 0 1.94.973 1.94 1.94v.485h1.938V9.576a.97.97 0 0 0-.97-.97H4.244a.97.97 0 0 0-.97.97v5.818h1.94Zm1.94-.485v5.818h9.697V14.91H7.152Z" fill="currentColor"></path></svg>-->
- <!-- </span>-->
- <!-- <span>打印</span>-->
- <!-- </div>-->
- </div>
- </div>
</div>
</div>
</div>