Skip to content

Commit 00d11c1

Browse files
marijnhmarijnh
committed
[rulers addon] Add
1 parent 9de3e54 commit 00d11c1

File tree

5 files changed

+117
-0
lines changed

5 files changed

+117
-0
lines changed

‎addon/display/rulers.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(function() {
2+
"use strict";
3+
4+
CodeMirror.defineOption("rulers", false, function(cm, val, old) {
5+
if (old && old != CodeMirror.Init) {
6+
clearRulers(cm);
7+
cm.off("refresh", refreshRulers);
8+
}
9+
if (val && val.length) {
10+
setRulers(cm);
11+
cm.on("refresh", refreshRulers);
12+
}
13+
});
14+
15+
function clearRulers(cm) {
16+
for (var i = cm.display.lineSpace.childNodes.length - 1; i >= 0; i--) {
17+
var node = cm.display.lineSpace.childNodes[i];
18+
if (/(^|\s)CodeMirror-ruler($|\s)/.test(node.className))
19+
node.parentNode.removeChild(node);
20+
}
21+
}
22+
23+
function setRulers(cm) {
24+
var val = cm.getOption("rulers");
25+
var cw = cm.defaultCharWidth();
26+
var left = cm.charCoords(CodeMirror.Pos(cm.firstLine(), 0), "div").left;
27+
var bot = -cm.display.scroller.offsetHeight;
28+
for (var i = 0; i < val.length; i++) {
29+
var elt = document.createElement("div");
30+
var col, cls = null;
31+
if (typeof val[i] == "number") {
32+
col = val[i];
33+
} else {
34+
col = val[i].column;
35+
cls = val[i].className;
36+
}
37+
elt.className = "CodeMirror-ruler" + (cls ? " " + cls : "");
38+
elt.style.cssText = "left: " + (left + col * cw) + "px; top: -50px; bottom: " + bot + "px";
39+
cm.display.lineSpace.insertBefore(elt, cm.display.cursorDiv);
40+
}
41+
}
42+
43+
function refreshRulers(cm) {
44+
clearRulers(cm);
45+
setRulers(cm);
46+
}
47+
})();

‎demo/rulers.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
3+
<title>CodeMirror: Ruler Demo</title>
4+
<meta charset="utf-8"/>
5+
<link rel=stylesheet href="../doc/docs.css">
6+
7+
<link rel="stylesheet" href="../lib/codemirror.css">
8+
<script src="../lib/codemirror.js"></script>
9+
<script src="../addon/display/rulers.js"></script>
10+
<style type="text/css">
11+
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
12+
.ruler1 { border-left: 1px solid #fcc; }
13+
.ruler2 { border-left: 1px solid #f5f577; }
14+
.ruler3 { border-left: 1px solid #cfc; }
15+
.ruler4 { border-left: 1px solid #aff; }
16+
.ruler5 { border-left: 1px solid #ccf; }
17+
.ruler6 { border-left: 1px solid #fcf; }
18+
</style>
19+
<div id=nav>
20+
<a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
21+
22+
<ul>
23+
<li><a href="../index.html">Home</a>
24+
<li><a href="../doc/manual.html">Manual</a>
25+
<li><a href="https://github.com/marijnh/codemirror">Code</a>
26+
</ul>
27+
<ul>
28+
<li><a class=active href="#">Ruler demo</a>
29+
</ul>
30+
</div>
31+
32+
<article>
33+
<h2>Ruler Demo</h2>
34+
35+
<script type="text/javascript">
36+
var nums = "0123456789", space = " ";
37+
var rulers = [], value = "";
38+
for (var i = 1; i <= 6; i++) {
39+
rulers.push({className: "ruler" + i, column: i * 10});
40+
for (var j = 1; j < i; j++) value += space;
41+
value += nums + "\n";
42+
}
43+
var editor = CodeMirror(document.body.lastChild, {
44+
rulers: rulers,
45+
value: value + value + value,
46+
lineNumbers: true
47+
});
48+
</script>
49+
50+
<p>Demonstration of
51+
the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
52+
displays vertical lines at given column offsets.</p>
53+
54+
</article>

‎doc/compress.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ <h2>Script compression helper</h2>
194194
<option value="http://codemirror.net/addon/hint/pig-hint.js">pig-hint.js</option>
195195
<option value="http://codemirror.net/addon/display/placeholder.js">placeholder.js</option>
196196
<option value="http://codemirror.net/addon/hint/python-hint.js">python-hint.js</option>
197+
<option value="http://codemirror.net/addon/display/rulers.js">rulers.js</option>
197198
<option value="http://codemirror.net/addon/runmode/runmode.js">runmode.js</option>
198199
<option value="http://codemirror.net/addon/runmode/runmode.node.js">runmode.node.js</option>
199200
<option value="http://codemirror.net/addon/runmode/runmode-standalone.js">runmode-standalone.js</option>

‎doc/manual.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2284,6 +2284,16 @@ <h2>Addons</h2>
22842284
on <a href="../addon/display/fullscreen.css"><code>fullscreen.css</code></a>. <a href="../demo/fullscreen.html">Demo
22852285
here</a>.</dd>
22862286

2287+
<dt id="addon_rulers"><a href="../addon/display/rulers.js"><code>display/rulers.js</code></a></dt>
2288+
<dd>Adds a <code>rulers</code> option, which can be used to show
2289+
one or more vertical rulers in the editor. The option, if
2290+
defined, should be given an array of <code>{column,
2291+
className}</code> objects or numbers. The ruler will be
2292+
displayed at the column indicated by the number or
2293+
the <code>column</code> property. The <code>className</code>
2294+
property can be used to assign a custom style to a
2295+
ruler. <a href="../demo/rulers.html">Demo here</a>.</dd>
2296+
22872297
<dt id="addon_hardwrap"><a href="../addon/wrap/hardwrap.js"><code>wrap/hardwrap.js</code></a></dt>
22882298
<dd>Addon to perform hard line wrapping/breaking for paragraphs
22892299
of text. Adds these methods to editor instances:

‎lib/codemirror.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@
6161

6262
.cm-tab { display: inline-block; }
6363

64+
.CodeMirror-ruler {
65+
border-left: 1px solid #ccc;
66+
position: absolute;
67+
}
68+
6469
/* DEFAULT THEME */
6570

6671
.cm-s-default .cm-keyword {color: #708;}

0 commit comments

Comments
 (0)