-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtestSel.html
281 lines (234 loc) · 11.8 KB
/
testSel.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Text Highlighting Demo</title>
<!--// jQuery style //-->
<link rel="stylesheet" media="screen" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<!--// Colorpicker Style Sheet //-->
<link rel="stylesheet" media="screen" type="text/css" href="plugins/colorpicker/css/colorpicker.css" />
<!--// jQuery Latest //-->
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<!--// jQuery Plugins //-->
<script type="text/javascript" language="javascript" src="plugins/rangy.googleCode/rangy.js"></script>
<script type="text/javascript" language="javascript" src="plugins/colorpicker/js/colorpicker.js"></script>
<script type="text/javascript" language="javascript" src="plugins/jquery-json/jquery-json-2.2.js"></script>
<!--// Main Code //-->
<script type="text/javascript" language="javascript" src="getPath.js"></script>
<script type="text/javascript" language="javascript" src="textSelection.js"></script>
<script type="text/javascript" language="javascript" src="floatingDiv.js"></script>
<!--// jQuery DOM ready //-->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
//var savedSelection=[1,2,3];
var textsel = new TextSelector();
var floatingDiv = new FloatingDiv();
var _sel = [];
/* ID OF FLOATING DIV */
var floatID = 'labelDiv';
/* TEST LABELS */
var _labels = ["Alpha", "Beta", "Gamma", "Delta", "Zeta Eta", "Theta", "Iota", "Kappa", "Lambda", "Mu", "Nu", "Xi", "Omicron", "Pi", "Rho", "Sigma", "Tau", "Upsilon"];
$('input#highlight').bind('click', function(e) {
_sel = textsel.getSelectedText();
textsel.addSelection(_sel);
// floating div //
floatingDiv.init(floatID, _labels);
floatingDiv.createDialog(floatID);
floatingDiv.addColorSelector(floatID, _sel);
floatingDiv.addIDToForm(_sel);
});
$('input#restore').bind('click', function(e) {
var lookFor = $('span[class^="anno_"]');
if(lookFor.length == 0) { // don't restore if there are already highlights
textsel.importSelections(textsel._selections);
return true;
}
});
$('input#remove').bind('click', function(e) {
textsel.removeHighlightMarkers();
});
$('input#show').bind('click', function(e) {
var myObj = textsel._showSelectionObject();
var myHTML = "<ul>";
for (var i in myObj) {
if (myObj[i] instanceof Object) {
myHTML += "myObj["+i+"]<ul>";
for(var j in myObj[i]) {
myHTML += "<li>["+j+"] = "+ myObj[i][j] + "</li>";
}
myHTML += "</ul>";
}
}
myHTML += "</ul>";
$('div#mine').html(myHTML).show();
});
$('input#hide').bind('click', function(e) {
$('div#mine').hide();
});
$('input#hideExport').bind('click', function(e) {
$('div#json').hide();
});
$('input#clear').bind('click', function(e) {
textsel.clearSelections();
$('div#mine').empty().hide();
});
$('input#export').bind('click', function(e) {
var json = textsel.exportSelections();
$('div#json').text('jsonObj = ' + json).show();
});
// highlight color change
$('#penColor').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#penColor div').css('backgroundColor', '#' + hex);
textsel.changePenColor('#' + hex);
}
});
/* NEW STUFF */
// FLOATING DIV DIALOG //
// on form submit in floating div
$('input#submitFloatingDiv').live('click', function(e) {
e.preventDefault();
var objID = (textsel._getIndexOfId($('input#TILEid').val()));
_sel.color = $('input#TILEcolor').val(); // add new color to selection object
_sel = floatingDiv.addLabelsToObject(_sel); // add labels to selection object
//console.log(_sel);
$('.ui-dialog').find('.ui-dialog-titlebar-close').trigger('click'); // close dialog on submit button press
return false;
});
// button click for adding more label fields
$('#btnAddLabel').live('click', function() {
var num, newNum, newElem, eStuff;
// get number of fields
num = $('li.cloneMe').length;
newNum = new Number(num + 1);
// create the new element via clone(), and manipulate it's ID using newNum value
newElem = $('#formField'+num).clone().attr('id', 'formField' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.find('input:first').attr('id', 'formLabel'+newNum).attr('name', 'Label'+newNum);
newElem.find('img').remove();
newElem.find('.addRemove').remove();
// insert the new element after the last "duplicatable" input field
$('li#formField'+num).after(newElem);
// make things invisible and visible
$('#btnDeleteLabel').css('visibility','visible');
$('.addRemove').css('visibility','hidden');
// only allow up to 5 labels
if (newNum == 5) { $('#btnAddLabel').css('visibility','hidden'); }
// add Autocomplete to the new Element
floatingDiv.addAutoComplete('li#formField'+newNum+' input.tagComplete', _labels);
});
// button click for deleting label fields
$('#btnDeleteLabel').live('click', function() {
var num;
num = $('li.cloneMe').length;
$('#formField' + num).empty().remove();
// if only one element remains, disable the "remove" button
if (num-1 == 1) {
$('#btnDeleteLabel').css('visibility','hidden');
$('#btnAddLabel').css('visibility','visible');
$('.addRemove').css('visibility','visible');
}
});
});
</script>
<style type="text/css" media="screen">
/*
FLOATING DIV DIALOG STYLE
*/
/* OVERWRITE jQuery UI theme */
.ui-dialog { font-size: 0.8em; }
.ui-dialog .ui-widget { background: none !important; }
.ui-dialog .ui-widget-header { background:#D5DB97 !important; }
.ui-dialog .ui-dialog-content { background:left repeat url("images/bkgd.green.png") #D5DB97 !important; }
.
/* STYLE Add Label Dialog */
form#labelDiv_floatingDiv { background-color: #FFF; }
form#labelDiv_floatingDiv fieldset.label_formFieldSet { background-color: #FFF !important; }
form#labelDiv_floatingDiv .label_formOL { list-style:none; margin: 0; padding: 0;}
form#labelDiv_floatingDiv .label_formLI { line-height: 1.2em; padding-bottom: 5px; }
form#labelDiv_floatingDiv .label_formLabel { display: inline-block; width: 50px; text-transform: uppercase; font-size: 0.8em; }
form#labelDiv_floatingDiv input.submit {
display: block;
float: right;
width: 50px;
border: 1px solid #000;
background-color:#6C6F4C;
color:#FFF;
font-size: 0.9em;
font-weight: bold;
padding: 2px;
margin: 5px;
}
</style>
<style type="text/css" media="screen">
#penColor {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url('plugins/colorpicker/images/selectBoxCustom.png');
}
#penColor div {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: url('plugins/colorpicker/images/selectBoxCustom.png') center;
}
#floatingPenColor {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url('plugins/colorpicker/images/selectBoxCustom.png');
}
#floatingPenColor div {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: url('plugins/colorpicker/images/selectBoxCustom.png') center;
}
div.colorpicker { z-index: 99999; }
span.floatingColorPicker { display: inline-block; text-transform: uppercase; font-size: 0.8em; }
</style>
</head>
<body>
<div id="selection">
<div id="22">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas est tortor, ultrices at lobortis cursus, congue vitae lacus. Integer massa arcu, vestibulum id blandit sed, tempor nec ante. Nullam vulputate laoreet velit, in sollicitudin nisi sagittis quis. Aenean non commodo dui. <em id="hungry">Pellentesque <sub id="foo">male</sub><span id="goo">suada nulla pharetra est elementum consequat faucibus sapien aliquam.</span> Praesent placerat, libero in gravida pellentesque, turpis odio dictum mauris, eget posuere sem elit ac urna.</em><br id="2333" />
Fruity <br id="3434" />
Aenean scelerisque pretium mauris. <img src="http://www.456bereastreet.com/i/authentic-jobs.png" id="img" />Nunc non turpis suscipit sem rutrum pharetra. Praesent venenatis blandit leo, commodo aliquam felis sagittis nec. Donec eget enim nec magna varius gravida. Sed adipiscing, lacus sed dictum imperdiet, augue metus vulputate diam, in semper tortor nisi eget nisi. Integer eget neque vitae enim pharetra sodales. Mauris sit amet egestas orci.</div>
<div id="four">Fusce nec tincidunt mauris. Donec posuere metus vel nibh aliquam sit amet pulvinar risus convallis. Sed ac magna sit amet lectus rhoncus varius at vitae ipsum. Curabitur condimentum, ante in accumsan condimentum, lectus arcu venenatis arcu, vel tempus felis sapien et felis. Sed interdum molestie hendrerit. Suspendisse eu libero eros. <span id="green">Donec ullamcorper, mi non ultricies euismod, metus ligula tempus ante, id fermentum arcu eros nec ante. Donec eget arcu id augue facilisis <abbr id="five">eleifend <small id="ad">ac</small> id libero</abbr>. Nulla quis enim neque, nec scelerisque metus. Donec ac ip</span>sum ac dui euismod pellentesque nec nec orci. Donec neque nulla, pretium elementum varius at, fermentum eu nisi. Vivamus sit amet quam id lacus aliquet congue et mollis tortor. Quisque nec odio lacus. Suspendisse lobortis lectus sed lectus gravida non hendrerit eros rutrum. Pellentesque suscipit nunc a libero pharetra elementum. Curabitur eget augue lectus, eget imperdiet metus. Nullam bibendum scelerisque arcu eget fringilla. Donec luctus, magna sed fringilla iaculis, magna mauris porta eros, et tempus justo felis vitae libero. Pellentesque at lectus non justo fringilla bibendum a vitae felis. Praesent tempor enim vel mauris gravida sed convallis erat tempus.</div>
<div>Maecenas ac neque mauris. Suspendisse orci ante, tempor id fringilla id, adipiscing in lorem. Aliquam luctus blandit molestie. Phasellus convallis tellus tristique lectus lobortis placerat. Sed neque erat, congue ac gravida vitae, consectetur ut nunc. Nulla dictum placerat dictum. Nam at nunc orci, quis porttitor orci. Morbi fermentum luctus hendrerit. Morbi malesuada diam ultrices orci fermentum eget porttitor quam consequat. Donec vel diam risus, eu auctor est. Sed non pretium est. Aliquam ligula metus, tempus a vehicula ac, posuere vitae lorem. Etiam tincidunt lectus metus, non aliquet turpis. Fusce mollis gravida pharetra.</div>
</div>
<input type="button" value="HIGHLIGHT" id="highlight"/>
<span style="padding: 2px; font-size: 0.8em;"><div id="penColor"><div style="background-color: #FDFF00;"></div></div> <- highlighter color</span>
<input type="button" value="Restore Highlights" id="restore"/>
<input type="button" value="Remove Highlights" id="remove"/>
<input type="button" value="Show Selection Object" id="show"/>
<input type="button" value="Hide Selection Object" id="hide"/>
<input type="button" value="Clear Selection Object" id="clear"/>
<input type="button" value="Export Selection Object" id="export"/>
<input type="button" value="Hide Selection Object" id="hideExport"/>
<div id="mine" style="display:none;"> </div>
<div id="json" style="display:none; padding: 20px; background-color:#EBEBEB;"> </div>
<div><br>
<br>
<strong>NOTE:</strong> Once you've selected from the above text and chosen to highlight it (via button), you can click on the highlight itself to change color.
<br>
<br>
</div>
</body>
</html>