User:Samwilson/FullScreenEditing.js

/*jshint boss:true*/ /*global $, mw*/

/** * This script adds a toolbar button for making the side-by-side proofreading interface fullscreen. */

( function ( mw, $ ) {

/**	 * From: https://commons.wikimedia.org/wiki/File:View-fullscreen.svg */	var toolbarButtonImg = '//upload.wikimedia.org/wikipedia/commons/thumb/d/dc/View-fullscreen.svg/22px-View-fullscreen.svg.png'; /**	 * The name of the cookie (wgCookiePrefix will be added). */	var cookieName = 'FullScreenEditing';

/**	 * The system messages required for this script. */	var sysMessages = [ 'fullscreenediting-button-label' ];

/**	 * The initialisation function, run on every load. Adds the activation * button to the toolbar if we're currently editing or previewing in the * Page namespace. */	function run { var isPage, useOldToolbar, useBetaToolbar, toolbarLib; mw.loader.using( 'user.options', $.ready ).then( function {			isEditing = ( mw.config.get( 'wgAction' ) === "edit" || mw.config.get( 'wgAction' ) === "submit" );			isPage = mw.config.get( 'wgCanonicalNamespace' ) === 'Page';			useOldToolbar = mw.user.options.get( 'showtoolbar' ) === 1;			useBetaToolbar = mw.user.options.get( 'usebetatoolbar' ) === 1;			if ( isEditing && isPage && ( useOldToolbar || useBetaToolbar ) ) {				toolbarLib = useBetaToolbar ? 'ext.wikiEditor' : 'mediawiki.toolbar';				mw.loader					.using( [ 'mediawiki.api', 'mediawiki.cookie', toolbarLib ], $.ready )					.then( function  { // Add the toolbar button. new mw.Api.loadMessagesIfMissing( sysMessages ).then( customizeToolbar( useBetaToolbar ) ); // Do the initial toggle, in case there's already a cookie. toggleFullScreen; } );			}		} );	}

/**	 * Add the button to the toolbar. This is called in run, and doesn't need to * check anything about whether we need to add the button. *	 * @param {boolean} useBeta Whether the WikiEditor toolbar should be used. */	function customizeToolbar( useBeta ) {

// Add old-style toolbar button. if ( ! useBeta && mw.toolbar ) { mw.toolbar.addButton( {				imageFile: toolbarButtonImg,				speedTip: mw.message( 'fullscreenediting-button-label' ),				imageId: "fullscreenediting-button"			} ); $( "img#fullscreenediting-button" ).on( 'click', toggleFullScreenButton ); }

// Add new-style WikiEditor toolbar button. if ( useBeta ) { $( document ).ready( function {				var buttonDetails = {					type: 'button',					icon: toolbarButtonImg,					labelMsg: 'fullscreenediting-button-label',					action: { type: 'callback', execute: toggleFullScreenButton }				};				var button = {					section: 'proofreadpage-tools',					group: 'other',					tools: { 'fullscreenediting': buttonDetails }				};				$( "#wpTextbox1" ).wikiEditor( 'addToToolbar', button );			} ); }	}

/** 	 * This is the button callback; it sets the cookie, and kicks off the * full-screen toggle. */	function toggleFullScreenButton { console.log('toggling fullscreen'); var mode = mw.cookie.get( cookieName ); if ( mode === "fullscreen" ) { mw.cookie.set( cookieName, "normal" ); } else { mw.cookie.set( cookieName, "fullscreen" ); }		toggleFullScreen; }	/**	 * Activate or de-activate the full-screen editing mode, based on what the * current value of the cookie is. The button sets the cookie before calling * this. */	function toggleFullScreen { var elementsToHide = "#mw-page-base, #mw-head-base, #mw-navigation, " + "#footer, .templatesUsed, .mw-newarticletext, #contentSub, " + "#jump-to-nav", leftTabs = $( "#p-namespaces" ), rightTabs = $( "#p-views" ), mode = mw.cookie.get( cookieName ); if ( mode === "fullscreen" ) { // Entering full-screen editing mode. $( elementsToHide ).hide; $( "#content" ).css( { margin: "0", padding: "0" } ); $( "#firstHeading" ).css( { "display": "inline-block", "margin": "0.4em 0 0 1em", "border": "0", "font-size": "1.4em" } ); $( "#firstHeading" ).after( leftTabs ); $( "#firstHeading" ).after( rightTabs ); rightTabs.css( "float", "right" ); $( ".editOptions" ).css( "margin", "0" ); $( ".prp-page-content" ).css( { "margin": "0 0 0 0.7em" } ); $( "#wikiPreview" ).css( "margin", "1em" ); } else { // Leave full-screen editing mode. $( elementsToHide ).show; $( "#content" ).css( { margin: "", padding: "" } ); $( "#firstHeading" ).css( { "display": "", "margin": "", "border": "", "font-size": "" } ); $( "#left-navigation" ).append( leftTabs ); $( "#right-navigation" ).append( rightTabs ); rightTabs.css( "float", "" ); $( ".editOptions" ).css( "margin", "" ); $( ".prp-page-content" ).css( { "margin": "" } ); }	}	run; }( mediaWiki, jQuery ) );