MediaWiki:WVDialog.js

// <nowiki>

/* ******************************************************
* 
* Feature, that opens a window and can contain some
* it works on desktop and mobile version
*
* Author: Roland Unger, adapted by Stefan Fussan
* Version: 1.0
*
******************************************************* */
var wvDialog = function() {
	
	/* ******************************************************
	* creates the dialog
	*
	* options:
	*
	******************************************************* */
	var create = function( options ) {
		var	classes = 'wv-dialog', 
			styles = '';
			
		// are additional classes given?
		if (options.dialogClass) classes += ' ' + options.dialogClass;
		classes = ' class="' + classes + '"';
		// are additional styles given?
		if (options.dialogStyle) styles += ' ' + options.dialogStyle;
		styles = ' style="' + styles + '"';
		
		// is an id given?
		var id = '';
		if (options.id) id = ' id="' + options.id + '"';
		var width = 'auto';
		
		// are width and height given?
		if (options.width) width = options.width;
		var height = 'auto';
		if (options.height) height = options.height;

		// processing the boolean options
		var draggable = true;
		if (typeof(options.draggable) === 'boolean') draggable = options.draggable;
		var resizable = true;
		if (typeof(options.resizable) === 'boolean') resizable = options.resizable;
		var closeOnEscape = true;
		if (typeof(options.closeOnEscape) === 'boolean') closeOnEscape = options.closeOnEscape;

		// creating the background layer to prevent the site from editing
		$('body').append( $('<div class="wv-dialog-background"></div>') );
		var aDialog = $('<div' + classes + id + styles + '></div>')
			.css('width', width)
			.css('height', height);
		$('body').append( aDialog );

		// creating the header
		if (options.title)
			appendHeader( aDialog, options.title, options.cancelTitle, draggable );
		if (closeOnEscape)
			$(document).keyup(function(e) { if ( e.keyCode === 27 ) destroy() } );
			
		// a standard body layer and a button pane at the bottom are provided when its created
		$('.wv-dialog')
			.append('<div id="wv-dialog-body-1" class="wv-dialog-body"></div>')
			.append('<div id="wv-dialog-button-pane-1" class="wv-dialog-button-pane"></div>');

		return aDialog;
	};

	// Removes the event handlers and closes the dialogue
	var destroy = function() {
		
		// Remove all event handlers with wvDialog namespace
		$('.wv-dialog *').off('click.wvDialogEvent');
		
		// Close dialog and background
		if ( $('.wv-dialog-background').length > 0 ) $('.wv-dialog-background').remove();
		if ( $('.wv-dialog').length > 0 ) $('.wv-dialog').remove();
	};


	// Feature to move the dialogue on the screen
	var dialog;
	var mousePos = {};
	var dialogPos = {};

	var dialogMove = function(e) {
		dialog.css('left', dialogPos.X - mousePos.X + e.clientX)
			.css('top', dialogPos.Y - mousePos.Y + e.clientY);
	};
	
	// Appends the header to the dialog including the moving feature
	var appendHeader = function( aDialog, aTitle, cancelTitle, draggable ) {
		if ( !aDialog || !aTitle || (aTitle === '') ) return;
		
		var cTitle = 'Abort dialog';
		if ( cancelTitle && (cancelTitle !== '') ) cTitle = cancelTitle;
		
		var anElement = $( '<div class="wv-dialog-close"></div>' )
			.attr('title', cTitle)
			.on('click.wvDialogEvent',function() { destroy() });
		aDialog.append( $( anElement ) );
		
		anElement = $( '<div class="wv-dialog-header"></div>' )
			.text( aTitle );
		if (draggable) anElement
			.css('cursor', 'move')
			.mouseup(function(e) {
				$(this).off( 'mousemove', dialogMove ).css('cursor', 'move');
			})
			.mouseout(function(e) {
				$(this).off( 'mousemove', dialogMove ).css('cursor', 'move');
			})
			.mousedown(function(e) {
				dialog = $(this).parent();
				$(this).on( 'mousemove', dialogMove ).css('cursor', 'grabbing');
				mousePos.X = e.clientX;
				mousePos.Y = e.clientY;
				dialogPos.X = parseInt( dialog.css('left') );
				dialogPos.Y = parseInt( dialog.css('top') );
			});
		aDialog.append( anElement );
	};

	var centerDialog = function( aDialog ) {
		if ( !aDialog) return;

 		aDialog.css('left', (document.body.scrollWidth - aDialog.width()) / 2 + $(document).scrollLeft() )
			.css('top', (window.innerHeight - aDialog.height()) / 2 + $(document).scrollTop() );
	};
	
	/*
	var getElement = function( aType, anId ) {
		if (!aType) return;

		var tag = 'div';
		var classes = '';
		var id = '';
		if (anId) id = ' id="' + anId + '"';
		
		switch( aType ) {
			case 'body':
				classes = 'wv-dialog-body';
				break;
			case 'footer':
				classes = 'wv-dialog-footer';
				break;
			case 'button-pane':
				classes = 'wv-dialog-button-pane';
				break;
			case 'button':
				classes = 'wv-dialog-button';
				tag = 'button';
				break;
			default:
				classes = aType;
		}
		classes = ' class="' + classes + '"';
		
		return $( '<' + tag + classes + id +'></' + tag + '>' );
	};
	*/
	
	var addButton = function ( pane, id, text, title, eventHandler ) {
		$(pane).append('<button type="button" title="'+title+'" id="'+id+'" class="wv-dialog-button">'+text+'</button>');
		$('#'+id).on('click.wvDialogEvent',eventHandler);
	};
	
	var addButtonSpaceRight = function ( button, width ) {
		$(button).attr('style','margin-right:'+width);
	};
	
	return {
		create: create,
		destroy: destroy,
		appendHeader: appendHeader,
		centerDialog: centerDialog,
		addButton: addButton,
		addButtonSpaceRight: addButtonSpaceRight
	};
};
	
// </nowiki>