MediaWiki:Citizen.js: Difference between revisions

/* All JavaScript here will be loaded for users of the Citizen skin */

/* Indice d'archivio:
   1) dove esiste il rail di Citizen lo mettiamo lì SOPRA la TOC nativa (riuso);
      dove il rail non c'è, l'indice resta flottante (.ai-rail) e non sparisce.
   2) collassabile (chevron nella testata). Stato iniziale:
        - se l'utente ha già scelto, si ricorda (localStorage);
        - altrimenti default intelligente: chiuso se la TOC della pagina è lunga.
   3) la testata (link alla Dashboard) resta sempre visibile. */
mw.hook( 'wikipage.content' ).add( function () {
	var KEY = 'ce-indice-collapsed';

	// 1) posizionamento
	var floatBox = document.querySelector( '.archivio-indice.ai-rail' );
	if ( floatBox ) {
		var rail =
			document.querySelector( '.citizen-page-sidebar' ) ||
			document.querySelector( '.citizen-sidebar' ) ||
			document.querySelector( '.citizen-toc-container' );
		if ( rail ) {
			floatBox.classList.remove( 'ai-rail' );
			floatBox.classList.add( 'ai-in-rail' );
			rail.prepend( floatBox );
		}
	}

	var idx = document.querySelector( '.archivio-indice' );
	if ( !idx ) {
		return;
	}

	// 2) stato iniziale
	var saved = null;
	try {
		saved = localStorage.getItem( KEY );
	} catch ( e ) {}
	var tocCount = document.querySelectorAll( '.citizen-toc-link' ).length;
	var collapsed = ( saved === null ) ? ( tocCount > 8 ) : ( saved === '1' );
	if ( collapsed ) {
		idx.classList.add( 'ai-collapsed' );
	}

	// 3) toggle + persistenza — TUTTA la testata è cliccabile (bersaglio ampio),
	//    tranne il link "Dashboard".
	document.querySelectorAll( '.archivio-indice .ai-testata' ).forEach( function ( head ) {
		if ( head.dataset.bound ) {
			return;
		}
		head.dataset.bound = '1';
		var b = head.closest( '.archivio-indice' );
		var act = function () {
			b.classList.toggle( 'ai-collapsed' );
			try {
				localStorage.setItem( KEY, b.classList.contains( 'ai-collapsed' ) ? '1' : '0' );
			} catch ( e ) {}
		};
		head.addEventListener( 'click', function ( e ) {
			if ( e.target.closest( 'a' ) ) {
				return;
			}
			act();
		} );
		head.addEventListener( 'keydown', function ( e ) {
			if ( ( e.key === 'Enter' || e.key === ' ' ) && !e.target.closest( 'a' ) ) {
				e.preventDefault();
				act();
			}
		} );
	} );
} );
/* === [SEZIONI] inizio ===
   Sezioni collassabili: Citizen le fornisce già di suo (skin: EnableCollapsibleSections,
   .citizen-section + .citizen-section-heading + un solo chevron nativo). Qui NON aggiungiamo
   un secondo meccanismo: pilotiamo quello nativo perché le sezioni siano CHIUSE al primo
   approdo e lo stato (quali aperte) sia ricordato per-pagina in localStorage. Il toggle e il
   chevron restano di Citizen; le àncore/TOC riaprono la sezione da sole grazie a
   hidden="until-found". */
mw.hook( 'wikipage.content' ).add( function () {
	if ( !document.body.classList.contains( 'citizen-sections-enabled' ) ) {
		return;
	}
	var body = document.querySelector( '#mw-content-text .mw-parser-output' );
	if ( !body || body.dataset.ceSecDone ) {
		return;
	}
	var headings = Array.prototype.slice.call(
		document.querySelectorAll( '.citizen-section-heading' ) );
	if ( !headings.length ) {
		return;
	}
	body.dataset.ceSecDone = '1';

	function secOf( h ) {
		var s = h.nextElementSibling;
		return ( s && s.classList.contains( 'citizen-section' ) ) ? s : null;
	}
	function idOf( h ) {
		var hx = h.querySelector( 'h1,h2,h3,h4,h5,h6' ) || h;
		return hx.id || null;
	}

	// Pagine-mappa (Index, home): NON si collassano di default — devono restare
	// aperte come dashboard. Le sezioni restano comunque pieghevoli a mano.
	var NOAUTO = { 'Index': 1, 'Test_home': 1, 'Main_Page': 1, 'Home': 1 };
	var autoCollapse = !NOAUTO[ mw.config.get( 'wgPageName' ) ];

	var SKEY = 'ce-sections:' + mw.config.get( 'wgPageName' );
	var stored = null;
	try { stored = localStorage.getItem( SKEY ); } catch ( e ) {}
	var openIds = {};
	if ( stored ) {
		try {
			JSON.parse( stored ).forEach( function ( id ) { openIds[ id ] = 1; } );
		} catch ( e ) {}
	}

	// stato iniziale: chiuse, tranne quelle ricordate aperte
	headings.forEach( function ( h ) {
		var s = secOf( h );
		if ( !s ) { return; }
		var id = idOf( h );
		var open = stored ? !!openIds[ id ] : !autoCollapse;
		if ( !open ) { s.hidden = 'until-found'; }
	} );

	function save() {
		var open = [];
		headings.forEach( function ( h ) {
			var s = secOf( h );
			if ( s && !s.hasAttribute( 'hidden' ) ) {
				var id = idOf( h );
				if ( id ) { open.push( id ); }
			}
		} );
		try { localStorage.setItem( SKEY, JSON.stringify( open ) ); } catch ( e ) {}
	}

	// registra lo stato dopo i toggle nativi di Citizen e le riaperture via "until-found"
	body.addEventListener( 'click', function ( e ) {
		if ( e.target.closest( '.citizen-section-heading' ) &&
			!e.target.closest( '.mw-editsection' ) ) {
			setTimeout( save, 0 );
		}
	} );
	headings.forEach( function ( h ) {
		var s = secOf( h );
		if ( s ) {
			s.addEventListener( 'beforematch', function () { setTimeout( save, 0 ); } );
		}
	} );
} );
/* === [SEZIONI] fine === */