progetti"]'; const REAL_ITEM_SELECTOR = 'media-item:not([hash="placeholder"])'; /* Nell'editor vero NON tocchiamo la gallery. In /edit/preview invece sì. */ const IS_CARGO_EDITOR = /^\/edit\/(?!preview(?:\/|$))/i .test(window.location.pathname); if (IS_CARGO_EDITOR) { return; } /* ============================================================ HELPERS ============================================================ */ function getPage() { return document.querySelector( PAGE_SELECTOR ); } function getSourceGallery(page) { return page ? page.querySelector('gallery-grid') : null; } function getSourceItems(gallery) { if (!gallery) { return []; } return Array.from( gallery.querySelectorAll( REAL_ITEM_SELECTOR ) ); } function getTrackItems(track) { if (!track) { return []; } return Array.from( track.querySelectorAll( ':scope > media-item' ) ); } /* ============================================================ COSTRUISCI SHELL ============================================================ */ function createShell( page, gallery ) { let shell = page.querySelector( '.pg-v4-shell' ); if (shell) { return shell; } shell = document.createElement( 'div' ); shell.className = 'pg-v4-shell'; const viewport = document.createElement( 'div' ); viewport.className = 'pg-v4-viewport'; const track = document.createElement( 'div' ); track.className = 'pg-v4-track'; const prev = document.createElement( 'button' ); prev.type = 'button'; prev.className = 'pg-v4-arrow pg-v4-prev'; prev.setAttribute( 'aria-label', 'Progetto precedente' ); prev.textContent = '‹'; const next = document.createElement( 'button' ); next.type = 'button'; next.className = 'pg-v4-arrow pg-v4-next'; next.setAttribute( 'aria-label', 'Progetto successivo' ); next.textContent = '›'; viewport.appendChild( track ); shell.appendChild( prev ); shell.appendChild( viewport ); shell.appendChild( next ); /* Mettiamo il nostro carousel immediatamente prima della gallery Cargo. */ gallery.parentNode.insertBefore( shell, gallery ); return shell; } /* ============================================================ POSIZIONI CARD Adesso la prima DEVE essere ~0. ============================================================ */ function getPositions( viewport, track ) { const viewportRect = viewport .getBoundingClientRect(); return getTrackItems(track) .map(function (item) { const rect = item.getBoundingClientRect(); return Math.round( rect.left - viewportRect.left + viewport.scrollLeft ); }); } function getCardWidth( track ) { const first = getTrackItems(track)[0]; if (!first) { return 0; } return first .getBoundingClientRect() .width; } /* ============================================================ SNAP ============================================================ */ function snapTo( viewport, track, direction ) { const positions = getPositions( viewport, track ); if (!positions.length) { return; } const current = viewport.scrollLeft; let target; if (direction > 0) { target = positions.find( function (position) { return ( position > current + 8 ); } ); if ( target === undefined ) { target = positions[ positions.length - 1 ]; } } else if ( direction < 0 ) { const previous = positions.filter( function (position) { return ( position < current - 8 ); } ); target = previous.length ? previous[ previous.length - 1 ] : positions[0]; } else { target = positions.reduce( function ( closest, position ) { return ( Math.abs( position - current ) < Math.abs( closest - current ) ) ? position : closest; } ); } viewport.scrollTo({ left: target, behavior: 'smooth' }); } /* ============================================================ FRECCE ============================================================ */ function updateButtons( viewport, prev, next ) { const maxScroll = Math.max( 0, viewport.scrollWidth - viewport.clientWidth ); prev.disabled = viewport.scrollLeft <= 2; next.disabled = viewport.scrollLeft >= maxScroll - 2; } /* ============================================================ DRAG DESKTOP ============================================================ */ function setupInteraction( shell ) { if ( shell.dataset .pgV4Ready === '1' ) { return; } shell.dataset.pgV4Ready = '1'; const viewport = shell.querySelector( '.pg-v4-viewport' ); const track = shell.querySelector( '.pg-v4-track' ); const prev = shell.querySelector( '.pg-v4-prev' ); const next = shell.querySelector( '.pg-v4-next' ); prev.addEventListener( 'click', function () { snapTo( viewport, track, -1 ); } ); next.addEventListener( 'click', function () { snapTo( viewport, track, 1 ); } ); let dragging = false; let moved = false; let blockClick = false; let startX = 0; let startScroll = 0; viewport.addEventListener( 'dragstart', function (event) { event.preventDefault(); } ); viewport.addEventListener( 'pointerdown', function (event) { /* Touch = scroll nativo. Noi gestiamo solo il mouse. */ if ( event.pointerType !== 'mouse' ) { return; } if ( event.button !== 0 ) { return; } dragging = true; moved = false; blockClick = false; startX = event.clientX; startScroll = viewport.scrollLeft; viewport.classList.add( 'dragging' ); viewport.style .scrollSnapType = 'none'; } ); viewport.addEventListener('pointermove', function (event) { if (!dragging) return; const delta = event.clientX - startX; // Lascia funzionare il clic finché non inizi a trascinare. if (!moved) { if (Math.abs(delta) <= 6) return; moved = true; try { viewport.setPointerCapture(event.pointerId); } catch (error) {} } viewport.scrollLeft = startScroll - delta; }); function endDrag(event) { if (!dragging) { return; } dragging = false; viewport.classList.remove( 'dragging' ); viewport.style .scrollSnapType = 'x mandatory'; try { if ( viewport .hasPointerCapture( event.pointerId ) ) { viewport .releasePointerCapture( event.pointerId ); } } catch (error) {} const dragDistance = viewport.scrollLeft - startScroll; const cardWidth = getCardWidth(track); const threshold = cardWidth * 0.12; let direction = 0; if ( dragDistance > threshold ) { direction = 1; } else if ( dragDistance < -threshold ) { direction = -1; } if (moved) { blockClick = true; } snapTo( viewport, track, direction ); } viewport.addEventListener( 'pointerup', endDrag ); viewport.addEventListener( 'pointercancel', endDrag ); /* Se era un drag, non aprire accidentalmente il link della card. */ viewport.addEventListener( 'click', function (event) { if (!blockClick) { return; } event.preventDefault(); event.stopPropagation(); blockClick = false; }, true ); let ticking = false; viewport.addEventListener( 'scroll', function () { if (ticking) { return; } ticking = true; requestAnimationFrame( function () { updateButtons( viewport, prev, next ); ticking = false; } ); }, { passive: true } ); window.addEventListener( 'resize', function () { /* Dopo resize riportiamo la card più vicina in snap. */ snapTo( viewport, track, 0 ); updateButtons( viewport, prev, next ); } ); requestAnimationFrame( function () { viewport.scrollLeft = 0; updateButtons( viewport, prev, next ); } ); } /* ============================================================ BUILD ============================================================ */ function buildCarousel() { const page = getPage(); if (!page) { return false; } /* Se esiste già ed è popolato, non ricostruiamo nulla. */ const existingShell = page.querySelector( '.pg-v4-shell' ); if ( existingShell && existingShell.querySelector( '.pg-v4-track > media-item' ) ) { setupInteraction( existingShell ); return true; } const gallery = getSourceGallery( page ); if (!gallery) { return false; } const items = getSourceItems( gallery ); if (!items.length) { return false; } const pageContent = page.querySelector( '.page-content' ); if (!pageContent) { return false; } const shell = createShell( page, gallery ); const track = shell.querySelector( '.pg-v4-track' ); /* QUI STA LA DIFFERENZA FONDAMENTALE. Spostiamo i media-item ORIGINALI fuori dal gallery-grid Cargo dentro un normale DIV. Da questo momento non esiste più l'offset interno della gallery Cargo. */ items.forEach( function (item) { track.appendChild( item ); } ); /* Solo ORA nascondiamo la gallery ormai vuota. Se il JS non parte, questa classe non viene mai aggiunta e la gallery Cargo resta visibile. */ gallery.classList.add( 'pg-v4-source' ); gallery.setAttribute( 'aria-hidden', 'true' ); pageContent.classList.add( 'pg-carousel-v4' ); setupInteraction( shell ); return true; } /* ============================================================ BOOT Cargo può inserire la pagina dopo. Nessun observer globale permanente. ============================================================ */ function boot( attempt ) { attempt = attempt || 0; if ( buildCarousel() ) { return; } if ( attempt >= 300 ) { return; } requestAnimationFrame( function () { boot( attempt + 1 ); } ); } if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', function () { boot(0); } ); } else { boot(0); } [ 'cargo:navigate', 'page:change', 'cargo:show-page' ].forEach( function (eventName) { document.addEventListener( eventName, function () { boot(0); } ); } ); })();

ALTREMUSE

ALTREMUSE