frayerjj-frontend 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -23,7 +23,6 @@
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "ckeditor5": "^47.6.1",
-    "corejs-typeahead": "^1.3.4",
     "cropperjs": "^2.1.0",
     "flag-icons": "^7.5.0",
     "libphonenumber-js": "^1.12.39",

package/src/autocomplete.js

@@ -0,0 +1,70 @@
+export const autocomplete = {
+    evalPattern: (pattern, item) => {
+        let result = pattern.replace(/\$\{(\w+)\}/g, (match, key) => {
+            return item[key] !== undefined && item[key] !== null ? item[key] : '';
+        });
+        result = result.replace(/\(\s*\)/g, '').trim();
+        return result.replace(/\s+/g, ' ');
+    },
+    init: () => {
+        document.querySelectorAll('input.autocomplete').forEach(el => {
+            const uri = el.getAttribute('data-uri');
+            const num_results = el.getAttribute('num-results') ?? 10;
+            const expire_length = el.getAttribute('expire-length') ?? 250;
+            const display_pattern = el.getAttribute('display-pattern') ?? '${name}';
+
+            const ul = document.createElement('ul');
+            ul.classList.add('autocomplete-dropdown');
+            ul.style.display = 'none';
+
+            el.parentElement.classList.add('position-relative')
+            el.parentElement.append(ul);
+
+            let timeout = null;
+
+            el.addEventListener('input', () => {
+                clearTimeout(timeout);
+
+                if (el.value.length < 3) {
+                    ul.style.display = 'none';
+                    return;
+                }
+
+                timeout = setTimeout(async () => {
+                    try {
+                        const response = await fetch(`${uri}?q=${el.value}&num_results=${num_results}`);
+                        const data = await response.json();
+                    
+                        ul.innerHTML = '';
+
+                        if (data.length > 0) {
+                            data.forEach(it => {
+                                const li = document.createElement('li');
+                                const label = autocomplete.evalPattern(display_pattern, it);
+                                li.textContent = label;
+                        
+                                li.addEventListener('click', () => {
+                                    el.value = label;
+                                    ul.innerHTML = '';
+                                    ul.style.display = 'none';
+                                    const selectedEvent = new Event('autocomplete.selected', { bubbles: true });
+                                    selectedEvent.selection = it;
+                                    el.dispatchEvent(selectedEvent);
+                                });
+
+                                ul.appendChild(li);
+                            });
+                            ul.style.display = 'block';
+                        } else ul.style.display = 'none';
+                    } catch (err) {
+                        msg.error("Autocomplete fetch failed", err);
+                    }
+                }, expire_length);
+            });
+
+            document.addEventListener('click', ev => {
+                if (!el.contains(ev.target) && !ul.contains(ev.target)) ul.style.display = 'none';
+            });
+        });
+    }
+};

package/src/scss/_autocomplete.scss

@@ -0,0 +1,24 @@
+.autocomplete-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ccc;
+    border-top: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    li {
+        padding: 10px;
+        cursor: pointer;
+        border-bottom: 1px solid #eee;
+        &:hover {
+            background-color: #f0f7ff;
+        }
+    }
+}

package/src/scss/_forms.scss

@@ -37,78 +37,6 @@ span.required {
     border-color: #dc3545;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
-.tt-query, .tt-hint {
-  padding: 8px 12px;
-  font-size: 17px;
-  line-height: 30px;
-  border: 2px solid $color-light-gray;
-  border-radius: 8px;
-  outline: none;
-}
-.tt-query {
-  box-shadow: inset 0 1px 1px $color-light-gray;
-}
-.tt-hint {
-  color: $color-white
-}
-.tt-dropdown-menu {
-  width: 422px;
-  margin-top: 12px;
-  padding: 8px 0;
-  background-color: $color-white;
-  border: 1px solid $color-light-gray;
-  border-radius: 8px;
-  box-shadow: 0 5px 10px $color-light-gray;
-}
-.tt-suggestion {
-  padding: 3px 20px;
-  font-size: 18px;
-  line-height: 24px;
-}
-.tt-suggestion.tt-is-under-cursor {
-  color: $color-white;
-  background-color: #0097cf;
-}
-.twitter-typeahead {
-  display: block !important;
-}
-.tt-menu {
-  background-color: $color-white;
-  border: 1px solid $color-light-gray;
-  border-radius: 4px;
-  box-shadow: 0 6px 12px $color-light-gray;
-  cursor: default;
-  padding: .5em 0;
-  top: 3.25em !important;
-  &::before, &::after {
-    border-bottom: 7px solid $color-light-gray;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-top: 0;
-    box-sizing: border-box;
-    content: '';
-    display: inline-block;
-    left: 6px;
-    position: absolute;
-    top: -7px;
-  }
-  &::after {
-    border-bottom: 6px solid $color-white;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 0;
-    box-sizing: border-box;
-    content: '';
-    display: inline-block;
-    left: 7px;
-    position: absolute;
-    top: -6px;
-  }
-  .tt-selectable:hover {
-    background-color: $color-light-gray-background;
-    cursor: pointer;
-  }
-}
 .token {
   display: inline-block;
   background-color: $color-light-gray-background;

package/src/scss/styles.scss

@@ -13,3 +13,4 @@
 @import 'loading';
 @import 'forms';
 @import 'wizard';
+@import 'autocomplete';