Composants

VisionneuseNouveau

Voir n’importe quel fichier sans quitter la page : images (zoom, déplacement, rotation), PDF (pages rendues par notre serveur), vidéo, audio, texte — et pour le reste, une carte claire avec Télécharger. Plein écran par-dessus la page, au doigt comme au clavier. C’est LA vue de fichier d’AUBOTA : Drive, Gestion, partages.

Essayer

📝 Version déclarative

C’est le composant réel ; ici les fichiers sont fabriqués dans la page (SVG, texte) au lieu d’être servis par le Drive. Glisse à gauche / droite pour changer de fichier, vers le bas pour fermer ; pince ou double-tape pour zoomer.

Installer

Rien à charger à la main : aubui.js crée window.AubuiVisionneuse tout de suite et récupère aubui-visionneuse.js (≈ 12 Ko compressé, gardé un an en cache) seulement au premier usage : un ouvrir(), un precharger(), ou une page qui contient un [data-aubui-visionneuse]. Pour un PDF, elle charge à son tour aubui-pdf.js.

HTML

<script src="https://ui.aubota.xyz/js/aubui-visionneuse.js" defer></script>  <!-- seulement sur une page sans aubui.js -->

API `window.AubuiVisionneuse`

var v = AubuiVisionneuse.ouvrir({
  fichiers: [
    { nom: 'Carte - recto.jpg', src: 'https://drive.aubota.xyz/f/k3x9p2ma7qzt', genre: 'image',
      dl: 'https://drive.aubota.xyz/f/k3x9p2ma7qzt/dl', chiffre: true },
    { nom: 'Avis 2026.pdf', src: '…/f/7hq2…', pdf: '…/f/7hq2…/pdf', taille: 182344 }
  ],
  index: 0,
  historique: true,                                  // « Retour » du téléphone ferme
  adresse: function (f) { return '/voir/' + f.id; }, // l’adresse suit le fichier ouvert (sans query string)
  surChangement: function (i, f) {},
  surFermeture: function () {}
});
v.suivant(); v.precedent(); v.aller(2); v.index(); v.fermer();

Champ d’un fichier	Rôle
`src`	Adresse du contenu (obligatoire), servie `inline` avec son vrai type et `nosniff`.
`nom`	Nom affiché (et proposé au téléchargement).
`genre`	`image` · `pdf` · `video` · `audio` · `texte` · `autre`. Absent : deviné d’après l’extension du nom.
`dl`	Adresse de téléchargement (sinon `src`).
`pdf`	Adresse JSON `{pages, formats, src: "…/page/{n}/{taille}", texte?}` (service `PdfPages`), ou cet objet tel quel. Sans elle : carte « Ouvrir dans un onglet / Télécharger ».
`taille` · `chiffre` · `apercu`	Octets (carte « Pas d’aperçu ») · `true` → 🔐 dans la barre · petite image (vignette) montrée floue le temps que la grande arrive.

Option	Rôle
`index`	Fichier montré au départ.
`historique`	`true` : ouvrir ajoute une entrée d’historique ; « Retour » (téléphone, navigateur) ferme la visionneuse au lieu de quitter la page.
`adresse(f, i)`	Avec `historique` : l’adresse affichée pendant que `f` est ouvert (le Drive met `/voir/<id>`, rechargeable).
`conteneur`	Un élément : la visionneuse s’affiche DEDANS (ex. à côté d’un formulaire) au lieu du plein écran. Pas de Fermer ni de piège du focus ; un bouton Plein écran.
`surChangement(i, f)` · `surFermeture()`	Rappels.
`AubuiVisionneuse.precharger()`	Charge le composant d’avance (au repos) : le premier clic est instantané, même en 3G.

Utilisation déclarative

Un lien qui marche sans JavaScript (vers la page du fichier), que la visionneuse intercepte. Même valeur de data-aubui-visionneuse = même série (suivant / précédent). Ctrl/⌘-clic garde le lien normal (nouvel onglet).

HTML

<a href="https://drive.aubota.xyz/voir/k3x9p2ma7qzt"
   data-aubui-visionneuse="papier-12"
   data-src="https://drive.aubota.xyz/f/k3x9p2ma7qzt"
   data-dl="https://drive.aubota.xyz/f/k3x9p2ma7qzt/dl"
   data-nom="Carte - recto.jpg" data-genre="image" data-chiffre>👁 Recto</a>

Attribut	Rôle
`data-aubui-visionneuse`	Nom de la série (facultatif).
`data-src`	Adresse du contenu (obligatoire : sans elle, le clic suit le lien).
`data-nom` · `data-genre` · `data-dl` · `data-pdf` · `data-taille` · `data-apercu` · `data-chiffre`	Mêmes rôles que les champs de l’API.
`data-historique="non"`	Ne pas toucher à l’historique (par défaut : « Retour » ferme).

Ce qu’elle montre

Genre	Affichage
Image	Ajustée à l’écran ; zoom ×1 à ×8 (pincer, double-tap, molette, + −), déplacement de l’image zoomée, rotation par quart de tour (R). Image suivante préparée d’avance (sauf « économie de données »).
PDF	Pages rendues par le serveur (AubuiPdf), chargées à la demande ; recherche dans le texte si le serveur la fournit. Un document chiffré au repos est rendu SANS cache disque (voir plus bas).
Vidéo · audio	Lecteur du navigateur (lecture en continu : le serveur gère `Range`). Format non lu → carte Télécharger.
Texte	Les 256 premiers Ko, affichés comme du texte (`textContent`) : un fichier plein de HTML ou de script n’est jamais interprété. Le serveur l’envoie en plus en `text/plain` + `CSP sandbox`.
Le reste	Carte « Pas d’aperçu pour ce type de fichier » avec la taille et Télécharger.

Côté serveur : le Drive

Chaque fichier du Drive a un identifiant court et opaque (DriveIds, 12 signes), stable quand on le renomme, le déplace, le met à la corbeille puis le restaure. Plus aucun chemin dans les adresses :

Adresse	Rôle
`drive.aubota.xyz/voir/<id>`	La page du Drive, ouverte sur le dossier du fichier, visionneuse affichée : le lien à donner.
`/f/<id>` · `/f/<id>/dl`	Contenu (aperçu) · téléchargement. Session obligatoire, fichier cherché dans le Drive de la personne connectée seulement (l’id d’un autre compte → 404), `nosniff`, `Range`, papier chiffré déchiffré à la volée et jamais gardé en cache (`no-store`).
`/f/<id>/pdf` · `/page/<n>/<taille>` · `/texte`	Le PDF pour la visionneuse (`PdfPages`).
`/fichier/voir/<chemin>`	Anciens liens : ils marchent toujours.

🔐 PDF chiffré au repos (papier de Gestion) : PdfPages::ephemere($copie, $dossier). Copie en clair le temps de la requête dans un dossier 0700 hors web, image de la page rendue, envoyée puis effacée, dossier effacé même si la requête est coupée : aucune image ni texte en clair ne reste sur le disque (le cache normal ~/.aubota/cache/pdf n’est pas utilisé).

Réseau (3G / 4G)

Chargée au premier usage seulement ; le Drive la précharge au repos.
Une image montre d’abord sa vignette (déjà en cache), puis la grande quand elle arrive.
PDF : seules les pages regardées sont demandées, en taille adaptée à l’écran.