"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 start = curRange.startOffset;
let end = curRange.endOffset;
if (start > end) {
let tmpS = start;
start = end;
end = tmpS;
}
if (start === end) {
continue
}
// //一个元素节点,例如
和
。
// let curComIsSpan = curCommonEle.nodeType === 1 && curCommonEle.nodeName === "SPAN";
// let curComParentIsP = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "P";
// let curComParentIsDiv = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "DIV";
// let curComParentIsSpan = curCommonEle.parentNode.nodeType === 1 && (curCommonEle.parentNode.nodeName === 'SPAN"' || curCommonEle.parentNode.nodeName === 'SPAN');
// console.log(" 当前选区信息 : ", curRange,
// "\ncurCommonEle: ", curCommonEle,
// "\ncurCommonEleParent: ", curCommonEle.parentNode, curCommonEle.parentNode.nodeType, curCommonEle.parentNode.nodeName,
// "\ncurCommonEleParentParent: ", curCommonEle.parentNode.parentNode, curCommonEle.parentNode.parentNode.nodeType, curCommonEle.parentNode.parentNode.nodeName,
//
// "\ncurComParentIsSpan: ", curComParentIsSpan,
// "\ncurComParentIsP : ", curComParentIsP,
// "\ncurComParentIsDiv", curComParentIsDiv,
// "\ncurComIsSpan", curComIsSpan,
//
// "\nstyleK: ", styleK,
// "\nstyleV: ", styleV,
// "\ntart: ", start,
// "\nend: ", end);
let curSpanContent = curCommonEle;
if (curSpanContent.nodeName !== "SPAN" || curSpanContent.getAttribute("data-flag") !== "span_content") {
curSpanContent = curSpanContent.parentElement.closest("span[data-flag='span_content']");
}
console.log("curSpanContent : ", curSpanContent, curCommonEle);
if (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;
//光标保持
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]);
}
}
//导出
exports.handle = handle;
});