MediaWiki:Gadget-fullscreen-toggle.js

/*
 * Fullscreen toggle
 */
( function ( $, mw ) {
	if ( !document.forms['editform']
		|| ( mw.config.get( 'wgAction' ) !== 'edit' && mw.config.get( 'wgAction' ) !== 'submit' )
	) {
		return;
	}

	var isFullscreen = false;

	var icons = {
		expand: '//upload.wikimedia.org/wikipedia/commons/thumb/d/d8/OOjs_UI_icon_fullScreen.svg/20px-OOjs_UI_icon_fullScreen.svg.png',
		collapse: '//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/OOjs_UI_icon_exitFullscreen.svg/20px-OOjs_UI_icon_exitFullscreen.svg.png'
	};

	var storageKeys = {
		editOptionsCollapsed: 'fullscreenToggle-editOptionsCollapsed',
		narrowWidth: 'fullscreenToggle-narrowWidth'
	};

	function loadPref( key ) {
		try {
			return localStorage.getItem( key ) === 'true';
		} catch ( e ) {
			return false;
		}
	}

	function savePref( key, value ) {
		try {
			localStorage.setItem( key, value ? 'true' : 'false' );
		} catch ( e ) {}
	}

	mw.libs = mw.libs || {};

	mw.libs.fullscreenToggle = {
		click: function () {
			isFullscreen = !isFullscreen;
			$( document.body ).toggleClass( 'fullscreen-editor', isFullscreen );
			this.updateButton();
			this.updateEditOptionsToggle();
			return false;
		},

		updateButton: function () {
			var src = isFullscreen ? icons.collapse : icons.expand;

			$( '[rel=fullscreenToggle]' ).each( function () {
				if ( this.tagName === 'A' && $( this ).closest( '.toolbar, .wikiEditor-ui' ).length ) {
					$( this ).css( 'background-image', 'url(' + src + ')' );
				} else if ( this.tagName === 'IMG' ) {
					this.src = src;
				} else if ( this.tagName === 'A' ) {
					this.textContent = isFullscreen ? 'Exit Fullscreen' : 'Fullscreen';
				}
			} );
		},

		updateEditOptionsToggle: function () {
			var $editOptions = $( '.editOptions' );
			if ( !$editOptions.length ) {
				return;
			}

			if ( isFullscreen ) {
				if ( !$editOptions.children( '.editOptions-toggle' ).length ) {
					var isCollapsed = loadPref( storageKeys.editOptionsCollapsed );
					var isNarrow = loadPref( storageKeys.narrowWidth );

					/* Apply saved states */
					if ( isCollapsed ) {
						$editOptions.addClass( 'editOptions-collapsed' );
					}
					if ( isNarrow ) {
						$( '.mw-editform' ).addClass( 'fullscreen-narrow-width' );
					}

					var $toggleBar = $( '<div>' ).addClass( 'editOptions-toggle' );

					var $widthBtn = $( '<button>' )
						.addClass( 'editOptions-toggle-width' )
						.attr( 'type', 'button' )
						.attr( 'title', 'Toggle editor width' )
						.text( isNarrow ? '\u21D0\u21D2' : '\u21D4' )
						.click( function () {
							var narrow = $( '.mw-editform' ).toggleClass( 'fullscreen-narrow-width' )
								.hasClass( 'fullscreen-narrow-width' );
							$( this ).text( narrow ? '\u21D0\u21D2' : '\u21D4' );
							savePref( storageKeys.narrowWidth, narrow );
						} );

					var $collapseBtn = $( '<button>' )
						.addClass( 'editOptions-toggle-collapse' )
						.attr( 'type', 'button' )
						.attr( 'title', 'Toggle edit options' )
						.text( isCollapsed ? '\u25B2' : '\u25BC' )
						.click( function () {
							var collapsed = $editOptions.toggleClass( 'editOptions-collapsed' )
								.hasClass( 'editOptions-collapsed' );
							$( this ).text( collapsed ? '\u25B2' : '\u25BC' );
							savePref( storageKeys.editOptionsCollapsed, collapsed );
						} );

					$toggleBar.append( $widthBtn, $collapseBtn );
					$editOptions.prepend( $toggleBar );
				}
			} else {
				/* Remove toggle bar and restore states */
				$editOptions.removeClass( 'editOptions-collapsed' );
				$( '.mw-editform' ).removeClass( 'fullscreen-narrow-width' );
				$editOptions.children( '.editOptions-toggle' ).remove();
			}
		}
	};

	/* Allow Escape to exit fullscreen */
	$( document ).on( 'keydown', function ( e ) {
	    if ( e.which === 27 && isFullscreen ) {
	        mw.libs.fullscreenToggle.click();
	    }
	} );

	var label = 'Fullscreen';

	mw.loader.using( 'user.options', function () {
		if ( mw.user.options.get( 'usebetatoolbar' ) ) {
			mw.loader.using( 'ext.wikiEditor', function () {
				$( function () {
					$( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
						'section': 'main',
						'group': 'insert',
						'tools': {
							'fullscreenToggle': {
								'label': label,
								'type': 'button',
								'icon': icons.expand,
								'action': {
									'type': 'callback',
									'execute': function () { return mw.libs.fullscreenToggle.click(); }
								}
							}
						}
					} );
					$( '.tool[rel=fullscreenToggle] a, .tool-button[rel=fullscreenToggle]' )
						.attr( 'rel', 'fullscreenToggle' );
				} );
			} );
		} else if ( mw.user.options.get( 'showtoolbar' ) ) {
			mw.loader.using( 'mediawiki.action.edit', function () {
				mw.toolbar.addButton(
					icons.expand,
					label,
					'', '', '',
					'mw-customeditbutton-fullscreenToggle'
				);
				$( function () {
					$( '#mw-customeditbutton-fullscreenToggle' )
						.attr( 'rel', 'fullscreenToggle' )
						.click( function () {
							return mw.libs.fullscreenToggle.click();
						} );
				} );
			} );
		} else {
			$( function () {
				var b = $( '.editButtons' ),
					c = b.children().last(),
					a = $( '<a href="#">' + label + '</a>' );

				a.attr( 'rel', 'fullscreenToggle' );
				( c.is( 'span' ) ? c : b ).append(
					$( '.mw-editButtons-pipe-separator', b ).first().clone()
				);
				a.click( function () {
					return mw.libs.fullscreenToggle.click();
				} );
				b.append( a );
			} );
		}
	} );
} )( jQuery, mediaWiki );