From 00d11c16bf6c0ab850ec382de9673268c983c17e Mon Sep 17 00:00:00 2001 From: Marijn Haverbeke Date: Fri, 21 Feb 2014 15:07:24 +0100 Subject: [PATCH] [rulers addon] Add --- addon/display/rulers.js | 47 +++++++++++++++++++++++++++++++++++ demo/rulers.html | 54 +++++++++++++++++++++++++++++++++++++++++ doc/compress.html | 1 + doc/manual.html | 10 ++++++++ lib/codemirror.css | 5 ++++ 5 files changed, 117 insertions(+) create mode 100644 addon/display/rulers.js create mode 100644 demo/rulers.html diff --git a/addon/display/rulers.js b/addon/display/rulers.js new file mode 100644 index 0000000000..958c8eaf8d --- /dev/null +++ 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 new file mode 100644 index 0000000000..d75fd080e9 --- /dev/null +++ b/demo/rulers.html @@ -0,0 +1,54 @@ + + +CodeMirror: Ruler Demo + + + + + + + + + +
+

Ruler Demo

+ + + +

Demonstration of +the rulers addon, which +displays vertical lines at given column offsets.

+ +
diff --git a/doc/compress.html b/doc/compress.html index b874e05f52..d318ab80ee 100644 --- a/doc/compress.html +++ b/doc/compress.html @@ -194,6 +194,7 @@

Script compression helper

+ diff --git a/doc/manual.html b/doc/manual.html index f0cdfc3b6f..6d5cce50e0 100644 --- a/doc/manual.html +++ b/doc/manual.html @@ -2284,6 +2284,16 @@

Addons

on fullscreen.css. Demo here. +
display/rulers.js
+
Adds a rulers 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 {column, + className} objects or numbers. The ruler will be + displayed at the column indicated by the number or + the column property. The className + property can be used to assign a custom style to a + ruler. Demo here.
+
wrap/hardwrap.js
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 index 8332c50197..2b050e19f2 100644 --- 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;}