> **Nota storica:** il file si chiama ancora `VRV_ZOOM_PIRAMIDE.md` perché l'idea iniziale era una
> **piramide rovesciata 3D**. Quella strada è stata **abbandonata** (vedi §Storia). L'effetto finale è una
> **girandola**: la foto arriva dal punto-clic roteando e si apre grande al centro.
**Idea di:** vitti (rimandata "da tempo", partita 2026-06-01 mentre aspettava il carro attrezzi col camper guasto)
**Stato:** ✅ in `vv_work`, ✅ deployato in `vv_test` (Elena) il 2026-06-01 — **prod ancora da fare**
Nelle pagine di **visualizzazione** e **anteprima bozza** dei post, le foto (e i maserati) a volte sono
piccole per ragioni editoriali. Clic/tap per ingrandirle con un effetto scenografico:
poi chiude. Ogni cambio foto rientra anch'esso a girandola.
da sfocata/scura a nitida/luminosa, con un alone dorato.
| File | Ruolo |
|------|-------|
| `js/vrv-zoom.js` | logica: delega click, FLIP/girandola, timers, maserati |
| `css/vrv-zoom.css`| overlay scuro, foto zoomata 90% con alone, contatore, cursori |
Enqueue (riga css + riga js) in **`visualizza_post.php`** e **`visualizza_post_draft.php`**
dentro l'array di `vv_enqueue_theme_css([...])`.
Naming: file `vrv-zoom.*`, classi `vrv-zoom-*` (trattino), zero stili inline nel PHP.
In testa a `js/vrv-zoom.js`:
Dettaglio rotazione d'entrata (in `flipIn()`):
i giri si "ammucchiavano" all'inizio e l'occhio non li contava. Lineare = velocità angolare costante.
Dettaglio rotazione d'uscita (in `close()`) — RIFINITA 2026-06-01:
la foto **svaniva mentre girava**, quindi la giravolta d'uscita non si vedeva (segnalato da Elena).
visibile **mentre** rotea verso il punto-clic e sfuma solo verso la fine. `EXIT_MS` è usato sia nella
transizione sia nel `setTimeout` di pulizia (restano sincronizzati).
In `css/vrv-zoom.css`:
1. Un solo listener di click delegato su `.vv-post-content`.
2. `open(list, rect)`: overlay (creato una volta), set src, lock scroll, attende il load, poi
`startTimers()` **prima** di `flipIn()` (l'ordine conta: vedi §Storia, bug edgeTimer).
3. `computeTransforms()`: `originStr` (vertice = punto-clic, `rotate(-SPIN_DEG)` + scale) e `restStr` (centro).
4. `flipIn()`: da originStr (sfocata/scura) a restStr (nitida/luminosa), rotazione lineare 1000ms.
5. `spinInCentered()`: girandola "in loco" al cambio foto del maserati (`rotate(-SLIDE_DEG) scale(.55)` → centro).
6. `close()`: ripercorre verso il punto-clic, sfoca, e a fine transizione pulisce src/transform.
Segnalazione di Elena: in **modifica** il testo è staccato dal bordo, in **visualizza** era incollato.
Fix in `css/theme-default.d/vv-container.css`, regola `body.page-visualizza-post #vv-post-body`:
aggiunto `padding: 14px 20px !important` (prima era 0). Valore un filo più largo perché quel riquadro
ha `zoom: 0.85`, così otticamente pareggia lo stacco dell'editor. Vale sia per visualizza che per la bozza.
Su tablet (schermo stretto) il testo si schiacciava di fianco alle foto in **visualizza**, diversamente
dall'**editor**. Causa: l'editor carica `content.css` (vedi `content_css` in `lib/caricaTinyMCE.php`), la
visualizza NO. `content.css` ha `@media (max-width:700px)` che **disattiva i float** (foto impilate
full-width) e il clearfix `.vv-post-content::after`; senza, in visualizza le foto restavano flottate al 50%
e schiacciavano il testo. **Fix**: aggiunto `'css/content.css'` come **primo** css negli enqueue di
`visualizza_post.php` e `visualizza_post_draft.php` (stesso ordine/cascade dell'editor), su test e work.
La pagina di share (`/srv/http/share/upload.php`) dava "cartella non valida" / "nessun file ricevuto":
il form in `index.php` invia i campi `dir` e `upload_file`, ma `upload.php` leggeva `dir_id` e `media`.
Reso `upload.php` tollerante a entrambi. È il canale con cui vitti carica screenshot da tablet: i file
finiscono in `/srv/http/vittrosviaggi_shared/share_storage/dirs/<dir_id>/`.
Segnalazione di Elena: nei post il testo toccava le foto flottate (nessuno stacco laterale), sia in vista
che in editor. Diagnosi a misura (margine calcolato = `0px` sulle flottate). Causa: in
`css/theme-default.d/visualizza_post.css` la regola `body.page-visualizza-post #vv-post-body img`
forza `display:block; margin:1rem auto !important`. Avendo un **ID** (`#vv-post-body`) la sua specificità
batte le regole float che usano solo classi (`.vv-post-content img.vv-float-right`) **anche se hanno
`!important`**; su un elemento flottato `margin: … auto` → `margin-left/right:auto` → **0** → testo
appiccicato. **Fix**: escluse le flottate dalla regola di centratura →
`#vv-post-body img:not([class*="float"]):not(.alignleft):not(.alignright)`. Così le immagini normali
restano centrate e le flottate riprendono il loro stacco (1rem). Applicato su **vv_test + vv_work**.
Prima i CSS del tema uscivano con `?ts=2.0 RC` (stringa **fissa** = non bustava mai). **Fix** in
`lib/theme.php` (main theme, slice per-pagina, lib) e `lib/header.php` (`content.css`): ora usano
`?v=filemtime` tramite `vv_css_url()` (stessa convenzione già usata dall'array CSS esplicito). Da ora ogni
modifica a un CSS si propaga **da sola**. Applicato su **vv_test + vv_work**.
Deploy **chirurgico** (NON copia di interi file: test ha un fix draft proprio non ancora in work).
(`vv_test` → `active/test` → release).
padding `14px 20px` su `#vv-post-body`.
Struttura release (symlink): `active/{prod,test,work}` → `releases/<dir timestamp>`.
con `diff` sui file toccati), applicare solo: i 2 file nuovi `vrv-zoom.*`, le righe enqueue nei 2 PHP,
il padding in `vv-container.css`.
successive. Solo al PRIMISSIMO accesso dopo questo deploy può servire un Ctrl+F5 per scaricare l'HTML
già in cache che ancora linka i vecchi URL.
**Piramide rovesciata 3D (abbandonata).** Tentativi: spigoli SVG dal vertice ai 4 angoli (funzionavano dopo
aver risolto un bug — `edgeTimer` impostato in `flipIn()` e subito cancellato da `clearTimers()` dentro
`startTimers()`: risolto invertendo l'ordine delle due chiamate); pareti come `<polygon>` translucidi;
foto attaccata a un bordo random per scoprire le pareti. Esito: nessun vero effetto 3D, la foto copriva le
pareti, foto troppo piccola. Decisione di vitti: "lasciamo perdere la piramide". Codice piramide **rimosso**.
**Numero di giri d'entrata.** Provati 480° → 720° (due giri) → tornati a 360° (un giro): con due giri +
easing l'occhio non distingueva i giri; con rotazione **lineare** i giri si vedono, ma vitti ha preferito
**un giro solo**, più sobrio.
http://localhost/vv_work/visualizza_post.php?id=143 # post "Maserati!"
http://localhost/vv_work/visualizza_post.php?id=142 # baltici (Elena)
Cache-busting `?v=filemtime` attivo (§E): non serve più Ctrl+F5 dopo le modifiche.