1+ <!DOCTYPE html>
2+ <!--[if lte IE 6]><html class="ie6"><!--[if gt IE 8]><!--> < html > <!--<![endif]-->
3+ < head >
4+ < title > Rangy Highlighter Module Demo</ title >
5+ < link href ="demo.css " rel ="stylesheet " type ="text/css ">
6+ < style type ="text/css ">
7+ .highlight {
8+ background-color : yellow;
9+ }
10+
11+ .note {
12+ background-color : limegreen;
13+ }
14+
15+ # summary {
16+ border : dotted orange 1px ;
17+ }
18+ </ style >
19+ < script type ="text/javascript " src ="../lib/rangy-core.js "> </ script >
20+ < script type ="text/javascript " src ="../lib/rangy-textrange.js "> </ script >
21+ < script type ="text/javascript " src ="../lib/rangy-classapplier.js "> </ script >
22+ < script type ="text/javascript " src ="../lib/rangy-highlighter.js "> </ script >
23+ < script type ="text/javascript ">
24+ function gEBI ( id ) {
25+ return document . getElementById ( id ) ;
26+ }
27+ var serializedHighlights = decodeURIComponent ( window . location . search . slice ( window . location . search . indexOf ( "=" ) + 1 ) ) ;
28+ var highlighter ;
29+
30+ var initialDoc ;
31+
32+ window . onload = function ( ) {
33+ rangy . init ( ) ;
34+
35+ highlighter = rangy . createHighlighter ( document . getElementById ( "content" ) , "TextRange" ) ;
36+
37+ highlighter . addClassApplier ( rangy . createClassApplier ( "highlight" , {
38+ ignoreWhiteSpace : true ,
39+ tagNames : [ "span" , "a" ]
40+ } ) ) ;
41+
42+ highlighter . addClassApplier ( rangy . createClassApplier ( "note" , {
43+ ignoreWhiteSpace : true ,
44+ elementTagName : "a" ,
45+ elementProperties : {
46+ href : "#" ,
47+ onclick : function ( ) {
48+ var highlight = highlighter . getHighlightForElement ( this ) ;
49+ if ( window . confirm ( "Delete this note (ID " + highlight . id + ")?" ) ) {
50+ highlighter . removeHighlights ( [ highlight ] ) ;
51+ }
52+ return false ;
53+ }
54+ }
55+ } ) ) ;
56+
57+
58+ if ( serializedHighlights ) {
59+ highlighter . deserialize ( serializedHighlights ) ;
60+ }
61+ } ;
62+
63+
64+ function highlightSelectedText ( ) {
65+ highlighter . highlightSelection ( "highlight" ) ;
66+ }
67+
68+ function noteSelectedText ( ) {
69+ highlighter . highlightSelection ( "note" ) ;
70+ }
71+
72+ function removeHighlightFromSelectedText ( ) {
73+ highlighter . unhighlightSelection ( ) ;
74+ }
75+
76+ function highlightScopedSelectedText ( ) {
77+ highlighter . highlightSelection ( "highlight" , { containerElementId : "summary" } ) ;
78+ }
79+
80+ function noteScopedSelectedText ( ) {
81+ highlighter . highlightSelection ( "note" , { containerElementId : "summary" } ) ;
82+ }
83+
84+ function reloadPage ( button ) {
85+ button . form . elements [ "serializedHighlights" ] . value = highlighter . serialize ( ) ;
86+ button . form . submit ( ) ;
87+ }
88+
89+ </ script >
90+ </ head >
91+ < body >
92+ < div id ="buttons ">
93+ < h3 > Highlighter</ h3 >
94+ < p > Make a selection in the document and use the buttons below to highlight and unhighlight.</ p >
95+ < input type ="button " ontouchstart ="highlightSelectedText(); " onclick ="highlightSelectedText(); " value ="Highlight selection ">
96+ < input type ="button " ontouchstart ="noteSelectedText(); " onclick ="noteSelectedText(); " value ="Add note to selection ">
97+ < input type ="button " ontouchstart ="removeHighlightFromSelectedText(); " onclick ="removeHighlightFromSelectedText(); " value ="Remove highlights from selection ">
98+ < br >
99+ < input type ="button " ontouchstart ="highlightScopedSelectedText(); " onclick ="highlightScopedSelectedText(); " value ="Highlight within outlined paragraph ">
100+ < input type ="button " ontouchstart ="noteScopedSelectedText(); " onclick ="noteScopedSelectedText(); " value ="Annotate selection within outlined paragraph ">
101+
102+ < h3 > Preserving highlights between page requests</ h3 >
103+ < form action ="highlighter_text_range.html " method ="get ">
104+ Highlights can be preserved between page requests. Press the following button to reload the page with the
105+ highlights preserved:
106+ < br >
107+ < input type ="hidden " name ="serializedHighlights " value ="">
108+ < input type ="button " value ="Reload " onclick ="reloadPage(this) ">
109+ </ form >
110+ </ div >
111+
112+ < div id ="content ">
113+ < h1 > Rangy Highlighter Module Demo</ h1 >
114+ < p id ="intro ">
115+ Please use your mouse and/or keyboard to make selections from the sample content below and use the buttons
116+ on the left hand size to create and remove highlights.
117+ </ p >
118+ < p id ="summary ">
119+ < b > Association football</ b > is a sport played between two teams. It is usually called < b > football</ b > , but in
120+ some countries, such as the United States, it is called < b > soccer</ b > . In
121+ < a href ="http://simple.wikipedia.org/wiki/Japan "> Japan</ a > , New Zealand, South Africa, Australia, Canada and
122+ Republic of Ireland, both words are commonly used.
123+ </ p >
124+ < p >
125+ Each team has 11 players on the field. One of these players is the < i > goalkeeper</ i > , and the other ten are
126+ known as < i > "outfield players."</ i > The game is played by < b > kicking a ball into the opponent's goal</ b > . A
127+ match has 90 minutes of play, with a break of 15 minutes in the middle. The break in the middle is called
128+ half-time.
129+ </ p >
130+ < h2 > Competitions</ h2 >
131+ < p >
132+ There are many competitions for football, for both football clubs and countries. Football clubs usually play
133+ other teams in their own country, with a few exceptions. < b > Cardiff City F.C.</ b > from Wales for example, play
134+ in the English leagues and in the English FA Cup.
135+ </ p >
136+ < h2 > Who plays football < span class ="smaller "> (this section is in pre-formatted text)</ span > </ h2 >
137+ < pre >
138+ Football is the world's most popular sport. It is played in more
139+ countries than any other game. In fact, FIFA (the Federation
140+ Internationale de Football Association) has more members than the
141+ United Nations.
142+
143+ It is played by both males and females.
144+
145+
146+ </ pre >
147+ </ div >
148+
149+ < p class ="small ">
150+ Text adapted from < a href ="http://simple.wikipedia.org/wiki/Association_football "> Simple Wikipedia page on
151+ Association Football</ a > , licensed under the
152+ < a href ="http://simple.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License "> Creative
153+ Commons Attribution/Share-Alike License</ a > .
154+ </ p >
155+ </ body >
156+ </ html >
0 commit comments