@klodd/ds 1.1.0 → 3.0.0

package/js/turbo-nav.js

@@ -0,0 +1,353 @@
+/*--------------------------------------------------------------
+ Sprint I + I.1: Turbo Drive-monstret for Ekonom.
+
+ Bakgrund (CE 2026-04-27):
+ Cross-document View Transitions glitchar pa iOS Safari + PWA-
+ standalone (snapshot-bug pa fixed-position-element + dvh-
+ instabilitet pa korta sidor utan scroll). Sprint G3+G4 patchade
+ symptom utan att losa rotorsaken. Industri-konsensus: skip cross-
+ document VT, ga till same-document via fetch + DOM-swap.
+
+ Detta ar Hotwire/Turbo-monstret applicerat pa Ekonom. Vi behaller
+ hela MPA-arkitekturen (Jinja-render, server-routes, Alembic, auth,
+ forms via 303-redirect) men intercepterar `<a>`-klick pa interna
+ lankar och swappar `<main>` + `<title>` + body-data-attribut
+ istallet for full document-navigation. document.startViewTransition
+ ger same-document VT som inte triggar iOS-snapshot-bugen.
+
+ Sprint I.1 (post-Chat-ADR-review): polish + risk-mitigation:
+ - history.state merge (inte radera) sa browser-internals (scroll-
+   position-cache, etc.) bevaras
+ - scrollY save/restore via history.state for korrekt back/forward-
+   beteende (browser cachar inte scrollY pa same-document swap)
+ - inFlight-guard mot overlappande VT (race condition vid snabba
+   dubbel-tap)
+ - Focus flyttas till <main> efter swap for screen reader-support
+ - Toast vid fetch-fel innan fallback till full document-load
+ - Title-safety vid saknat <title>-element
+
+ Vad vi swappar:
+ - <main id="main"> (per-template content inkl. topbar)
+ - <title>
+ - body data-ptr-enabled (Sprint E1)
+ - active-class pa bottom-nav (server-render ar sanning)
+
+ Vad vi INTE rorr:
+ - Bottom-nav-element (sitter utanfor main, oforandrad mellan sidor)
+ - <dialog class="sheet"> (inkluderas via base.html, oforandrad)
+ - data-first-load (sätts bara forsta besoket, inte vid swap)
+ - Form-submits (full document-load via 303-redirect, oforandrat)
+
+ Fallback:
+ - Modifier-klick (cmd/ctrl/shift/alt) eller middle-click: browser
+   default (oppna i ny flik)
+ - target="_blank" eller download: browser default
+ - data-turbo="false" pa <a>: full navigation
+ - External origin: full navigation
+ - Hash-only links (#anchor): browser default
+ - Fetch-fel: toast + fallback till window.location.href
+ - Browser utan startViewTransition: instant swap utan animation
+
+ JS-state-leaks-vigilance (Sprint I.1):
+ Eftersom vi inte langre gor full document-reload kan module-level
+ state lacka over nav-byten. Konventioner:
+ - All event-handling SKA vara delegerad pa document/window-niva
+   eller pa element som inte swappas (body, <dialog>-elements i
+   base.html). INGA listeners attached till elements i <main>.
+ - Inga setInterval utan motsvarande clearInterval-cleanup-trigger
+ - Inga module-level array/object-collections utan cleanup-mekanism
+ - MutationObserver-pattern: observer maste targeta element utanfor
+   <main>, eller disconnect:as via turbo:navigated-event
+--------------------------------------------------------------*/
+( function () {
+	'use strict';
+
+	const ORIGIN = window.location.origin;
+	let currentController = null;
+	let inFlightSwap = null; // Promise som resolvar nar pagaende VT/swap ar klar.
+
+	/*--------------------------------------------------------------
+	 Lank-eligibility: ska denna <a> hanteras av Turbo eller browsern?
+	--------------------------------------------------------------*/
+	function isInternalLink ( a ) {
+		if ( ! a || ! a.href ) return false;
+		if ( a.dataset.turbo === 'false' ) return false;
+		if ( a.target && a.target !== '' && a.target !== '_self' ) return false;
+		if ( a.hasAttribute( 'download' ) ) return false;
+		const rawHref = a.getAttribute( 'href' ) || '';
+		if ( rawHref.startsWith( '#' ) ) return false;
+		if ( rawHref.startsWith( 'mailto:' ) ) return false;
+		if ( rawHref.startsWith( 'tel:' ) ) return false;
+		try {
+			const url = new URL( a.href );
+			if ( url.origin !== ORIGIN ) return false;
+		} catch ( _ ) {
+			return false;
+		}
+		return true;
+	}
+
+	function isModifierClick ( e ) {
+		if ( e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) return true;
+		if ( e.button !== undefined && e.button !== 0 ) return true;
+		return false;
+	}
+
+	/*--------------------------------------------------------------
+	 Sprint J.4: detektera month-change-nav for att skip:a VT.
+	 Skalet: VT-snapshot doljer original DOM under fade-tid (~160ms).
+	 Hero-roll-animation kan inte synkroniseras med VT-fade eftersom
+	 snapshot blockerar live-DOM. Skip VT vid month-change ger
+	 anvandaren omedelbar feedback (rollers borjar rulla direkt).
+	 VT behalls for andra nav-byten (Hem -> Kategorier etc) dar
+	 cross-fade ar fortsatt vardefull.
+	--------------------------------------------------------------*/
+	function isMonthChangeNav ( fromUrl, toUrl ) {
+		try {
+			const f = new URL( fromUrl );
+			const t = new URL( toUrl );
+			if ( f.origin !== t.origin ) return false;
+			if ( f.pathname !== t.pathname ) return false;
+			const fromMonth = f.searchParams.get( 'month' );
+			const toMonth = t.searchParams.get( 'month' );
+			return fromMonth !== toMonth;
+		} catch ( _ ) {
+			return false;
+		}
+	}
+
+	/*--------------------------------------------------------------
+	 history.state-helpers. Sprint I.1: merge-pattern istallet for
+	 radera, sa eventuella browser-cachade state-falt (scroll, etc.)
+	 bevaras nar vi adderar var turbo-flagga.
+	--------------------------------------------------------------*/
+	function mergeState ( extra ) {
+		return Object.assign( {}, history.state || {}, extra, { turbo: true } );
+	}
+
+	function saveScrollOnCurrentEntry () {
+		const merged = mergeState( { scrollY: window.scrollY } );
+		history.replaceState( merged, '', window.location.href );
+	}
+
+	/*--------------------------------------------------------------
+	 Hamta + parse HTML-respons fran Turbo-fetch.
+	--------------------------------------------------------------*/
+	async function turboFetch ( url, signal ) {
+		const resp = await fetch( url, {
+			headers: { 'X-Turbo': 'true', 'Accept': 'text/html' },
+			credentials: 'same-origin',
+			signal: signal,
+		} );
+		if ( ! resp.ok ) {
+			throw new Error( 'HTTP ' + resp.status );
+		}
+		const text = await resp.text();
+		const doc = new DOMParser().parseFromString( text, 'text/html' );
+		return { doc: doc, finalUrl: resp.url };
+	}
+
+	/*--------------------------------------------------------------
+	 Utfor sjalva DOM-bytet. Kor inom document.startViewTransition-
+	 callback for same-document VT.
+	--------------------------------------------------------------*/
+	function performSwap ( newDoc ) {
+		// Title - safety mot saknat title-element (osannolikt men ratt-pa-papper).
+		const newTitle = newDoc.querySelector( 'title' );
+		if ( newTitle && newTitle.textContent ) {
+			document.title = newTitle.textContent;
+		}
+
+		// Body data-attribut. Synka data-ptr-enabled (Sprint E1) sa pull-to-
+		// refresh aktiveras/inaktiveras per route. Lat data-first-load styras
+		// av initial-render bara - om server skickade ny first-load-true (t.ex.
+		// inkognito-besok via turbo) ignorerar vi det for att inte trigga
+		// splash-animation per turbo-byte.
+		const newBody = newDoc.body;
+		if ( newBody.hasAttribute( 'data-ptr-enabled' ) ) {
+			document.body.setAttribute( 'data-ptr-enabled', newBody.getAttribute( 'data-ptr-enabled' ) );
+		} else {
+			document.body.removeAttribute( 'data-ptr-enabled' );
+		}
+
+		// Main content (inkl. per-template topbar). Replace bevarar element-
+		// referenser for VT-name-mapping i same-document VT.
+		const oldMain = document.getElementById( 'main' );
+		const newMain = newDoc.getElementById( 'main' );
+		if ( oldMain && newMain ) {
+			oldMain.replaceWith( newMain );
+		}
+
+		// Bottom-nav active-class. Server-render ar sanning - om optimistic
+		// active-flytt pa F1 hamnade fel (t.ex. server-redirect till annan
+		// route) sa korrigerar vi den har.
+		const newNav = newDoc.querySelector( '.bottom-nav' );
+		const liveNav = document.querySelector( '.bottom-nav' );
+		if ( newNav && liveNav ) {
+			const newActiveHref = newNav.querySelector( '.nav-pod.active' );
+			const liveActive = liveNav.querySelector( '.nav-pod.active' );
+			if ( liveActive ) liveActive.classList.remove( 'active' );
+			if ( newActiveHref ) {
+				const target = liveNav.querySelector(
+					'a[href="' + newActiveHref.getAttribute( 'href' ) + '"]'
+				);
+				if ( target ) target.classList.add( 'active' );
+			}
+		}
+	}
+
+	/*--------------------------------------------------------------
+	 Focus-management efter swap. Sprint I.1: flytta focus till
+	 <main>-elementet sa screen readers far en logisk forflyttnings-
+	 punkt. Native MPA-nav rensar focus implicit; same-document swap
+	 maste vi gora explicit.
+	--------------------------------------------------------------*/
+	function moveFocusToMain () {
+		const main = document.getElementById( 'main' );
+		if ( ! main ) return;
+		// tabindex=-1 om saknat sa programmatic focus funkar utan att
+		// adda main till tab-ordningen.
+		if ( ! main.hasAttribute( 'tabindex' ) ) {
+			main.setAttribute( 'tabindex', '-1' );
+		}
+		try { main.focus( { preventScroll: true } ); } catch ( _ ) { /* ignore */ }
+	}
+
+	/*--------------------------------------------------------------
+	 Kornplats: hamta + swappa + uppdatera history. Anropas vid
+	 nav-klick OCH popstate (back/forward).
+
+	 Sprint I.1: vantar pa pagaende inFlightSwap innan ny startas
+	 sa overlappande VT inte ger artifakter vid snabba dubbel-tap.
+	--------------------------------------------------------------*/
+	async function navigateTo ( url, options ) {
+		options = options || {};
+
+		// Sprint J: spara fromUrl FORE history.pushState eller swap sa
+		// turbo:navigated-subscribers (t.ex. hero-roll.js) kan jamfora
+		// gammal vs ny route for trigger-detektering (manadsbyte etc.).
+		const fromUrl = window.location.href;
+
+		// Avbryt pagaende fetch om en ny startar (snabba klick).
+		if ( currentController ) currentController.abort();
+		currentController = new AbortController();
+		const myController = currentController;
+
+		// Vanta pa eventuell pagaende swap (VT) sa vi inte staplar dem.
+		if ( inFlightSwap ) {
+			try { await inFlightSwap; } catch ( _ ) { /* ignore */ }
+			if ( myController.signal.aborted ) return;
+		}
+
+		// Sprint I.1: spara nuvarande scrollY i history.state SA fort en
+		// nav startar - sa popstate-handlern kan restore:a scrollY nar
+		// anvandaren back:ar tillbaka till denna sida.
+		if ( ! options.popstate ) {
+			saveScrollOnCurrentEntry();
+		}
+
+		try {
+			const { doc, finalUrl } = await turboFetch( url, myController.signal );
+			if ( myController.signal.aborted ) return;
+
+			// Server kan ha redirected (t.ex. /bolanet -> /bolanet?month=2026-04).
+			// Anvand finalUrl for history-state sa back/forward funkar korrekt.
+			const swap = function () {
+				performSwap( doc );
+				// Sprint J.3: dispatcha SYNKRON 'turbo:swap'-event INOM
+				// swap-callback fore VT slut-snapshot tas. Subscribers (hero-
+				// roll.js) kan modifiera nya DOM (t.ex. byta ut hero-amount
+				// till digit-rollers) sa VT slut-state inkluderar deras
+				// modifikationer. Forhindrar 0.2s-flash av server-text
+				// under VT-fade vid month-change.
+				document.dispatchEvent( new CustomEvent( 'turbo:swap', {
+					detail: { url: finalUrl, fromUrl: fromUrl, popstate: !! options.popstate },
+				} ) );
+				if ( options.popstate ) {
+					// Restore scrollY fran history.state om sparat. Annars topp.
+					const cachedScroll = history.state && typeof history.state.scrollY === 'number'
+						? history.state.scrollY : 0;
+					window.scrollTo( 0, cachedScroll );
+				} else {
+					window.scrollTo( 0, 0 );
+				}
+				moveFocusToMain();
+			};
+
+			// Wrappa swap + VT i en Promise sa nasta nav vantar pa den.
+			let swapResolve;
+			inFlightSwap = new Promise( function ( r ) { swapResolve = r; } );
+
+			// Sprint J.4: skip VT vid month-change. VT-snapshot doljer
+			// original DOM under fade-tid, vilket blockerar hero-roll-
+			// animation. Vid month-change vill vi att rollers ska borja
+			// rulla omedelbart - skip VT ger detta. VT behalls for andra
+			// nav-byten dar cross-fade ar vardefull (Hem -> Kategorier etc).
+			const skipVT = isMonthChangeNav( fromUrl, finalUrl );
+
+			try {
+				if ( typeof document.startViewTransition === 'function' && ! skipVT ) {
+					const transition = document.startViewTransition( swap );
+					try { await transition.finished; } catch ( _ ) { /* ignore */ }
+				} else {
+					swap();
+				}
+			} finally {
+				if ( inFlightSwap && swapResolve ) swapResolve();
+				inFlightSwap = null;
+			}
+
+			if ( ! options.popstate ) {
+				history.pushState( mergeState( { scrollY: 0 } ), '', finalUrl );
+			}
+
+			// Notify subscribers (nav-optimistic.js, hero-roll.js, future modules).
+			document.dispatchEvent( new CustomEvent( 'turbo:navigated', {
+				detail: { url: finalUrl, fromUrl: fromUrl, popstate: !! options.popstate },
+			} ) );
+		} catch ( err ) {
+			if ( err.name === 'AbortError' ) return;
+			// Sprint I.1: toast for synlighet innan vi gor full document-load
+			// fallback. Anvandaren far visuell feedback att natet failade.
+			if ( window.showToast ) {
+				try { window.showToast( 'Natverksfel - laddar om sidan.', 'error', 1800 ); } catch ( _ ) {}
+			}
+			// Fallback: full document-load. Browsern visar offline-page om
+			// SW har den cachad.
+			window.location.href = url;
+		} finally {
+			if ( myController === currentController ) currentController = null;
+		}
+	}
+
+	/*--------------------------------------------------------------
+	 Click-delegation: lyssna pa <a>-klick globalt. Kor INNAN nav-
+	 optimistic.js pa samma click sa active-flytten visas direkt
+	 medan turbo-fetchen pagar i bakgrunden.
+	--------------------------------------------------------------*/
+	document.addEventListener( 'click', function ( e ) {
+		if ( isModifierClick( e ) ) return;
+		const a = e.target.closest( 'a[href]' );
+		if ( ! a ) return;
+		if ( ! isInternalLink( a ) ) return;
+		// Sheet-trigger eller annan delegation-handler kan ha redan
+		// preventDefault:at - skippa i sa fall.
+		if ( e.defaultPrevented ) return;
+		e.preventDefault();
+		navigateTo( a.href );
+	} );
+
+	/*--------------------------------------------------------------
+	 Back/forward via popstate. Initial pageload markeras med
+	 turbo: true via mergeState sa popstate-handling vet att vi ar
+	 i turbo-modell hela vagen. Browser-internals (scroll-cache,
+	 etc.) bevaras eftersom vi merge:ar istallet for replace:ar.
+	--------------------------------------------------------------*/
+	window.addEventListener( 'popstate', function () {
+		navigateTo( window.location.href, { popstate: true } );
+	} );
+
+	// Initial state: merga in turbo-flag + spara forsta scrollY (0)
+	// utan att radera browser-cachade falt.
+	history.replaceState( mergeState( { scrollY: window.scrollY || 0 } ), '', window.location.href );
+} )();

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@klodd/ds",
-  "version": "1.1.0",
-  "description": "Klodd Design System - shared tokens, typography, and components for Jubb, Ekonom, and future apps",
+  "version": "3.0.0",
+  "description": "Klodd Design System - shared tokens, typography, components and JS for Jubb, Ekonom, and future apps. v2.0 inkluderar all komponentkod och delad JS - app-repona haller bara data och affarslogik.",
   "main": "css/index.css",
   "files": [
-    "css/"
+    "css/",
+    "js/"
   ],
   "keywords": [
     "design-system",