Final post release time

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

diff --git a/themes/bookstack/static/js/script.js b/themes/bookstack/static/js/script.js
index da9a8d78fd2e2954b5b80be36255493ce76f21a6..6b7e5a7a15e812011e02547221a50ef9d66c02f0 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) {
 });
 
 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();  
+  }

 });
 
 
 });
 
 


@@ -26,36 +29,191 @@ function videoClick() {
     this.paused ? this.play() : this.pause();
 }
 
     this.paused ? this.play() : this.pause();
 }
 

+// Header double click URL reference
+document.body.addEventListener('dblclick', event => {
+  const isHeader = event.target.matches('h1, h2, h3, h4, h5, h6');
+  if (isHeader && event.target.id) {
+    window.location.hash = event.target.id;
+  }
+});
+
+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');

 
 

-// Codemirror Setup
-
-const modeMap = {
-  'language-html': 'htmlmixed',
-  'language-bash': 'shell',
-  'language-js': 'javascript',
-  'language-shell': 'bash',
-  'language-nginx': 'nginx',
-  'language-apache': 'apache',
-  'language-php': 'php',
-  'language-sql': 'text/x-mysql',
-};
-
-const codeBlocks = document.querySelectorAll('pre');
-for (let i = 0; i < codeBlocks.length; i++) {
-  const block = codeBlocks[i];
-  const codeElem = block.querySelector('code');
-  if (codeElem === null) continue;
-
-  const langClass = codeElem.className;
-  const mode = (typeof modeMap[langClass] !== 'undefined') ? modeMap[langClass] : 'htmlmixed';
-  const content = codeElem.textContent.trim();
-  CodeMirror(function(cmElem) {
-    block.parentNode.replaceChild(cmElem, block);
-  }, {
-    theme: 'base16-light',
-    lineNumbers: true,
-    mode: mode,
-    readOnly: true,
-    value: content
+async function runSearch() {
+  const searchTerm = searchInput.value;
+
+  let pages = [];
+  try {
+    const resp = await fetch(`/search.php?query=${encodeURIComponent(searchTerm)}`);
+    pages = await resp.json();
+  } 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
+  const lowerSearchTerm = searchTerm.toLowerCase();
+  pages.sort((a, b) => {
+    const aScore = (a.url.includes(lowerSearchTerm) || a.title.toLowerCase().includes(lowerSearchTerm)) ? 1 : 0;
+    const bScore = (b.url.includes(lowerSearchTerm) || b.title.toLowerCase().includes(lowerSearchTerm)) ? 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) {
+    let pageCategory = null;
+    for (const categoryName of categoryNames) {
+      const category = categorised[categoryName];
+      if (page.url.startsWith(category.filter)) {
+        pageCategory = category;
+        break;
+      }
+    }
+    (pageCategory || categorised.other).pages.push(page);
+  }
+
+  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);
+
+  while (searchDialog.firstChild) {
+    searchDialog.removeChild(searchDialog.firstChild);
+  }
+  
+  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 arrowListener = e => {
+    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+      return;
+    }
+    e.preventDefault();
+
+    const links = Array.from(searchDialog.querySelectorAll('a'));
+    const focusables = [searchInput, ...links];
+    if (focusables.length < 2) { // Only search input
+      return;
+    }
+
+    const active = document.activeElement;
+    let currentIndex = focusables.indexOf(active);
+
+    if (e.key === 'ArrowDown') {
+      currentIndex = (currentIndex + 1) % focusables.length;
+    } else { // ArrowUp
+      currentIndex = (currentIndex - 1 + focusables.length) % focusables.length;
+    }
+
+    focusables[currentIndex].focus();
+  };
+
+  const mouseLeaveListener = e => {
+    closeListener();
+  };
+
+  const closeListener = () => {
+    searchDialog.close();
+    document.removeEventListener('click', clickListener);
+    document.removeEventListener('keydown', escListener);
+    searchForm.removeEventListener('mouseleave', mouseLeaveListener);
+    searchForm.removeEventListener('keydown', arrowListener);
+  };
+
+  document.addEventListener('click', clickListener);
+  document.addEventListener('keydown', escListener);
+  searchForm.addEventListener('mouseleave', mouseLeaveListener);
+  searchForm.addEventListener('keydown', arrowListener);
+}
+
+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();
+  }
+});
+
+
+// Email display
+const emailDisplayLinks = document.querySelectorAll('a.email-display');
+const eb64 = 'ZW1haWxAYm9v' + 'a3N0YWNrYXBwLmNvbQ==';
+for (const link of emailDisplayLinks) {
+  const email = atob(eb64);
+  link.addEventListener('click', e => {
+    e.preventDefault();
+    e.target.textContent = email;
+    e.target.href = 'mailto:' + email;
+  });
+}
\ No newline at end of file