server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

to:sync

Browse Source
This commit is contained in:
shaoyongjun 2024-11-07 00:17:43 +08:00
parent f43a7236d3
commit 01de31ecc2
9 changed files with 282 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/common/ctx.js
View File

@ -67,7 +67,7 @@ define(function (require, exports, module) {
}
getCurRowNo(){
return this.rowNol
return this.rowNo
}
getScreenWidth() {

4
static/js/event/MyEventListener.js
View File

@ -54,10 +54,10 @@ define(function (require, exports, module) {
//样式事件监听
let styleList = document.getElementsByClassName("fixStyleInnerSpan");
console.log("styleList : ", styleList);
// console.log("styleList : ", styleList);
if (styleList && styleList.length > 0) {
for (let i = 0; i < styleList.length; i++) {
console.log(styleList[i]);
// console.log(styleList[i]);
styleList[i].addEventListener('click', this.ApplyStyleListener, false);
}
}

5
static/js/event/impl/ApplyStyleEventImpl.js
View File

@ -76,7 +76,10 @@ define(function (require, exports, module) {
for (let [key, curP] of taskMap) {
let curSpanContent = curP.querySelector("span[data-flag='span_content']");
console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent);
if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) {
if (curSpanContent.childNodes === undefined
|| curSpanContent.childNodes === null
|| curSpanContent.childNodes.length <= 0
|| curSpanContent.innerText.toString().trim().length === 0) {
continue
}
let firstItem = curSpanContent.childNodes[0];

139
static/js/event/impl/EnterEventImpl.js
View File

@ -9,7 +9,144 @@ define(function (require, exports, module) {
let event = utils.ParseEvent(e);
let curEl = utils.GetEventTarget(event);
// console.log("Enter event", event, "\ncurEl: ", curEl)
utils.ProhibitDefaultEvent(event);
let select = utils.GetSelection();
let selectRange = select.getRangeAt(0);
let start = select.anchorOffset;
let anchorNode = select.anchorNode;
let end = select.focusOffset;
let focusNode = select.focusNode;
let curP = select.focusNode.parentElement.closest("p");
let spanContent = curP.querySelector("span[data-flag='span_content']")
let spanContentItems = spanContent.querySelectorAll("span");
console.log("Enter event", event, "\ncurEl: ", curEl,
"\nstart-end: ", start, end,
)
console.log(select)
console.log(spanContent)
console.dir(spanContentItems)
if (spanContentItems === null || spanContentItems.length === 0) { //没有子元素 -> 还没有样式
let txtLen = spanContent.innerText.trim().length;
if (txtLen === 0) {//内容确实为空
console.log("直接新增一行即可")
ctx.MyRoot().append(document.createElement("p"));
} else { // 内容不为空
if (select.isCollapsed) { //没有选中选区
if (start === txtLen) { //光标在行尾
console.log("内容不为空 -> 光标在行尾");
//新增一行
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
span.append(document.createElement("br"));
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
utils.InsertAfter(curP, newParagraph);
utils.GetSelection().removeAllRanges();
utils.GetSelection().setPosition(newParagraph, 0);
newParagraph.focus();
} else if (start === 0) { //光标在行首
console.log("内容不为空 -> 光标在行首");
let spanContentTxt = spanContent.innerText
spanContent.innerHTML = "<br />"; //保留的部分
//新增一行
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
utils.InsertAfter(curP, newParagraph);
utils.GetSelection().removeAllRanges();
utils.GetSelection().setPosition(newParagraph, 0);
newParagraph.focus();
} else {//光标在中间
console.log("内容不为空 -> 光标在列间");
let spanContentTxt = spanContent.innerText
spanContent.innerText = spanContentTxt.substring(0, start); //保留的部分
//新增一行
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
utils.InsertAfter(curP, newParagraph);
utils.GetSelection().removeAllRanges();
utils.GetSelection().setPosition(newParagraph, 0);
newParagraph.focus();
}
} else { //有选区
let selectRangeTxt = select.getRangeAt(0).extractContents();
console.log("选中的内容整体平移到新建的下一行。 选中的内容是: ", selectRangeTxt);
console.dir(selectRangeTxt);
//新增一行
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
span.append(selectRangeTxt);
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
utils.InsertAfter(curP, newParagraph);
utils.GetSelection().removeAllRanges();
utils.GetSelection().setPosition(newParagraph, 0);
newParagraph.focus();
}
}
} else { //有子元素
console.log("有子元素，说明添加过样式");
console.log(spanContent)
console.group(spanContentItems)
if (select.isCollapsed) {//没有选区
console.log("没有选区")
} else { //有选区
console.log("有选区 选中的到下一行，未选中的在原来的行")
console.log(select)
console.log(selectRange)
let nextSpanList = []
let select2 = window.getSelection() || document.selection
let rangeAt = select2.getRangeAt(0)
console.dir(select2)
console.dir(rangeAt)
console.dir(spanContent)
for (const child of spanContent.children) {
console.log(child, select2.containsNode(child, false), select2.containsNode(child, true))
if (select2.containsNode(child, true)) {
nextSpanList.push(child.cloneNode(true))
child.remove();
}
}
// for (const curSpan of spanContent.children) {
// for (let i = 0; i < spanContent.childNodes.length; i++) {
// let curSpan = spanContent.childNodes[i];
// console.log("check: ", curSpan, select.containsNode(curSpan, true))
// if (select.containsNode(curSpan, true)) {
// nextSpanList.push(curSpan.cloneNode(true))
// curSpan.remove();
// }
// }
if(nextSpanList.length===spanContentItems.length){
spanContent.innerHTML="<br/>"
}
//新增一行
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
for (let i = 0; i < nextSpanList.length; i++) {
span.append(nextSpanList[i]);
}
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
utils.InsertAfter(curP, newParagraph);
utils.GetSelection().removeAllRanges();
utils.GetSelection().setPosition(newParagraph, 0);
newParagraph.focus();
}
}
}

2
static/js/event/impl/KeyDownEventImpl.js
View File

@ -26,7 +26,7 @@ define(function (require, exports, module) {
//回车事件,禁止处理。防止生成 div
if (keyCode === 13) {
// utils.ProhibitDefaultEvent(event);
utils.ProhibitDefaultEvent(event);
}
//在鼠标按下的时候删除，体验更好

6
static/js/event/impl/KeyUpEventImpl.js
View File

@ -38,9 +38,9 @@ define(function (require, exports, module) {
//回车事件
if (keyCode === 13 /* && currentNode === key.lastElementChild */) {
// const enterHandle = require('./EnterEventImpl')
// enterHandle.handle(e);
// return;
const enterHandle = require('./EnterEventImpl')
enterHandle.handle(e);
return;
}
}

20
static/js/event/impl/MutationObserverImpl.js
View File

@ -47,24 +47,24 @@ define(function (require, exports, module) {
}
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
"\n next: ", newParagraph,
"\ncurRowNo: ", ctx.getCurRowNo()
)
let utils = require("../../common/utils");
let ctx = require("../../common/ctx");
if (ctx.getCurRowNo() === 0) {
return
}
if (newParagraph !== undefined && newParagraph !== null) {
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
@ -76,7 +76,9 @@ define(function (require, exports, module) {
preSpan = document.createElement("span");
preSpan.setAttribute("contenteditable", "false")
preSpan.setAttribute("data-flag", "span_pre")
newParagraph.appendChild(preSpan);
// newParagraph.appendChild(preSpan);
//添加到元素首位
newParagraph.insertBefore(preSpan, newParagraph.firstChild);
} else {
console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan)
}

5
static/js/index.js
View File

@ -8,16 +8,17 @@ define(function (require) {
// 初始化第一个输入框
let newParagraph = document.createElement("p");
newParagraph.setAttribute("id", utils.Uuid(ctx.usn, ctx.docType));
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
//前置 span
let preSpan = document.createElement("span");
preSpan.setAttribute("contenteditable", "false")
preSpan.setAttribute("data-flag", "span_pre")
newParagraph.append(preSpan);
//内置span
let span = document.createElement("span");
span.append(document.createElement("br"));
span.setAttribute("data-flag", "span_content")
newParagraph.append(span);
newParagraph.append(preSpan, span);
//添加一行
ctx.MyRoot().append(newParagraph);
//收起选区到一个点，光标落在一个可编辑元素上

7
static/yanxuelu.html
View File

@ -216,6 +216,13 @@
console.dir(select)
console.dir(rangeAt)
let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']");
console.dir(spanContent)
for (const child of spanContent.children) {
console.log(child, select.containsNode(child, false), select.containsNode(child, true))
}
}
</script>