analytics/webcontent/mdsrv/lineageUI/PaneManager.js

/****************************************************************
** Licensed Materials - Property of IBM
**
** IBM Cognos Products: mdsrv
**
** (C) Copyright IBM Corp. 2008, 2015
**
** US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
*****************************************************************/
//***********************************************************************************************
// Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
// Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).
//
// Component:	Pane Manager
//***********************************************************************************************

var g_sExpandStateLabel			= 'Less...';
var g_sCollapseStateLabel		= 'More...';
var g_sExpandAllStateLabel		= '- Hide All Sections';
var g_sCollapseAllStateLabel	= '+ Show All Sections';

var g_nArrowWidth				= 100;

var g_nUniquePaneIndex			= -1;

//-----------------------------------------------------------------------------
// CPaneInfo class
//-----------------------------------------------------------------------------

function CPaneInfo ( paneManager, name, state, widthPercent )
{
	// Members

	this.m_parent			= paneManager;
	this.m_name				= name;
	this.m_nIndex			= ++g_nUniquePaneIndex;
	this.m_state			= state;		// expanded or collapsed
	this.m_bExpanded		= state == "expanded";
	this.m_widthPercent		= widthPercent;	// in percentages
	this.m_listNodes		= [];

	this.m_elemThickArrow	= null;
	this.m_elemBackground	= null;
	this.m_elemCaption		= null;
	this.m_elemExpandBtn	= null;
	this.m_bCreatedControls	= false;

	this.m_nWidthOrig		= 0;

	// API

	this.getName			= function () { return this.m_name; }
	this.getExpandBtnLabel	= function () { return ( this.m_bExpanded ? g_sExpandStateLabel : g_sCollapseStateLabel ); }

	this.getLeft			= function () { return this.x; }
	this.getRealLeft		= function () { return this.x - this.m_parent.nScrollLeft; }

	this.getWidth			= function () { return this.width; }
	this.getHeight			= function () { return this.height; }

	this.getCaptionPos		= function () { return new CPosition ( this.getRealLeft() + 10, this.y ); }
	this.getExpandBtnPos	= function () { return new CPosition ( this.getRealLeft() + this.getWidth() - 60, this.y ); }

	this.getId				= function () { return ( 'id_pane_' + this.m_nIndex ); }
	this.getArrowId			= function () { return ( this.getId() + '_arrow' ); }
	this.getCaptionId		= function () { return ( this.getId() + '_caption' ); }
	this.getExpandBtnId		= function () { return ( this.getId() + '_expand_btn' ); }
	this.getBackgroundId	= function () { return ( this.getId() + '_background' ); }

	this.setHeight			= function ( nHeight )
	{
		this.height = nHeight;
	}

	this.setWidth			= function ( nWidth )
	{
		this.width = nWidth;

		this.m_parent.recalcSize ( this.getName() );
	}

	this.Init				= function ()
	{
		if ( this.m_elemCaption )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemCaption );
			cssHelper.setText		( this.getName() );
			cssHelper.setTextBold	();
		}
	}

	this.OnScroll			= function ( )
	{
		this.moveControls ();
	}

	this.OnClickCaption		= function ( evt )
	{
		var evt		= (evt) ? evt : ((window.event) ? window.event : null);
		var target	= (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

//		alert ( 'Event <' + evt.type + '> on element <' + target.id + '>');

		if ( evt.type == 'click' )
		{
			var paneCurr = paneManager.findPane ( name );

			if ( target.id == paneCurr.getCaptionId() )
			{
				alert ( 'You clicked on the ' + paneCurr.m_name + ' caption ! Why ?' );
			}
		}
	}

	this.getNumOfColumns	= function ()
	{
		var cColumns = 0;

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			if ( gNode.modelObject.getColumnIndex() >= cColumns )
			{
				cColumns = gNode.modelObject.getColumnIndex() + 1;
			}
		}

		return cColumns;
	}


	this.getColumnNodesHeight	= function ( nColumnIndex )
	{
		var nHeight = 0;

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			if ( gNode.modelObject.getColumnIndex() == nColumnIndex )
			{
				if ( nHeight > 0 )
					nHeight += DG.graphDefaults.nNodeOffsetY;

				nHeight += gNode.height;
			}
		}

		return nHeight;
	}

	this.getColumnNodesHeightArray	= function ()
	{
		var arrColumnHeights = [];
		var cColumns = this.getNumOfColumns ();

		for ( var i = 0; i < cColumns; i++ )
		{
			arrColumnHeights[ i ] = this.getColumnNodesHeight ( i );
		}

		return arrColumnHeights;
	}

	this.getNumOfNodes		= function ( nColumnIndex )
	{
		var nCount = 0;

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			if ( gNode.modelObject.getColumnIndex() == nColumnIndex )
			{
				++nCount;
			}
		}

		return nCount;
	}

	this.getColumnNodesOffset	= function ( nColumnIndex )
	{
//		var nCount	= this.getNumOfNodes ( nColumnIndex );
		var nHeight = this.getColumnNodesHeight ( nColumnIndex );

//		var nVertOffset = ( this.getHeight() - nHeight ) / ( nCount + 1 );

		var nVertOffset = nHeight < this.getHeight() - DG.graphDefaults.nNodeOffsetY ?
		                  ( this.getHeight() - nHeight ) / 2 : DG.graphDefaults.nNodeOffsetY;

		return nVertOffset;
	}

	this.getColumnNodesOffsetArray	= function ()
	{
		var arrColumnOffsets = [];
		var cColumns = this.getNumOfColumns ();

		for ( var i = 0; i < cColumns; i++ )
		{
			arrColumnOffsets.push ( this.getColumnNodesOffset ( i ) );
		}

		return arrColumnOffsets;
	}

	this.setNodesVisibility	= function ()
	{
		// Configure Visible Nodes

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			if ( this.m_bExpanded )
				gNode.show ( true );
			else
			{
				if ( gNode.modelObject.isRootObject() )
					gNode.show ( true );
				else
					gNode.show ( false );
			}

			gNode.bShowConnections = true;
//			gNode.bShowConnections = this.m_bExpanded;
		}

		// Configure corresponding connections

		this.m_parent.m_graph.refreshConnections ();
	}

	this.getNumRootNodes	= function ()
	{
		var cNodes = 0;

		for (var i = 0; i < this.m_listNodes.length; i++)// var i in this.m_listNodes )
		{
			var gNode = this.m_listNodes[ i ];

			if ( gNode.modelObject.isRootObject () )
			{
				cNodes++;
			}
		}	

		return cNodes;
	}

	this.Layout		= function ()
	{
		var nVertHeights = this.getColumnNodesHeightArray();
		var nVertOffsets = this.getColumnNodesOffsetArray();

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			var nColumnIndex = gNode.modelObject.getColumnIndex();

			var nNodePosX = this.x + DG.graphDefaults.nNodeOffsetX + ( gNode.width + DG.graphDefaults.nNodeOffsetX ) * nColumnIndex;

			gNode.SetPosition( nNodePosX, nVertOffsets[ nColumnIndex ] );

			nVertOffsets[ nColumnIndex ] += gNode.height + DG.graphDefaults.nNodeOffsetY;
//			nVertOffsets[ nColumnIndex ] += gNode.height + nVertOffsets[ nColumnIndex ];
		}
	}

	this.LayoutNodes		= function ()
	{
		this.Layout ();

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			this.m_listNodes[ i ].refresh();
		}
	}

	this.expand	= function ( bExpand )
	{
		this.m_bExpanded = bExpand;

		if ( this.m_elemExpandBtn )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemExpandBtn );
			cssHelper.setText ( this.getExpandBtnLabel () );
		}

//		alert ( "expand: " + this.m_listNodes.length );

		this.setNodesVisibility	();

		var widthReportPane = this.calcPaneWidth ();

//		alert ( 'expand: New Pane Width = ' + widthReportPane );

		this.setWidth ( widthReportPane );

		this.showThickArrow ();
	}

	this.OnClickExpandBtn	= function ( evt )
	{
		var evt		= (evt) ? evt : ((window.event) ? window.event : null);
		var target	= (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);

//		alert ( 'Event <' + evt.type + '> on element <' + target.id + '>');

		var paneCurr = paneManager.findPane ( name );

		paneCurr.expand	( ! paneCurr.m_bExpanded );
	}

	this.createControls		= function ( headerId )
	{
		if ( this.m_bCreatedControls )
			return;

		try
		{
			var posCaption		= this.getCaptionPos ();
			var posExpandBtn	= this.getExpandBtnPos ();

			var textCaption		= this.getName();
			var textExpandBtn	= this.getExpandBtnLabel();

//			this.m_elemCaption = CreateLink ( this.getCaptionId(), headerId, 'headerCaption', textCaption, posCaption.x, posCaption.y, this.OnClickCaption );
			this.m_elemCaption = CreateText ( this.getCaptionId(), headerId, 'headerCaption', textCaption, posCaption.x, posCaption.y, 100 );

//			alert ( this.m_elemCaption.id );

			// 11 Feb 08 - temporarily disabled the Expand / Collapse functionality based on Ralf's decision

//			if ( this.m_nIndex < this.m_parent.getPaneCount() - 1 )
//				this.m_elemExpandBtn = CreateLink ( this.getExpandBtnId(),	headerId, 'headerLink', textExpandBtn, posExpandBtn.x, posExpandBtn.y, this.OnClickExpandBtn );

			//----------------------------------------------------------------

//			if ( this.m_nIndex != 2 )	// for all panes except right pane
//				this.createThickArrow ();

			if ( this.m_nIndex == 1 )	// for middle pane only
				this.createBackground ();
		}
		catch ( err )
		{
			var txt = "createControls: Error " + err.description + "\n\n";
			txt += "Click OK to continue.\n\n";
			alert ( txt );
		}
		finally
		{
			this.m_bCreatedControls = true;
		}
	}

	this.moveControls		= function ()
	{
		if ( ! this.m_bCreatedControls )
			return;

//		alert ( 'moveControls: ' + this.m_nIndex );

		if ( this.m_elemCaption )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemCaption );

			var posCaption = new CPosition ( this.getCaptionPos().x, this.getCaptionPos().y );

			cssHelper.moveToPos	( posCaption );
		}

		if ( this.m_elemExpandBtn )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemExpandBtn );

			var posExpandBtn = new CPosition ( this.getExpandBtnPos().x, this.getExpandBtnPos().y );

			cssHelper.moveToPos	( posExpandBtn );
		}

		this.moveBackground ();

		this.moveThickArrow	();
	}

	this.createBackground	= function ()
	{
		this.m_elemBackground = CreateDiv ( this.getBackgroundId(), this.m_parent.m_canvasId, 'classBackground', this.x, this.y, this.getWidth(), this.getHeight() );

		ASSERT( this.m_elemBackground, "createBackground: m_elemBackground was NOT created !!!" );
	}

	this.moveBackground	= function ( newX, newY )
	{
		if ( this.m_elemBackground )
		{
			var cssHelper = new CElementStyleHelper ( this.m_parent.m_canvasId );

			var sizeCanvas	= cssHelper.getClientSize ();

			var cssHelper = new CElementStyleHelper ( this.m_elemBackground );

			var posX = ( newX && newX != -1 ) ? newX : this.x;
			var posY = ( newY && newY != -1 ) ? newY : this.y + this.m_parent.nScrollTop;

			cssHelper.move		( posX, posY );
//			cssHelper.resize	( this.getWidth(), this.getHeight() );
			cssHelper.resize	( this.getWidth(), sizeCanvas.height );
		}
	}

	this.createThickArrow	= function ()
	{
	    this.m_elemThickArrow = CreateImage(this.getArrowId(), this.m_parent.m_canvasId, DG.graphDefaults.getImagePath() + "thick_arrow_right.jpg", this.x + this.getWidth() - 60, this.getHeight() / 2 - g_nArrowWidth / 2, g_nArrowWidth, 100);

		var cssHelper = new CElementStyleHelper ( this.m_elemThickArrow );

		cssHelper.setZIndex ( 1 );
		cssHelper.setColors ( 'Red', 'Red' );
		cssHelper.setOpacity( 10 );
		cssHelper.show		( ! this.m_bExpanded );

		ASSERT( this.m_elemThickArrow, "createThickArrow: m_elemThickArrow was NOT created !!!" );
	}

	this.showThickArrow		= function ()
	{
		// Toggle the thick arrow	

		if ( this.m_elemThickArrow )
		{
			var cssHelper	= new CElementStyleHelper ( this.m_elemThickArrow );

			var bShow		= ! this.m_bExpanded;

//			alert ( bShow ? "Expanded" : "Collapsed"  );

			cssHelper.show ( bShow );
		}
	}

	this.moveThickArrow		= function () 
	{
		if ( this.m_elemThickArrow )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemThickArrow );

			if ( ! this.m_bExpanded )
				cssHelper.move ( this.x + this.getWidth() - 60, this.getHeight() / 2 - 50 );
		}
	}

	this.calcPaneWidth		= function ()
	{
		var nPaneWidth = 0;

		for ( var i = 0; i < this.m_listNodes.length; i++)
		{
			var gNode = this.m_listNodes[ i ];

			if ( gNode.isShown () )
			{
				if ( nPaneWidth < gNode.x + gNode.width - this.x )
					nPaneWidth = gNode.x + gNode.width - this.x;
			}
		}

		nPaneWidth += DG.graphDefaults.nNodeOffsetX;

		if ( ! this.m_bExpanded )
			nPaneWidth += g_nArrowWidth;

		if ( nPaneWidth < this.m_nWidthOrig )
			nPaneWidth = this.m_nWidthOrig;

		return nPaneWidth;
	}

	this.fetchNodes		= function ( nodeList )
	{
		for ( var i = 0; i < nodeList.length; i++)
		{
			var gNode = nodeList[ i ];

			if ( gNode.modelObject.getPaneName() == this.m_name )
			{
				this.m_listNodes.push ( gNode );
			}
		}

//		alert ( "fetchNodes: Pane '" + this.m_name + "' - No. of nodes = " + this.m_listNodes.length );
	}
}

CPaneInfo.prototype = new CSize();

//-----------------------------------------------------------------------------
// CPaneManager class
//-----------------------------------------------------------------------------

function CPaneManager ( sCanvasId )
{
	// members

	var curr_instance		= this;		// keep the current instance for callbacks to refer to

	this.m_canvasId			= sCanvasId;
	this.m_listPanes		= [];
	this.m_graph			= null;
	this.m_headerId			= null;
	this.m_bPanesExpanded	= false;
	this.nScrollLeft		= 0;
	this.nScrollTop			= 0;
	this.m_elemExpandAllBtn	= null;

	// API

	this.getHeaderId			= function () { return this.m_headerId; }
	this.getHeaderBackgroundId	= function () { return ( this.getHeaderId() + '_background' ); }

	this.addPane		= function ( pane )		{ this.m_listPanes.push ( pane ); }
	this.getPane		= function ( nIndex )	{ return this.m_listPanes[ nIndex ]; }

	this.getPaneCount	= function ()			{ return this.m_listPanes.length; }

	this.findPane		= function ( sName )
	{
		var nPane = this.findPaneNo ( sName );

		return nPane != -1 ? this.getPane( nPane ) : null;
	}

	this.findPaneNo		= function ( sName )
	{
		var paneNo = -1;

		for ( var i = 0; i < this.m_listPanes.length; i++ )
		{
			var pane = this.getPane( i );

			if ( pane.m_name == sName )
			{
				paneNo = i;
				break;
			}
		}

		return paneNo;		
	}

	this.splitNodes		= function ( nodeList )
	{
		for ( var i = 0; i < this.m_listPanes.length; i++ )
		{
			var pane = this.getPane( i );

			pane.fetchNodes ( nodeList );
		}
	}

	this.recalcSize		= function ( sPaneName )
	{
		var paneCurrNo = this.findPaneNo ( sPaneName );

		if ( paneCurrNo == -1 )
		{
			alert ( 'recalcSize: the pane ' + sPaneName + ' was NOT found !!!');		
			return;
		}

		for ( var i = paneCurrNo; i < this.m_listPanes.length; i++ )
		{
			var pane		= this.getPane( i );
//			var paneNext	= i < this.m_listPanes.length - 1 ? this.getPane( i+1 ) : null;
			var panePrev	= i > 0 ? this.getPane( i-1 ) : null;

			var paneNewX = panePrev ? panePrev.x + panePrev.width : pane.x;

			if ( pane.x != paneNewX )
			{
				pane.SetPosition ( paneNewX, pane.y, pane.getWidth(), pane.getHeight() );
				pane.LayoutNodes ();
			}

			pane.moveControls ();
		}
	}

	this.updateSize		= function ( bResetPanes )
	{
		var cssHelper = new CElementStyleHelper ( this.m_canvasId );

		var sizeCanvas	= cssHelper.getClientSize ();

		var cPanes = this.m_listPanes.length;

		var nPaneY = 0;

		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.m_nWidthOrig = sizeCanvas.width * pane.m_widthPercent / 100;

			if ( bResetPanes )
			{
				pane.SetPosition ( nPaneY, sizeCanvas.y, pane.m_nWidthOrig, sizeCanvas.height );

				nPaneY += pane.m_nWidthOrig;
			}

			pane.moveControls ();
		}
	}

	this.ExpandPanes	= function ( bExpand )
	{
		this.m_bPanesExpanded = bExpand;

		for ( var i = 0; i < this.m_listPanes.length - 1; i++ )
		{
			var pane = this.getPane( i );

			pane.expand	( this.m_bPanesExpanded );
		}

		this.m_elemExpandAllBtn	= document.getElementById( "id_graph_expand_all_btn" );

		if ( this.m_elemExpandAllBtn )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemExpandAllBtn );
			cssHelper.setText ( this.m_bPanesExpanded ? g_sExpandAllStateLabel : g_sCollapseAllStateLabel );
		}
	}

	this.OnClickExpandAllBtn	= function ( evt )
	{
		var evtObj	= new CMouseEvent ( evt );

		curr_instance.ExpandPanes ( ! curr_instance.m_bPanesExpanded );
	}

	this.Init		= function ( graph, headerId )
	{
		
		this.m_graph	= graph;
		this.m_headerId = headerId;

//		this.createControls ( headerId );

		for (var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.Init();
		}

		this.updateSize	( true );

		// Hookup event handlers

		this.m_elemExpandAllBtn		= document.getElementById( "id_graph_expand_all_btn" );

		if ( this.m_elemExpandAllBtn )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemExpandAllBtn );
			cssHelper.addEvent ( 'click', this.OnClickExpandAllBtn, false );
		}
	}

	this.Layout		= function ()
	{
		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.Layout ();
		}
	}

	this.createHeaderBackground	= function ()
	{
		var paneFirst	= this.getPane( 0 );
		var paneLast	= this.getPane( this.m_listPanes.length - 1 );

		if ( this.getHeaderId() )
		{
			var elemHeader = document.getElementById( this.getHeaderId() );

//			this.m_elemHeaderBackground = CreateDiv ( this.getHeaderBackgroundId(), this.getHeaderId(), 'classBackground', elemHeader.clientLeft, elemHeader.clientTop, elemHeader.clientWidth, elemHeader.clientHeight );

//			var cssHelper = new CElementStyleHelper ( this.m_elemHeaderBackground );
//			cssHelper.setZIndex ( 1 );
//			cssHelper.setOpacity( 10 );
		}
	}

	this.moveHeaderBackground	= function ( newX, newY, newWidth )
	{
		if ( this.m_elemHeaderBackground )
		{
			var cssHelper = new CElementStyleHelper ( this.m_elemHeaderBackground );

			var posX = newX ? newX : this.x;
			var posY = newY ? newY : this.y;

			cssHelper.move		( posX, posY );
			cssHelper.resize	( newWidth, -1 );
		}
	}

	this.createControls		= function ( headerId )
	{
		ASSERT( headerId, "createControls: headerId is NOT valid !!!" );		

		this.m_headerId = headerId;

		this.createHeaderBackground	();

		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.createControls	( headerId );

			if ( i < this.m_listPanes.length - 1 )	// for all panes except right-most pane
				pane.createThickArrow ();
		}
	}

	this.moveControls		= function ()
	{
		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.moveControls ();
		}
	}

	this.setNodesVisibility	= function ()
	{
		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.setNodesVisibility ();
		}
	}

	this.OnScroll			= function ( evtObj )
	{
		this.nScrollLeft	= evtObj.target.scrollLeft;
		this.nScrollTop		= evtObj.target.scrollTop;

		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.OnScroll ();
		}		
	}

	this.OnGraphResize	= function  ()
	{
		var cssHelper = new CElementStyleHelper ( this.m_canvasId );

		var sizeCanvas	= cssHelper.getClientSize ();

		var widthNew	= sizeCanvas.width;
		var heightNew	= sizeCanvas.height;

		var newX	= -1;
		var newY	= -1;

		this.moveHeaderBackground ( newX, newY, widthNew );

		for ( var i = 0; i < this.m_listPanes.length; i++)
		{
			var pane = this.getPane( i );

			pane.setHeight ( heightNew )
			pane.LayoutNodes ();
		}		
	}
}