User:PleaseStand/sidebarToggle.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * Hide Vector sidebar
 * http://en.wikipedia.org/wiki/User:PleaseStand/Hide_Vector_sidebar
 *
 * Originally imported from revision 365211954 as of 2010-06-01 from
 * [[User:Nihiltres/nothingthree.js]]. It has had some modification from that
 * version to isolate it within the script collection and further improve it.
 *
 * Copyright 2010 Wikipedia user Nihiltres
 * Copyright 2010-2012 Wikipedia user PleaseStand
 *
 * Licensed under the Creative Commons Attribution-Share-Alike 3.0 Unported License and
 * the GNU Free Documentation License (unversioned); pick the license(s) of your choice.
 *
 * http://creativecommons.org/licenses/by-sa/3.0/
 * http://www.gnu.org/copyleft/fdl.html
 */

mw.loader.load( '//en.wikipedia.org/w/index.php?title=User:PleaseStand/sidebarToggle.css&action=raw&ctype=text/css', 'text/css' );

(function( $, undefined ) {

"use strict";

/**
 * Messages displayed by this script (in English).
 * Any translations (see below) replace these at runtime.
 */
var msg = {
	toggleTabText: 'Toggle sidebar',
	toggleTabTitle: 'Hide or show the sidebar'
};

/**
 * Translations for messages displayed by this script.
 * To have your translations added, please contact this script's maintainer.
 */
var translations = {
	fa: {
		toggleTabText: 'تغییر وضعیت نوار سمت راست',
		toggleTabTitle: 'مخفی یا نمایش نوار سمت راست',
	}
};

/**
 * The text direction of the page.
 */
var dir = 'ltr';

/**
 * The current (or default) state of the sidebar.
 */
var state = 'collapsed';

/**
 * A cache of jQuery objects.
 */
var nodes = {};

/**
 * Equivalent CSS property names for RTL pages.
 */
var cssRTLProps = {
	'left': 'right',
	'margin-left': 'margin-right'
};

/**
 * Changes the CSS property name as appropriate for the page's text direction.
 * @param prop {string} The CSS property name to be changed.
 */
function flipCSSProp(prop) {
	if ( dir === 'rtl' && cssRTLProps[prop] ) {
		return cssRTLProps[prop];
	}
	return prop;
}

/**
 * Loads the current state from sessionStorage (preferred) or localStorage.
 * If there is no item in storage, this function does nothing.
 */
function loadState() {
	state = ( window.sessionStorage && sessionStorage.getItem( 'sidebarToggle' ) ) ||
	        ( window.localStorage && localStorage.getItem( 'sidebarToggle' ) ) ||
	        state;
}

/**
 * Saves the current state in both sessionStorage and localStorage.
 */
function saveState() {

	if ( window.sessionStorage ) {
		sessionStorage.setItem( 'sidebarToggle', state );
	}

	if ( window.localStorage ) {
		localStorage.setItem( 'sidebarToggle', state );
	}

}

/**
 * Reacts to a click on the "Toggle sidebar" button.
 */
function toggle() {

	if ( state === 'collapsed' ) {
		expand( 400 );
	} else {
		collapse( 400 );
	}

	saveState();

}

/**
 * Collapses the sidebar.
 * @param duration {mixed} Animation duration passed to jQuery.
 */
function collapse( duration ) {

	var animations = {
		mwPanelIE: {},
		mwPanelNonIE: {opacity: 0},
		notSidebar: {},
		leftNavigation: {}
	};

	animations.mwPanelIE[ flipCSSProp( 'left' ) ] = '-10em';
	animations.mwPanelNonIE[ flipCSSProp( 'left' ) ] = '-10em';
	animations.notSidebar[ flipCSSProp( 'margin-left' ) ] = 0;
	animations.leftNavigation[ flipCSSProp( 'left' ) ] = '1em';

	nodes.$mwPanel.animate( animations.mwPanelNonIE, duration, function() {
		nodes.$mwPanel.css( 'visibility', 'hidden' );
	});

	nodes.$notSidebar.animate( animations.notSidebar, duration, function() {
		nodes.$content.css( 'background-image', 'none' );
	});

	nodes.$leftNavigation.animate( animations.leftNavigation, duration);

	state = 'collapsed';

}

/**
 * Expands the sidebar.
 * @param duration {mixed} Animation duration passed to jQuery.
 */
function expand( duration ) {

	nodes.$mwPanel.css( 'visibility', '' );

	var animations = {
		mwPanelIE: {},
		mwPanelNonIE: {opacity: 1},
		notSidebar: {},
		leftNavigation: {}
	};

	animations.mwPanelIE[ flipCSSProp( 'left' ) ] = '-0.01em';
	animations.mwPanelNonIE[ flipCSSProp( 'left' ) ] = 0;
	animations.notSidebar[ flipCSSProp( 'margin-left' ) ] = '10em';
	animations.leftNavigation[ flipCSSProp( 'left' ) ] = '10em';

	nodes.$mwPanel.animate( animations.mwPanelNonIE, duration );

	nodes.$content.css( 'background-image', '' );
	nodes.$notSidebar.animate( animations.notSidebar, duration );
	nodes.$leftNavigation.animate( animations.leftNavigation, duration );

	state = 'expanded';

}

/**
 * Called when the DOM is ready for manipulation.
 */
function ready() {

	// Populate jQuery object cache.
	nodes.$mwPanel = $( '#mw-panel' );
	nodes.$content = $( '#content' );
	nodes.$notSidebar = $( '#content, #mw-head-base, #footer' );
	nodes.$leftNavigation = $( '#left-navigation' );

	// Show the toggle tab.
	$( '<a id="ca-sidebar"></a>' )
		.prop( 'accessKey', 'a' )
		.prop( 'title', msg.toggleTabTitle )
		.text( msg.toggleTabText )
		.click( toggle )
		.insertBefore( '#p-personal' );

	// Respect the saved state.
	if ( state === 'collapsed' ) {
		collapse( 0 );
	}

}

/**
 * Initialization code
 */
function main() {

	if ( mw.config.get( 'skin' ) !== 'vector' ) {
		return;
	}

	// Load translations and saved state.
	dir = document.documentElement.dir;
	$.extend( msg, translations[document.documentElement.lang] );
	loadState();

	$( ready );

}

mw.loader.using( 'jquery.client', main );

})( jQuery );