Update interface.js

interface.js

@@ -72,31 +72,52 @@ const currentScriptTag = document.currentScript;
   widgetContainer.style.paddingBottom = aspectPercent;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
-  // --- BEGIN CONTROL BUTTONS (in .viewer-controls for vertical stacking) ---
+  // TOOLTIP BUTTON HTML IF NEEDED
   const tooltipsButtonHTML = config.tooltips_url
-    ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle" title="Tooltips">⦿</button>`
+    ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle" title="Tooltips" aria-label="Afficher/Masquer les tooltips">⦿</button>`
     : '';
 
-  // --- COLOR BUTTONS (easy to add more here) ---
-  const colorButtonsConfig = [
-    { id: `color-btn-white-${instanceId}`, title: "Blanc", rgb: [1, 1, 1] },
-    { id: `color-btn-red-${instanceId}`,   title: "Rouge", rgb: [0.7, 0.05, 0.05] }
-    // Add more as desired
+  // COLOR BUTTON: will open the color panel
+  const colorButtonId = `color-btn-${instanceId}`;
+  const colorPanelId = `color-panel-${instanceId}`;
+
+  // Color choices: add more as needed
+  const colorChoices = [
+    { title: "Blanc", color: [1, 1, 1], swatch: "#fff" },
+    { title: "Rouge", color: [0.7, 0.05, 0.05], swatch: "#d00" }
+    // Add more: { title: "...", color: [r, g, b], swatch: "#hex" }
   ];
-  const colorButtonsHTML = colorButtonsConfig.map(btn =>
-    `<button id="${btn.id}" class="widget-button color-btn" title="${btn.title}" tabindex="0"></button>`
-  ).join('\n');
 
+  // Generate color swatch HTML
+  const colorPanelHTML = `
+    <div id="${colorPanelId}" class="color-panel" aria-label="Sélection de couleur" tabindex="-1" style="display:none;">
+      ${colorChoices.map((c, i) => `
+        <button 
+          class="color-swatch-btn"
+          style="background: ${c.swatch};"
+          data-r="${c.color[0]}" data-g="${c.color[1]}" data-b="${c.color[2]}"
+          aria-label="${c.title}"
+          title="${c.title}"
+          tabindex="0"
+        ></button>
+      `).join("")}
+    </div>
+  `;
+
+  // --- Controls as vertical stack, with color button to the left (first row is horizontal) ---
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
-      <div class="viewer-controls">
-        <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle" title="Plein écran">⇱</button>
-        <button id="help-toggle-${instanceId}" class="widget-button help-toggle" title="Aide">?</button>
-        <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn" title="Réinitialiser la caméra">
-          <span class="reset-icon">⟲</span>
-        </button>
-        ${tooltipsButtonHTML}
-        ${colorButtonsHTML}
+      <div class="controls-row">
+        <button id="${colorButtonId}" class="widget-button color-menu-btn" aria-label="Ouvrir le menu de couleurs" title="Couleur"></button>
+        <div class="vertical-controls">
+          <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle" title="Plein écran" aria-label="Plein écran">⇱</button>
+          <button id="help-toggle-${instanceId}" class="widget-button help-toggle" title="Aide" aria-label="Aide">?</button>
+          <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn" title="Réinitialiser la caméra" aria-label="Réinitialiser la caméra">
+            <span class="reset-icon">⟲</span>
+          </button>
+          ${tooltipsButtonHTML}
+        </div>
+        ${colorPanelHTML}
       </div>
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
         <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
@@ -117,6 +138,7 @@ const currentScriptTag = document.currentScript;
 
   scriptTag.parentNode.appendChild(widgetContainer);
 
+  // ---- Element references ----
   const viewerContainerElem = document.getElementById('viewer-container-' + instanceId);
   const fullscreenToggle    = document.getElementById('fullscreen-toggle-' + instanceId);
   const helpToggle          = document.getElementById('help-toggle-' + instanceId);
@@ -129,9 +151,9 @@ const currentScriptTag = document.currentScript;
   const tooltipTextDiv      = document.getElementById('tooltip-text');
   const tooltipImage        = document.getElementById('tooltip-image');
   const tooltipCloseBtn     = document.getElementById('tooltip-close');
-
-  // Color button elements
-  const colorButtonElems = colorButtonsConfig.map(btn => document.getElementById(btn.id));
+  const colorMenuBtn        = document.getElementById(colorButtonId);
+  const colorPanelElem      = document.getElementById(colorPanelId);
+  const colorSwatchBtns     = colorPanelElem.querySelectorAll('.color-swatch-btn');
 
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
@@ -400,16 +422,62 @@ const currentScriptTag = document.currentScript;
 
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
-  // ========== COLOR BUTTON LOGIC ==========
-  colorButtonElems.forEach((btnElem, idx) => {
-    btnElem.addEventListener('click', () => {
+  // --------- COLOR BUTTON LOGIC ----------
+  let colorPanelOpen = false;
+  function openColorPanel() {
+    colorPanelElem.style.display = 'flex';
+    colorMenuBtn.classList.add('active');
+    colorPanelElem.focus();
+    colorPanelOpen = true;
+  }
+  function closeColorPanel() {
+    colorPanelElem.style.display = 'none';
+    colorMenuBtn.classList.remove('active');
+    colorPanelOpen = false;
+  }
+  function toggleColorPanel() {
+    if (colorPanelOpen) {
+      closeColorPanel();
+    } else {
+      openColorPanel();
+    }
+  }
+  // Toggle color panel on color button click
+  colorMenuBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleColorPanel();
+  });
+
+  // Change color on swatch click and close panel
+  colorSwatchBtns.forEach((btn) => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
       if (viewerModule && viewerModule.changeColor) {
-        const [r, g, b] = colorButtonsConfig[idx].rgb;
+        const r = parseFloat(btn.getAttribute('data-r'));
+        const g = parseFloat(btn.getAttribute('data-g'));
+        const b = parseFloat(btn.getAttribute('data-b'));
         viewerModule.changeColor(r, g, b);
       }
+      closeColorPanel();
     });
   });
-  // ========================================
+
+  // Close color panel when clicking outside
+  document.addEventListener('mousedown', (e) => {
+    if (!colorPanelOpen) return;
+    if (!colorPanelElem.contains(e.target) && e.target !== colorMenuBtn) {
+      closeColorPanel();
+    }
+  });
+  // Accessibility: ESC closes panel
+  document.addEventListener('keydown', (e) => {
+    if (colorPanelOpen && (e.key === "Escape" || e.key === "Esc")) {
+      closeColorPanel();
+      colorMenuBtn.focus();
+    }
+    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) exitFullscreen();
+  });
+  // =======================================
 
   document.addEventListener('tooltip-selected', (evt) => {
     // Always show panel, cancel hide first
@@ -445,9 +513,6 @@ const currentScriptTag = document.currentScript;
   if (canvasEl) {
     canvasEl.addEventListener('wheel', hideTooltipPanel, { passive: true });
   }
-  document.addEventListener('keydown', (e) => {
-    if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) exitFullscreen();
-  });
   window.addEventListener('resize', () => {
     if (viewerModule.app) {
       if (isFullscreen) {