MediaWiki:Gadget-sidebarToggle.js

/*!
* 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: "Hide toggleTabText ",
		toggleTabTitle: "toggleTabTitle",
	}
};
 
/**
* Whether the web browser is Internet Explorer before version 9.
*/
var isOldIE = false;
 
/**
* 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";
 
	if ( isOldIE ) {
		nodes.$mwPanel.animate( animations.mwPanelIE, duration, function() {
			nodes.$mwPanel.css( "visibility", "hidden");
		});
	} else {
		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";
 
	if ( isOldIE ) {
		nodes.$mwPanel.animate( animations.mwPanelIE, duration, function () {
			nodes.$mwPanel.css( flipCSSProp("left"), "0em" );
		});
	} else {
		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( "title", msg.toggleTabTitle )
		.text( msg.toggleTabText )
		.click( toggle )
		.insertAfter("#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();
 
	// Detect Internet Explorer <= 8
	var profile = $.client.profile();
	isOldIE = ( profile.name === "msie" && profile.versionNumber < 9 );
 
	$(ready);
 
}
 
mw.loader.using( "jquery.client", main );
 
})( jQuery );