Switch search to use jsonp to load the index, fully works offline. #198

libs/Format/HTML/Generator.php

@@ -76,8 +76,8 @@ class Generator implements \Todaymade\Daux\Format\Base\Generator, LiveGenerator
 
         if ($config->getHTML()->hasSearch()) {
             file_put_contents(
-                $destination . DIRECTORY_SEPARATOR . 'daux_search_index.json',
-                json_encode(['pages' => $this->indexed_pages])
+                $destination . DIRECTORY_SEPARATOR . 'daux_search_index.js',
+                'load_search_index(' . json_encode(['pages' => $this->indexed_pages]) . ');'
             );
 
             if (json_last_error()) {

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "build": "crafty run",
     "watch": "crafty watch",
+    "lint:js": "crafty jsLint --fix src/js/**/*.js",
     "lint:css": "crafty cssLint --fix --preset recommended themes/daux_singlepage/scss/*.scss themes/daux/scss/*.scss"
   }
 }

src/js/search/index.js

@@ -30,7 +30,7 @@ class SearchEngine {
             descriptiveWords: 25,
             highlightTerms: true,
             highlightEveryTerm: false,
-            contentLocation: "daux_search_index.json",
+            contentLocation: "daux_search_index.js",
             ...options
         };
 
@@ -41,30 +41,37 @@ class SearchEngine {
 
     loadData() {
         if (!this.loadingPromise) {
-            this.loadingPromise = fetch(
-                this.settings.base_url + this.settings.contentLocation
-            )
-                .then(data => data.json())
-                .then(json => {
-                    this.searchIndex = new FlexSearch({
-                        doc: {
-                            id: "url",
-                            field: ["title", "text", "tags"]
-                        }
-                    });
+            // We do this as jsonp instead of an XHR or fetch request
+            // to be compatible with usage from filesystem
+            const po = document.createElement("script");
+            po.type = "text/javascript";
+            po.async = true;
+            po.src = this.settings.base_url + this.settings.contentLocation;
+            const s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(po, s);
 
-                    let pages = json.pages;
-
-                    // Only keep the pages related to the current language
-                    if (window.searchLanguage) {
-                        const pagePrefix = `${window.searchLanguage}/`;
-                        pages = pages.filter(
-                            item => item.url.indexOf(pagePrefix) === 0
-                        );
+            this.loadingPromise = new Promise(resolve => {
+                window.load_search_index = data => resolve(data);
+            }).then(json => {
+                this.searchIndex = new FlexSearch({
+                    doc: {
+                        id: "url",
+                        field: ["title", "text", "tags"]
                     }
-
-                    this.searchIndex.add(pages);
                 });
+
+                let pages = json.pages;
+
+                // Only keep the pages related to the current language
+                if (window.searchLanguage) {
+                    const pagePrefix = `${window.searchLanguage}/`;
+                    pages = pages.filter(
+                        item => item.url.indexOf(pagePrefix) === 0
+                    );
+                }
+
+                this.searchIndex.add(pages);
+            });
         }
 
         return this.loadingPromise;

themes/daux/js/daux.min.js

@@ -1,2 +1,2 @@
-!function(){"use strict";function e(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}function t(e,t){for(var n=0;n<e.length;n++)e[n].classList.toggle("CodeToggler--hidden",t);try{localStorage.setItem("daux_code_blocks_hidden",t)}catch(e){}}function n(e){var t=void 0!==e.preventDefault;t&&e.preventDefault();var n=function(e){for(var t=e;(t=t.parentNode)&&9!==t.nodeType;)if(1===t.nodeType&&t.classList.contains("Nav__item"))return t;throw new Error("Could not find a NavItem...")}(e.target),o=n.querySelector("ul.Nav");t&&n.classList.contains("Nav__item--open")?(o.style.height="".concat(o.scrollHeight,"px"),o.style.transitionDuration="150ms",o.style.height="0px",n.classList.remove("Nav__item--open")):t?(o.style.transitionDuration="150ms",o.addEventListener("transitionend",(function e(t){"0px"!==t.target.style.height&&(t.target.style.height="auto"),t.target.removeEventListener("transitionend",e)})),o.style.height="".concat(o.scrollHeight,"px"),n.classList.add("Nav__item--open")):o.style.height="auto"}e((function(){var e=document.querySelectorAll(".s-content pre"),n=document.querySelector(".CodeToggler");n&&(e.length?function(e,n){var o=e.querySelector(".CodeToggler__button--main");o.addEventListener("change",(function(e){t(n,!e.target.checked)}),!1);var a=!1;try{"false"===(a=localStorage.getItem("daux_code_blocks_hidden"))?a=!1:"true"===a&&(a=!0),a&&(t(n,!!a),o.checked=!a)}catch(e){}}(n,e):n.classList.add("CodeToggler--hidden"))})),e((function(){var e=document.querySelector(".Collapsible__trigger");if(e){var t=document.querySelector(".Collapsible__content");e.addEventListener("click",(function(n){t.classList.contains("Collapsible__content--open")?(t.style.height=0,t.classList.remove("Collapsible__content--open"),e.setAttribute("aria-expanded","false")):(e.setAttribute("aria-expanded","true"),t.style.transitionDuration="150ms",t.style.height="".concat(t.scrollHeight,"px"),t.classList.add("Collapsible__content--open"))}))}})),e((function(){var e=document.querySelectorAll("pre > code:not(.hljs)");if(e.length){var t=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="".concat(window.base_url,"daux_libraries/highlight.pack.js"),n.onload=function(t){[].forEach.call(e,window.hljs.highlightBlock)},t.appendChild(n)}})),e((function(){for(var e,t=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),o=t.length-1;o>=0;o--)(e=t[o]).addEventListener("click",n),e.parentNode.parentNode.classList.contains("Nav__item--open")&&n({target:e});var a=document.querySelectorAll(".Nav__item__link--nopage"),r=!0,i=!1,l=void 0;try{for(var c,s=a[Symbol.iterator]();!(r=(c=s.next()).done);r=!0){c.value.addEventListener("click",n)}}catch(e){i=!0,l=e}finally{try{r||null==s.return||s.return()}finally{if(i)throw l}}}))}();
+!function(){"use strict";function e(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}function t(e,t){for(var n=0;n<e.length;n++)e[n].classList.toggle("CodeToggler--hidden",t);try{localStorage.setItem("daux_code_blocks_hidden",t)}catch(e){}}function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function r(e){if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(r):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}}(e))){var t=0,r=function(){};return{s:r,n:function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a,i=!0,l=!1;return{s:function(){o=e[Symbol.iterator]()},n:function(){var e=o.next();return i=e.done,e},e:function(e){l=!0,a=e},f:function(){try{i||null==o.return||o.return()}finally{if(l)throw a}}}}function o(e){var t=void 0!==e.preventDefault;t&&e.preventDefault();var n=function(e){for(var t=e;(t=t.parentNode)&&9!==t.nodeType;)if(1===t.nodeType&&t.classList.contains("Nav__item"))return t;throw new Error("Could not find a NavItem...")}(e.target),r=n.querySelector("ul.Nav");t&&n.classList.contains("Nav__item--open")?(r.style.height="".concat(r.scrollHeight,"px"),r.style.transitionDuration="150ms",r.style.height="0px",n.classList.remove("Nav__item--open")):t?(r.style.transitionDuration="150ms",r.addEventListener("transitionend",(function e(t){"0px"!==t.target.style.height&&(t.target.style.height="auto"),t.target.removeEventListener("transitionend",e)})),r.style.height="".concat(r.scrollHeight,"px"),n.classList.add("Nav__item--open")):r.style.height="auto"}e((function(){var e=document.querySelectorAll(".s-content pre"),n=document.querySelector(".CodeToggler");n&&(e.length?function(e,n){var r=e.querySelector(".CodeToggler__button--main");r.addEventListener("change",(function(e){t(n,!e.target.checked)}),!1);var o=!1;try{"false"===(o=localStorage.getItem("daux_code_blocks_hidden"))?o=!1:"true"===o&&(o=!0),o&&(t(n,!!o),r.checked=!o)}catch(e){}}(n,e):n.classList.add("CodeToggler--hidden"))})),e((function(){var e=document.querySelector(".Collapsible__trigger");if(e){var t=document.querySelector(".Collapsible__content");e.addEventListener("click",(function(n){t.classList.contains("Collapsible__content--open")?(t.style.height=0,t.classList.remove("Collapsible__content--open"),e.setAttribute("aria-expanded","false")):(e.setAttribute("aria-expanded","true"),t.style.transitionDuration="150ms",t.style.height="".concat(t.scrollHeight,"px"),t.classList.add("Collapsible__content--open"))}))}})),e((function(){var e=document.querySelectorAll("pre > code:not(.hljs)");if(e.length){var t=document.getElementsByTagName("head")[0],n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="".concat(window.base_url,"daux_libraries/highlight.pack.js"),n.onload=function(t){[].forEach.call(e,window.hljs.highlightBlock)},t.appendChild(n)}})),e((function(){for(var e,t=document.querySelectorAll(".Nav__item.has-children i.Nav__arrow"),n=t.length-1;n>=0;n--)(e=t[n]).addEventListener("click",o),e.parentNode.parentNode.classList.contains("Nav__item--open")&&o({target:e});var a,i=r(document.querySelectorAll(".Nav__item__link--nopage"));try{for(i.s();!(a=i.n()).done;){a.value.addEventListener("click",o)}}catch(e){i.e(e)}finally{i.f()}}))}();
 //# sourceMappingURL=daux.min.js.map