forked from fchasen/marks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (72 loc) · 2.66 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
<!DOCTYPE html>
<style>
body {
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: 0.01rem;
font-size: 22px;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
header, article {
width: 80%;
margin: 2em auto;
}
</style>
<article>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
</p>
</article>
<script src="pkg/marks.js"></script>
<script>
(function () {
document.addEventListener("mouseup", checkForSelection, false);
window.addEventListener("resize", redrawMarks, false);
var el = document.querySelector('article');
var pane = new marks.Pane(el);
var selecting = false;
function checkForSelection() {
var selection = window.getSelection();
if (!selection.isCollapsed) {
// Set global state to reflect the fact we're making a selection.
// Used to stop click events from deleting older highlights when
// the click event is the result of a selection.
selecting = true;
makeHighlight(selection.getRangeAt(0));
// Clear the selection
selection.removeAllRanges();
// Reset the selecting state in the next tick.
setTimeout(function () { selecting = false; }, 0);
}
}
function makeHighlight(range) {
var h = pane.addMark(new marks.Highlight(range));
h.element.addEventListener("click", function () {
console.log("highlight clicked");
if (!selecting) { pane.removeMark(h); }
}, false);
}
function redrawMarks() {
pane.render();
}
}());
</script>