Integrated new webidx system into layout/design

[website] / themes / bookstack / static / js / script.js

diff --git a/themes/bookstack/static/js/script.js b/themes/bookstack/static/js/script.js
index 1e4d51db29e1034a08dee0f5593da5da709efc5b..8fe5d0fb4438c2c4c6499ab36cae76fcb79db7e7 100644 (file)
--- a/themes/bookstack/static/js/script.js
+++ b/themes/bookstack/static/js/script.js
@@ -10,8 +10,11 @@ menuButton.addEventListener('click', function(event) {
 });
 
 document.body.addEventListener('click', function(event) {
-  menuDropDown.classList.remove('showing');
-  event.stopPropagation();  
+  const isShown = menuDropDown.classList.contains('showing');
+  if (isShown) {
+    menuDropDown.classList.remove('showing');
+    event.stopPropagation();  
+  }
 });
 
 
@@ -32,4 +35,145 @@ document.body.addEventListener('dblclick', event => {
   if (isHeader && event.target.id) {
     window.location.hash = event.target.id;
   }
-});
\ No newline at end of file
+});
+
+function el(tag, attributes = {}, children = []) {
+  const elem = document.createElement(tag);
+  for (const attr of Object.keys(attributes)) {
+    elem.setAttribute(attr, attributes[attr]);
+  }
+  for (let child of children) {
+    if (typeof child === 'string') {
+      child = new Text(child);
+    }
+    elem.append(child);
+  }
+  return elem;
+}
+
+// Site search
+const searchForm = document.getElementById('site-search-form');
+const searchInput = document.getElementById('site-search-input');
+const searchDialog = searchForm.querySelector('dialog');
+
+async function runSearch() {
+  const searchTerm = searchInput.value.toLowerCase();
+
+  let pages = [];
+  try {
+    pages = await window.webidx.search({
+      dbfile:'/search.db',
+      query: searchTerm,
+    });
+  } catch (error) {
+    searchDialog.innerHTML = '<strong class="search-category-title">Failed to load search results</strong>';
+    console.error(error);
+    return;
+  }
+
+  // Sort pages to prioritise those with word in title
+  pages.sort((a, b) => {
+    const aScore = (a.url.includes(searchTerm) || a.title.toLowerCase().includes(searchTerm)) ? 1 : 0;
+    const bScore = (b.url.includes(searchTerm) || b.title.toLowerCase().includes(searchTerm)) ? 1 : 0;
+    return bScore - aScore;
+  });
+
+  // Categorizes pages to display
+  const categorised = {
+    docs: {title: 'Documentation', filter: '/docs/', pages: []},
+    hacks: {title: 'Hacks', filter: '/hacks/', pages: []}, 
+    blog: {title: 'From the blog', filter: '/blog/', pages: []}, 
+    other: {title: 'Site Pages', filter: '', pages: []},
+  };
+  const categoryNames = Object.keys(categorised);
+
+  for (const page of pages) {
+    for (const categoryName of categoryNames) {
+      const category = categorised[categoryName];
+      if (page.url.includes(category.filter)) {
+        category.pages.push(page);
+        break;
+      }
+    }
+  }
+
+  const categoryResults = categoryNames.map(name => {
+    const category = categorised[name];
+    if (category.pages.length === 0) {
+      return null;
+    }
+    return el('div', {}, [
+      el('strong', {class: 'search-category-title'}, [category.title]),
+      el('div', {}, category.pages.slice(0, 5).map(page => {
+        return el('a', {href: page.url}, [page.title]);
+      })),
+    ]);
+  }).filter(Boolean);
+
+  const emptyResult = el('strong', {class: 'search-category-title'}, [el('em', {}, 'No results found')]);
+  const resultList = categoryResults.length ? categoryResults : [emptyResult];
+  const results = el('div', {}, resultList);
+
+  for (const child of searchDialog.children) {
+    child.remove();
+  }
+  
+  searchDialog.append(results);
+  showSearchDialog();
+}
+
+function showSearchDialog() {
+  if (searchDialog.open) {
+    return;
+  }
+  searchDialog.show();
+  searchInput.focus();
+  
+  const clickListener = e => {
+    if(!e.target.closest('dialog')) {
+      closeListener();
+    }
+  };
+
+  const escListener = e => {
+    if (e.key === 'Escape') {
+        closeListener();
+    }
+  };
+
+  const mouseLeaveListener = e => {
+    closeListener();
+  }
+
+  const closeListener = () => {
+    searchDialog.close();
+    document.removeEventListener('click', clickListener);
+    document.removeEventListener('keydown', escListener);
+    searchForm.removeEventListener('mouseleave', mouseLeaveListener);
+  };
+
+  document.addEventListener('click', clickListener);
+  document.addEventListener('keydown', escListener);
+  searchForm.addEventListener('mouseleave', mouseLeaveListener);
+}
+
+function showSearchLoading() {
+  searchDialog.innerHTML = `<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>`;
+  showSearchDialog();
+}
+
+searchForm.addEventListener('submit', event => {
+  event.preventDefault();
+  showSearchLoading();
+  runSearch();
+});
+
+searchInput.addEventListener('input', event => {
+  const termLength = searchInput.value.length;
+  if (termLength === 0) {
+    searchDialog.close();
+  } else if (termLength > 2) {
+    showSearchLoading();
+    runSearch();
+  }
+})
\ No newline at end of file