User:Arthurfragoso/vector-max-width-toggle.js

/* Creates a width toggle to the new vector layout.

This code was improved on the User:Jdlrobson/vector-max-width-toggle.js version.

Also add this to your CSS:

.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container, .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container { margin-left: 11.5em; } $(function{   var lastValue;    try {        lastValue = localStorage.getItem('max-width-on') || '0';    } catch (e) {        lastValue = '0';    }

if (lastValue === '1') { $(document.body).toggleClass('skin-vector-max-width'); }

var originalMaxWidth = $('.mw-content-container').css('max-width'); var originalPageMaxWidth = $('.mw-page-container').css('max-width'); var originalWorkspaceMaxWidth = $('.mw-workspace-container').css('max-width');

var $switcher = $(' ') .on('click', function {           $(document.body).toggleClass('skin-vector-max-width');            localStorage.setItem('max-width-on', lastValue === '0' ? '1' : '0');           var currentMaxWidth = $('.mw-content-container').css('max-width')            var currentPageMaxWidth = $('.mw-page-container').css('max-width')            var currentWorkspaceMaxWidth = $('.mw-workspace-container').css('max-width')            $('.mw-content-container').css('max-width', currentMaxWidth === 'none' ? originalMaxWidth : 'none')           $('.mw-page-container').css('max-width', currentPageMaxWidth === 'none' ? originalPageMaxWidth : 'none')           $('.mw-workspace-container').css('max-width', currentWorkspaceMaxWidth === 'none' ? originalWorkspaceMaxWidth : 'none')       } ).prependTo('#content');

$('#content').css('position', 'relative');

// no click mode $('.vector-menu-checkbox').on('mouseover', function ( ev ) {

$('.vector-menu-checkbox').prop('checked', false); ev.target.checked = true; });

$('.vector-menu:not(.vector-menu-dropdown)').on('mouseover', function {        $('.vector-menu-checkbox').prop('checked', false);    }); });