210 lines
8.8 KiB
JavaScript
210 lines
8.8 KiB
JavaScript
"use strict";
|
|
/**
|
|
* 使用样式事件
|
|
*/
|
|
define(function (require, exports, module) {
|
|
|
|
function handle(event) {
|
|
let utils = require("../../common/utils");
|
|
let curS = utils.GetSelection();
|
|
let curRange = curS.getRangeAt(0); //只考虑一个选区场景
|
|
let copyRange = curRange.cloneRange();
|
|
let curNode = utils.GetEventTarget(event);
|
|
//只处理选择的是一个范围。
|
|
if (curS.type !== "Range") {
|
|
return;
|
|
}
|
|
//选区信息
|
|
console.dir(curS)
|
|
console.dir(curRange)
|
|
|
|
//获取样式
|
|
let styleK = curNode.getAttribute("data-k");
|
|
let styleV = curNode.getAttribute("data-v");
|
|
if (styleK === undefined || styleK === null) {
|
|
styleK = curNode.closest("span").getAttribute("data-k");
|
|
styleV = curNode.closest("span").getAttribute("data-v");
|
|
// console.log("closest: ", curNode, curNode.closest("span"))
|
|
}
|
|
console.log("styleK: ", styleK, " styleV: ", styleV);
|
|
|
|
//获取开始结束的区域
|
|
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 pStart = getSpanContentOfP(curStartContainerEle);
|
|
let pEnd = getSpanContentOfP(curEndContainerEle);
|
|
console.dir(curStartContainerEle)
|
|
console.dir(curEndContainerEle)
|
|
console.dir(pStart)
|
|
console.dir(pEnd)
|
|
if (pStart.getAttribute("id") === pEnd.getAttribute("id")) {
|
|
taskMap.set(pStart.getAttribute("id"), pStart)
|
|
} else {
|
|
//修正顺序
|
|
let tmp = pStart;
|
|
if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
|
|
pStart = pEnd;
|
|
pEnd = tmp;
|
|
}
|
|
//fill p
|
|
let nextTask = pStart;
|
|
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
|
while (true) {
|
|
nextTask = nextTask.nextSibling;
|
|
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
|
if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
|
|
break
|
|
}
|
|
console.dir(nextTask)
|
|
}
|
|
}
|
|
//选择单行还是多行
|
|
let multiply = taskMap.size > 1;
|
|
|
|
//遍历设置样式
|
|
console.dir(taskMap)
|
|
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) {
|
|
continue
|
|
}
|
|
let firstItem = curSpanContent.childNodes[0];
|
|
let isEmptyStyle =/* curSpanContent.childNodes.length === 1 &&*/ firstItem.nodeName === "#text" ;/*&& firstItem.nodeType === 3*/
|
|
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes.length, firstItem.nodeName, firstItem.nodeType, isEmptyStyle);
|
|
if (isEmptyStyle) {
|
|
let copySpan = curSpanContent.cloneNode();
|
|
copySpan.innerHTML = "";
|
|
for (let j = 0; j < curSpanContent.innerText.length; j++) {
|
|
if (!multiply) { //单选
|
|
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);
|
|
}
|
|
} else { //多选
|
|
if (curP.getAttribute("id") === pStart.getAttribute("id")) { //首行
|
|
if (j >= start) {
|
|
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);
|
|
}
|
|
} else if (curP.getAttribute("id") === pEnd.getAttribute("id")) { //尾行
|
|
if (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);
|
|
}
|
|
} else {
|
|
let tmpSpan = document.createElement("span");
|
|
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
|
applySpanStyleKV(tmpSpan, styleK, styleV);
|
|
copySpan.append(tmpSpan);
|
|
}
|
|
}
|
|
}
|
|
|
|
curSpanContent.innerHTML = copySpan.innerHTML;
|
|
} 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//光标保持
|
|
curS.removeAllRanges();
|
|
let newR = document.createRange();
|
|
newR.setStart(copyRange.startContainer, start);
|
|
newR.setEnd(copyRange.endContainer, end);
|
|
curS.addRange(newR);
|
|
}
|
|
|
|
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 getSpanContentOfP(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.parentNode;
|
|
}
|
|
|
|
//导出
|
|
exports.handle = handle;
|
|
}); |