MikaFil commited on
Commit
87f9c91
·
verified ·
1 Parent(s): c861633

Update interface.js

Browse files
Files changed (1) hide show
  1. interface.js +7 -24
interface.js CHANGED
@@ -1,7 +1,6 @@
1
  // interface.js
2
  // ==============================
3
 
4
- // Store a reference to the <script> tag that loaded this file
5
  const currentScriptTag = document.currentScript;
6
 
7
  (async function() {
@@ -27,12 +26,11 @@ const currentScriptTag = document.currentScript;
27
  const response = await fetch(configUrl);
28
  config = await response.json();
29
  } catch (error) {
30
- // Silent fail, but log in dev environments
31
- // console.error("Error loading config file:", error);
32
  return;
33
  }
34
  } else {
35
- // console.error("No config file provided. Please set a data-config attribute on the <script> tag.");
36
  return;
37
  }
38
 
@@ -72,7 +70,7 @@ const currentScriptTag = document.currentScript;
72
  }
73
  }
74
 
75
- // 5. Create the widget container (no GIF preview, no close button)
76
  const widgetContainer = document.createElement('div');
77
  widgetContainer.id = 'ply-widget-container-' + instanceId;
78
  widgetContainer.classList.add('ply-widget-container');
@@ -85,7 +83,6 @@ const currentScriptTag = document.currentScript;
85
  ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
86
  : '';
87
 
88
- // Add the 3D-viewer HTML + tooltip + help HTML (all HTML in a template literal!)
89
  widgetContainer.innerHTML = `
90
  <div id="viewer-container-${instanceId}" class="viewer-container">
91
  <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -111,7 +108,6 @@ const currentScriptTag = document.currentScript;
111
  </div>
112
  `;
113
 
114
- // Append the widget container immediately after the <script> tag
115
  scriptTag.parentNode.appendChild(widgetContainer);
116
 
117
  // 6. Grab references to new DOM elements
@@ -123,23 +119,18 @@ const currentScriptTag = document.currentScript;
123
  const tooltipsToggleBtn = document.getElementById('tooltips-toggle-' + instanceId);
124
  const menuContent = document.getElementById('menu-content-' + instanceId);
125
  const helpTextDiv = menuContent.querySelector('.help-text');
 
 
 
 
126
 
127
- // Tooltip panel elements
128
- const tooltipPanel = document.getElementById('tooltip-panel');
129
- const tooltipTextDiv = document.getElementById('tooltip-text');
130
- const tooltipImage = document.getElementById('tooltip-image');
131
- const tooltipCloseBtn = document.getElementById('tooltip-close');
132
-
133
- // 6a. Detect mobile vs. desktop
134
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
135
  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
136
 
137
- // Conditionally include the French tooltip instruction line if tooltips_url exists
138
  const tooltipInstruction = config.tooltips_url
139
  ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
140
  : '';
141
 
142
- // Fill help text with instructions plus the two new French lines
143
  if (isMobile) {
144
  helpTextDiv.innerHTML =
145
  '- Pour vous déplacer, glissez deux doigts sur l\'écran.<br>' +
@@ -158,14 +149,11 @@ const currentScriptTag = document.currentScript;
158
  '- ⇱ Passe en plein écran.<br>';
159
  }
160
 
161
- // Ensure instructions panel is visible by default
162
  menuContent.style.display = 'block';
163
  viewerContainerElem.style.display = 'block';
164
 
165
- // Variable to hold the drag-hide listener reference
166
  let dragHide = null;
167
 
168
- // Utilities to hide panels
169
  function hideTooltipPanel() {
170
  if (dragHide) {
171
  viewerContainerElem.removeEventListener('pointermove', dragHide);
@@ -183,7 +171,6 @@ const currentScriptTag = document.currentScript;
183
  viewerModule = await import('https://mikafil-viewer-gs.static.hf.space/viewer.js');
184
  await viewerModule.initializeViewer(config, instanceId);
185
  } catch (err) {
186
- // Do not break UI, but don't continue
187
  return;
188
  }
189
 
@@ -258,7 +245,6 @@ const currentScriptTag = document.currentScript;
258
  );
259
  }
260
 
261
- // --- Fix: Ensure icon is always reset on exit
262
  if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
263
 
264
  savedState = null;
@@ -286,7 +272,6 @@ const currentScriptTag = document.currentScript;
286
  viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
287
  }
288
 
289
- // --- Fix: Always set fullscreen icon when entering
290
  if (fullscreenToggle) fullscreenToggle.textContent = '⇲';
291
  isFullscreen = true;
292
  }
@@ -316,11 +301,9 @@ const currentScriptTag = document.currentScript;
316
  widgetContainer.classList.remove('fake-fullscreen');
317
  restoreOriginalStyles();
318
  isFullscreen = false;
319
- // --- Fix: Also ensure icon is set on all code paths
320
  if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
321
  }
322
 
323
- // 10. Hook up event listeners
324
  fullscreenToggle.addEventListener('click', () => {
325
  hideTooltipPanel();
326
  isFullscreen ? exitFullscreen() : enterFullscreen();
 
1
  // interface.js
2
  // ==============================
3
 
 
4
  const currentScriptTag = document.currentScript;
5
 
6
  (async function() {
 
26
  const response = await fetch(configUrl);
27
  config = await response.json();
28
  } catch (error) {
29
+ // Silent fail
 
30
  return;
31
  }
32
  } else {
33
+ // Silent fail
34
  return;
35
  }
36
 
 
70
  }
71
  }
72
 
73
+ // 5. Create the widget container
74
  const widgetContainer = document.createElement('div');
75
  widgetContainer.id = 'ply-widget-container-' + instanceId;
76
  widgetContainer.classList.add('ply-widget-container');
 
83
  ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
84
  : '';
85
 
 
86
  widgetContainer.innerHTML = `
87
  <div id="viewer-container-${instanceId}" class="viewer-container">
88
  <div id="progress-dialog-${instanceId}" class="progress-dialog">
 
108
  </div>
109
  `;
110
 
 
111
  scriptTag.parentNode.appendChild(widgetContainer);
112
 
113
  // 6. Grab references to new DOM elements
 
119
  const tooltipsToggleBtn = document.getElementById('tooltips-toggle-' + instanceId);
120
  const menuContent = document.getElementById('menu-content-' + instanceId);
121
  const helpTextDiv = menuContent.querySelector('.help-text');
122
+ const tooltipPanel = document.getElementById('tooltip-panel');
123
+ const tooltipTextDiv = document.getElementById('tooltip-text');
124
+ const tooltipImage = document.getElementById('tooltip-image');
125
+ const tooltipCloseBtn = document.getElementById('tooltip-close');
126
 
 
 
 
 
 
 
 
127
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
128
  const isMobile = isIOS || /Android/i.test(navigator.userAgent);
129
 
 
130
  const tooltipInstruction = config.tooltips_url
131
  ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
132
  : '';
133
 
 
134
  if (isMobile) {
135
  helpTextDiv.innerHTML =
136
  '- Pour vous déplacer, glissez deux doigts sur l\'écran.<br>' +
 
149
  '- ⇱ Passe en plein écran.<br>';
150
  }
151
 
 
152
  menuContent.style.display = 'block';
153
  viewerContainerElem.style.display = 'block';
154
 
 
155
  let dragHide = null;
156
 
 
157
  function hideTooltipPanel() {
158
  if (dragHide) {
159
  viewerContainerElem.removeEventListener('pointermove', dragHide);
 
171
  viewerModule = await import('https://mikafil-viewer-gs.static.hf.space/viewer.js');
172
  await viewerModule.initializeViewer(config, instanceId);
173
  } catch (err) {
 
174
  return;
175
  }
176
 
 
245
  );
246
  }
247
 
 
248
  if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
249
 
250
  savedState = null;
 
272
  viewerModule.app.resizeCanvas(window.innerWidth, window.innerHeight);
273
  }
274
 
 
275
  if (fullscreenToggle) fullscreenToggle.textContent = '⇲';
276
  isFullscreen = true;
277
  }
 
301
  widgetContainer.classList.remove('fake-fullscreen');
302
  restoreOriginalStyles();
303
  isFullscreen = false;
 
304
  if (fullscreenToggle) fullscreenToggle.textContent = '⇱';
305
  }
306
 
 
307
  fullscreenToggle.addEventListener('click', () => {
308
  hideTooltipPanel();
309
  isFullscreen ? exitFullscreen() : enterFullscreen();