Make ::selection contrasting

.eslintrc

@@ -0,0 +1,168 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+
+  "parser": "babel-eslint",
+
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "sourceType": "module"
+  },
+
+  "rules": {
+    "accessor-pairs": 2,
+    "array-bracket-spacing": 0,
+    "block-scoped-var": 0,
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": 0,
+    "comma-dangle": [2, "never"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "complexity": 0,
+    "computed-property-spacing": 0,
+    "consistent-return": 0,
+    "consistent-this": 0,
+    "constructor-super": 2,
+    "curly": [2, "multi-line"],
+    "default-case": 0,
+    "dot-location": [2, "property"],
+    "dot-notation": 0,
+    "eol-last": 2,
+    "eqeqeq": [2, "allow-null"],
+    "func-names": 0,
+    "func-style": 0,
+    "generator-star-spacing": [2, { "before": true, "after": true }],
+    "guard-for-in": 0,
+    "handle-callback-err": [2, "^(err|error)$" ],
+    "indent": [2, 4, { "SwitchCase": 1 }],
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "linebreak-style": 0,
+    "lines-around-comment": 0,
+    "max-nested-callbacks": 0,
+    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
+    "new-parens": 2,
+    "newline-after-var": 0,
+    "no-alert": 0,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 0,
+    "no-cond-assign": 2,
+    "no-console": 0,
+    "no-constant-condition": 0,
+    "no-continue": 0,
+    "no-control-regex": 2,
+    "no-debugger": 2,
+    "no-delete-var": 2,
+    "no-div-regex": 0,
+    "no-dupe-args": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 0,
+    "no-empty": 0,
+    "no-empty-character-class": 2,
+    "no-eq-null": 0,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 0,
+    "no-extra-semi": 0,
+    "no-fallthrough": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inline-comments": 0,
+    "no-inner-declarations": [2, "functions"],
+    "no-invalid-regexp": 2,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 0,
+    "no-loop-func": 0,
+    "no-mixed-requires": 0,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [2, { "max": 1 }],
+    "no-native-reassign": 2,
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 0,
+    "no-new": 2,
+    "no-new-func": 0,
+    "no-new-object": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-octal": 2,
+    "no-octal-escape": 2,
+    "no-param-reassign": 0,
+    "no-path-concat": 0,
+    "no-process-env": 0,
+    "no-process-exit": 0,
+    "no-proto": 0,
+    "no-redeclare": 2,
+    "no-regex-spaces": 2,
+    "no-restricted-modules": 0,
+    "no-return-assign": 2,
+    "no-script-url": 0,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 0,
+    "no-shadow-restricted-names": 2,
+    "no-spaced-func": 2,
+    "no-sparse-arrays": 2,
+    "no-sync": 0,
+    "no-ternary": 0,
+    "no-this-before-super": 2,
+    "no-throw-literal": 2,
+    "no-trailing-spaces": 2,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-undefined": 0,
+    "no-underscore-dangle": 0,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-expressions": 0,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "no-use-before-define": 0,
+    "no-var": 0,
+    "no-void": 0,
+    "no-warning-comments": 0,
+    "no-with": 2,
+    "object-curly-spacing": 0,
+    "object-shorthand": 0,
+    "one-var": [2, { "initialized": "never" }],
+    "operator-assignment": 0,
+    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
+    "padded-blocks": 0,
+    "prefer-const": 0,
+    "quote-props": 0,
+    "quotes": [2, "single", "avoid-escape"],
+    "radix": 2,
+    "semi": [2, "always"],
+    "semi-spacing": 0,
+    "sort-vars": 0,
+    "keyword-spacing": [2, {"after": true, "overrides": {"throw": { "after": true}, "return": { "before": true }}}],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, "never"],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!"] }],
+    "strict": 0,
+    "use-isnan": 2,
+    "valid-jsdoc": 0,
+    "valid-typeof": 2,
+    "vars-on-top": 0,
+    "wrap-iife": [2, "any"],
+    "wrap-regex": 0,
+    "yoda": [2, "never"]
+  }
+}

app/history.js

@@ -0,0 +1,9 @@
+import $ from 'jquery';
+
+// History
+$(document).on('click', '[data-clear-history-toggle]', (event) => {
+    event.preventDefault();
+
+    window.sessionStorage.clear();
+    window.location.reload();
+});

app/main.js

@@ -0,0 +1,20 @@
+import $ from 'jquery';
+import './utils';
+import './toc';
+import './history';
+import './search';
+import './nav';
+
+$(window).on('load', function() {
+    // store this page in session
+    window.sessionStorage.setItem($('body').data('url'), '1');
+
+    // loop through the sessionStorage and see if something should be marked as visited
+    for (let url in window.sessionStorage) {
+        if (window.sessionStorage.getItem(url) === '1') {
+            $(`[data-nav-id="${url}"]`).addClass('visited');
+        }
+    }
+
+    $('.highlightable').highlight(window.sessionStorage.getItem('search-value'), { element: 'mark' });
+});

app/nav.js

@@ -0,0 +1,19 @@
+import $ from 'jquery';
+
+if (window.sessionStorage.getItem('search-value')) {
+    $(document.body).removeClass('searchbox-hidden');
+    $('[data-search-input]').val(sessionStorage.getItem('search-value')).trigger('input');
+}
+
+// allow keyboard control for prev/next links
+$(document).on('click', '.nav-prev, .nav-next', (event) => {
+    const target = $(event.currentTarget);
+    window.location.href = target.attr('href');
+});
+
+$(document).on('keydown', (event) => {
+    const item = event.which === 37 ? $('a.nav-prev') : (event.which === 39 ? $('a.nav-next') : null);
+    if (item) {
+        item.click();
+    }
+});

app/search.js

@@ -0,0 +1,49 @@
+import $ from 'jquery';
+
+let ajax;
+$(document).on('input', '[data-search-input]', (event) => {
+    const target = $(event.currentTarget);
+    const value = target.val();
+    const items = $('[data-nav-id]');
+
+    items.removeClass('search-match');
+
+    const topics = $('ul.topics');
+    const highlightable = $('.highlightable');
+    if (!value.length) {
+        topics.removeClass('searched');
+        items.css('display', 'block');
+        window.sessionStorage.removeItem('search-value');
+
+        highlightable.unhighlight({ element: 'mark' });
+
+        return;
+    }
+
+    window.sessionStorage.setItem('search-value', value);
+    highlightable.unhighlight({ element: 'mark' }).highlight(value, { element: 'mark' });
+
+    if (ajax && ajax.abort) {
+        ajax.abort();
+    }
+
+    ajax = $.ajax({
+        url: `${target.data('search-input')}:${value}`
+    }).done((data) => {
+        if (data && data.results && data.results.length) {
+            items.css('display', 'none');
+            topics.addClass('searched');
+            data.results.forEach((item) => {
+                const navItem = $(`[data-nav-id="${item}"]`);
+                navItem.css('display', 'block').addClass('search-match');
+                navItem.parents('li').css('display', 'block');
+            });
+        }
+    });
+});
+
+$(document).on('click', '[data-search-clear]', () => {
+    $('[data-search-input]').val('').trigger('input');
+    window.sessionStorage.removeItem('search-input');
+    $('.highlightable').unhighlight({ element: 'mark' });
+});

app/toc.js

@@ -0,0 +1,6 @@
+import $ from 'jquery';
+
+// TOC
+$(document).on('click', '.toc-toggle', () => {
+    $('.page-toc').toggleClass('toc-closed');
+});

app/utils/highlight.js

@@ -0,0 +1,81 @@
+import $ from 'jquery';
+
+$.extend({
+    highlight: function(node, re, nodeName, className) {
+        if (node.nodeType === 3) {
+            const match = node.data.match(re);
+            if (match) {
+                const highlight = document.createElement(nodeName || 'span');
+                highlight.className = className || 'highlight';
+                const wordNode = node.splitText(match.index);
+                wordNode.splitText(match[0].length);
+                const wordClone = wordNode.cloneNode(true);
+                highlight.appendChild(wordClone);
+                wordNode.parentNode.replaceChild(highlight, wordNode);
+                return 1; // skip added node in parent
+            }
+        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
+            !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
+            !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
+            for (let i = 0; i < node.childNodes.length; i++) {
+                i += $.highlight(node.childNodes[i], re, nodeName, className);
+            }
+        }
+        return 0;
+    }
+});
+
+$.fn.unhighlight = function(options) {
+    const settings = {
+        className: 'highlight',
+        element: 'span'
+    };
+
+    $.extend(settings, options);
+
+    return this.find(`${settings.element}.${settings.className}`).each(function() {
+        const parent = this.parentNode;
+        parent.replaceChild(this.firstChild, this);
+        parent.normalize();
+    }).end();
+};
+
+$.fn.highlight = function(words, options) {
+    const settings = {
+        className: 'highlight',
+        element: 'span',
+        caseSensitive: false,
+        wordsOnly: false
+    };
+
+    $.extend(settings, options);
+
+    if (!words) {
+        return;
+    }
+
+    if (words.constructor === String) {
+        words = [words];
+    }
+    words = $.grep(words, function(word) {
+        return word !== '';
+    });
+    words = $.map(words, function(word) {
+        return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+    });
+    if (words.length === 0) {
+        return this;
+    }
+
+    const flag = settings.caseSensitive ? '' : 'i';
+    let pattern = `(${words.join('|')})`;
+    if (settings.wordsOnly) {
+        pattern = '\\b' + pattern + '\\b';
+    }
+
+    const re = new RegExp(pattern, flag);
+
+    return this.each(function() {
+        $.highlight(this, re, settings.element, settings.className);
+    });
+};

app/utils/index.js

@@ -0,0 +1,2 @@
+import './highlight';
+import './progress';

app/utils/progress.js

@@ -0,0 +1,11 @@
+const h = document.documentElement;
+const b = document.body;
+const st = 'scrollTop';
+const sh = 'scrollHeight';
+const progress = document.querySelector('.progress');
+let scroll;
+
+document.addEventListener('scroll', function() {
+    scroll = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
+    progress.style.setProperty('--scroll', scroll + '%');
+});