[match-highlighter addon] Add annotateScrollbar option

When enabled, and the annotatescrollbar addon is loaded, matches will be shown on the scrollbar.
codemirror · Jan 12, 2016 · 4a68108 · 4a68108
1 parent d40f5e2
commit 4a68108
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 15 deletions.
diff --git 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
@@ -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,28 +71,47 @@
     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");
       if (from.line != to.line) return;
       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
@@ -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>