style_selection/content_script.js at master · BlackNiuza/style_selection · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var foundStart; //标记开始与结束

function changeStyle(node, startOffset, endOffset){
	debugger;
	if(startOffset==undefined || endOffset==undefined){
		//处理普通node
		node.style.textDecoration="underline";
		node.setAttribute("style",node.getAttribute("style")+"text-shadow:0px 0px 10px blue;");

	}else{
		//处理textnode;
		var parentNode = node.parentNode;
		var newNode = document.createElement("span");
		parentNode.replaceChild(newNode,node);

		var node1 = document.createTextNode(node.data.substring(0,startOffset));
		var node2 = document.createElement("span");
		var node2text = document.createTextNode(node.data.substring(startOffset,endOffset));
		node2.appendChild(node2text);
		var node3 = document.createTextNode(node.data.substring(endOffset,node.data.length));
		newNode.appendChild(node1);
		newNode.appendChild(node2);
		newNode.appendChild(node3);

		changeStyle(node2);
	}
};

function findAndUpdate(node, selection, changeStyle){
	if(!selection.containsNode(node,true)) {
		//白色，节点完全与selection无关，跳过
	}
	else if(selection.containsNode(node, false)) {
		//黑色，节点完全属于selection,修改该node的style
		if(node.nodeName=="#text"){
			//debugger;
			var startOffset=0;
			var endOffset=node.data.length;
			//debugger;
			if(node==selection.anchorNode){
				if(!foundStart){
					startOffset = selection.anchorOffset;
					foundStart = true;
				}else{
					endOffset = selection.anchorOffset;
				}
			}
			if(node==selection.focusNode){
				if(foundStart){
					endOffset = selection.focusOffset;
				}else{
					startOffset = selection.focusOffset;
					foundStart = true;
				}
			}
			if(startOffset>endOffset){
				var tmp = startOffset;
				startOffset = endOffset;
				endOffset = tmp;
			}
			//debugger;
			changeStyle(node, startOffset, endOffset);
		}else{
			changeStyle(node);
		}
	}
	else{
		//灰色，需要细分
		var childNode = node.firstChild;
		var nextNode;
		while(childNode){
			//由于会修改树结构，因此必须这么做
			nextNode = childNode.nextSibling;
			findAndUpdate(childNode,selection,changeStyle);
			childNode = nextNode;
		}
	}
};

function onTextSelected(evt){
	var selection = window.getSelection();
	if(selection != undefined && !selection.isCollapsed && selection.toString()!=""){
		//处理selection
		//(1)显示一个调整框，selection全局，调整
		//(2)测试只做alert，或加下滑性
		var root = document.body;
		foundStart = false;
		findAndUpdate(root,selection,changeStyle);
		selection.removeAllRanges();
		//selection.
	}
};

function initContentScript(){
	//debugger;
	document.addEventListener("mouseup",onTextSelected);
};
//debugger;
initContentScript();