search plugin
authorJon Snyder <snyder.jon@gmail.com>
Mon, 11 Feb 2013 23:34:31 +0000 (15:34 -0800)
committerJon Snyder <snyder.jon@gmail.com>
Mon, 11 Feb 2013 23:34:31 +0000 (15:34 -0800)
plugin/search/search.js [new file with mode: 0644]

diff --git a/plugin/search/search.js b/plugin/search/search.js
new file mode 100644 (file)
index 0000000..28f10ca
--- /dev/null
@@ -0,0 +1,192 @@
+/*
+ * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
+ * by navigatating to that slide and highlighting it.
+ *
+ * By Jon Snyder <snyder.jon@gmail.com>, February 2013
+ */
+
+var RevealSearch = (function() {
+
+       var matchedSlides;
+       var currentMatchedIndex;
+       var searchboxDirty;
+       var myHilitor;
+
+// Original JavaScript code by Chirp Internet: www.chirp.com.au
+// Please acknowledge use of this code by including this header.
+// 2/2013 jon: modified regex to display any match, not restricted to word boundaries.
+
+function Hilitor(id, tag)
+{
+
+  var targetNode = document.getElementById(id) || document.body;
+  var hiliteTag = tag || "EM";
+  var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
+  var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
+  var wordColor = [];
+  var colorIdx = 0;
+  var matchRegex = "";
+  var matchingSlides = [];
+
+  this.setRegex = function(input)
+  {
+    input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
+    matchRegex = new RegExp("(" + input + ")","i");
+  }
+
+  this.getRegex = function()
+  {
+    return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
+  }
+
+  // recursively apply word highlighting
+  this.hiliteWords = function(node)
+  {
+    if(node == undefined || !node) return;
+    if(!matchRegex) return;
+    if(skipTags.test(node.nodeName)) return;
+
+    if(node.hasChildNodes()) {
+      for(var i=0; i < node.childNodes.length; i++)
+        this.hiliteWords(node.childNodes[i]);
+    }
+    if(node.nodeType == 3) { // NODE_TEXT
+      if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
+       //find the slide's section element and save it in our list of matching slides
+       var secnode = node.parentNode;
+       while (secnode.nodeName != 'SECTION') {
+               secnode = secnode.parentNode;
+       }
+       
+       var slideIndex = Reveal.getIndices(secnode);
+       var slidelen = matchingSlides.length;
+       var alreadyAdded = false;
+       for (var i=0; i < slidelen; i++) {
+               if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
+                       alreadyAdded = true;
+               }
+       }
+       if (! alreadyAdded) {
+               matchingSlides.push(slideIndex);
+       }
+       
+        if(!wordColor[regs[0].toLowerCase()]) {
+          wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
+        }
+
+        var match = document.createElement(hiliteTag);
+        match.appendChild(document.createTextNode(regs[0]));
+        match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
+        match.style.fontStyle = "inherit";
+        match.style.color = "#000";
+
+        var after = node.splitText(regs.index);
+        after.nodeValue = after.nodeValue.substring(regs[0].length);
+        node.parentNode.insertBefore(match, after);
+      }
+    }
+  };
+
+  // remove highlighting
+  this.remove = function()
+  {
+    var arr = document.getElementsByTagName(hiliteTag);
+    while(arr.length && (el = arr[0])) {
+      el.parentNode.replaceChild(el.firstChild, el);
+    }
+  };
+
+  // start highlighting at target node
+  this.apply = function(input)
+  {
+    if(input == undefined || !input) return;
+    this.remove();
+    this.setRegex(input);
+    this.hiliteWords(targetNode);
+    return matchingSlides;
+  };
+
+}
+
+       function openSearch() {
+               //ensure the search term input dialog is visible and has focus:
+               var inputbox = document.getElementById("searchinput");
+               inputbox.style.display = "inline";
+               inputbox.focus();
+               inputbox.select();
+       }
+
+       function toggleSearch() {
+               var inputbox = document.getElementById("searchinput");
+               if (inputbox.style.display !== "inline") {
+                       openSearch();
+               }
+               else {
+                       inputbox.style.display = "none";
+                       myHilitor.remove();
+               }
+       }
+
+       function doSearch() {
+               //if there's been a change in the search term, perform a new search:
+               if (searchboxDirty) {
+                       var searchstring = document.getElementById("searchinput").value;
+
+                       //find the keyword amongst the slides
+                       myHilitor = new Hilitor("slidecontent");
+                       matchedSlides = myHilitor.apply(searchstring);
+                       currentMatchedIndex = 0;
+               }
+
+               //navigate to the next slide that has the keyword, wrapping to the first if necessary
+               if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
+                       currentMatchedIndex = 0;
+               }
+               if (matchedSlides.length > currentMatchedIndex) {
+                       Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
+                       currentMatchedIndex++;
+               }
+       }
+
+       var dom = {};
+       dom.wrapper = document.querySelector( '.reveal' );
+
+       if( !dom.wrapper.querySelector( '.searchbox' ) ) {
+                       var searchElement = document.createElement( 'div' );
+                       searchElement.id = "searchinputdiv";
+                       searchElement.classList.add( 'searchdiv' );
+                       searchElement.innerHTML = '<span><input type="text" id="searchinput" class="searchinput"/><img src="css/theme/assets/searchicon.png" id="searchbutton" class="searchicon"/></span>';
+                       dom.wrapper.appendChild( searchElement );
+       }
+
+       document.getElementById("searchbutton").addEventListener( 'click', function(event) {
+               toggleSearch();
+       }, false );
+
+       document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
+               switch (event.keyCode) {
+                       case 13:
+                               event.preventDefault();
+                               doSearch();
+                               searchboxDirty = false;
+                               break;
+                       default:
+                               searchboxDirty = true;
+               }
+       }, false );
+
+       // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
+       /*
+       document.addEventListener( 'keydown', function( event ) {
+               // Disregard the event if the target is editable or a
+               // modifier is present
+               if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
+
+               if( event.keyCode === 83 ) {
+                       event.preventDefault();
+                       openSearch();
+               }
+       }, false );
+*/
+       return { open: openSearch };
+})();