doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
65 lines (61 loc) • 1.77 kB
HTML
<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='../../node_modules/steal/steal.js' main='@empty'>
</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>