[rulers addon] Add

twifkak · Feb 21, 2014 · 00d11c1 · 00d11c1
1 parent 9de3e54
commit 00d11c1
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 0 deletions.
diff --git a/addon/display/rulers.js b/addon/display/rulers.js
@@ -0,0 +1,47 @@
+(function() {
+  "use strict";
+
+  CodeMirror.defineOption("rulers", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init) {
+      clearRulers(cm);
+      cm.off("refresh", refreshRulers);
+    }
+    if (val && val.length) {
+      setRulers(cm);
+      cm.on("refresh", refreshRulers);
+    }
+  });
+
+  function clearRulers(cm) {
+    for (var i = cm.display.lineSpace.childNodes.length - 1; i >= 0; i--) {
+      var node = cm.display.lineSpace.childNodes[i];
+      if (/(^|\s)CodeMirror-ruler($|\s)/.test(node.className))
+        node.parentNode.removeChild(node);
+    }
+  }
+
+  function setRulers(cm) {
+    var val = cm.getOption("rulers");
+    var cw = cm.defaultCharWidth();
+    var left = cm.charCoords(CodeMirror.Pos(cm.firstLine(), 0), "div").left;
+    var bot = -cm.display.scroller.offsetHeight;
+    for (var i = 0; i < val.length; i++) {
+      var elt = document.createElement("div");
+      var col, cls = null;
+      if (typeof val[i] == "number") {
+        col = val[i];
+      } else {
+        col = val[i].column;
+        cls = val[i].className;
+      }
+      elt.className = "CodeMirror-ruler" + (cls ? " " + cls : "");
+      elt.style.cssText = "left: " + (left + col * cw) + "px; top: -50px; bottom: " + bot + "px";
+      cm.display.lineSpace.insertBefore(elt, cm.display.cursorDiv);
+    }
+  }
+
+  function refreshRulers(cm) {
+    clearRulers(cm);
+    setRulers(cm);
+  }
+})();
diff --git a/demo/rulers.html b/demo/rulers.html
@@ -0,0 +1,54 @@
+<!doctype html>
+
+<title>CodeMirror: Ruler Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../addon/display/rulers.js"></script>
+<style type="text/css">
+  .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+  .ruler1 { border-left: 1px solid #fcc; }
+  .ruler2 { border-left: 1px solid #f5f577; }
+  .ruler3 { border-left: 1px solid #cfc; }
+  .ruler4 { border-left: 1px solid #aff; }
+  .ruler5 { border-left: 1px solid #ccf; }
+  .ruler6 { border-left: 1px solid #fcf; }
+</style>
+<div id=nav>
+  <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/marijnh/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Ruler demo</a>
+  </ul>
+</div>
+
+<article>
+<h2>Ruler Demo</h2>
+
+<script type="text/javascript">
+  var nums = "0123456789", space = "          ";
+  var rulers = [], value = "";
+  for (var i = 1; i <= 6; i++) {
+    rulers.push({className: "ruler" + i, column: i * 10});
+    for (var j = 1; j < i; j++) value += space;
+    value += nums + "\n";
+  }
+  var editor = CodeMirror(document.body.lastChild, {
+    rulers: rulers,
+    value: value + value + value,
+    lineNumbers: true
+});
+</script>
+
+<p>Demonstration of
+the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
+displays vertical lines at given column offsets.</p>
+
+</article>
diff --git a/doc/compress.html b/doc/compress.html
@@ -194,6 +194,7 @@ <h2>Script compression helper</h2>
           <option value="http://codemirror.net/addon/hint/pig-hint.js">pig-hint.js</option>
           <option value="http://codemirror.net/addon/display/placeholder.js">placeholder.js</option>
           <option value="http://codemirror.net/addon/hint/python-hint.js">python-hint.js</option>
+          <option value="http://codemirror.net/addon/display/rulers.js">rulers.js</option>
           <option value="http://codemirror.net/addon/runmode/runmode.js">runmode.js</option>
           <option value="http://codemirror.net/addon/runmode/runmode.node.js">runmode.node.js</option>
           <option value="http://codemirror.net/addon/runmode/runmode-standalone.js">runmode-standalone.js</option>

diff --git a/doc/manual.html b/doc/manual.html
@@ -2284,6 +2284,16 @@ <h2>Addons</h2>
       on <a href="../addon/display/fullscreen.css"><code>fullscreen.css</code></a>. <a href="../demo/fullscreen.html">Demo
       here</a>.</dd>
 
+      <dt id="addon_rulers"><a href="../addon/display/rulers.js"><code>display/rulers.js</code></a></dt>
+      <dd>Adds a <code>rulers</code> option, which can be used to show
+      one or more vertical rulers in the editor. The option, if
+      defined, should be given an array of <code>{column,
+      className}</code> objects or numbers. The ruler will be
+      displayed at the column indicated by the number or
+      the <code>column</code> property. The <code>className</code>
+      property can be used to assign a custom style to a
+      ruler. <a href="../demo/rulers.html">Demo here</a>.</dd>
+
       <dt id="addon_hardwrap"><a href="../addon/wrap/hardwrap.js"><code>wrap/hardwrap.js</code></a></dt>
       <dd>Addon to perform hard line wrapping/breaking for paragraphs
       of text. Adds these methods to editor instances:

diff --git a/lib/codemirror.css b/lib/codemirror.css
@@ -61,6 +61,11 @@
 
 .cm-tab { display: inline-block; }
 
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
+
 /* DEFAULT THEME */
 
 .cm-s-default .cm-keyword {color: #708;}