-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathdemo.html
105 lines (94 loc) · 3.88 KB
/
demo.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-textrange</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-textrange.js"></script>
<style>
body, h1 { margin:0; }
body { background:#0f0f0f; font:normal 14px Georgia, "Times New Roman", Times, serif; width:700px; margin:0 auto; }
body > div { float:left; background:#fff; padding:20px; border-left: 4px solid #fa4500; }
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; color:#fff; }
a:hover, a:active, a:focus { text-decoration:underline; }
h1 { border-left: 4px solid #fa4500; padding:0 0 4px 9px; }
body > div, h1 { margin:30px 0 0 30px; }
span.description { display:block; margin:2px 0 0 46px; }
span.copyright { float:right; color:#fff; margin-right:30px; }
#info { width:200px; }
#info code { display:block; margin:10px 0; }
#info .line { display:block; }
#info .property { margin-left:30px; }
#textarea { display:block; width:300px; height:90px; }
#char-start, #char-end { width:40px; }
</style>
<script>
$(document).ready(function() {
var orange = false;
setInterval(function() {
orange = !orange;
$('h1').css('border-color', orange ? 'transparent' : '#fa4500');
}, 500);
$('#textarea').bind('updateInfo keyup mousedown mousemove mouseup', function(event) {
if (document.activeElement !== $(this)[0]) {
return;
}
var range = $(this).textrange();
$('#info .property').each(function() {
if (typeof range[$(this).attr('id')] !== 'undefined') {
if ($(this).attr('id') === 'text') {
range[$(this).attr('id')] = range[$(this).attr('id')].replace(/\n/g, "\\n").replace(/\r/g, "\\r");
}
$(this).children('.value').html(range[$(this).attr('id')]);
}
});
});
$('#console-log').click(function() {
var obj = {};
$('#info .property').each(function() {
var value = $(this).children('.value').html();
obj[$(this).attr('id')] = isNaN(value) || value == '' ? value : parseInt(value);
});
console.log(obj);
return false;
});
$('#selection-set').click(function() {
$('#textarea').textrange('set', $('#char-start').val(), $('#char-end').val()).trigger('updateInfo').focus();
});
$('#selection-replace').click(function() {
$('#textarea').textrange('replace', $('#replace-text').val()).trigger('updateInfo').focus();
});
});
</script>
</head>
<body>
<h1><a href="https://github.com/dwieeb/jquery-textrange/">jquery-textrange</a></h1>
<span class="copyright"><a href="https://www.dwieeb.com">created by Daniel Imhoff</a></span>
<span class="description"><a href="https://github.com/dwieeb/jquery-textrange/blob/1.x/README.md">See README.md for all features and documentation.</a></span>
<div id="fields">
<textarea id="textarea" name="textarea">Some more content.
Isn't this cool?
This time with a few lines of content.
Yaaay.</textarea>
</div>
<div id="info">
<strong>Object returned:</strong>
<code>
<span class="line">{</span>
<span id="position" class="property line">position: <span class="value">0</span>,</span>
<span id="start" class="property line">start: <span class="value">0</span>,</span>
<span id="end" class="property line">end: <span class="value">0</span>,</span>
<span id="length" class="property line">length: <span class="value">0</span>,</span>
<span id="text" class="property line">text: "<span class="value"></span>"</span>
<span class="line">}</span>
</code>
<input type="button" id="console-log" name="console-log" value="console.log() this object">
</div>
<div>
Select a substring starting at <input type="text" id="char-start" name="char-start" value="30"> with a length of <input type="text" id="char-end" name="char-end" value="15"> <input type="button" id="selection-set" name="selection-set" value="Go!!">
</div>
<div>
Replace the selected text with: <input type="text" id="replace-text" name="replace-text" value="some text"> <input type="button" id="selection-replace" name="selection-replace" value="Go!!">
</div>
</body>
</html>