nodebb-plugin-onekite-calendar 2.0.3 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog – calendar-onekite
 
+## 1.2.12
+- Modales (calendrier + ACP) : autocomplete adresse rendu identique et compatible Bootstrap input-group (plus de wrapper qui casse l’affichage)
+
+## 1.2.11
+- ACP : ajout de la recherche automatique d’adresse (autocomplete Nominatim) dans la modale de validation (unitaire + batch), comme sur le calendrier
+
 ## 1.2.10
 - HelloAsso : calcul des jours 100% fiable (différence en jours calendaires Y/M/J, sans dépendance aux heures/au fuseau/DST)
 - FullCalendar : endDate traitée comme exclusive partout (UI + checkout)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-onekite-calendar",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "FullCalendar-based equipment reservation workflow with admin approval & HelloAsso payment for NodeBB",
   "main": "library.js",
   "license": "MIT",

package/plugin.json

@@ -39,5 +39,5 @@
   "acpScripts": [
     "public/admin.js"
   ],
-  "version": "2.0.3"
+  "version": "2.0.5"
 }

package/public/admin.js

@@ -187,6 +187,154 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
     return { lat, lon, displayName: hit.display_name || q };
   }
 
+  // Lightweight address autocomplete (OpenStreetMap Nominatim)
+  // Designed to work inside Bootstrap "input-group" without moving DOM nodes.
+  async function searchAddresses(query, limit) {
+    const q = String(query || '').trim();
+    const lim = Math.min(10, Math.max(1, Number(limit) || 6));
+    if (q.length < 3) return [];
+    const url = `https://nominatim.openstreetmap.org/search?format=jsonv2&addressdetails=1&limit=${lim}&q=${encodeURIComponent(q)}`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Accept-Language': 'fr',
+      },
+    });
+    if (!res.ok) return [];
+    const arr = await res.json();
+    if (!Array.isArray(arr)) return [];
+    return arr.map((hit) => {
+      const lat = Number(hit.lat);
+      const lon = Number(hit.lon);
+      return {
+        displayName: hit.display_name || q,
+        lat: Number.isFinite(lat) ? lat : null,
+        lon: Number.isFinite(lon) ? lon : null,
+      };
+    }).filter(h => h && h.displayName);
+  }
+
+  function attachAddressAutocomplete(inputEl, onPick) {
+    if (!inputEl) return;
+    if (inputEl.getAttribute('data-onekite-autocomplete') === '1') return;
+    inputEl.setAttribute('data-onekite-autocomplete', '1');
+
+    // In Bootstrap input-groups (especially in ACP), wrapping the input breaks layout.
+    // So we anchor the menu to the closest input-group (or parent) without moving the input.
+    const anchor = inputEl.closest && inputEl.closest('.input-group')
+      ? inputEl.closest('.input-group')
+      : (inputEl.parentNode || document.body);
+
+    try {
+      const cs = window.getComputedStyle(anchor);
+      if (!cs || cs.position === 'static') {
+        anchor.style.position = 'relative';
+      }
+    } catch (e) {
+      anchor.style.position = 'relative';
+    }
+
+    const menu = document.createElement('div');
+    menu.className = 'onekite-autocomplete-menu';
+    menu.style.position = 'absolute';
+    menu.style.left = '0';
+    menu.style.right = '0';
+    menu.style.top = '100%';
+    menu.style.zIndex = '2000';
+    menu.style.background = '#fff';
+    menu.style.border = '1px solid rgba(0,0,0,.15)';
+    menu.style.borderTop = '0';
+    menu.style.maxHeight = '220px';
+    menu.style.overflowY = 'auto';
+    menu.style.display = 'none';
+    menu.style.borderRadius = '0 0 .375rem .375rem';
+    anchor.appendChild(menu);
+
+    let timer = null;
+    let lastQuery = '';
+    let busy = false;
+
+    function hide() {
+      menu.style.display = 'none';
+      menu.innerHTML = '';
+    }
+
+    function show(hits) {
+      if (!hits || !hits.length) {
+        hide();
+        return;
+      }
+      menu.innerHTML = '';
+      hits.forEach((h) => {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'onekite-autocomplete-item';
+        btn.textContent = h.displayName;
+        btn.style.display = 'block';
+        btn.style.width = '100%';
+        btn.style.textAlign = 'left';
+        btn.style.padding = '.35rem .5rem';
+        btn.style.border = '0';
+        btn.style.background = 'transparent';
+        btn.style.cursor = 'pointer';
+        btn.addEventListener('click', () => {
+          inputEl.value = h.displayName;
+          hide();
+          try { onPick && onPick(h); } catch (e) {}
+        });
+        btn.addEventListener('mouseenter', () => { btn.style.background = 'rgba(0,0,0,.05)'; });
+        btn.addEventListener('mouseleave', () => { btn.style.background = 'transparent'; });
+        menu.appendChild(btn);
+      });
+      menu.style.display = 'block';
+    }
+
+    async function run(q) {
+      if (busy) return;
+      busy = true;
+      try {
+        const hits = await searchAddresses(q, 6);
+        if (String(inputEl.value || '').trim() !== q) return; // ignore stale
+        show(hits);
+      } catch (e) {
+        hide();
+      } finally {
+        busy = false;
+      }
+    }
+
+    inputEl.addEventListener('input', () => {
+      const q = String(inputEl.value || '').trim();
+      lastQuery = q;
+      if (timer) clearTimeout(timer);
+      if (q.length < 3) {
+        hide();
+        return;
+      }
+      timer = setTimeout(() => run(lastQuery), 250);
+    });
+
+    inputEl.addEventListener('focus', () => {
+      const q = String(inputEl.value || '').trim();
+      if (q.length >= 3) {
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => run(q), 150);
+      }
+    });
+
+    inputEl.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') hide();
+    });
+
+    // Close when clicking outside (once per menu)
+    document.addEventListener('click', (e) => {
+      try {
+        if (!anchor.contains(e.target)) hide();
+      } catch (err) {}
+    });
+  }
+
   function formToObject(form) {
     const out = {};
     new FormData(form).forEach((v, k) => {
@@ -698,6 +846,19 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
                     } catch (e) {}
                   });
                 }
+
+                // Autocomplete like on the calendar validation modal
+                const addrInput = document.getElementById('onekite-pickup-address');
+                attachAddressAutocomplete(addrInput, (h) => {
+                  try {
+                    if (!h || !Number.isFinite(Number(h.lat)) || !Number.isFinite(Number(h.lon))) return;
+                    const lat = Number(h.lat);
+                    const lon = Number(h.lon);
+                    marker.setLatLng([lat, lon]);
+                    map.setView([lat, lon], 16);
+                    setLatLon(lat, lon);
+                  } catch (e) {}
+                });
                 setTimeout(() => { try { map.invalidateSize(); } catch (e) {} }, 250);
               } catch (e) {}
             });
@@ -887,6 +1048,14 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
                     }
                   });
                 }
+
+                // Autocomplete like on the calendar validation modal
+                attachAddressAutocomplete(addrInput, (h) => {
+                  try {
+                    if (!h || !Number.isFinite(Number(h.lat)) || !Number.isFinite(Number(h.lon))) return;
+                    setMarker(Number(h.lat), Number(h.lon), 16);
+                  } catch (e) {}
+                });
               } catch (e) {
                 // ignore
               }

package/public/client.js

@@ -638,10 +638,20 @@ function attachAddressAutocomplete(inputEl, onPick) {
   if (inputEl.getAttribute('data-onekite-autocomplete') === '1') return;
   inputEl.setAttribute('data-onekite-autocomplete', '1');
 
-  const wrapper = document.createElement('div');
-  wrapper.style.position = 'relative';
-  inputEl.parentNode && inputEl.parentNode.insertBefore(wrapper, inputEl);
-  wrapper.appendChild(inputEl);
+  // In Bootstrap input-groups (especially in ACP), wrapping the input breaks layout.
+  // So we anchor the menu to the closest input-group (or parent) without moving the input.
+  const host = inputEl.closest && inputEl.closest('.input-group')
+    ? inputEl.closest('.input-group')
+    : (inputEl.parentNode || document.body);
+
+  try {
+    const cs = window.getComputedStyle(host);
+    if (!cs || cs.position === 'static') {
+      host.style.position = 'relative';
+    }
+  } catch (e) {
+    host.style.position = 'relative';
+  }
 
   const menu = document.createElement('div');
   menu.className = 'onekite-autocomplete-menu';
@@ -657,7 +667,7 @@ function attachAddressAutocomplete(inputEl, onPick) {
   menu.style.overflowY = 'auto';
   menu.style.display = 'none';
   menu.style.borderRadius = '0 0 .375rem .375rem';
-  wrapper.appendChild(menu);
+  host.appendChild(menu);
 
   let timer = null;
   let lastQuery = '';
@@ -735,7 +745,7 @@ function attachAddressAutocomplete(inputEl, onPick) {
   // Close when clicking outside
   document.addEventListener('click', (e) => {
     try {
-      if (!wrapper.contains(e.target)) hide();
+      if (!host.contains(e.target)) hide();
     } catch (err) {}
   });