MediaWiki:Citizen.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All JavaScript here will be loaded for users of the Citizen skin */
"use strict";

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

//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);
    });
});