/
serializer.html
138 lines (116 loc) · 6 KB
/
serializer.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
136
137
138
<!DOCTYPE html>
<!--[if lte IE 6]><html class="ie6"><!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>
<title>Rangy Serializer Module Demo</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../lib/rangy-core.js"></script>
<script type="text/javascript" src="../lib/rangy-serializer.js"></script>
<script type="text/javascript">
function gEBI(id) {
return document.getElementById(id);
}
function serializeSelection() {
var input = gEBI("serializedSelection");
input.value = rangy.serializeSelection();
input.focus();
input.select();
}
function deserializeSelection() {
rangy.deserializeSelection(gEBI("selectionToDeserialize").value);
}
function restoreSelection() {
rangy.restoreSelectionFromCookie();
}
function saveSelection() {
rangy.saveSelectionCookie();
}
window.onload = function() {
// Turn multiple selections on in IE
try {
document.execCommand("MultipleSelection", null, true);
} catch(ex) {}
rangy.init();
// Enable buttons
var serializerModule = rangy.modules.Serializer;
if (rangy.supported && serializerModule && serializerModule.supported) {
gEBI("serializedSelection").disabled = false;
var serializeButton = gEBI("serializeButton");
serializeButton.disabled = false;
serializeButton.ontouchstart = serializeButton.onclick = serializeSelection;
gEBI("selectionToDeserialize").disabled = false;
var deserializeButton = gEBI("deserializeButton");
deserializeButton.disabled = false;
deserializeButton.ontouchstart = deserializeButton.onclick = deserializeSelection;
// Display the control range element in IE
if (rangy.features.implementsControlRange) {
gEBI("controlRange").style.display = "block";
}
// Restore the selection from a previous visit to this page
restoreSelection();
}
};
window.onbeforeunload = saveSelection;
</script>
</head>
<body>
<div id="buttons">
<h3>Serialize selection</h3>
Click the button to serialize the selection. The serialized selection will appear in the text box.
<input type="text" disabled id="serializedSelection" size="30">
<input type="button" disabled id="serializeButton" value="Serialize selection" unselectable="on" class="unselectable">
<h3>Deserialize selection</h3>
Paste a serialized selection into the text box below and click the button to restore the serialized selection.
<input type="text" disabled id="selectionToDeserialize" size="30">
<input type="button" disabled id="deserializeButton" value="Restore selection" unselectable="on" class="unselectable">
<h3>Preserving the selection between page requests</h3>
The selection on this page will be preserved between page requests. Press the following button or your browser's
refresh button to refresh the page
<br>
<input type="button" value="refresh" onclick="window.location.reload();">
</div>
<div id="content">
<h1>Rangy Serializer Module Demo</h1>
<!-- A comment -->
<p id="intro">
Please use your mouse and/or keyboard to make selections from the sample content below and use the buttons on
the left hand size to serialize and deserialize the selection. Also, the selection will be preserved when you
refresh the page.
</p>
<p>
<b>Association football</b> is a sport played between two teams. It is usually called <b>football</b>, but in
some countries, such as the United States, it is called <b>soccer</b>. In
<a href="http://simple.wikipedia.org/wiki/Japan">Japan</a>, New Zealand, South Africa, Australia, Canada and
Republic of Ireland, both words are commonly used.
</p>
<p>
Each team has 11 players on the field. One of these players is the <i>goalkeeper</i>, and the other ten are
known as <i>"outfield players."</i> The game is played by <b>kicking a ball into the opponent's goal</b>. A
match has 90 minutes of play, with a break of 15 minutes in the middle. The break in the middle is called
half-time.
</p>
<h2>Competitions <span class="smaller">(this section is editable)</span></h2>
<p contenteditable="true">
There are many competitions for football, for both football clubs and countries. Football clubs usually play
other teams in their own country, with a few exceptions. <b>Cardiff City F.C.</b> from Wales for example, play
in the English leagues and in the English FA Cup.
</p>
<h2>Who plays football <span class="smaller">(this section is editable and in pre-formatted text)</span></h2>
<pre contenteditable="true">
Football is the world's most popular sport. It is played in more
countries than any other game. In fact, FIFA (the Federation
Internationale de Football Association) has more members than the
United Nations.
It is played by both males and females.
</pre>
<p id="controlRange" style="display: none" contenteditable="true">
Some controls to put in a ControlRange: <input> and <input> and <input>
</p>
</div>
<p class="small">
Text adapted from <a href="http://simple.wikipedia.org/wiki/Association_football">Simple Wikipedia page on
Association Football</a>, licensed under the
<a href="http://simple.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License">Creative
Commons Attribution/Share-Alike License</a>.
</p>
</body>
</html>