Google Closure Range Demo

HTML

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<h1>Document Viewer</h1>
<pre id="docviewer">
A periodic table is a tabular display of the chemical elements, organized on the basis of their atomic numbers, electron configurations, and recurring chemical properties. Elements are presented in order of increasing atomic number (number of protons). The standard form of table comprises an 18 × 7 grid or main body of elements, positioned above a smaller double row of elements. The table can also be deconstructed into four rectangular blocks: the s-block to the left, the p-block to the right, the d-block in the middle, and the f-block below that. The rows of the table are called periods; the columns of the s-, d-, and p-blocks are called groups, with some of these having names such as the halogens or the noble gases. Since, by definition, a periodic table incorporates recurring trends, any such table can be used to derive relationships between the properties of the elements and predict the properties of new, yet to be discovered or synthesized, elements. As a result, a periodic table—whether in the standard form or some other variant—provides a useful framework for analyzing chemical behavior, and such tables are widely used in chemistry and other sciences.

Although precursors exist, Dmitri Mendeleev is generally credited with the publication, in 1869, of the first widely recognized periodic table. He developed his table to illustrate periodic trends in the properties of the then-known elements. Mendeleev also predicted some properties of then-unknown elements that would be expected to fill gaps in this table. Most of his predictions were proved correct when the elements in question were subsequently discovered. Mendeleev's periodic table has since been expanded and refined with the discovery or synthesis of further new elements and the development of new theoretical models to explain chemical behavior.

All elements from...

CSS

body {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 1.5;
	padding: 10px;
}

pre {
	border: 1px solid #aaa;
	font-family: sans-serif;
	max-width: 500px;
	padding: 1em;
	white-space: pre-wrap;
}

#info {
  background: #eee;
  border: 1px solid #aaa;
  padding: 1em;
  position: fixed;
  right: 10px;
  top: 10px;
  width: 200px;
}

label,
input,
textarea {
  display: block;
}

input,
textarea {
  margin-bottom: .5em;
  width: 100%;
}

.example {
  background: rgba(0, 150, 255, .2);
  padding: .13em 0;
}

JavaScript

// Load closure dependancies
goog.require('goog.dom');
//goog.require('goog.dom.NodeType');
goog.require('goog.dom.Range');
goog.require('goog.dom.selection');
//goog.require('goog.editor');
goog.require('goog.events');
goog.require('goog.iter');

goog.require('goog.Uri');

var uri = goog.Uri.parse('tel:1231123');

console.log(uri);

var examples = [
  [253,727],
  [1205,1321],
  [2057,2251]
];

$(function() {
  // set vars
  // ========================================
  var $docviewer = goog.dom.$('docviewer');
  var docStartNode = $docviewer.firstChild;
  //var docrange = goog.dom.Range.createFromNodeContents(docStartNode);
  var rangeOffset = trueStartOffset = trueEndOffset = 0;
  
  // highlight examples from examples array in reverse order
  // ========================================
  function highlightExamples() {
    for (var i = examples.length - 1; i >= 0; i--) {
      var range = goog.dom.Range.createFromNodes(docStartNode, examples[i][0], docStartNode, examples[i][1]);
      range.surroundContents(goog.dom.createDom('mark', 'example'));
    }
  }
  highlightExamples();
  
  // get selection data
  // ========================================
  function getSelectionData() {
    var range = goog.dom.Range.createFromWindow();
    var startOffset = range.getStartOffset();
    var endOffset = range.getEndOffset();
    var selectionContainer = range.getContainerElement();
    var selectionOverlap = range.getAnchorNode() !== range.getFocusNode();
    var selectionData = false;
    
    // calculate true selection start/end for text nodes
    if (!selectionOverlap && selectionContainer.tagName !== 'SPAN') {
      var prevSpan = goog.dom.getPreviousElementSibling(range.getContainer());
      var prevSpanLength = prevSpan ? goog.dom.getNodeTextLength(prevSpan) : 0;
      var prevSpanOffset = goog.dom.getNodeTextOffset(prevSpan, $docviewer);
      
      trueStartOffset = prevSpanOffset + prevSpanLength + startOffset;
      trueEndOffset = prevSpanOffset +...