Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

plugin.js 6.3KB

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