diff --git a/AUTHORS b/AUTHORS
index 830a968c275f75438a1f1f3506c2e546c90919ec..880169dd4295a2924555c5e38a957e2bd434f4d3 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -59,6 +59,7 @@ Anthony Gégo
Anthony Grimes
Anton Kovalyov
AQNOUCH Mohammed
+Arnab Bose
areos
as3boyan
AtomicPages LLC
@@ -183,6 +184,7 @@ Gergely Hegykozi
Giovanni Calò
Glenn Jorde
Glenn Ruehle
+Google Inc.
Golevka
Gordon Smith
Grant Skinner
diff --git a/addon/search/match-highlighter.js b/addon/search/match-highlighter.js
index e9a22721f7808db765bf64658549aa7583aa40d6..8f02f01c873d20982ac862fefee32d9f5e5a935e 100644
--- a/addon/search/match-highlighter.js
+++ b/addon/search/match-highlighter.js
@@ -16,13 +16,14 @@
// highlighted only if the selected text is a word. showToken, when enabled,
// will cause the current token to be highlighted when nothing is selected.
// delay is used to specify how much time to wait, in milliseconds, before
-// highlighting the matches.
+// highlighting the matches. If annotateScrollbar is enabled, the occurances
+// will be highlighted on the scrollbar via the matchesonscrollbar addon.
(function(mod) {
if (typeof exports == "object" && typeof module == "object") // CommonJS
- mod(require("../../lib/codemirror"));
+ mod(require("../../lib/codemirror"), require("./matchesonscrollbar"));
else if (typeof define == "function" && define.amd) // AMD
- define(["../../lib/codemirror"], mod);
+ define(["../../lib/codemirror", "./matchesonscrollbar"], mod);
else // Plain browser env
mod(CodeMirror);
})(function(CodeMirror) {
@@ -40,18 +41,19 @@
this.showToken = options.showToken;
this.delay = options.delay;
this.wordsOnly = options.wordsOnly;
+ this.annotateScrollbar = options.annotateScrollbar;
}
if (this.style == null) this.style = DEFAULT_TOKEN_STYLE;
if (this.minChars == null) this.minChars = DEFAULT_MIN_CHARS;
if (this.delay == null) this.delay = DEFAULT_DELAY;
if (this.wordsOnly == null) this.wordsOnly = DEFAULT_WORDS_ONLY;
this.overlay = this.timeout = null;
+ this.matchesonscroll = null;
}
CodeMirror.defineOption("highlightSelectionMatches", false, function(cm, val, old) {
if (old && old != CodeMirror.Init) {
- var over = cm.state.matchHighlighter.overlay;
- if (over) cm.removeOverlay(over);
+ removeOverlay(cm);
clearTimeout(cm.state.matchHighlighter.timeout);
cm.state.matchHighlighter = null;
cm.off("cursorActivity", cursorActivity);
@@ -69,20 +71,39 @@
state.timeout = setTimeout(function() {highlightMatches(cm);}, state.delay);
}
+ function addOverlay(cm, query, hasBoundary, style) {
+ var state = cm.state.matchHighlighter;
+ cm.addOverlay(state.overlay = makeOverlay(query, hasBoundary, style));
+ if (state.annotateScrollbar) {
+ var searchFor = hasBoundary ? new RegExp("\\b" + query + "\\b") : query;
+ state.matchesonscroll = cm.showMatchesOnScrollbar(searchFor, true,
+ {className: "CodeMirror-selection-highlight-scrollbar"});
+ }
+ }
+
+ function removeOverlay(cm) {
+ var state = cm.state.matchHighlighter;
+ if (state.overlay) {
+ cm.removeOverlay(state.overlay);
+ state.overlay = null;
+ if (state.annotateScrollbar) {
+ state.matchesonscroll.clear();
+ state.matchesonscroll = null;
+ }
+ }
+ }
+
function highlightMatches(cm) {
cm.operation(function() {
var state = cm.state.matchHighlighter;
- if (state.overlay) {
- cm.removeOverlay(state.overlay);
- state.overlay = null;
- }
+ removeOverlay(cm);
if (!cm.somethingSelected() && state.showToken) {
var re = state.showToken === true ? /[\w$]/ : state.showToken;
var cur = cm.getCursor(), line = cm.getLine(cur.line), start = cur.ch, end = start;
while (start && re.test(line.charAt(start - 1))) --start;
while (end < line.length && re.test(line.charAt(end))) ++end;
if (start < end)
- cm.addOverlay(state.overlay = makeOverlay(line.slice(start, end), re, state.style));
+ addOverlay(cm, line.slice(start, end), re, state.style);
return;
}
var from = cm.getCursor("from"), to = cm.getCursor("to");
@@ -90,7 +111,7 @@
if (state.wordsOnly && !isWord(cm, from, to)) return;
var selection = cm.getRange(from, to).replace(/^\s+|\s+$/g, "");
if (selection.length >= state.minChars)
- cm.addOverlay(state.overlay = makeOverlay(selection, false, state.style));
+ addOverlay(cm, selection, false, state.style);
});
}
diff --git a/demo/matchhighlighter.html b/demo/matchhighlighter.html
index c60109009e8ecbde7061d0b3581bcaafb44d5154..893d72134b4c7d4902b731ff48dd401c5d515ad9 100644
--- a/demo/matchhighlighter.html
+++ b/demo/matchhighlighter.html
@@ -6,6 +6,8 @@
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
+<script src="../addon/scroll/annotatescrollbar.js"></script>
+<script src="../addon/search/matchesonscrollbar.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/match-highlighter.js"></script>
<style type="text/css">
@@ -15,6 +17,8 @@
background-position: bottom;
background-repeat: repeat-x;
}
+ .cm-matchhighlight {background-color: lightgreen}
+ .CodeMirror-selection-highlight-scrollbar {background-color: green}
</style>
<div id=nav>
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
@@ -31,14 +35,66 @@
<article>
<h2>Match Highlighter Demo</h2>
-<form><textarea id="code" name="code">Select this text: hardToSpotVar
- And everywhere else in your code where hardToSpotVar appears will automatically illuminate.
-Give it a try! No more hardToSpotVars.</textarea></form>
+<form><textarea id="code" name="code">Select this text: hardtospot
+ And everywhere else in your code where hardtospot appears will
+automatically illuminate. Give it a try! No more hard to spot
+variables - stay in context of your code all the time.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra
+interdum dui eu pulvinar. Mauris maximus ligula venenatis tempus
+interdum. Cras hendrerit, ipsum sed ultrices pharetra, ligula diam
+porttitor lacus, ac tempor eros est a massa. Nam orci elit, vulputate
+in tristique quis, consectetur vitae metus. Pellentesque et enim
+elementum, lobortis augue in, lacinia sapien. Morbi eu nunc semper,
+sagittis felis a, pellentesque mauris. Lorem ipsum dolor sit amet,
+consectetur adipiscing elit. Aenean quis diam turpis.
+
+Fusce lobortis nisl quis aliquet euismod. Aenean vitae nulla non ipsum
+efficitur scelerisque. Curabitur auctor, lorem non rhoncus porttitor,
+augue ligula lacinia dolor, et vehicula magna lorem imperdiet velit.
+Fusce risus sem, hardtospot commodo eleifend hendrerit vitae, mollis
+quis risus. Cras tincidunt, justo vitae hendrerit venenatis, urna
+dolor placerat tortor, eu lobortis lectus dolor in ligula. Nullam non
+erat non nisl vulputate ultrices sit amet vestibulum dolor. Quisque in
+tortor porta, pellentesque odio nec, malesuada nibh.
+
+In a dui feugiat, ullamcorper urna in, accumsan magna. Donec egestas
+sem nec eros rhoncus, vel gravida purus ornare. Nulla orci mauris,
+porta nec pharetra sed, ornare et lorem. Donec luctus turpis nunc,
+eget dictum felis mollis et. Sed sodales hardtospot nunc vitae leo
+rhoncus imperdiet. Donec elementum malesuada velit quis placerat.
+Proin accumsan lorem id nisi volutpat ullamcorper. Vivamus laoreet
+dolor ac sem malesuada, ac scelerisque ex efficitur. Aliquam tempus
+libero velit, vel tristique augue vulputate nec.
+
+Mauris ultrices leo felis, sit amet congue augue aliquam condimentum.
+Vivamus purus leo, mattis vitae dignissim vel, ultricies ac ex. Mauris
+eu dolor eu purus ultricies ultrices. Sed euismod feugiat ex et
+mattis. Morbi cursus laoreet pharetra. Donec eu dolor sodales,
+ultricies nisi et, malesuada urna. Praesent sit amet fringilla felis.
+Nam rhoncus, est blandit auctor auctor, lorem ipsum laoreet ipsum,
+quis sodales libero odio in lorem. Phasellus odio dolor, elementum
+sagittis nibh non, fermentum semper libero. Mauris hendrerit
+hardtospot lectus sit amet commodo eleifend. Morbi pulvinar eget nisl
+at eleifend. Fusce eget porta erat, vitae lobortis libero.
+
+Phasellus sit amet massa in massa pharetra malesuada. Vestibulum at
+quam vel libero aliquam volutpat at ut dui. Praesent scelerisque vel
+mauris sit amet vehicula. Phasellus at mi nec ligula cursus interdum
+sit amet non quam. Aliquam tempus sollicitudin euismod. Nulla euismod
+mollis enim tincidunt placerat. Proin ac scelerisque enim, quis
+sollicitudin metus. Pellentesque congue nec sapien ut rhoncus. Sed
+eget ornare diam, ut consectetur ante. Aenean eleifend mauris quis
+ornare accumsan. In hac habitasse hardtospot platea dictumst.
+
+</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
- highlightSelectionMatches: {showToken: /\w/}
+ // To highlight on scrollbars as well, pass annotateScrollbar in options
+ // as below.
+ highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
});
</script>