MediaWiki:Gadget-CitizenMainPage.js

(function() {
    var toggleCitizenLayout = function(enable) {
        var api = new mw.Api();
        api.saveOption('UseCitizenMainPage', enable ? '1' : '0').done(function() {
            mw.notify('Main page layout preference updated. Refresh the page to see changes.');
        }).fail(function() {
            mw.notify('Failed to update preference. Please try again.', {type: 'error'});
        });
    };

    $(function() {
        var $body = $('body');
        if ($body.hasClass('page-Main_Page') || $body.hasClass('page-MediaWiki:Mainpage')) {
            var currentState = mw.user.options.get('UseCitizenMainPage') === '1';
            var $toggle = $('<div>')
                .css({
                    position: 'fixed',
                    top: '10px',
                    right: '10px',
                    zIndex: 1000,
                    background: 'white',
                    padding: '5px',
                    border: '1px solid black'
                })
                .append(
                    $('<label>')
                        .text('Use Citizen Layout ')
                        .append(
                            $('<input>')
                                .attr({
                                    type: 'checkbox',
                                    checked: currentState
                                })
                                .on('change', function() {
                                    toggleCitizenLayout(this.checked);
                                })
                        )
                );
            $body.append($toggle);
        }
    });
})();