MediaWiki:Gadget-edit-form-plugins.js

// jQuery Alert Dialogs Plugin
// Version 1.1
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// 14 May 2009
// Visit http://abeautifulsite.net/notebook/87 for more information
// This plugin is dual-licensed under the GNU General Public License and the MIT License and
// is copyright 2008 A Beautiful Site, LLC.

// Przeróbki: [[User:Peter Bowman]]

$.alerts = ( function() {
	// Private members
	
	var $overlay, $container, $title, $content, $message, $panel, $prompt, $ok, $cancel;
	
	$overlay = $( '<div>' ).attr( 'id', 'popup_overlay' );
	
	$title = $( '<h1>' ).attr( 'id', 'popup_title' );
	$content = $( '<div>' ).attr( 'id', 'popup_content' );
	$message = $( '<div>' ).attr( 'id', 'popup_message' );
	$panel = $( '<div>' ).attr( 'id', 'popup_panel' );
	
	$container = $( '<div>' )
		.attr( 'id', 'popup_container' )
		.append(
			$title,
			$content.append(
				$message,
				$panel
			)
		);
	
	$prompt = $( '<input>' ).attr( {
		type:    'text',
		id:      'popup_prompt',
		'class': 'keyboardable'
	} );	
	
	$ok = $( '<input>' ).attr( {
		type: 'button',
		id:   'popup_ok'
	} );
	
	$cancel = $( '<input>' ).attr( {
		type: 'button',
		id:   'popup_cancel'
	} );
	
	// Private methods
	
	function initialize() {
		if ( $.alerts.init ) {
			return;
		}
		
		$ok.attr( 'value', '  ' + EStr.OK + '  ' );
		$cancel.attr( 'value', '  ' + EStr.CANCEL + '  ' );
		
		$.alerts.init = true;
	}
	
	function showAlert( title, msg, value, type, callback ) {
		hideAlert();
		overlay( 'show' );
				
		$title.text( title );
		
		$prompt.detach();
		$ok.detach().off( 'click keyup' );
		$cancel.detach().off( 'click keyup' );
		
		$message
			.text( msg )
			.html( $message.text().replace( /\n/g, '<br>' ) );
		
		$content.attr( 'class', type );
		$container.attr( 'class', type );
		$overlay.attr( 'class', type );
		
		$( 'body' ).append( $container );
		
		window.ed_dbg_containerwidth1 = $container.css( 'width' );
		window.ed_dbg_container = $container.html();
		
		$container
			.removeAttr( 'style' )
			.css( 'width', $container.outerWidth() );
			
		window.ed_dbg_containerwidth2 = $container.css( 'width' );
		
		reposition();
		maintainPosition( true );
		
		switch ( type ) {
			case 'alert':
				$panel.append( $ok );
				
				$ok.on( 'click', function() {
					hideAlert();
					callback( true );
					return false;
				} )
				.trigger( 'focus' )
				.on( 'keyup', function( e ) {
					if ( e.keyCode === 13 || e.keyCode === 27 ) {
						$ok.trigger( 'click' );
						return false;
					}
				} );
				
				break;
			case 'confirm':
				$panel.append( $ok, ' ', $cancel );
				
				$ok.on( 'click', function() {
					hideAlert();
					callback( true );
					return false;
				} );
				
				$cancel.on( 'click', function() {
					hideAlert();
					callback( false );
					return false;
				} );
				
				$ok.trigger( 'focus' )
				.add( $cancel ).on( 'keyup', function( e ) {
					if ( e.keyCode === 13 ) {
						$ok.trigger( 'click' );
					}
					
					if ( e.keyCode === 27 ) {
						$cancel.trigger( 'click' );
						return false;
					}
				} );
				
				break;
			case 'prompt':
				$message.append( $( '<br>' ), $prompt );
				$panel.append( $ok, ' ', $cancel );
				
				window.ed_dbg_promptwidth1 = $prompt.css( 'width' );
				
				$prompt
					.val( '' )
					.removeAttr( 'style' )
					.width( $message.width() )
					.off( 'keyup' );
				
				window.ed_dbg_promptwidth2 = $prompt.css( 'width' );
				
				$ok.on( 'click', function() {
					EKeyboard.hide();
					hideAlert();
					callback( $prompt.val() );
					return false;
				} );
				
				$cancel.on( 'click', function() {
					EKeyboard.hide();
					hideAlert();
					callback( null );
					return false;
				} );
				
				$prompt.on( 'keyup', function( e ) {
					if ( e.keyCode === 13 ) {
						$ok.trigger( 'click' );
					}
					
					if ( e.keyCode === 27 ) {
						$cancel.trigger( 'click' );
						return false;
					}
				} );
				
				if ( value ) {
					$prompt.val( value );
				}
				
				$prompt
					.keyboard()
					.trigger( 'focus' )
					.select();
				
				break;
			default:
				break;
		}
		
		return $message;
	}

	function hideAlert() {
		$container.detach();
		overlay( 'hide' );
		maintainPosition( false );
	}

	function overlay( status ) {
		switch ( status ) {
			case 'show':
				overlay( 'hide' );
				
				window.ed_dbg_documentheight1 = $( document ).height();
				
				$overlay.css( {
					height:     $( document ).height(),
					background: $.alerts.overlayColor,
					opacity:    $.alerts.overlayOpacity
				} );
				
				$( 'body' ).append( $overlay );
				window.ed_dbg_documentheight2 = $( document ).height();
				break;
			case 'hide':
				$overlay.detach();
				break;
			default:
				break;
		}
	}

	function reposition() {
		// https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollX
		var scrollY = ( window.pageYOffset !== undefined )
			? window.pageYOffset
			: ( document.documentElement || document.body.parentNode || document.body ).scrollTop;
		
		var scrollX = ( window.pageXOffset !== undefined )
			? window.pageXOffset
			: ( document.documentElement || document.body.parentNode || document.body ).scrollLeft;
		
		var top = (
				$( window ).height() / 2 -
				$container.outerHeight() / 2
			) + $.alerts.verticalOffset + scrollY;
		
		var left = (
				$( window ).width() / 2 -
				$container.outerWidth() / 2
			) + $.alerts.horizontalOffset + scrollX;
		
		window.ed_dbg_reposition = [
			scrollY, scrollX,
			$( window ).height() / 2, $( window ).width() / 2,
			$container.outerHeight() / 2, $container.outerWidth() / 2,
			top, left
		];
		
		top  = Math.max( 0, top );
		left = Math.max( 0, left );
		
		$container.css( {
			top:  top  + 'px',
			left: left + 'px'
		} );
		
		window.ed_dbg_documentheight3 = $( document ).height();
		$overlay.height( $( document ).height() );
		window.ed_dbg_documentheight4 = $( document ).height();
	}

	function maintainPosition( status ) {
		if ( $.alerts.repositionOnResize ) {
			switch ( status ) {
				case true:
					$( window ).on( 'resize', reposition );
					break;
				case false:
					$( window ).off( 'resize', reposition );
					break;
				default:
					break;
			}
		}
	}
	
	return {
		// Public members
		
		verticalOffset:     -75,    // vertical offset of the dialog from center screen, in pixels
		horizontalOffset:   0,      // horizontal offset of the dialog from center screen, in pixels/
		repositionOnResize: true,   // re-centers the dialog on window resize
		overlayOpacity:     0.2,    // transparency level of overlay
		overlayColor:       '#000', // base color of overlay
		init:               false,
		
		// Public methods
				
		alert: function( message, title, callback ) {
			initialize();
			
			if ( title === undefined ) {
				title = EStr.WARNING;
			}
			
			return showAlert( title, message, null, 'alert', function( result ) {
				if ( callback ) {
					callback( result );
				}
			} );
		},

		confirm: function( message, title, callback ) {
			initialize();
			
			if ( title === undefined ) {
				title = EStr.CONFIRMATION;
			}
			
			return showAlert( title, message, null, 'confirm', function( result ) {
				if ( callback ) {
					callback( result );
				}
			} );
		},

		prompt: function( message, value, title, callback ) {
			initialize();
			
			if ( title === undefined ) {
				title = EStr.QUESTION;
			}
			
			return showAlert( title, message, value, 'prompt', function( result ) {
				if ( callback ) {
					callback( result );
				}
			} );
		}
	};
} ) ();

// inspired by https://github.com/jaz303/jquery-grab-bag/raw/master/javascripts/jquery.autogrow-textarea.js
$.autoresize = {
	minHeight: 30,
	maxHeight: 500,
	offset: 10,
	
	$shadow: $( '<div>' )
		.css( {
			position: 'absolute',
			top:      -10000,
			left:     -10000,
			resize:   'none'
		} )
		.appendTo( document.body ),
	
	updateClosure: function( prevHeight ) {
		return function() {
			var $this = $( this );
			
			var val = $this.val()
				.replace( /[<>&]/g, 'w' )
				.replace( /\n$/, '<br/>&nbsp;' )
				.replace( /\n/g, '<br/>' );
			
			$.autoresize.$shadow.css( {
				width:      $this.width() -
					parseInt( $this.css( 'paddingLeft' ), 10 ) -
					parseInt( $this.css( 'paddingRight' ), 10 ),
				fontSize:   $this.css( 'fontSize' ),
				fontFamily: $this.css( 'fontFamily' ),
				lineHeight: $this.css( 'lineHeight' )
			} ).html( val );
			
			var nowHeight = Math.min(
				Math.max(
					$.autoresize.$shadow.height() + $.autoresize.offset,
					$.autoresize.minHeight
				),
				$.autoresize.maxHeight
			);
			
			if ( nowHeight !== prevHeight ) {
				$this.css( 'height', nowHeight );
				EKeyboard.updatePosition( $this );
				prevHeight = nowHeight;
			}
		};
	}
};

$.fn.autoresize = function() {
	this.filter( 'textarea' ).each( function() {
		var $this = $( this );
		
		if ( $this.data( 'autoresize' ) ) {
			$this
				.trigger( 'input' )
				.trigger( 'propertychange' );
			
			return true;
		}
		
		var prevHeight = 0;
		var update = $.autoresize.updateClosure( prevHeight );
		
		$this
			.on( 'input propertychange', update )
			.data( 'autoresize', true );
		
		update.apply( this );
	} );
	
	return this;
};

( function() {
	var shown   = false;
	var tooltip = $( '<div>' ).addClass( 'tooltip' );
	
	tooltip.css( {
		'position': 'absolute',
		'z-index':  '1000'
	} ).appendTo( $( 'body' ) );
	
	$.fn.showtip = function() {
		var yOffset, xOffset, pos;
		var $this = $( this );
		
		if ( !$this.data( 'tip' ) ) {
			return true;
		}
		
		tooltip.html( $this.data( 'tip' ) );
		
		yOffset = $this.hasClass( 'tipdown' )
			? -$this.outerHeight() - 3
			: tooltip.height() + 17;
		
		xOffset = ( tooltip.width() - 10 ) / 2 - $this.width() / 2;
		
		pos = $this.offset();
		
		tooltip.css( {
			top:  pos.top - yOffset,
			left: pos.left - xOffset
		} ).show();
		
		shown = true;
	};
	
	$.fn.hidetip = function() {
		tooltip.hide();
		shown = false;
	};
} ) ();

$.fn.reverse = [].reverse;

$.fn.keyboard = function() {
	var $this = $( this );
	
	$this.focus( function() {
		EKeyboard.updatePosition( $this );
	} );
	
	EKeyboard.updatePosition( $this );
	return this;
};