User:PleaseStand/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: 'تغییر وضعیت نوار سمت راست', 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. $( '' ) .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 );