Merge branch 'GEOLYTIX:main' into main

cityremade · May 7, 2024 · 53d79f8 · 53d79f8
2 parents 62f4616 + 6573d19
commit 53d79f8
Show file tree

Hide file tree

Showing 4 changed files with 352 additions and 184 deletions.
diff --git a/lib/ui/elements/_elements.mjs b/lib/ui/elements/_elements.mjs
@@ -15,6 +15,7 @@ import dropdown_multi from './dropdown_multi.mjs';
 import btnPanel from './btnPanel.mjs';
 import legendIcon from './legendIcon.mjs';
 import modal from './modal.mjs';
+import searchbox from './searchbox.mjs';
 import slider from './slider.mjs';
 import slider_ab from './slider_ab.mjs';
 import { numericFormatter, getSeparators } from './numericFormatter.mjs';
@@ -32,6 +33,7 @@ import { numericFormatter, getSeparators } from './numericFormatter.mjs';
  * @property {Function} dropdown_multi - Multi-select dropdown component.
  * @property {Function} legendIcon - Legend icon component.
  * @property {Function} modal - Modal component.
+ * @property {Function} searchbox - Searchbox component.
  * @property {Function} slider - Slider component.
  * @property {Function} slider_ab - Slider with A/B comparison component.
  * @property {Function} numericFormatter - Numeric formatter function.
@@ -53,6 +55,7 @@ export default {
   dropdown_multi,
   legendIcon,
   modal,
+  searchbox,
   slider,
   slider_ab,
   numericFormatter,

diff --git a/lib/ui/elements/searchbox.mjs b/lib/ui/elements/searchbox.mjs
@@ -0,0 +1,80 @@
+/**
+ * ### mapp.ui.elements.searchbox()
+ * Module that returns a searchbox UI element used in mapp.
+ * @module /ui/elements/searchbox
+ */
+
+/**
+ * Creates a searchbox component.
+ * @function searchbox
+ * @param {Object} searchbox - The searchbox configuration object.
+ * @param {HTMLElement} searchbox.target - The target element to append the searchbox to.
+ * @param {string} [searchbox.name='searchbox-input'] - The name attribute for the search input.
+ * @param {string} searchbox.placeholder - The placeholder text for the search input.
+ * @param {Function} [searchbox.searchFunction] - The custom search function to be executed on input.
+ * @returns {Object} The searchbox object.
+ */
+export default (searchbox={}) => {
+
+  // Ensure the target is an HTMLElement before proceeding
+  if (!(searchbox.target instanceof HTMLElement)) {
+    searchbox.target = mapp.utils.html.node`<div>`
+  };
+
+  /**
+   * The search input element.
+   * @type {HTMLInputElement}
+   */
+  searchbox.input = mapp.utils.html.node`<input name="${searchbox.name || 'searchbox-input'}" type="search" placeholder=${searchbox.placeholder}>`
+
+  /**
+   * The search results list element.
+   * @type {HTMLUListElement}
+   */
+  searchbox.list = mapp.utils.html.node`<ul>`
+
+  /**
+   * The searchbox container element.
+   * @type {HTMLDivElement}
+   */
+  searchbox.node = mapp.utils.html.node`<div class="searchbox">
+      ${searchbox.input}
+      ${searchbox.list}
+    `
+
+  searchbox.target.append(searchbox.node)
+
+  searchbox.input.addEventListener('input', searchFunction);
+  searchbox.input.addEventListener('focus', searchFunction);
+
+  /**
+   * The search function triggered on input events.
+   * @param {Event} e - The input event object.
+   */
+  function searchFunction(e) {
+    if (!searchbox.searchFunction || typeof searchbox.searchFunction !== 'function') {
+      console.warn(`ui.element.searchbox ${searchbox.name || ''} - no searchFunction defined`);
+    }
+    if (searchbox.searchFunction && typeof searchbox.searchFunction === 'function') {
+      return searchbox.searchFunction(e);
+    }
+    searchbox.defaultSearch(e);
+  }
+
+  /**
+   * The default search function.
+   * @param {Event} e - The input event object.
+   */
+  searchbox.defaultSearch = (e) => {
+    // Clear any previous results
+    searchbox.list.innerHTML = '';
+
+    // Only search if value has length
+    if (!e.target.value.length) return;
+
+    // Return no result default message
+    searchbox.list.append(mapp.utils.html.node`<li><span>${mapp.dictionary.no_results}`);
+  };
+
+  return searchbox;
+};
diff --git a/public/css/_inputs.css b/public/css/_inputs.css
@@ -102,6 +102,48 @@ label.checkbox {
   }
 }
 
+.searchbox {
+  width: 100%;
+  overflow: visible;
+  position: relative;
+  background-color: white;
+  box-shadow: var(--color-mid) 0px 8px 24px;
+
+  &>ul {
+    display: none;
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-shadow: 1px 1px 3px var(--color-primary-light);
+    margin-top: -1px;
+    text-align: left;
+    background-color: white;
+    z-index: 999;
+
+    &>li {
+      padding: 5px;
+    }
+
+    &>li:hover {
+      background-color: var(--color-light);
+      cursor: pointer;
+    }
+
+    &>li.selected {
+      background-color: var(--color-light-secondary);
+    }
+
+    & .label {
+      padding: 0 6px;
+      border-radius: 2px;
+      color: var(--color-light);
+      font-size: 80%;
+      font-weight: bold;
+      background-color: var(--color-primary);
+    }
+  }
+}
+
 .dropdown {
   width: 100%;
   overflow: visible;
@@ -186,6 +228,10 @@ label.checkbox {
       display: none;
     }
   }
+
+  .searchbox {
+    box-shadow: none;
+  }
 }
 
 .input-range {