jquerypp/dom/range/range.html at builder · joolify/jquerypp · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Range</title>
        <style type='text/css'>
            body {font-family: verdana}
            .error {border: solid 1px red;}
            .error_text { color: red; font-size: 10px;}
            td {padding: 3px;}
			.start {
				border-left: solid 3px green;
			}
			.end {
				border-right: solid 3px red;
			}
			.parent {
				outline: dotted 2px gray;
			}
			#box {
				width: 400px;
			}
        </style>
	</head>
	<body>
		<div id='box'>
		<h1>The Range Plugin</h1>
		<p>Select a range of text on the page and get useful info about it!</p>
		<p>We'll figure out what to do with form elements later.</p>
		<pre id='info'></pre>
		</div>
		<script type='text/javascript'
                src='../../../steal/steal.js'>

        </script>
		<script type='text/javascript'>
			steal('jquerypp/dom/range', function(){
				var curStart = $(),
					curEnd = $(),
					curParent = $(),
					htmlEl = function(el){
						return el.nodeType === 3 || el.nodeType === 4 ?
							el.parentNode : el;
					};
				$('body').mouseup(function(){
					var range = $.Range.current();
					var start = range.start(),
						end = range.end();
					curStart.removeClass('start');
					curEnd.removeClass('end');
					curParent.removeClass('parent')
					var starter = htmlEl(start.container);
					var ender = htmlEl(end.container),
						parenter = range.parent();

					curStart = $(starter).addClass('start');
					curEnd = $(ender).addClass('end');
					curParent = $(parenter).addClass('parent')
					$("#info").html("startOffset = "+start.offset+"\nendOffset = "+end.offset)
				})

			})

		</script>
	</body>
</html>