Update interface.js

interface.js

@@ -5,7 +5,7 @@
 const currentScriptTag = document.currentScript;
 
 (async function() {
-  // ─── 1. Locate <script> and load config ─────────────────────────────────────
+  // ─── 1. Locate the <script> and load data-config ───────────────────────────────
   let scriptTag = currentScriptTag;
   if (!scriptTag) {
     const scripts = document.getElementsByTagName('script');
@@ -20,38 +20,45 @@ const currentScriptTag = document.currentScript;
 
   const configUrl = scriptTag.getAttribute('data-config');
   if (!configUrl) {
-    console.error("No data-config on <script>");
+    console.error("No config file provided. Please set a data-config attribute on the <script> tag.");
     return;
   }
   let config = {};
   try {
     const resp = await fetch(configUrl);
     config = await resp.json();
-  } catch (e) {
-    console.error("Failed loading config:", e);
+  } catch (error) {
+    console.error("Error loading config file:", error);
     return;
   }
 
-  // ─── 2. Inject CSS if provided ───────────────────────────────────────────────
+  // ─── 2. Optionally inject CSS ────────────────────────────────────────────────
   if (config.css_url) {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = config.css_url;
-    document.head.appendChild(link);
+    const linkEl = document.createElement('link');
+    linkEl.rel  = "stylesheet";
+    linkEl.href = config.css_url;
+    document.head.appendChild(linkEl);
   }
 
-  // ─── 3. Make widget container ────────────────────────────────────────────────
+  // ─── 3. Generate a unique instanceId ─────────────────────────────────────────
   const instanceId = Math.random().toString(36).substr(2, 8);
+
+  // ─── 4. Create the widget container ──────────────────────────────────────────
   const widgetContainer = document.createElement('div');
-  widgetContainer.id = `ply-widget-container-${instanceId}`;
+  widgetContainer.id = 'ply-widget-container-' + instanceId;
   widgetContainer.classList.add('ply-widget-container');
-  document.body.appendChild(widgetContainer);  // append early so buttons exist
+  document.body.appendChild(widgetContainer);
 
-  // ─── 4. Build inner HTML (buttons + panels) ────────────────────────────────
+  // ─── 5. Build inner HTML, including the progress dialog ─────────────────────
   widgetContainer.innerHTML = `
-    <div id="viewer-container-${instanceId}" class="viewer-container"></div>
+    <div id="viewer-container-${instanceId}" class="viewer-container">
+      <!-- Progress dialog must exist for viewer.js -->
+      <div id="progress-dialog-${instanceId}" class="progress-dialog">
+        <progress id="progress-indicator-${instanceId}" max="100" value="0"></progress>
+      </div>
+    </div>
 
-    <!-- Controls -->
+    <!-- Control buttons -->
     <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle">⇱</button>
     <button id="help-toggle-${instanceId}"      class="widget-button help-toggle">?</button>
     <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn">⟲</button>
@@ -80,63 +87,21 @@ const currentScriptTag = document.currentScript;
     <div id="tooltip-panel" class="tooltip-panel" style="display: none;">
       <span id="tooltip-close" class="tooltip-close">×</span>
       <div id="tooltip-text" class="tooltip-text"></div>
-      <img id="tooltip-image" class="tooltip-image" style="display:none" />
+      <img id="tooltip-image" class="tooltip-image" style="display: none;" />
     </div>
   `;
 
-  // ─── 5. Grab references **after** DOM insertion ──────────────────────────────
-  const fullscreenToggle  = document.getElementById(`fullscreen-toggle-${instanceId}`);
-  const helpToggle        = document.getElementById(`help-toggle-${instanceId}`);
-  const resetCameraBtn    = document.getElementById(`reset-camera-btn-${instanceId}`);
-  const tooltipsToggleBtn = document.getElementById(`tooltips-toggle-${instanceId}`);
-  const helpCloseBtn      = document.getElementById(`help-close-${instanceId}`);
-  const menuContent       = document.getElementById(`menu-content-${instanceId}`);
-  const tooltipCloseBtn   = document.getElementById('tooltip-close');
-
-  // ─── 6. Bind click handlers with debug logs ────────��───────────────────────
-  fullscreenToggle.addEventListener('click', () => {
-    console.log('[UI-Debug] fullscreen clicked');
-    // existing fullscreen toggle logic…
-  });
-
-  helpToggle.addEventListener('click', (e) => {
-    console.log('[UI-Debug] help clicked');
-    e.stopPropagation();
-    menuContent.style.display = menuContent.style.display === 'block' ? 'none' : 'block';
-  });
-
-  helpCloseBtn.addEventListener('click', () => {
-    console.log('[UI-Debug] help-close clicked');
-    menuContent.style.display = 'none';
-  });
-
-  resetCameraBtn.addEventListener('click', () => {
-    console.log('[UI-Debug] reset-camera clicked');
-    // existing reset-camera logic…
-  });
-
-  if (tooltipsToggleBtn) {
-    tooltipsToggleBtn.addEventListener('click', () => {
-      console.log('[UI-Debug] tooltips-toggle clicked');
-      // existing toggle-tooltips logic…
-    });
-  }
-
-  tooltipCloseBtn.addEventListener('click', () => {
-    console.log('[UI-Debug] tooltip-close clicked');
-    // existing hide-tooltip logic…
-  });
+  // ─── 6. Grab elements and hook up any UI listeners ──────────────────────────
+  // (your existing click/toggle/drag-hide logic remains here…)
 
-  // ─── 7. Now load the viewer ────────────────────────────────────────────────
+  // ─── 7. Now dynamic-import viewer.js ────────────────────────────────────────
   try {
-    console.log('[UI-Debug] About to import viewer.js');
     const viewerModule = await import('./viewer.js');
     await viewerModule.initializeViewer(config, instanceId);
   } catch (err) {
-    console.error("Failed to load viewer.js or initialize:", err);
+    console.error("Failed to load viewer.js or initialize the 3D viewer:", err);
   }
 
-  // ─── 8. Any additional listeners (wheel, pointermove, etc.) ─────────────────
-  // …rest of your existing interface.js code…
+  // ─── 8. (rest of your interface.js code…) ───────────────────────────────────
 
 })();