MediaWiki:Citizen.js - Revision history

Cranio is thinking: Default chiuso su TOC lunga + persistenza

2026-06-15T20:47:36Z

Default chiuso su TOC lunga + persistenza

← Older revision		Revision as of 20:47, 15 June 2026
Line 2:		Line 2:

	/* Indice d'archivio:		/* Indice d'archivio:
	1) dove esiste il rail di Citizen ~~(pagine con sezioni)~~ lo mettiamo lì, SOPRA		1) dove esiste il rail di Citizen lo mettiamo lì SOPRA la TOC nativa (riuso);
	la TOC nativa (~~che riusiamo~~); dove il rail non ~~esiste~~ l'indice resta ~~una~~		dove il rail non c'è, l'indice resta flottante (.ai-rail) e non sparisce.
	~~colonna~~ flottante (.ai-rail) e non sparisce.		2) collassabile (chevron nella testata). Stato iniziale:
	2) ~~il box è~~ collassabile (~~toggle "Indice"~~): ~~su pagine con TOC lunga si chiude~~		- se l'utente ha già scelto, si ricorda (localStorage);
	l'~~indice e~~ si ~~tiene~~ la TOC. La testata (link alla Dashboard) resta sempre. */		- 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 () {		mw.hook( 'wikipage.content' ).add( function () {
	var ~~box~~ = document.querySelector( '.archivio-indice.ai-rail' );		var KEY = 'ce-indice-collapsed';
	if ( ~~box~~ ) {
			// 1) posizionamento
			var floatBox = document.querySelector( '.archivio-indice.ai-rail' );
			if ( floatBox ) {
	var rail =		var rail =
	document.querySelector( '.citizen-page-sidebar' ) \|\|		document.querySelector( '.citizen-page-sidebar' ) \|\|
Line 15:		Line 19:
	document.querySelector( '.citizen-toc-container' );		document.querySelector( '.citizen-toc-container' );
	if ( rail ) {		if ( rail ) {
	~~box~~.classList.remove( 'ai-rail' );		floatBox.classList.remove( 'ai-rail' );
	~~box~~.classList.add( 'ai-in-rail' );		floatBox.classList.add( 'ai-in-rail' );
	rail.prepend( ~~box~~ );		rail.prepend( floatBox );
	}		}
	}		}

	// ~~Toggle apri~~/~~chiudi~~		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
	document.querySelectorAll( '.archivio-indice .ai-toggle' ).forEach( function ( t ) {		document.querySelectorAll( '.archivio-indice .ai-toggle' ).forEach( function ( t ) {
	if ( t.dataset.bound ) {		if ( t.dataset.bound ) {
Line 27:		Line 47:
	}		}
	t.dataset.bound = '1';		t.dataset.bound = '1';
	var ~~toggle~~ = function () {		var act = function () {
	t.closest( '.archivio-indice' ).classList.toggle( 'ai-collapsed' );		var b = t.closest( '.archivio-indice' );
			b.classList.toggle( 'ai-collapsed' );
			try {
			localStorage.setItem( KEY, b.classList.contains( 'ai-collapsed' ) ? '1' : '0' );
			} catch ( e ) {}
	};		};
	t.addEventListener( 'click', ~~toggle~~ );		t.addEventListener( 'click', act );
	t.addEventListener( 'keydown', function ( e ) {		t.addEventListener( 'keydown', function ( e ) {
	if ( e.key === 'Enter' \|\| e.key === ' ' ) {		if ( e.key === 'Enter' \|\| e.key === ' ' ) {
	e.preventDefault();		e.preventDefault();
	~~toggle~~();		act();
	}		}
	} );		} );
	} );		} );
	} );		} );

Cranio is thinking: Toggle apri/chiudi indice + rail-move

2026-06-15T20:39:14Z

Toggle apri/chiudi indice + rail-move

← Older revision		Revision as of 20:39, 15 June 2026
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Citizen skin */		/* All JavaScript here will be loaded for users of the Citizen skin */

	/* Indice d'archivio: dove esiste il rail di Citizen (pagine con sezioni) lo		/* Indice d'archivio:
	mettiamo lì, SOPRA la TOC nativa (che riusiamo); dove il rail non esiste		1) dove esiste il rail di Citizen (pagine con sezioni) lo mettiamo lì, SOPRA
	~~(pagine senza sezioni)~~ l'indice resta una colonna flottante (.ai-rail) e non		la TOC nativa (che riusiamo); dove il rail non esiste l'indice resta una
	~~sparisce mai. Sulla Dashboard~~ l'indice ~~non ha~~ .~~ai-rail~~ (~~è nel suo layout~~),		colonna flottante (.ai-rail) e non sparisce.
	~~quindi questo hook non lo tocca~~. */		2) il box è collassabile (toggle "Indice"): su pagine con TOC lunga si chiude
			l'indice e si tiene la TOC. La testata (link alla Dashboard) resta sempre. */
	mw.hook( 'wikipage.content' ).add( function () {		mw.hook( 'wikipage.content' ).add( function () {
	var box = document.querySelector( '.archivio-indice.ai-rail' );		var box = document.querySelector( '.archivio-indice.ai-rail' );
	if ( !box ) {		if ( box ) {
	~~return~~;		var rail =
			document.querySelector( '.citizen-page-sidebar' ) \|\|
			document.querySelector( '.citizen-sidebar' ) \|\|
			document.querySelector( '.citizen-toc-container' );
			if ( rail ) {
			box.classList.remove( 'ai-rail' );
			box.classList.add( 'ai-in-rail' );
			rail.prepend( box );
			}
	}		}
	~~var rail =~~
	document.~~querySelector~~( '.~~citizen~~-~~page~~-~~sidebar~~' ) \|\|		// Toggle apri/chiudi
	~~document~~.~~querySelector( '~~.~~citizen-sidebar'~~ ) \|\|		document.querySelectorAll( '.archivio-indice .ai-toggle' ).forEach( function ( t ) {
	~~document~~.~~querySelector(~~ '~~.citizen-toc-container~~' );		if ( t.dataset.bound ) {
	if ( ~~!rail~~ ) {		return;
	~~return; // niente rail: l~~'indice ~~resta flottante nel contenuto~~		}
	}		t.dataset.bound = '1';
	~~box~~.classList.~~remove~~( 'ai-~~rail~~' ); ~~// via il float~~		var toggle = function () {
	~~box~~.~~classList~~.~~add~~( '~~ai-in-rail~~' );		t.closest( '.archivio-indice' ).classList.toggle( 'ai-collapsed' );
	~~rail.prepend( box~~ ); ~~// indice sopra la TOC nativa~~		};
			t.addEventListener( 'click', toggle );
			t.addEventListener( 'keydown', function ( e ) {
			if ( e.key === 'Enter' \|\| e.key === ' ' ) {
			e.preventDefault();
			toggle();
			}
			} );
			} );
	} );		} );

Cranio is thinking: Indice: nel rail sopra la TOC nativa (riuso TOC); float dove il rail non c'è

2026-06-15T20:31:50Z

Indice: nel rail sopra la TOC nativa (riuso TOC); float dove il rail non c'è

← Older revision		Revision as of 20:31, 15 June 2026
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Citizen skin */		/* All JavaScript here will be loaded for users of the Citizen skin */

	mw.hook('wikipage.content').add(function (~~$content~~) {		/* Indice d'archivio: dove esiste il rail di Citizen (pagine con sezioni) lo
			mettiamo lì, SOPRA la TOC nativa (che riusiamo); dove il rail non esiste
	~~// 1) trova il box StatoArchivio nel contenuto~~		(pagine senza sezioni) l'indice resta una colonna flottante (.ai-rail) e non
	~~const~~ box = ~~$content~~.~~find~~('~~[data~~-~~stato~~-~~archivio="1"]~~'~~).first(~~);		sparisce mai. Sulla Dashboard l'indice non ha .ai-rail (è nel suo layout),
	if (!box~~.length~~) return;		quindi questo hook non lo tocca. */
			mw.hook( 'wikipage.content' ).add( function () {
	~~// 2) trova la sidebar/~~rail ~~di Citizen~~		var box = document.querySelector( '.archivio-indice.ai-rail' );
	~~const sidebar~~ =		if ( !box ) {
	document.querySelector('.citizen-page-sidebar') \|\|		return;
	document.querySelector('.citizen-sidebar') \|\|		}
	document.querySelector('.citizen-toc-container');		var rail =
			document.querySelector( '.citizen-page-sidebar' ) \|\|
	if (!~~sidebar~~) return;		document.querySelector( '.citizen-sidebar' ) \|\|
			document.querySelector( '.citizen-toc-container' );
	// ~~3) inserisci il box come PRIMO widget del~~ rail		if ( !rail ) {
	~~sidebar~~.~~prepend~~(~~box[0]~~);		return; // niente rail: l'indice resta flottante nel contenuto
			}
	// ~~4) spacing coerente con gli altri widget~~		box.classList.remove( 'ai-rail' ); // via il float
	box~~[0]~~.~~style~~.~~marginBottom =~~ '~~1rem~~';		box.classList.add( 'ai-in-rail' );
	});		rail.prepend( box ); // indice sopra la TOC nativa
			} );

Cranio is thinking at 23:09, 29 December 2025

2025-12-29T23:09:09Z

← Older revision		Revision as of 23:09, 29 December 2025
Line 17:		Line 17:
	// 3) inserisci il box come PRIMO widget del rail		// 3) inserisci il box come PRIMO widget del rail
	sidebar.prepend(box[0]);		sidebar.prepend(box[0]);
	~~box[0].style.visibility = 'visible';~~
	// 4) spacing coerente con gli altri widget		// 4) spacing coerente con gli altri widget
	box[0].style.marginBottom = '1rem';		box[0].style.marginBottom = '1rem';
	});		});

Cranio is thinking at 23:07, 29 December 2025

2025-12-29T23:07:04Z

← Older revision		Revision as of 23:07, 29 December 2025
Line 17:		Line 17:
	// 3) inserisci il box come PRIMO widget del rail		// 3) inserisci il box come PRIMO widget del rail
	sidebar.prepend(box[0]);		sidebar.prepend(box[0]);
			box[0].style.visibility = 'visible';
	// 4) spacing coerente con gli altri widget		// 4) spacing coerente con gli altri widget
	box[0].style.marginBottom = '1rem';		box[0].style.marginBottom = '1rem';
	});		});

Cranio is thinking: Created page with "/* All JavaScript here will be loaded for users of the Citizen skin */ mw.hook('wikipage.content').add(function ($content) { // 1) trova il box StatoArchivio nel contenuto const box = $content.find('[data-stato-archivio="1"]').first(); if (!box.length) return; // 2) trova la sidebar/rail di Citizen const sidebar = document.querySelector('.citizen-page-sidebar') || document.querySelector('.citizen-sidebar') || document.querySelector('.citizen-toc-..."

2025-12-29T21:38:22Z

Created page with "All JavaScript here will be loaded for users of the Citizen skin: mw.hook('wikipage.content').add(function ($content) { // 1) trova il box StatoArchivio nel contenuto const box = $content.find('[data-stato-archivio="1"]').first(); if (!box.length) return; // 2) trova la sidebar/rail di Citizen const sidebar = document.querySelector('.citizen-page-sidebar') || document.querySelector('.citizen-sidebar') || document.querySelector('.citizen-toc-..."

New page

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

mw.hook('wikipage.content').add(function ($content) {

// 1) trova il box StatoArchivio nel contenuto
const box = $content.find('[data-stato-archivio="1"]').first();
if (!box.length) return;

// 2) trova la sidebar/rail di Citizen
const sidebar =
document.querySelector('.citizen-page-sidebar') ||
document.querySelector('.citizen-sidebar') ||
document.querySelector('.citizen-toc-container');

if (!sidebar) return;

// 3) inserisci il box come PRIMO widget del rail
sidebar.prepend(box[0]);

// 4) spacing coerente con gli altri widget
box[0].style.marginBottom = '1rem';
});