La gestion du plein-écran sur Flip-Zone. (Je commence la description des détails techniques de la refonte de Flip-Zone.)
Le mode « plein-écran » est visible dans les animations de présentation des collections (anciennement : les « flipbooks »). Il y a un bouton dans le coin de l’animation. Par exemple là :
http://www.flip-zone.com/fashion/swimwear/janine-robin
L’idée, c’est que dans la version précédente, cette grande animation était entièrement en Flash. Donc j’y gérais le plein écran via Flash. En abandonnant le Flash, je ne voulais pas perdre le plein écran (qui constituait un des aspects spectaculaires de Flip-Zone, que les « autres » magazines de mode ne présentent pas de façon aussi chouette).
Donc : j’utilise l’API #Fullscreen du #HTML5. Curieusement utilisée rigoureusement nulle part, cette API est pourtant épatante et largement utilisable.
– Il faut commencer par utiliser un petit framework qui fasse fonctionner l’API sur Firefox, Safari, Chrome avec leurs implémentations non standard. Pour ça, j’utilise :
https://github.com/kayahr/jquery-fullscreen-plugin
– J’ai cependant patché ce petit script, parce que désormais Opera aussi a implémenté l’API, mais cette fois en respectant la recommandation officielle. (Je l’ai déjà signalé : il n’existe aucun framework qui ait implémenté la recommandation officielle, si bien que le seul navigateur qui l’ai implémenté est le seul sur lequel aucune des démos ne fonctionne !)
http://www.flip-zone.com/squelettes/javascript/jquery.fullscreen-mod.js
– Mais je ne passe non plus directement par les fonctions de gestion du plein écran, parce que je veux aussi gérer le cas où l’API n’est pas implémentée (et il y a du monde). Dans ce cas, j’ajoute une classe au conteneur que je veux passer en plein écran, classe qui dit que tout cela est en position fixed, width à 100% et height à 100%. Façon lightbox, en gros.
– Du coup, le mode « plein écran » est relativement transparent (sauf quand les brouteurs, comme Firefox, ont implémenté ça de manière paranoïaque en te demandant de valider 2000 fois un gros bouton autorisant à passer en plein écran…). Même sur MSIE 8 (par exemple), on gagne à passer en « plein écran ».
Pour des raisons économiques évidentes, malheureusement, je conserve le bandeau de publicité à droite en mode plein écran. Sans le bandeau, c’est carrément spectaculaire (si vous avez adblock ou similaire, vous pourrez profiter de l’intégralité de l’écran).
À noter : le mode « plein écran », même non implémenté avec l’API, est très agréable pour utiliser confortablement Flip-Zone sur un smartphone.
– Pour ceux qui n’ont pas suivi : ça n’est pas du tout la même chose que de passer volontairement la fenêtre du navigateur en plein écran. Dans le mode que j’utilise ici, seule l’animation de présentation des collections passe en plein écran, à la façon d’une animation Flash.
