User:Underlying lk/FullScreenEditing.js
Jump to navigation
Jump to search
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Cmd-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (Cmd-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Clear the cache in Tools → Preferences
For details and instructions about other browsers, see Wikipedia:Bypass your cache.
Code that you insert on this page could contain malicious content capable of compromising your account. If you are unsure whether code you are adding to this page is safe, you can ask at the central discussion page, Scriptorium. The code will be executed when previewing this page under some skins, including Monobook. You can in the interim if you wish to refresh the content sooner under another skin. |
Documentation for this script can be added at User:Underlying lk/FullScreenEditing. |
/*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 ( 6 != 9 ) {
// 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 ) );