nodebb-plugin-onekite-calendar 2.0.4 → 2.0.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog – calendar-onekite
 
+## 1.2.13
+- ACP (mode sombre) : correction de la visibilité de la liste d’autocomplete d’adresse (couleurs via variables Bootstrap)
+
+## 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-onekite-calendar",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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.4"
+  "version": "2.0.6"
 }

package/public/admin.js

@@ -2,6 +2,36 @@
 define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts, bootbox) {
   'use strict';
 
+  // ACP dark mode compatibility: style the address autocomplete dropdown using
+  // Bootstrap CSS variables (so it remains readable in dark themes).
+  (function ensureOnekiteAdminStyles() {
+    try {
+      if (document.getElementById('onekite-acp-inline-styles')) return;
+      const style = document.createElement('style');
+      style.id = 'onekite-acp-inline-styles';
+      style.textContent = `
+        .onekite-autocomplete-menu {
+          background: var(--bs-body-bg, #fff);
+          color: var(--bs-body-color, #212529);
+          border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
+          box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+        }
+        .onekite-autocomplete-item {
+          color: inherit;
+          background: transparent;
+        }
+        .onekite-autocomplete-item:hover,
+        .onekite-autocomplete-item:focus {
+          background: var(--bs-tertiary-bg, rgba(0,0,0,.05));
+          outline: none;
+        }
+      `;
+      document.head.appendChild(style);
+    } catch (e) {
+      // ignore
+    }
+  })();
+
   // Cache of pending reservations keyed by rid so delegated click handlers
   // can open rich modals without embedding large JSON blobs into the DOM.
   const pendingCache = new Map();
@@ -220,11 +250,18 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
     if (inputEl.getAttribute('data-onekite-autocomplete') === '1') return;
     inputEl.setAttribute('data-onekite-autocomplete', '1');
 
-    const anchor = inputEl.closest('.input-group') || inputEl.parentNode;
-    if (!anchor) return;
+    // 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);
 
-    // Ensure positioning context
-    if (getComputedStyle(anchor).position === 'static') {
+    try {
+      const cs = window.getComputedStyle(anchor);
+      if (!cs || cs.position === 'static') {
+        anchor.style.position = 'relative';
+      }
+    } catch (e) {
       anchor.style.position = 'relative';
     }
 
@@ -235,14 +272,12 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
     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)';
+    // Colors are handled via CSS variables (supports ACP dark mode).
     menu.style.borderTop = '0';
     menu.style.maxHeight = '220px';
     menu.style.overflowY = 'auto';
     menu.style.display = 'none';
     menu.style.borderRadius = '0 0 .375rem .375rem';
-    menu.style.boxShadow = '0 .25rem .75rem rgba(0,0,0,.08)';
     anchor.appendChild(menu);
 
     let timer = null;
@@ -270,15 +305,12 @@ define('admin/plugins/calendar-onekite', ['alerts', 'bootbox'], function (alerts
         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';

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) {}
   });