-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
135 lines (111 loc) · 4.25 KB
/
index.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
width: 320px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 10px 20px rgb(0 0 0 / 7%);
padding: 16px;
}
.hig1 rect {
fill: #03a9f4;
}
.hig2 rect {
fill: #ff3366;
}
</style>
</head>
<body>
<div class="main">
<button onclick="addUnderline()">underline</button>
<button onclick="addHighlight('hig1')">highlight 1</button>
<button onclick="addHighlight('hig2')">highlight 2</button>
<button onclick="mark.show()">show</button>
<button onclick="mark.hide()">hide</button>
<div id="content">
<h1 style="padding-left: 24px;">Do you not see the Yellow River come from the sky</h1>
<p>>Rushing into the sea and ne'er come back?</p>
<p style="margin-top:24px ;"><img style="width: 32px;height:32px"
src="https://vuejs.org/logo.svg" />Do you not see the mirror bright in chamber high</p>
<p>Grieve o'er your snow-white hair that once was silken back?</p>
<p>When hopes are won, oh, drink your fill in high delight</p>
<p>And never leave your wine cup empty in moonlight!</p>
<p>Heaven has made us talents; we're not made in vain.</p>
<p>A thousand gold coins spent, more will turn up again.</p>
<p>Kill a cow, cook a sheep and let us merry be,</p>
<p>And drink three hundred cupfuls of wine in high glee!</p>
<p>Dear friends of mine,</p>
<p>Cheer up, cheer up!</p>
<p>Do not put down your cup!</p>
</div>
</div>
<script src="../dist/index.umd.js"></script>
<script>
let _rangeStr = "";
let mark = new Mark("content");
console.log(mark);
mark.on('selected', (data) => {
_rangeStr = data.markStr;
// set position dom
// let arr = [
// data.position.top_left,
// data.position.top_center,
// data.position.top_right,
// data.position.center_left,
// data.position.center,
// data.position.center_right,
// data.position.bottom_left,
// data.position.bottom_center,
// data.position.bottom_right,
// ];
// for (let i in arr) {
// let p = arr[i];
// let el = document.querySelector('.mark-view');
// let dom = document.createElement('span')
// dom.style.width = '16px';
// dom.style.height = '16px';
// dom.style.backgroundColor = '#000'
// dom.style.color = '#fff'
// dom.textContent = i
// dom.style.position = 'absolute'
// dom.style.left = p[0] + 'px';
// dom.style.top = p[1] + 'px';
// el.appendChild(dom);
// }
})
mark.on('render', () => {
console.log('render');
})
mark.render();
function addUnderline() {
mark.underline(_rangeStr, 'underline', (e) => {
let rangeStr = e.target.getAttribute('data-id')
let r = confirm("Whether to delete it?")
if (r) {
mark.remove(rangeStr, 'underline');
}
}, { name: "1" })
window.getSelection().removeAllRanges();
}
function addHighlight(classNmae) {
mark.highlight(_rangeStr, classNmae,
(e, str) => {
console.log(str);
let rangeStr = e.target.getAttribute('data-id')
let r = confirm("Whether to delete it?")
if (r) {
mark.remove(rangeStr, 'highlight');
}
}
)
window.getSelection().removeAllRanges();
}
</script>
</body>
</html>