docs/com/plugin/search/search.js

   1 /*
   2  * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
   3  * by navigatating to that slide and highlighting it.
   4  *
   5  * By Jon Snyder <snyder.jon@gmail.com>, February 2013
   6  */
   7
   8 var RevealSearch = (function() {
   9
  10         var matchedSlides;
  11         var currentMatchedIndex;
  12         var searchboxDirty;
  13         var myHilitor;
  14
  15 // Original JavaScript code by Chirp Internet: www.chirp.com.au
  16 // Please acknowledge use of this code by including this header.
  17 // 2/2013 jon: modified regex to display any match, not restricted to word boundaries.
  18
  19 function Hilitor(id, tag)
  20 {
  21
  22   var targetNode = document.getElementById(id) || document.body;
  23   var hiliteTag = tag || "EM";
  24   var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$");
  25   var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
  26   var wordColor = [];
  27   var colorIdx = 0;
  28   var matchRegex = "";
  29   var matchingSlides = [];
  30
  31   this.setRegex = function(input)
  32   {
  33     input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
  34     matchRegex = new RegExp("(" + input + ")","i");
  35   }
  36
  37   this.getRegex = function()
  38   {
  39     return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
  40   }
  41
  42   // recursively apply word highlighting
  43   this.hiliteWords = function(node)
  44   {
  45     if(node == undefined || !node) return;
  46     if(!matchRegex) return;
  47     if(skipTags.test(node.nodeName)) return;
  48
  49     if(node.hasChildNodes()) {
  50       for(var i=0; i < node.childNodes.length; i++)
  51         this.hiliteWords(node.childNodes[i]);
  52     }
  53     if(node.nodeType == 3) { // NODE_TEXT
  54       if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
  55         //find the slide's section element and save it in our list of matching slides
  56         var secnode = node.parentNode;
  57         while (secnode.nodeName != 'SECTION') {
  58                 secnode = secnode.parentNode;
  59         }
  60
  61         var slideIndex = Reveal.getIndices(secnode);
  62         var slidelen = matchingSlides.length;
  63         var alreadyAdded = false;
  64         for (var i=0; i < slidelen; i++) {
  65                 if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
  66                         alreadyAdded = true;
  67                 }
  68         }
  69         if (! alreadyAdded) {
  70                 matchingSlides.push(slideIndex);
  71         }
  72
  73         if(!wordColor[regs[0].toLowerCase()]) {
  74           wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
  75         }
  76
  77         var match = document.createElement(hiliteTag);
  78         match.appendChild(document.createTextNode(regs[0]));
  79         match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
  80         match.style.fontStyle = "inherit";
  81         match.style.color = "#000";
  82
  83         var after = node.splitText(regs.index);
  84         after.nodeValue = after.nodeValue.substring(regs[0].length);
  85         node.parentNode.insertBefore(match, after);
  86       }
  87     }
  88   };
  89
  90   // remove highlighting
  91   this.remove = function()
  92   {
  93     var arr = document.getElementsByTagName(hiliteTag);
  94     while(arr.length && (el = arr[0])) {
  95       el.parentNode.replaceChild(el.firstChild, el);
  96     }
  97   };
  98
  99   // start highlighting at target node
 100   this.apply = function(input)
 101   {
 102     if(input == undefined || !input) return;
 103     this.remove();
 104     this.setRegex(input);
 105     this.hiliteWords(targetNode);
 106     return matchingSlides;
 107   };
 108
 109 }
 110
 111         function openSearch() {
 112                 //ensure the search term input dialog is visible and has focus:
 113                 var inputbox = document.getElementById("searchinput");
 114                 inputbox.style.display = "inline";
 115                 inputbox.focus();
 116                 inputbox.select();
 117         }
 118
 119         function toggleSearch() {
 120                 var inputbox = document.getElementById("searchinput");
 121                 if (inputbox.style.display !== "inline") {
 122                         openSearch();
 123                 }
 124                 else {
 125                         inputbox.style.display = "none";
 126                         myHilitor.remove();
 127                 }
 128         }
 129
 130         function doSearch() {
 131                 //if there's been a change in the search term, perform a new search:
 132                 if (searchboxDirty) {
 133                         var searchstring = document.getElementById("searchinput").value;
 134
 135                         //find the keyword amongst the slides
 136                         myHilitor = new Hilitor("slidecontent");
 137                         matchedSlides = myHilitor.apply(searchstring);
 138                         currentMatchedIndex = 0;
 139                 }
 140
 141                 //navigate to the next slide that has the keyword, wrapping to the first if necessary
 142                 if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
 143                         currentMatchedIndex = 0;
 144                 }
 145                 if (matchedSlides.length > currentMatchedIndex) {
 146                         Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
 147                         currentMatchedIndex++;
 148                 }
 149         }
 150
 151         var dom = {};
 152         dom.wrapper = document.querySelector( '.reveal' );
 153
 154         if( !dom.wrapper.querySelector( '.searchbox' ) ) {
 155                         var searchElement = document.createElement( 'div' );
 156                         searchElement.id = "searchinputdiv";
 157                         searchElement.classList.add( 'searchdiv' );
 158       searchElement.style.position = 'absolute';
 159       searchElement.style.top = '10px';
 160       searchElement.style.left = '10px';
 161       //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
 162                         searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
 163                         dom.wrapper.appendChild( searchElement );
 164         }
 165
 166         document.getElementById("searchbutton").addEventListener( 'click', function(event) {
 167                 doSearch();
 168         }, false );
 169
 170         document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
 171                 switch (event.keyCode) {
 172                         case 13:
 173                                 event.preventDefault();
 174                                 doSearch();
 175                                 searchboxDirty = false;
 176                                 break;
 177                         default:
 178                                 searchboxDirty = true;
 179                 }
 180         }, false );
 181
 182         // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
 183         /*
 184         document.addEventListener( 'keydown', function( event ) {
 185                 // Disregard the event if the target is editable or a
 186                 // modifier is present
 187                 if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
 188
 189                 if( event.keyCode === 83 ) {
 190                         event.preventDefault();
 191                         openSearch();
 192                 }
 193         }, false );
 194 */
 195         return { open: openSearch };
 196 })();