search

Makefile

@@ -1,10 +1,12 @@
+BROWSERIFY = node_modules/.bin/browserify
 ESLINT = node_modules/.bin/eslint
 NPM = npm
+UGLIFY = node_modules/.bin/uglifyjs
 
 CUSTOM = $(shell find custom -name '*.md' | sort)
 VENDOR = ramda sanctuary sanctuary-def sanctuary-type-classes sanctuary-type-identifiers
 VENDOR_CHECKS = $(patsubst %,check-%-version,$(VENDOR))
-FILES = favicon.png index.html $(patsubst %,vendor/%.js,$(VENDOR))
+FILES = favicon.png index.html search.js $(patsubst %,vendor/%.js,$(VENDOR))
 
 
 .PHONY: all
@@ -22,6 +24,8 @@ vendor/ramda.js: node_modules/ramda/dist/ramda.js
 vendor/%.js: node_modules/%/index.js
 	cp '$<' '$@'
 
+search.js: src/search.js
+	$(BROWSERIFY) '$<' | $(UGLIFY) > '$@'
 
 .PHONY: $(VENDOR_CHECKS)
 $(VENDOR_CHECKS): check-%-version:
@@ -47,7 +51,7 @@ lint:
 	  --config node_modules/sanctuary-style/eslint-es3.json \
 	  --env es3 \
 	  --env browser \
-	  -- behaviour.js
+	  -- behaviour.js src/search.js
 	make clean
 	make
 	git diff --exit-code

index.html

@@ -25,6 +25,13 @@
   <div id="css-main">
     <h1 id="sanctuary">Sanctuary <small>v0.12.2</small></h1>
     <p id="tagline">Refuge from unsafe JavaScript</p>
+    <div>
+      <input type="text" id="search-input" placeholder="search" />
+    </div>
+    <div id="search-results">
+      <div id="no-matches" style="display:none;">No matches</div>
+      <div id="yes-matches"></div>
+    </div>
 
     <ul id="toc">
       <li>
@@ -3956,5 +3963,6 @@ <h4 id="splitOn"><code><a href="https://github.com/sanctuary-js/sanctuary/blob/v
     window.S = window.sanctuary;
   </script>
   <script src="behaviour.js"></script>
+  <script src="search.js"></script>
 </body>
 </html>

package.json

@@ -10,9 +10,12 @@
     "sanctuary-type-identifiers": "1.0.0"
   },
   "devDependencies": {
+    "browserify": "14.0.x",
     "envvar": "1.1.x",
     "eslint": "3.19.x",
+    "hindley-milner-search": "0.2.1",
     "marked": "0.3.5",
-    "sanctuary-style": "0.5.x"
+    "sanctuary-style": "0.5.x",
+    "uglify-js": "2.7.x"
   }
 }

scripts/generate

@@ -392,6 +392,13 @@ def('toDocument',
   <div id="css-main">
     <h1 id="sanctuary">Sanctuary <small>v${version}</small></h1>
     <p id="tagline">${tagline}</p>
+    <div>
+      <input type="text" id="search-input" placeholder="search" />
+    </div>
+    <div id="search-results">
+      <div id="no-matches" style="display:none;">No matches</div>
+      <div id="yes-matches"></div>
+    </div>
 ${toc(content)}
 ${content}
   </div>
@@ -406,6 +413,7 @@ ${content}
     window.S = window.sanctuary;
   </script>
   <script src="behaviour.js"></script>
+  <script src="search.js"></script>
 </body>
 </html>
 `);

src/search.js

@@ -0,0 +1,58 @@
+(function() {
+
+  'use strict';
+
+  /* global require */
+
+  var HMS = require('hindley-milner-search');
+
+  //  initSigNodes :: Node -> [Node]
+  function initSigNodes(resultsContainer) {
+    return Array.prototype.reduce.call(
+      document.getElementById('toc').querySelectorAll('li a code'),
+      function(r, _el) {
+        var el = document.createElement('div');
+        el.appendChild(_el.parentNode.cloneNode(true));
+        el.className = 'search-result';
+        var k = el.childNodes[0].getAttribute('href');
+        if (!Object.prototype.hasOwnProperty.call(r.set, k)) {
+          r.set[k] = true;
+          r.uniqs.push(el);
+        }
+        return r;
+      },
+      {set: {}, uniqs: []}
+    ).uniqs;
+  }
+
+  window.addEventListener('DOMContentLoaded', function() {
+    var $container = document.getElementById('yes-matches');
+    var $containerNo = document.getElementById('no-matches');
+    var $els = initSigNodes(document.getElementById('search-results'));
+    var search = HMS.init(Array.prototype.map.call($els, function(el) {
+      return el.innerText.trim().split(/\s+/).join(' ');
+    }), {fuzzy: false}).search;
+    var $prevSearch = '';
+    var searchInput = document.getElementById('search-input');
+    searchInput.focus();
+    searchInput.addEventListener('keyup', function(event) {
+      var q = event.target.value;
+      if (q !== $prevSearch) {
+        $prevSearch = q;
+        var matches = search(q);
+        $containerNo.style.display =
+          matches.length === 0 && q !== '' ? 'block' : 'none';
+        while ($container.childNodes.length > 0) {
+          $container.removeChild($container.childNodes[0]);
+        }
+        // if there is no query, do not show any matches
+        if (q !== '') {
+          matches.forEach(function(match) {
+            $container.appendChild($els[match.pointer]);
+          });
+        }
+      }
+    });
+  });
+
+}());

style.css

@@ -111,6 +111,10 @@ a code {
   top: -0.05em;
 }
 
+#search-results .search-result {
+  font-size: 75%;
+}
+
 pre {
   margin: 1.334em 0;
   padding: 0;