MediaWiki:Citizen.js - Revision history

Forte: Correcting conditional mw.config.get('wgIsMainPage') already returns boolean

2025-09-05T02:07:15Z

Correcting conditional mw.config.get('wgIsMainPage') already returns boolean

← Older revision		Revision as of 02:07, 5 September 2025
Line 6:		Line 6:
	console.log("loaded utils");		console.log("loaded utils");
	/* Trigger search box when click on the fake search button on main page */		/* Trigger search box when click on the fake search button on main page */
	//if ( mw.config.get( 'wgIsMainPage' ) ~~=== true~~ ) {		if (mw.config.get( 'wgIsMainPage')) {
	document.getElementById( 'homepage-search' ).addEventListener( 'click', function() {		document.getElementById( 'homepage-search' ).addEventListener( 'click', function() {
	var search = document.getElementById( 'citizen-search-details' );		var search = document.getElementById( 'citizen-search-details' );
	search.open = true;		search.open = true;
	} );		} );
	//}		}
	} );		} );

CriticalResist: had to port sepia to common.js because citizen.js only applies to homepage

2025-06-08T07:36:40Z

had to port sepia to common.js because citizen.js only applies to homepage

← Older revision		Revision as of 07:36, 8 June 2025
Line 13:		Line 13:
	//}		//}
	} );		} );

	~~//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS~~
	~~mw.loader.using('mediawiki.util').then(function () {~~
	~~console.log('Sepia script loaded');~~

	~~function activateSepiaMode() {~~
	~~const sepiaInput = document.getElementById('skin-client-pref-skin-theme-value-sepia');~~
	~~if (!sepiaInput) return;~~

	~~sepiaInput.addEventListener('change', function () {~~
	~~if (sepiaInput.checked) {~~
	~~const html = document.documentElement;~~
	~~html.classList.remove('skin-citizen-light', 'skin-citizen-dark', 'skin-citizen-auto');~~
	~~html.classList.add('skin-citizen-sepia');~~
	~~console.log('Sepia theme class applied to <html>');~~
	}
	~~});~~

	~~// Apply sepia immediately if already selected~~
	~~if (sepiaInput.checked) {~~
	~~document.documentElement.classList.add('skin-citizen-sepia');~~
	}
	}

	~~function addSepiaOption() {~~
	~~const container = document.querySelector('#skin-client-prefs-skin-theme form');~~
	~~if (!container) {~~
	~~console.log('Theme preference form not found. Retrying...');~~
	~~setTimeout(addSepiaOption, 300);~~
	~~return;~~
	}

	~~const radios = container.querySelectorAll('.citizen-client-prefs-radio');~~
	~~if (radios.length === 0) {~~
	~~console.log('No theme radio buttons found.');~~
	~~return;~~
	}

	~~if (document.querySelector('#skin-client-pref-skin-theme-value-sepia')) {~~
	~~console.log('Sepia option already added.');~~
	~~activateSepiaMode(); // Still activate listener just in case~~
	~~return;~~
	}

	~~const sepiaRadio = radios[0].cloneNode(true);~~
	~~const input = sepiaRadio.querySelector('input');~~
	~~const label = sepiaRadio.querySelector('label');~~

	~~input.id = 'skin-client-pref-skin-theme-value-sepia';~~
	~~input.value = 'sepia';~~
	~~input.dataset.eventName = 'skin-client-pref-skin-theme-value-sepia';~~
	~~input.checked = false;~~

	~~label.setAttribute('for', input.id);~~
	~~label.textContent = 'Sepia';~~

	~~container.appendChild(sepiaRadio);~~
	~~console.log('Sepia theme option added.');~~

	~~activateSepiaMode();~~
	}

	~~// Start the process~~
	~~addSepiaOption();~~
	~~});~~

CriticalResist at 07:26, 8 June 2025

2025-06-08T07:26:33Z

← Older revision		Revision as of 07:26, 8 June 2025
Line 16:		Line 16:
	//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS		//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS
	mw.loader.using('mediawiki.util').then(function () {		mw.loader.using('mediawiki.util').then(function () {
	console.log('~~Citizen.js~~ script loaded');		console.log('Sepia script loaded');

			function activateSepiaMode() {
			const sepiaInput = document.getElementById('skin-client-pref-skin-theme-value-sepia');
			if (!sepiaInput) return;

			sepiaInput.addEventListener('change', function () {
			if (sepiaInput.checked) {
			const html = document.documentElement;
			html.classList.remove('skin-citizen-light', 'skin-citizen-dark', 'skin-citizen-auto');
			html.classList.add('skin-citizen-sepia');
			console.log('Sepia theme class applied to <html>');
			}
			});

			// Apply sepia immediately if already selected
			if (sepiaInput.checked) {
			document.documentElement.classList.add('skin-citizen-sepia');
			}
			}

	function addSepiaOption() {		function addSepiaOption() {
	const container = document.querySelector('#skin-client-prefs-skin-theme form');		const container = document.querySelector('#skin-client-prefs-skin-theme form');
	if (!container) {		if (!container) {
	console.log('Theme preference form not found ~~yet~~. Retrying...');		console.log('Theme preference form not found. Retrying...');
	setTimeout(addSepiaOption, 300); ~~// Retry after a short delay~~		setTimeout(addSepiaOption, 300);
	return;		return;
	}		}
Line 32:		Line 51:
	}		}

	~~// Prevent adding it multiple times~~
	if (document.querySelector('#skin-client-pref-skin-theme-value-sepia')) {		if (document.querySelector('#skin-client-pref-skin-theme-value-sepia')) {
	console.log('Sepia option already added.');		console.log('Sepia option already added.');
			activateSepiaMode(); // Still activate listener just in case
	return;		return;
	}		}
Line 52:		Line 71:
	container.appendChild(sepiaRadio);		container.appendChild(sepiaRadio);
	console.log('Sepia theme option added.');		console.log('Sepia theme option added.');

			activateSepiaMode();
	}		}

			// Start the process
	addSepiaOption();		addSepiaOption();
	});		});

CriticalResist at 07:20, 8 June 2025

2025-06-08T07:20:51Z

← Older revision		Revision as of 07:20, 8 June 2025
Line 15:		Line 15:

	//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS		//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS
	mw.loader.using('mediawiki.util').~~done~~(function () {		mw.loader.using('mediawiki.util').then(function () {
	console.log('Citizen.js script loaded');		console.log('Citizen.js script loaded');

CriticalResist at 07:19, 8 June 2025

2025-06-08T07:19:10Z

← Older revision		Revision as of 07:19, 8 June 2025
Line 15:		Line 15:

	//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS		//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS
	mw.loader.using('mediawiki.util').~~then~~(function () {		mw.loader.using('mediawiki.util').done(function () {
	console.log('Citizen.js script loaded');		console.log('Citizen.js script loaded');

CriticalResist at 07:16, 8 June 2025

2025-06-08T07:16:50Z

← Older revision		Revision as of 07:16, 8 June 2025
Line 15:		Line 15:

	//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS		//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS
			mw.loader.using('mediawiki.util').then(function () {
			console.log('Citizen.js script loaded');

			function addSepiaOption() {
			const container = document.querySelector('#skin-client-prefs-skin-theme form');
			if (!container) {
			console.log('Theme preference form not found yet. Retrying...');
			setTimeout(addSepiaOption, 300); // Retry after a short delay
			return;
			}

			const radios = container.querySelectorAll('.citizen-client-prefs-radio');
			if (radios.length === 0) {
			console.log('No theme radio buttons found.');
			return;
			}

			// Prevent adding it multiple times
			if (document.querySelector('#skin-client-pref-skin-theme-value-sepia')) {
			console.log('Sepia option already added.');
			return;
			}

			const sepiaRadio = radios[0].cloneNode(true);
			const input = sepiaRadio.querySelector('input');
			const label = sepiaRadio.querySelector('label');

			input.id = 'skin-client-pref-skin-theme-value-sepia';
			input.value = 'sepia';
			input.dataset.eventName = 'skin-client-pref-skin-theme-value-sepia';
			input.checked = false;

			label.setAttribute('for', input.id);
			label.textContent = 'Sepia';

			container.appendChild(sepiaRadio);
			console.log('Sepia theme option added.');
			}

			addSepiaOption();
			});

CriticalResist at 07:14, 8 June 2025

2025-06-08T07:14:14Z

← Older revision		Revision as of 07:14, 8 June 2025
Line 15:		Line 15:

	//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS		//Adding sepia mode to theme selector in gear icon, WORK IN PROGRESS
	~~mw.loader.using('mediawiki.util').then(function () {~~
	~~document.addEventListener('DOMContentLoaded', function () {~~
	~~const form = document.querySelector('form');~~
	~~if (!form) return;~~

	~~const radios = form.querySelectorAll('.citizen-client-prefs-radio');~~
	~~if (radios.length === 0) return;~~

	~~// Clone the 'Light' radio button group as a base~~
	~~const sepiaRadio = radios[0].cloneNode(true);~~

	~~// Modify the cloned node to be the Sepia option~~
	~~const input = sepiaRadio.querySelector('input');~~
	~~const label = sepiaRadio.querySelector('label');~~

	~~input.id = 'skin-client-pref-skin-theme-value-sepia';~~
	~~input.value = 'sepia';~~
	~~input.dataset.eventName = 'skin-client-pref-skin-theme-value-sepia';~~
	~~input.checked = false;~~

	~~label.setAttribute('for', input.id);~~
	~~label.textContent = 'Sepia';~~

	~~// Append the new Sepia option to the form~~
	~~form.appendChild(sepiaRadio);~~
	~~});~~
	~~});~~

CriticalResist at 07:11, 8 June 2025

2025-06-08T07:11:35Z

@@ Line 2: / Line 2: @@
 "use strict";
-//New homepage search bar
+//New homepage search bar trigger on slash press
 mw.loader.using( [ 'mediawiki.util' ] ).done( function() {
 	console.log("loaded utils");
@@ Line 13: / Line 13: @@
 	//}
 } );

CriticalResist: removed obsolete code

2024-11-01T15:20:13Z

removed obsolete code

@@ Line 1: / Line 1: @@
 /* All JavaScript here will be loaded for users of the Citizen skin */
 "use strict";
 //New homepage search bar

CriticalResist at 11:44, 4 October 2024

2024-10-04T11:44:36Z

← Older revision		Revision as of 11:44, 4 October 2024
Line 54:		Line 54:

	//New homepage search bar		//New homepage search bar
	~~//New homepage search bar~~		mw.loader.using( [ 'mediawiki.util' ] ).done( function() {
	~~//New homepage search bar~~		console.log("loaded utils");
	mw.loader.using(['mediawiki.util']).done(function () {		/* Trigger search box when click on the fake search button on main page */
	console.log("loaded utils");		//if ( mw.config.get( 'wgIsMainPage' ) === true ) {
			document.getElementById( 'homepage-search' ).addEventListener( 'click', function() {
	~~var searchButton~~ = document.getElementById('homepage-search');		var search = document.getElementById( 'citizen-search-details' );
			search.open = true;
	~~// Define the function to open the search details~~		} );
	~~var openSearch =~~ function() {		//}
	var search = document.getElementById('citizen-search-details');		} );
	search.open = true;
	};

	~~if (searchButton) {~~
	~~// Check if the device supports touch events~~
	~~if ('ontouchstart' in window) {~~
	~~// Use touchstart for touch devices~~
	~~searchButton.addEventListener('touchstart', openSearch~~);
	~~} else {~~
	// ~~Use click for non-touch devices (desktop)~~
	~~searchButton.addEventListener('click', openSearch);~~
	}
	}
	});