Hugging Face's logo

Spaces:
MikaFil
/
viewer_sgos
Running

App Files Community
MikaFil commited on
Commit
408e343
Β·
verified Β·
1 Parent(s): 758df19

Update fullscreen_playcanvas.js

Browse files
Files changed (1) hide show
  1. fullscreen_playcanvas.js +48 -23
fullscreen_playcanvas.js CHANGED
@@ -135,8 +135,12 @@
135
  // ─── 7. Γ‰tat fullscreen ──────────────────────────────────────────────────────
136
  let isFullscreen = false;
137
  let savedPadding = aspectPadding;
 
 
138
 
139
- // ─── 8. Appliquer les styles plein Γ©cran ─────────────────────────────────────
 
 
140
  function applyFullscreenStyles() {
141
  wrapper.style.position = 'fixed';
142
  wrapper.style.top = '0';
@@ -153,7 +157,18 @@
153
  isFullscreen = true;
154
  }
155
 
156
- // ─── 9. Restaurer les styles normaux ─────────────────────────────────────────
 
 
 
 
 
 
 
 
 
 
 
157
  function restoreStyles() {
158
  wrapper.style.position = '';
159
  wrapper.style.top = '';
@@ -168,22 +183,28 @@
168
  wrapper.classList.remove('fake-fullscreen');
169
  fsBtn.textContent = '⇱';
170
  isFullscreen = false;
 
 
 
 
 
 
 
171
  }
172
 
173
- // ─── 10. EntrΓ©e en plein Γ©cran ───────────────────────────────────────────────
174
  function enterFullscreen() {
175
  savedPadding =
176
  wrapper.getAttribute('data-original-padding') || aspectPadding;
177
 
178
  if (isIOS) {
179
- // iOS ne supporte pas l'API Fullscreen β†’ fake-fullscreen CSS uniquement
180
- applyFullscreenStyles();
181
- // Bloquer le scroll de la page hΓ΄te pendant le fake-fullscreen
182
  document.body.style.overflow = 'hidden';
183
  return;
184
  }
185
 
186
- // Tentative via l'API Fullscreen standard
187
  const el = wrapper;
188
  const req =
189
  el.requestFullscreen ||
@@ -192,20 +213,20 @@
192
  el.msRequestFullscreen;
193
 
194
  if (req) {
195
- req.call(el)
196
- .then(applyFullscreenStyles)
197
- .catch(() => {
198
- // Fallback fake-fullscreen si l'API Γ©choue (iframe cross-origin, etc.)
199
- applyFullscreenStyles();
200
- document.body.style.overflow = 'hidden';
201
- });
202
  } else {
203
- applyFullscreenStyles();
204
  document.body.style.overflow = 'hidden';
205
  }
206
  }
207
 
208
- // ─── 11. Sortie du plein Γ©cran ───────────────────────────────────────────────
209
  function exitFullscreen() {
210
  if (
211
  document.fullscreenElement === wrapper ||
@@ -219,7 +240,7 @@
219
  document.body.style.overflow = '';
220
  }
221
 
222
- // ─── 12. Bouton fullscreen ───────────────────────────────────────────────────
223
  fsBtn.addEventListener('click', function (e) {
224
  e.stopPropagation();
225
  isFullscreen ? exitFullscreen() : enterFullscreen();
@@ -232,17 +253,20 @@
232
  isFullscreen ? exitFullscreen() : enterFullscreen();
233
  });
234
 
235
- // ─── 13. Γ‰couter les changements natifs fullscreen ───────────────────────────
236
- // (ex : utilisateur appuie sur Γ‰chap)
 
 
237
  function onFullscreenChange() {
238
  const fsEl =
239
  document.fullscreenElement || document.webkitFullscreenElement;
240
 
241
  if (!fsEl && isFullscreen) {
242
- // Le navigateur a quittΓ© le plein Γ©cran tout seul
243
  restoreStyles();
244
  document.body.style.overflow = '';
245
  } else if (fsEl === wrapper && !isFullscreen) {
 
246
  applyFullscreenStyles();
247
  }
248
  }
@@ -250,14 +274,14 @@
250
  document.addEventListener('fullscreenchange', onFullscreenChange);
251
  document.addEventListener('webkitfullscreenchange', onFullscreenChange);
252
 
253
- // ─── 14. Touche Γ‰chap (fake-fullscreen) ──────────────────────────────────────
254
  document.addEventListener('keydown', function (e) {
255
  if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) {
256
  exitFullscreen();
257
  }
258
  });
259
 
260
- // ─── 15. Resize : recalcul si fake-fullscreen ────────────────────────────────
261
  window.addEventListener('resize', function () {
262
  if (isFullscreen) {
263
  wrapper.style.width = '100vw';
@@ -267,10 +291,11 @@
267
 
268
  window.addEventListener('orientationchange', function () {
269
  if (isFullscreen) {
 
270
  setTimeout(function () {
271
  wrapper.style.width = '100vw';
272
  wrapper.style.height = '100vh';
273
- }, 200); // dΓ©lai pour laisser le navigateur recalculer les dimensions
274
  }
275
  });
276
  })();
 
135
  // ─── 7. Γ‰tat fullscreen ──────────────────────────────────────────────────────
136
  let isFullscreen = false;
137
  let savedPadding = aspectPadding;
138
+ let savedParent = null; // mΓ©morisΓ© uniquement lors d'un fake-fullscreen
139
+ let savedNextSibling = null; // mΓ©morisΓ© uniquement lors d'un fake-fullscreen
140
 
141
+ // ─── 8. Styles communs fullscreen (sans dΓ©placement DOM) ─────────────────────
142
+ // UtilisΓ© par le fullscreen natif (desktop/Android via requestFullscreen)
143
+ // et appelé aussi par applyFakeFullscreenStyles après téléportation.
144
  function applyFullscreenStyles() {
145
  wrapper.style.position = 'fixed';
146
  wrapper.style.top = '0';
 
157
  isFullscreen = true;
158
  }
159
 
160
+ // ─── 9. Fake-fullscreen avec tΓ©lΓ©portation DOM ───────────────────────────────
161
+ // UtilisΓ© pour iOS et en fallback quand requestFullscreen est refusΓ©.
162
+ // DΓ©place le wrapper dans <body> pour Γ©chapper Γ  tout stacking context
163
+ // parent (header, transforms, z-index, etc.).
164
+ function applyFakeFullscreenStyles() {
165
+ savedParent = wrapper.parentNode;
166
+ savedNextSibling = wrapper.nextSibling;
167
+ document.body.appendChild(wrapper);
168
+ applyFullscreenStyles();
169
+ }
170
+
171
+ // ─── 10. Restaurer les styles normaux ────────────────────────────────────────
172
  function restoreStyles() {
173
  wrapper.style.position = '';
174
  wrapper.style.top = '';
 
183
  wrapper.classList.remove('fake-fullscreen');
184
  fsBtn.textContent = '⇱';
185
  isFullscreen = false;
186
+
187
+ // Remettre en place uniquement si on avait tΓ©lΓ©portΓ© (iOS / fallback)
188
+ if (savedParent) {
189
+ savedParent.insertBefore(wrapper, savedNextSibling);
190
+ savedParent = null;
191
+ savedNextSibling = null;
192
+ }
193
  }
194
 
195
+ // ─── 11. EntrΓ©e en plein Γ©cran ───────────────────────────────────────────────
196
  function enterFullscreen() {
197
  savedPadding =
198
  wrapper.getAttribute('data-original-padding') || aspectPadding;
199
 
200
  if (isIOS) {
201
+ // iOS ne supporte pas l'API Fullscreen β†’ fake-fullscreen avec tΓ©lΓ©portation DOM
202
+ applyFakeFullscreenStyles();
 
203
  document.body.style.overflow = 'hidden';
204
  return;
205
  }
206
 
207
+ // Tentative via l'API Fullscreen standard (desktop / Android)
208
  const el = wrapper;
209
  const req =
210
  el.requestFullscreen ||
 
213
  el.msRequestFullscreen;
214
 
215
  if (req) {
216
+ req.call(el).catch(() => {
217
+ // API refusΓ©e (ex : iframe cross-origin) β†’ fallback fake avec tΓ©lΓ©portation
218
+ applyFakeFullscreenStyles();
219
+ document.body.style.overflow = 'hidden';
220
+ });
221
+ // Sur succès, applyFullscreenStyles est appelé par onFullscreenChange
222
+ // pour Γ©viter tout double appel.
223
  } else {
224
+ applyFakeFullscreenStyles();
225
  document.body.style.overflow = 'hidden';
226
  }
227
  }
228
 
229
+ // ─── 12. Sortie du plein Γ©cran ───────────────────────────────────────────────
230
  function exitFullscreen() {
231
  if (
232
  document.fullscreenElement === wrapper ||
 
240
  document.body.style.overflow = '';
241
  }
242
 
243
+ // ─── 13. Bouton fullscreen ───���───────────────────────────────────────────────
244
  fsBtn.addEventListener('click', function (e) {
245
  e.stopPropagation();
246
  isFullscreen ? exitFullscreen() : enterFullscreen();
 
253
  isFullscreen ? exitFullscreen() : enterFullscreen();
254
  });
255
 
256
+ // ─── 14. Γ‰couter les changements natifs fullscreen ───────────────────────────
257
+ // DΓ©clenchΓ© par le navigateur sur requestFullscreen rΓ©ussi ou sortie via Γ‰chap.
258
+ // NB : on n'appelle PAS applyFakeFullscreenStyles ici car le fullscreen natif
259
+ // n'a pas besoin de tΓ©lΓ©portation DOM.
260
  function onFullscreenChange() {
261
  const fsEl =
262
  document.fullscreenElement || document.webkitFullscreenElement;
263
 
264
  if (!fsEl && isFullscreen) {
265
+ // Le navigateur a quittΓ© le plein Γ©cran tout seul (ex : touche Γ‰chap)
266
  restoreStyles();
267
  document.body.style.overflow = '';
268
  } else if (fsEl === wrapper && !isFullscreen) {
269
+ // requestFullscreen accordΓ© β†’ appliquer les styles sans tΓ©lΓ©portation
270
  applyFullscreenStyles();
271
  }
272
  }
 
274
  document.addEventListener('fullscreenchange', onFullscreenChange);
275
  document.addEventListener('webkitfullscreenchange', onFullscreenChange);
276
 
277
+ // ─── 15. Touche Γ‰chap (fake-fullscreen iOS / fallback) ───────────────────────
278
  document.addEventListener('keydown', function (e) {
279
  if ((e.key === 'Escape' || e.key === 'Esc') && isFullscreen) {
280
  exitFullscreen();
281
  }
282
  });
283
 
284
+ // ─── 16. Resize / orientation ────────────────────────────────────────────────
285
  window.addEventListener('resize', function () {
286
  if (isFullscreen) {
287
  wrapper.style.width = '100vw';
 
291
 
292
  window.addEventListener('orientationchange', function () {
293
  if (isFullscreen) {
294
+ // Délai pour laisser le navigateur recalculer les dimensions après rotation
295
  setTimeout(function () {
296
  wrapper.style.width = '100vw';
297
  wrapper.style.height = '100vh';
298
+ }, 200);
299
  }
300
  });
301
  })();