test: update split js

assets/js/app.js

@@ -1,5 +1,3 @@
-/* global FlexSearch docs:true a:true t:true d:true */
-
 document.getElementById('mode').addEventListener('click', () => {
 
   document.body.classList.toggle('dark');
@@ -13,142 +11,6 @@ if (localStorage.getItem('theme') === 'dark') {
 
 }
 
-var suggestions = document.getElementById('suggestions');
-var userinput = document.getElementById('userinput');
-
-document.addEventListener('keydown', inputFocus);
-
-function inputFocus(e) {
-
-  if (e.keyCode === 191 ) {
-    e.preventDefault();
-    userinput.focus();
-  }
-
-  if (e.keyCode === 27 ) {
-    userinput.blur();
-    suggestions.classList.add('d-none');
-  }
-
-}
-
-document.addEventListener('click', function(event) {
-
-  var isClickInsideElement = suggestions.contains(event.target);
-
-  if (!isClickInsideElement) {
-    suggestions.classList.add('d-none');
-  }
-
-});
-
-
-/*
-Source: 
-  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-*/
-
-document.addEventListener('keydown',suggestionFocus);
-
-function suggestionFocus(e){
-
-  const focusableSuggestions= suggestions.querySelectorAll('a');
-  const focusable= [...focusableSuggestions]; 
-  const index = focusable.indexOf(document.activeElement); 
-
-  let nextIndex = 0;
-
-  if (e.keyCode === 38) {
-    e.preventDefault();
-    nextIndex= index > 0 ? index-1 : 0;
-    focusableSuggestions[nextIndex].focus();
-  }
-  else if (e.keyCode === 40) {
-    e.preventDefault();
-    nextIndex= index+1 < focusable.length ? index+1 : index;
-    focusableSuggestions[nextIndex].focus();
-  }
-
-}
-
-
-/* 
-Source: 
-  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
-  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-*/
-
-(function(){
-
-  var index = new FlexSearch({
-    preset: 'score',
-    cache: true,
-    doc: {
-        id: 'id',
-        field: [
-          'title',
-          'description',
-          'content',            
-        ],
-        store: [
-          'href',
-          'title',
-          'description',
-        ],
-    },
-  });
-
-  index.add(docs);
-
-  userinput.addEventListener('input', show_results, true);
-  suggestions.addEventListener('click', accept_suggestion, true);
-
-  function show_results(){
-
-    var value = this.value;
-    var results = index.search(value, 5);
-    var entry, childs = suggestions.childNodes;
-    var i = 0, len = results.length;
-
-    suggestions.classList.remove('d-none');
-
-    results.forEach(function(page) {
-      
-      entry = document.createElement('div');
-      
-      entry.innerHTML = '<a href><span></span><span></span></a>';
-
-      a = entry.querySelector('a'),
-      t = entry.querySelector('span:first-child'),
-      d = entry.querySelector('span:nth-child(2)');
-
-      a.href = page.href;
-      t.textContent = page.title;
-      d.textContent = page.description;
-
-      suggestions.appendChild(entry);
-
-    });
-
-    while(childs.length > len){
-
-        suggestions.removeChild(childs[i])
-    }
-
-  }
-
-  function accept_suggestion(){
-
-      while(suggestions.lastChild){
-
-          suggestions.removeChild(suggestions.lastChild);
-      }
-
-      return false;
-  }
-
-}());
-
 /* eslint-disable */
 var clipboard = new ClipboardJS('.btn-clipboard');
 

assets/js/index.js

@@ -1,5 +1,89 @@
-var docs = [
+var suggestions = document.getElementById('suggestions');
-{{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
+var userinput = document.getElementById('userinput');
+
+document.addEventListener('keydown', inputFocus);
+
+function inputFocus(e) {
+
+  if (e.keyCode === 191 ) {
+    e.preventDefault();
+    userinput.focus();
+  }
+
+  if (e.keyCode === 27 ) {
+    userinput.blur();
+    suggestions.classList.add('d-none');
+  }
+
+}
+
+document.addEventListener('click', function(event) {
+
+  var isClickInsideElement = suggestions.contains(event.target);
+
+  if (!isClickInsideElement) {
+    suggestions.classList.add('d-none');
+  }
+
+});
+
+/*
+Source:
+  - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
+*/
+
+document.addEventListener('keydown',suggestionFocus);
+
+function suggestionFocus(e){
+
+  const focusableSuggestions= suggestions.querySelectorAll('a');
+  const focusable= [...focusableSuggestions];
+  const index = focusable.indexOf(document.activeElement);
+
+  let nextIndex = 0;
+
+  if (e.keyCode === 38) {
+    e.preventDefault();
+    nextIndex= index > 0 ? index-1 : 0;
+    focusableSuggestions[nextIndex].focus();
+  }
+  else if (e.keyCode === 40) {
+    e.preventDefault();
+    nextIndex= index+1 < focusable.length ? index+1 : index;
+    focusableSuggestions[nextIndex].focus();
+  }
+
+}
+
+
+/*
+Source:
+  - https://github.com/nextapps-de/flexsearch#index-documents-field-search
+  - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
+*/
+
+(function(){
+
+  var index = new FlexSearch({
+    preset: 'score',
+    cache: true,
+    doc: {
+        id: 'id',
+        field: [
+          'title',
+          'description',
+          'content',
+        ],
+        store: [
+          'href',
+          'title',
+          'description',
+        ],
+    },
+  });
+
+  var docs = [
+    {{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
       {
         id: {{ $index }},
         href: "{{ .Permalink | absURL }}",
@@ -7,5 +91,56 @@ var docs = [
         description: {{ .Params.description | jsonify }},
         content: {{ .Content | jsonify }}
       },
-{{ end -}}
+    {{ end -}}
-];
+  ];
+
+  index.add(docs);
+
+  userinput.addEventListener('input', show_results, true);
+  suggestions.addEventListener('click', accept_suggestion, true);
+
+  function show_results(){
+
+    var value = this.value;
+    var results = index.search(value, 5);
+    var entry, childs = suggestions.childNodes;
+    var i = 0, len = results.length;
+
+    suggestions.classList.remove('d-none');
+
+    results.forEach(function(page) {
+
+      entry = document.createElement('div');
+
+      entry.innerHTML = '<a href><span></span><span></span></a>';
+
+      a = entry.querySelector('a'),
+      t = entry.querySelector('span:first-child'),
+      d = entry.querySelector('span:nth-child(2)');
+
+      a.href = page.href;
+      t.textContent = page.title;
+      d.textContent = page.description;
+
+      suggestions.appendChild(entry);
+
+    });
+
+    while(childs.length > len){
+
+        suggestions.removeChild(childs[i])
+    }
+
+  }
+
+  function accept_suggestion(){
+
+      while(suggestions.lastChild){
+
+          suggestions.removeChild(suggestions.lastChild);
+      }
+
+      return false;
+  }
+
+}());

layouts/partials/footer/script-footer.html

@@ -6,14 +6,14 @@
 {{ if eq (hugo.Environment) "development" -}}
   {{ $app := resources.Get "js/app.js" -}}
   {{ $js := slice $lazysizes $clipboard $flexsearch $app | resources.Concat "main.js" -}}
-  <script src="{{ $index.Permalink }}" defer></script>
   <script src="{{ $js.Permalink }}" defer></script>
+  <script src="{{ $index.Permalink }}" defer></script>
 {{ else -}}
   {{ $instantPage := resources.Get "js/vendor/instant.page/instantpage.js" | minify -}}
   {{ $app := resources.Get "js/app.js" | minify -}}
   {{ $js := slice $lazysizes $clipboard $flexsearch $instantPage $app | resources.Concat "main.js" -}}
   {{ $jsProd := $js | resources.Fingerprint "sha512" -}}
   {{ $indexProd := $index | resources.Minify | resources.Fingerprint "sha512" -}}
-  <script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
   <script src="{{ $jsProd.Permalink }}" integrity="{{ $jsProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
+  <script src="{{ $indexProd.Permalink }}" integrity="{{ $indexProd.Data.Integrity }}" crossorigin="anonymous" defer></script>
 {{ end -}}