MediaWiki:Gadget-PantallaCompleta.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', 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 ], 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 ) {
			$.when(	mw.loader.using( [ 'ext.wikiEditor', 'ext.proofreadpage.page'] ),	$.ready).then( function () {
				var buttonDetails = {
					type: 'button',
					icon: toolbarButtonImg,
					label: 'Edición a pantalla completa',
					action: { type: 'callback', execute: toggleFullScreenButton }
				};
				var button = {
					section: 'main',
					group: 'insert',
					tools: { 'fullscreenediting': buttonDetails }
				};
				console.log("adding button");
				console.log(button);
				$( "#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, .mw-editnotice",
			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" );
			$( "#prp-page-image-openseadragon-vertical").css( { "width": "100%", "height": "100%" } );
		} 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 ) );