frayerjj-frontend 0.8.2 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/autocomplete.js +28 -29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frayerjj-frontend",
3
- "version": "0.8.2",
3
+ "version": "0.8.3",
4
4
  "description": "My base frontend for various projects",
5
5
  "main": "src/index.js",
6
6
  "type": "module",
package/src/autocomplete.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export const autocomplete = {
2
+ registry: new Map(),
2
3
  evalPattern: (pattern, item) => {
3
4
  let result = pattern.replace(/\$\{(\w+)\}/g, (match, key) => {
4
5
  return item[key] !== undefined && item[key] !== null ? item[key] : '';
@@ -6,62 +7,60 @@ export const autocomplete = {
6
7
  result = result.replace(/\(\s*\)/g, '').trim();
7
8
  return result.replace(/\s+/g, ' ');
8
9
  },
10
+ populate: (name, items, patternOverride) => {
11
+ const entry = autocomplete.registry.get(name);
12
+ if (!entry) return;
13
+ const { ul, el, display_pattern } = entry;
14
+ const pattern = patternOverride ?? display_pattern;
15
+ ul.innerHTML = '';
16
+ if (items.length > 0) {
17
+ items.forEach(it => {
18
+ const li = document.createElement('li');
19
+ const label = autocomplete.evalPattern(pattern, it);
20
+ li.textContent = label;
21
+ li.addEventListener('click', () => {
22
+ el.value = label;
23
+ ul.innerHTML = '';
24
+ ul.style.display = 'none';
25
+ const selectedEvent = new Event('autocomplete.selected', { bubbles: true });
26
+ selectedEvent.selection = it;
27
+ el.dispatchEvent(selectedEvent);
28
+ });
29
+ ul.appendChild(li);
30
+ });
31
+ ul.style.display = 'block';
32
+ } else ul.style.display = 'none';
33
+ },
9
34
  init: () => {
10
35
  document.querySelectorAll('input.autocomplete').forEach(el => {
11
36
  const uri = el.getAttribute('data-uri');
12
37
  const num_results = el.getAttribute('num-results') ?? 10;
13
38
  const expire_length = el.getAttribute('expire-length') ?? 250;
14
39
  const display_pattern = el.getAttribute('display-pattern') ?? '${name}';
15
-
40
+ const name = el.getAttribute('name');
16
41
  const ul = document.createElement('ul');
17
42
  ul.classList.add('autocomplete-dropdown');
18
43
  ul.style.display = 'none';
19
-
20
44
  el.parentElement.classList.add('position-relative')
21
45
  el.parentElement.append(ul);
22
-
46
+ if (name) autocomplete.registry.set(name, { el, ul, display_pattern });
23
47
  let timeout = null;
24
-
25
48
  el.addEventListener('input', () => {
26
49
  clearTimeout(timeout);
27
-
28
50
  if (el.value.length < 3) {
29
51
  ul.style.display = 'none';
30
52
  return;
31
53
  }
32
-
33
54
  timeout = setTimeout(async () => {
34
55
  try {
35
56
  const response = await fetch(`${uri}?q=${el.value}&num_results=${num_results}`);
36
57
  const data = await response.json();
37
-
38
- ul.innerHTML = '';
39
-
40
- if (data.length > 0) {
41
- data.forEach(it => {
42
- const li = document.createElement('li');
43
- const label = autocomplete.evalPattern(display_pattern, it);
44
- li.textContent = label;
45
-
46
- li.addEventListener('click', () => {
47
- el.value = label;
48
- ul.innerHTML = '';
49
- ul.style.display = 'none';
50
- const selectedEvent = new Event('autocomplete.selected', { bubbles: true });
51
- selectedEvent.selection = it;
52
- el.dispatchEvent(selectedEvent);
53
- });
54
-
55
- ul.appendChild(li);
56
- });
57
- ul.style.display = 'block';
58
- } else ul.style.display = 'none';
58
+ autocomplete.populate(name, data);
59
59
  } catch (err) {
60
60
  msg.error("Autocomplete fetch failed", err);
61
61
  }
62
62
  }, expire_length);
63
63
  });
64
-
65
64
  document.addEventListener('click', ev => {
66
65
  if (!el.contains(ev.target) && !ul.contains(ev.target)) ul.style.display = 'none';
67
66
  });