plugins/birt/webapp/birt/webcontent/birt/ajax/ui/dialog/AbstractBaseDialog.js

/******************************************************************************
 *	Copyright (c) 2004 Actuate Corporation and others.
 *	All rights reserved. This program and the accompanying materials 
 *	are made available under the terms of the Eclipse Public License v1.0
 *	which accompanies this distribution, and is available at
 *		http://www.eclipse.org/legal/epl-v10.html
 *	
 *	Contributors:
 *		Actuate Corporation - Initial implementation.
 *****************************************************************************/
 
/**
 *	Dialog base class
 */
AbstractBaseDialog = function(){};

AbstractBaseDialog.prototype =
{		
	contentHolderWidth: 500, //TODO - move to display constants? Default width in pixels
	visible: null, //Is the dialog currently visible		
	__operationCancelled: false,
	__allowSelection: false,
	 
	/**
	 Initialize dialog base
	 */
	__initBase: function(htmlId, contentWidth)
	{
		this.__instance = $(htmlId);
		this.htmlId = htmlId;
		this.visible = false;
		
		//references will be set for okay button so it can be enabled/disabled
		this.okButton = null;
		this.okButtonLeft = null;
		this.okButtonRight = null;
		
		//Instance is given a location within screen to avoid
		//extra scroll bar creation
		this.__instance.style.top = '0px';
		this.__instance.style.left = '0px';
		
		//Sizing
		this.contentHolderName = htmlId + "dialogContentContainer";
		if(contentWidth)
		{
			this.contentHolderWidth = parseInt(contentWidth);
		}	
		
		this.__neh_resize_closure = this.__neh_resize.bindAsEventListener( this );
		
		// Initialize event handler closures	
		this.__neh_okay_closure = this.__neh_okay.bind(this);
		this.__neh_cancel_closure = this.__neh_cancel.bind(this);
		this.mousedown_closure = this.__neh_mousedown.bindAsEventListener(this);
		this.mouseup_closure = this.__neh_mouseup.bindAsEventListener(this);
		this.drag_closure = this.__neh_drag.bindAsEventListener(this);
		this.disposeSelection_closure = this.__neh_disposeSelection.bindAsEventListener(this);
		this.enableSelection_closure = this.__neh_enableSelection.bindAsEventListener(this);
		
	    this.__beh_cancelOperation_closure = this.__beh_cancelOperation.bindAsEventListener( this );
		
		birtEventDispatcher.registerEventHandler( birtEvent.__E_CANCEL_TASK, this.htmlId, this.__beh_cancelOperation_closure );
		
		this.__operationCancelled = false;
		
		// Initialize shared events	
		this.__base_installEventHandlers(htmlId);	
	},
	
	/**
	Install event handlers shared across all dialogs.
	Buttons (close, cancel, ok), move dialog (drag and drop), screen resize.
	*/
	__base_installEventHandlers : function( id )
	{
		//Initialize iframe
		this.__iframe = $(id + "iframe");
		
		// Close button
		var closeBtn = $(id + "dialogCloseBtn");
		Event.observe( closeBtn, 'click', this.__neh_cancel_closure, false );
		Event.observe( closeBtn, 'mousedown', this.__neh_stopEvent.bindAsEventListener(this), false );
		
		// OK and Cancel buttons		
		this.okBtn = $(id + "okButton");
		var cancelBtn = $(id + "cancelButton");
		
		this.okBtnLeft = $(id + "okButtonLeft"); //left part of background image
		this.okBtnRight = $(id + "okButtonRight"); //right part of background image
		
		//set OK button to enabled as default
		this.okBtn.className = "dialogBtnBarButtonEnabled";
		if ( this.okBtnLeft )
		{
			this.okBtnLeft.className = "dialogBtnBarButtonLeftBackgroundEnabled";
		}
		if ( this.okBtnRight )
		{
			this.okBtnRight.className = "dialogBtnBarButtonRightBackgroundEnabled";
		}
		
		Event.observe( this.okBtn, 'click', this.__neh_okay_closure , false );
		//Cancel		
		Event.observe( cancelBtn, 'click', this.__neh_cancel_closure , false );
			
		//Drag and Drop
		this.dragBarName = id + "dialogTitleBar";
		var dragArea = $(this.dragBarName);	
		Event.observe(dragArea, 'mousedown', this.mousedown_closure, false);
		
		//work around for IE, enable selection for dialog text controls
		var oInputs = this.__instance.getElementsByTagName( 'INPUT' );
		for ( var i = 0; i < oInputs.length ; i++ )
		{
			if(oInputs[i].type != 'button')
			{
				this.__enableSelection( oInputs[i] );
			}
		}
		
		var oTextAreas = this.__instance.getElementsByTagName( 'TEXTAREA' );
		for ( var i = 0; i < oTextAreas.length ; i++ )
		{
			this.__enableSelection( oTextAreas[i] );
		}		
	},	
	
	/**
	 *	Binding data to the dialog UI.
	 *
	 *	@data, data DOM tree (schema TBD)
	 *	@return, void
	 */
	__cb_bind : function( data )
	{
		this.__bind( data );
			
		this.__l_show( );
	},
	
	/**
	ABSTRACT - must be implemented by extending class
	Gets xml data before dialog is shown
	*/
	__bind: function(data)
	{
	
	},
	
	/**
	Trigger dialog from client (bypasses bind step)
	*/
	showDialog: function()
	{
		this.__l_show( );
	},
	
	/**
	 *	
	 *
	 *	@event, incoming browser native event
	 *	@return, void
	 */
	__l_show : function( )
	{
		// reset cancelled flag
		this.__operationCancelled = false;
		this.__preShow();
			
				//check if the dialog is already shown
		if(!this.visible)
		{
			var zIndex = Mask.show(); 
			debug("showing at zIndex " + zIndex);
			this.__instance.style.zIndex = zIndex;
					
			Element.show( this.__instance );
			this.visible = true;
			
			//workaround for Mozilla bug https://bugzilla.mozilla.org/show_bug.cgi?id=167801
			if(BrowserUtility.useIFrame())
			{
				//show iframe under dialog
				Element.show( this.__iframe );
			}
			
			this.__setWidth();
				
			BirtPosition.center( this.__instance );
			
			// workaround for IE7 in rtl mode
			if ( BrowserUtility.isIE7 && rtl )
			{
				// force refreshing the DIV elements,
				// else their positioning might become brokem after opening
				// the same dialog box twice...
				var titleContainer = $(this.htmlId + "dialogTitleBar"); 
				if ( titleContainer )
				{
					titleContainer.style.direction = "rtl";
					var elements = titleContainer.getElementsByTagName("div");
					for ( var i = 0; i < elements.length; i++ )
					{
						var el = elements[i];
						el.style.display = "none";
						el.style.display = "block";
					}
				}
			}
			
			Event.observe( window, 'resize', this.__neh_resize_closure, false );
			Event.observe( document, 'mouseup', this.disposeSelection_closure, false );			
		}
		
		this.__postShow();	
	},
	

	/**
	Called right before element is shown
	*/
	__preShow: function()
	{
		//implementation is left to extending class
	},
	
	/**
	Called after element is shown
	*/
	__postShow: function()
	{
		//implementation is left to extending class
	},
	
	/**
	 *	Handle native event 'click'.
	 *
	 *	@event, incoming browser native event
	 *	@return, void
	 */
	__l_hide : function( )
	{
		this.__preHide();
		Event.stopObserving( window, 'resize', this.__neh_resize_closure, false );
		Event.stopObserving( document, 'mouseup', this.disposeSelection_closure, false );
		Element.hide( this.__instance, this.__iframe );
		this.visible = false;
		Mask.hide();
	},
		
	/**
	Called before element is hidden
	*/
	__preHide: function()
	{
		//implementation is left to extending class
	},
	
	/**
	Enables/disabled OK button
	@param boolean enabled
	*/
	__setOKButtonState: function(enabled)
	{
		if(enabled)
		{
			if(this.okBtn.className == "dialogBtnBarButtonDisabled")
			{
				this.okBtn.className = "dialogBtnBarButtonEnabled";
				if ( this.okBtnLeft )
				{
					this.okBtnLeft.className = "dialogBtnBarButtonLeftBackgroundEnabled";
				}
				if ( this.okBtnRight )
				{
					this.okBtnRight.className = "dialogBtnBarButtonRightBackgroundEnabled";
				}
				Event.observe( this.okBtn, 'click', this.__neh_okay_closure , false );
			}
		}
		else
		{
			this.okBtn.className = "dialogBtnBarButtonDisabled";
			if ( this.okBtnLeft )
			{
				this.okBtnLeft.className = "dialogBtnBarButtonLeftBackgroundDisabled";
			}
			if ( this.okBtnRight )
			{
				this.okBtnRight.className = "dialogBtnBarButtonRightBackgroundDisabled";
			}
			Event.stopObserving( this.okBtn, 'click', this.__neh_okay_closure , false );
		}
	},
	
	/**
	Stop event
	*/
	__neh_stopEvent: function(event)
	{
		Event.stop(event);
	},
	
	/**
	Handle mouse down
	*/
	__neh_mousedown: function(event)
	{
		debug("AbstractBaseDialog __neh_mousedown");
		
		//Event.stop(event);
		var target = Event.element( event );
		
		Event.observe( target, 'mouseup', this.mouseup_closure , false );
		Event.observe( target, 'mousemove', this.drag_closure , false );
	},
	
	/**
	Handle mouse up
	*/
	__neh_mouseup: function(event)
	{
		var target = Event.element( event );

		Event.stopObserving( target, 'mouseup',  this.mouseup_closure , false );
		Event.stopObserving( target, 'mousemove', this.drag_closure , false );
	},
	
	/**
	Handle mousemove 
	*/
	__neh_drag: function(event)
	{
		debug("Mouse move");
		Event.stop( event );

		var target = Event.element( event );
		Event.stopObserving( target, 'mouseup',  this.mouseup_closure , false );
		Event.stopObserving( target, 'mousemove', this.drag_closure , false );
					
		DragDrop.startDrag(this.__instance, event, null);
	},
	
	/**
	* Handle cancel selection
	*/
	__neh_disposeSelection: function(event)
	{
		if ( !this.__allowSelection )
		{
			if(document.selection)
			{
				document.selection.empty();
			}
			else if(window.getSelection)
			{
				var selection = window.getSelection();
				if(selection)
				{
					selection.removeAllRanges();
				}
			}
		}
	},

	/**
	 *	Handle enable selection for dialog controls.
	 *
	 *	@obj, incoming target object
	 *	@return, void
	 */	
	__enableSelection: function( obj )
	{
		Event.observe( obj, 'select', this.enableSelection_closure , false );
		Event.observe( obj, 'selectstart', this.enableSelection_closure , false );
		Event.observe( obj, 'mouseup', this.enableSelection_closure , false );
	},

	/**
	 *	Handle enable selection event.
	 *
	 *	@event, incoming browser native event
	 *	@return, void
	 */	
	__neh_enableSelection: function( event )
	{
		event.cancelBubble = true;
	},
		
	/**
	 *	Handle native event 'resize'.
	 *
	 *	@event, incoming browser native event
	 *	@return, void
	 */
	__neh_resize : function( event )
	{
		BirtPosition.center( this.__instance );
	},
	
	__neh_cancel: function()
	{
		this.__l_hide( );
	},
	
	__neh_okay: function()
	{
		this.__okPress( );
	},

	/**
	 ABSTRACT - Handle clicking on ok.
	*/
	__okPress: function( )
	{
		//ABSTRACT - needs to be implemented by extending class
	},

	//TODO change so called once
	__setWidth: function()
	{	
		// In Mozilla 1.4 or lower version, if don't set overflow as "auto",then
		// clientWidth/clientHeight always return zero. The display is incorrect.
		// So add the following section.
		if ( this.__instance.clientWidth <= 0)
		{
			this.__instance.style.overflow = "auto";
		}
		
		var contentHolder = $(this.contentHolderName);
		var innerWidth = contentHolder.offsetWidth;
		var outerWidth = this.__instance.clientWidth;
		var difference = outerWidth - innerWidth;			
		contentHolder.style.width = this.contentHolderWidth + 'px';
		var newOuterWidth = contentHolder.offsetWidth + difference;
		this.__instance.style.width = newOuterWidth + 'px';
			
		this.__iframe.style.width = this.__instance.offsetWidth + 'px';
		this.__iframe.style.height = this.__instance.offsetHeight + 'px';
		
		//move iframe to true top, left
		//assumes that top/bottom left/right borders are same width
		if(this.__iframe.clientWidth > 0)
		{
			this.__iframe.style.top = (this.__instance.clientHeight - this.__instance.offsetHeight)/2 + 'px';
			this.__iframe.style.left = (this.__instance.clientWidth - this.__instance.offsetWidth)/2 + 'px';
		}
	},
	
	/**
	 * Shows or hide the title bar.
	 * @param visible visibility flag
	 */
	__setTitleBarVisibile : function(visible)
	{
		// Hide dialog title bar if embedded in designer.
		var titleBar = $( this.htmlId + 'dialogTitleBar' );
		titleBar.style.display = visible?'inline':'none';			
	},
	
	/**
	@returns html id attribute of associated html element for this dialog
	*/
	getHtmlId: function()
	{
		return this.htmlId;
	},
	
	/**
	 * This event handler is called whenever an operation has been cancelled.
	 * If the dialog box is visible, sets the cancelled flag to true.
	 */
	__beh_cancelOperation : function()
	{
		if ( this.visible )
		{
			this.__operationCancelled = true;
		}
	}
	
}