search.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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. var RevealSearch = (function() {
  8. var matchedSlides;
  9. var currentMatchedIndex;
  10. var searchboxDirty;
  11. var myHilitor;
  12. // Original JavaScript code by Chirp Internet: www.chirp.com.au
  13. // Please acknowledge use of this code by including this header.
  14. // 2/2013 jon: modified regex to display any match, not restricted to word boundaries.
  15. function Hilitor(id, tag)
  16. {
  17. var targetNode = document.getElementById(id) || document.body;
  18. var hiliteTag = tag || "EM";
  19. var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
  20. var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
  21. var wordColor = [];
  22. var colorIdx = 0;
  23. var matchRegex = "";
  24. var matchingSlides = [];
  25. this.setRegex = function(input)
  26. {
  27. input = input.replace(/^[^\w]+|[^\w]+$/g, "").replace(/[^\w'-]+/g, "|");
  28. matchRegex = new RegExp("(" + input + ")","i");
  29. }
  30. this.getRegex = function()
  31. {
  32. return matchRegex.toString().replace(/^\/\\b\(|\)\\b\/i$/g, "").replace(/\|/g, " ");
  33. }
  34. // recursively apply word highlighting
  35. this.hiliteWords = function(node)
  36. {
  37. if(node == undefined || !node) return;
  38. if(!matchRegex) return;
  39. if(skipTags.test(node.nodeName)) return;
  40. if(node.hasChildNodes()) {
  41. for(var i=0; i < node.childNodes.length; i++)
  42. this.hiliteWords(node.childNodes[i]);
  43. }
  44. if(node.nodeType == 3) { // NODE_TEXT
  45. if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
  46. //find the slide's section element and save it in our list of matching slides
  47. var secnode = node;
  48. while (secnode != null && secnode.nodeName != 'SECTION') {
  49. secnode = secnode.parentNode;
  50. }
  51. var slideIndex = Reveal.getIndices(secnode);
  52. var slidelen = matchingSlides.length;
  53. var alreadyAdded = false;
  54. for (var i=0; i < slidelen; i++) {
  55. if ( (matchingSlides[i].h === slideIndex.h) && (matchingSlides[i].v === slideIndex.v) ) {
  56. alreadyAdded = true;
  57. }
  58. }
  59. if (! alreadyAdded) {
  60. matchingSlides.push(slideIndex);
  61. }
  62. if(!wordColor[regs[0].toLowerCase()]) {
  63. wordColor[regs[0].toLowerCase()] = colors[colorIdx++ % colors.length];
  64. }
  65. var match = document.createElement(hiliteTag);
  66. match.appendChild(document.createTextNode(regs[0]));
  67. match.style.backgroundColor = wordColor[regs[0].toLowerCase()];
  68. match.style.fontStyle = "inherit";
  69. match.style.color = "#000";
  70. var after = node.splitText(regs.index);
  71. after.nodeValue = after.nodeValue.substring(regs[0].length);
  72. node.parentNode.insertBefore(match, after);
  73. }
  74. }
  75. };
  76. // remove highlighting
  77. this.remove = function()
  78. {
  79. var arr = document.getElementsByTagName(hiliteTag);
  80. while(arr.length && (el = arr[0])) {
  81. el.parentNode.replaceChild(el.firstChild, el);
  82. }
  83. };
  84. // start highlighting at target node
  85. this.apply = function(input)
  86. {
  87. if(input == undefined || !input) return;
  88. this.remove();
  89. this.setRegex(input);
  90. this.hiliteWords(targetNode);
  91. return matchingSlides;
  92. };
  93. }
  94. function openSearch() {
  95. //ensure the search term input dialog is visible and has focus:
  96. var inputboxdiv = document.getElementById("searchinputdiv");
  97. var inputbox = document.getElementById("searchinput");
  98. inputboxdiv.style.display = "inline";
  99. inputbox.focus();
  100. inputbox.select();
  101. }
  102. function closeSearch() {
  103. var inputboxdiv = document.getElementById("searchinputdiv");
  104. inputboxdiv.style.display = "none";
  105. if(myHilitor) myHilitor.remove();
  106. }
  107. function toggleSearch() {
  108. var inputboxdiv = document.getElementById("searchinputdiv");
  109. if (inputboxdiv.style.display !== "inline") {
  110. openSearch();
  111. }
  112. else {
  113. closeSearch();
  114. }
  115. }
  116. function doSearch() {
  117. //if there's been a change in the search term, perform a new search:
  118. if (searchboxDirty) {
  119. var searchstring = document.getElementById("searchinput").value;
  120. if (searchstring === '') {
  121. if(myHilitor) myHilitor.remove();
  122. matchedSlides = null;
  123. }
  124. else {
  125. //find the keyword amongst the slides
  126. myHilitor = new Hilitor("slidecontent");
  127. matchedSlides = myHilitor.apply(searchstring);
  128. currentMatchedIndex = 0;
  129. }
  130. }
  131. if (matchedSlides) {
  132. //navigate to the next slide that has the keyword, wrapping to the first if necessary
  133. if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
  134. currentMatchedIndex = 0;
  135. }
  136. if (matchedSlides.length > currentMatchedIndex) {
  137. Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
  138. currentMatchedIndex++;
  139. }
  140. }
  141. }
  142. var dom = {};
  143. dom.wrapper = document.querySelector( '.reveal' );
  144. if( !dom.wrapper.querySelector( '.searchbox' ) ) {
  145. var searchElement = document.createElement( 'div' );
  146. searchElement.id = "searchinputdiv";
  147. searchElement.classList.add( 'searchdiv' );
  148. searchElement.style.position = 'absolute';
  149. searchElement.style.top = '10px';
  150. searchElement.style.right = '10px';
  151. searchElement.style.zIndex = 10;
  152. //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
  153. 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>';
  154. dom.wrapper.appendChild( searchElement );
  155. }
  156. document.getElementById("searchbutton").addEventListener( 'click', function(event) {
  157. doSearch();
  158. }, false );
  159. document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
  160. switch (event.keyCode) {
  161. case 13:
  162. event.preventDefault();
  163. doSearch();
  164. searchboxDirty = false;
  165. break;
  166. default:
  167. searchboxDirty = true;
  168. }
  169. }, false );
  170. document.addEventListener( 'keydown', function( event ) {
  171. if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
  172. event.preventDefault();
  173. toggleSearch();
  174. }
  175. }, false );
  176. if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
  177. closeSearch();
  178. return { open: openSearch };
  179. })();