Highlight searchterms in mkdocs projects

Sphinx has a theme agnostic feature to highlight terms given by the
"highlight" GET parameter. This is used by RTD when linking from the search
page to the documentation page.

This did not work for mkdocs projects yet. We add the logic for this to
readthedocs-embed-js in order to make this feature available independently of
the used mkdocs theme.

readthedocs/core/static-src/core/js/doc-embed/mkdocs.js

@@ -4,6 +4,7 @@
 
 
 var rtddata = require('./rtd-data');
+var highlightSearchterm = require('../highlight-searchterm');
 
 
 function init() {
@@ -42,6 +43,9 @@ function init() {
           };
       win.on('resize', apply_stickynav);
       apply_stickynav();
+
+      // Init searchterm highlighting
+      highlightSearchterm.init();
     }
 
 }

readthedocs/core/static-src/core/js/highlight-searchterm.js

@@ -0,0 +1,60 @@
+/*
+ * Allow highlighting of search terms, passed in as "highlight" GET parameter.
+ *
+ * This imitades the behaviour of what is implemented in Sphinx's doctools.js.
+ * Mkdocs does not provide a similiar logic, we implement it here instead which
+ * will work theme agnostic.
+ */
+
+
+require('./jquery.highlighttext');
+
+
+function init() {
+    highlightSearchWords();
+}
+
+
+function urldecode(x) {
+    return decodeURIComponent(x).replace(/\+/g, ' ');
+}
+
+
+function getQueryParameters(s) {
+    if (typeof s == 'undefined')
+        s = document.location.search;
+    var parts = s.substr(s.indexOf('?') + 1).split('&');
+    var result = {};
+    for (var i = 0; i < parts.length; i++) {
+        var tmp = parts[i].split('=', 2);
+        var key = urldecode(tmp[0]);
+        var value = urldecode(tmp[1]);
+        if (key in result)
+            result[key].push(value);
+        else
+            result[key] = [value];
+    }
+    return result;
+}
+
+
+function highlightSearchWords() {
+    var params = getQueryParameters();
+    var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
+    if (terms.length) {
+        var body = $('div.body');
+        if (!body.length) {
+            var body = $('body');
+        }
+        window.setTimeout(function() {
+            $.each(terms, function() {
+                body.highlightText(this.toLowerCase(), 'highlighted');
+            });
+        }, 10);
+    }
+}
+
+
+module.exports = {
+    init: init
+};

readthedocs/core/static-src/core/js/jquery.highlighttext.js

@@ -0,0 +1,29 @@
+/**
+ * highlight a given string on a jquery object by wrapping it in
+ * span elements with the given class name.
+ */
+jQuery.fn.highlightText = function(text, className) {
+    function highlight(node) {
+        if (node.nodeType == 3) {
+            var val = node.nodeValue;
+            var pos = val.toLowerCase().indexOf(text);
+            if (pos >= 0 && !jQuery(node.parentNode).hasClass(className)) {
+                var span = document.createElement("span");
+                span.className = className;
+                span.appendChild(document.createTextNode(val.substr(pos, text.length)));
+                node.parentNode.insertBefore(span, node.parentNode.insertBefore(
+                    document.createTextNode(val.substr(pos + text.length)),
+                    node.nextSibling));
+                    node.nodeValue = val.substr(0, pos);
+            }
+        }
+        else if (!jQuery(node).is("button, select, textarea")) {
+            jQuery.each(node.childNodes, function() {
+                highlight(this);
+            });
+        }
+    }
+    return this.each(function() {
+        highlight(this);
+    });
+};