Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.

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 <[email protected]>, 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)$");
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;
57
      	while (secnode != null && 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 inputboxdiv = document.getElementById("searchinputdiv");
114
		var inputbox = document.getElementById("searchinput");
115
		inputboxdiv.style.display = "inline";
116
		inputbox.focus();
117
		inputbox.select();
118
	}
119

120
	function closeSearch() {
121
		var inputboxdiv = document.getElementById("searchinputdiv");
122
		inputboxdiv.style.display = "none";
123
		if(myHilitor) myHilitor.remove();
124
	}
125

126
	function toggleSearch() {
127
		var inputboxdiv = document.getElementById("searchinputdiv");
128
		if (inputboxdiv.style.display !== "inline") {
129
			openSearch();
130
		}
131
		else {
132
			closeSearch();
133
		}
134
	}
135

136
	function doSearch() {
137
		//if there's been a change in the search term, perform a new search:
138
		if (searchboxDirty) {
139
			var searchstring = document.getElementById("searchinput").value;
140

141
			if (searchstring === '') {
142
				if(myHilitor) myHilitor.remove();
143
				matchedSlides = null;
144
			}
145
			else {
146
				//find the keyword amongst the slides
147
				myHilitor = new Hilitor("slidecontent");
148
				matchedSlides = myHilitor.apply(searchstring);
149
				currentMatchedIndex = 0;
150
			}
151
		}
152

153
    if (matchedSlides) {
154
			//navigate to the next slide that has the keyword, wrapping to the first if necessary
155
			if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
156
				currentMatchedIndex = 0;
157
			}
158
			if (matchedSlides.length > currentMatchedIndex) {
159
				Reveal.slide(matchedSlides[currentMatchedIndex].h, matchedSlides[currentMatchedIndex].v);
160
				currentMatchedIndex++;
161
			}
162
		}
163
	}
164

165
	var dom = {};
166
	dom.wrapper = document.querySelector( '.reveal' );
167

168
	if( !dom.wrapper.querySelector( '.searchbox' ) ) {
169
			var searchElement = document.createElement( 'div' );
170
			searchElement.id = "searchinputdiv";
171
			searchElement.classList.add( 'searchdiv' );
172
      searchElement.style.position = 'absolute';
173
      searchElement.style.top = '10px';
174
      searchElement.style.right = '10px';
175
			searchElement.style.zIndex = 10;
176
      //embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
177
			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>';
178
			dom.wrapper.appendChild( searchElement );
179
	}
180

181
	document.getElementById("searchbutton").addEventListener( 'click', function(event) {
182
		doSearch();
183
	}, false );
184

185
	document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
186
		switch (event.keyCode) {
187
			case 13:
188
				event.preventDefault();
189
				doSearch();
190
				searchboxDirty = false;
191
				break;
192
			default:
193
				searchboxDirty = true;
194
		}
195
	}, false );
196

197
	document.addEventListener( 'keydown', function( event ) {
198
		if( event.key == "F" && (event.ctrlKey || event.metaKey) ) {//Control+Shift+f
199
			event.preventDefault();
200
			toggleSearch();
201
		}
202
	}, false );
203
	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
204
	closeSearch();
205
	return { open: openSearch };
206
})();
207

208