"use strict"; /** * 使用样式事件 */ define(function (require, exports, module) { function handle(event) { let utils = require("../../common/utils"); let curS = utils.GetSelection(); let curP = utils.GetEventTarget(event); let styleK = curP.getAttribute("data-k"); let styleV = curP.getAttribute("data-v"); if (styleK === undefined || styleK === null) { styleK = curP.closest("span").getAttribute("data-k"); styleV = curP.closest("span").getAttribute("data-v"); // console.log("closest: ", curP, curP.closest("span")) } for (let i = 0; i < curS.rangeCount; i++) { let curRange = curS.getRangeAt(i); let curCommonEle = curRange.commonAncestorContainer; let curStartContainerEle = curRange.startContainer; let curEndContainerEle = curRange.endContainer; let taskMap = new Map; let start = curRange.startOffset; let end = curRange.endOffset; if (start > end) { let tmpS = start; start = end; end = tmpS; } let tmpStart = getSpanContent(curStartContainerEle); let tmpEnd = getSpanContent(curEndContainerEle); if (tmpStart.getAttribute("id") === tmpEnd.getAttribute("id")) { taskMap.set(tmpStart.getAttribute("id"), tmpStart) } else { let tmp = tmpStart; if (parseInt(tmpStart.getAttribute("data-order")) > parseInt(tmpEnd.getAttribute("data-order"))) { tmpStart = tmpEnd; tmpEnd = tmp; } taskMap.set(tmpStart.getAttribute("id"), tmpStart) while (true) { let nextTask = tmpStart.nextSibling; taskMap.set(nextTask.getAttribute("id"), nextTask); if (nextTask.getAttribute("id") === tmpEnd.getAttribute("id")) { break } } } if (taskMap.size === 1 && start === end) { continue } for (let [key, curSpanContent] of taskMap) { console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size); console.dir(taskMap) console.dir(curS) console.dir(curRange) if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) { continue } let firstItem = curSpanContent.childNodes[0]; console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType); let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3; if (isEmptyStyle) { let copySpan = curSpanContent.cloneNode(); copySpan.innerHTML = ""; for (let j = 0; j < curSpanContent.innerText.length; j++) { // console.log(curStartP.innerText.charAt(j)) if (j >= start && j < end) { let tmpSpan = document.createElement("span"); tmpSpan.innerText = curSpanContent.innerText.charAt(j); applySpanStyleKV(tmpSpan, styleK, styleV); copySpan.append(tmpSpan); } else { let tmpSpan = document.createElement("span"); tmpSpan.innerText = curSpanContent.innerText.charAt(j); copySpan.append(tmpSpan); } } curSpanContent.innerHTML = copySpan.innerHTML; //光标保持. for 单行 if (taskMap.size === 1) { let s = window.getSelection(); if (s.rangeCount > 0) s.removeAllRanges(); let newR = document.createRange(); //重新获取元素 let tmpP = curSpanContent; let childrenSize = tmpP.childNodes.length; console.log("debug007: ", tmpP, start, end, childrenSize) newR.setStart(tmpP, start); newR.setEnd(tmpP, end); //区域 添加 到选区 s.addRange(newR); } } else { let total = 0, effectNum = 0; for (let j = 0; j < curSpanContent.childNodes.length; j++) { let tmpSpan = curSpanContent.childNodes[j]; if (curS.containsNode(tmpSpan, true)) { total++; if (spanContainsStyleKV(tmpSpan, styleK, styleV)) { console.dir(tmpSpan); } else { effectNum++; applySpanStyleKV(tmpSpan, styleK, styleV); } } } //如果没有设置任何一个 则取消 if (effectNum === 0) { for (let j = 0; j < curSpanContent.childNodes.length; j++) { let tmpSpan = curSpanContent.childNodes[j]; if (curS.containsNode(tmpSpan, true)) { removeSpanStyleKV(tmpSpan, styleK, styleV); } } } } } } } function removeSpanStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); for (let i = 0; i < kList.length; i++) { if (span.style.getPropertyValue(kList[0]) === vList[0]) { span.style.removeProperty(kList[0]); } } } function spanContainsStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); let total = kList.length, match = 0; for (let i = 0; i < kList.length; i++) { if (span.style.getPropertyValue(kList[0]) === vList[0]) { match++; } } return total === match; } function applySpanStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); for (let i = 0; i < kList.length; i++) { span.style.setProperty(kList[i], vList[i]); } } function getSpanContent(item) { let tmp = item; if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") { tmp = item.parentElement.closest("span[data-flag='span_content']"); } return tmp } //导出 exports.handle = handle; });