MediaWiki:Citizen.js

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