analytics/webcontent/ags/splitter.js

/********************************************************************************************************************************
* Licensed Materials - Property of IBM                                                                                          *
*                                                                                                                               *
* IBM Cognos Products: AGS                                                                                                      *
*                                                                                                                               *
* (C) Copyright IBM Corp. 2012                                                                                            *
*                                                                                                                               *
* US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. *
*********************************************************************************************************************************/

/*-----------------------------------------------------------------------------------------------------

Class :			Splitter

Description : Implements a splitter to resize the data items pane

-----------------------------------------------------------------------------------------------------*/


function Splitter() {
	this.splitterElement = null;
	this.oldZIndex = 0;

	this.containerBounds = null;
	this.m_observers = new CObserver(this);
	
	//add event handlers
	var iframeDoc = document.getElementById('messageIFrame').contentWindow.document;
	addEvent(document,'mousedown',this.onSplitterMouseDown, false);
	addEvent(document,'mouseup',this.onSplitterMouseUp, false);
	addEvent(iframeDoc,'mouseup',this.onSplitterMouseUp, false);

	this.setSelectionState=setSelectionState;
	this.emptyHandler=emptyHandler;
	this.findBounds=findBounds;
	this.addMouseMoveHandlers=addMouseMoveHandlers;
	this.removeMouseMoveHandlers=removeMouseMoveHandlers;
	this.onSplitterMouseMove=onSplitterMouseMove;
}

function setSelectionState(target,disabled){
	//IE
	if (typeof target.onselectstart!="undefined") {
		if (disabled)
			addEvent(target,'selectstart',emptyHandler, false);
		else
			removeEvent(target,'selectstart',emptyHandler, false);
	}
	//FF
	else if (typeof target.style.MozUserSelect!="undefined") {
		if (disabled)
			target.style.MozUserSelect="none";
		else
			target.style.MozUserSelect="";
	}
}

function emptyHandler() {
	return false;
}

function findBounds(ele) {
	var left = 0;
	var top = 0;
	var width = ele.offsetWidth;
	var height = ele.offsetHeight;
	if (ele.offsetParent) {
		do {
			left += ele.offsetLeft;
			top += ele.offsetTop;	
		} while (ele = ele.offsetParent);	

		return [left,top,width,height];		
	}
}


function addMouseMoveHandlers() {
	var iframeDoc = document.getElementById('messageIFrame').contentWindow.document;
	
	addEvent(document,'mousemove',onSplitterMouseMove, false);
	addEvent(iframeDoc,'mousemove',onSplitterMouseMove, false);
}

function removeMouseMoveHandlers() {
	var iframeDoc = document.getElementById('messageIFrame').contentWindow.document;

	removeEvent(document,'mousemove',onSplitterMouseMove, false);
	removeEvent(iframeDoc,'mousemove',onSplitterMouseMove, false);
}

Splitter.prototype.onSplitterMouseDown = function(evt){
	//get the event in a cross-browser fashion
	evt = (evt) ? evt : ((event) ? event : null);

	// IE uses srcElement, others use target 
	var target = evt.target != null ? evt.target : evt.srcElement;

	// for IE, left click == 1 
	// for Firefox, left click == 0 
	if ((evt.button == 1 && window.event != null || evt.button == 0) && target.id == 'splitter') { 
		var container = document.getElementById('container_float');
		var splitter = document.getElementById('ghost_splitter');	

		this.containerBounds = findBounds(container);

		//before we show the ghost splitter, position and resize
		var pos = findBounds(target);
		splitter.style.display='block';
		splitter.style.left=pos[0];
		splitter.style.top=pos[1];
		splitter.style.height=target.offsetHeight;
		
		splitter.style.display='block';
		target.style.visibility='hidden';

		// bring the clicked element to the front while it is being dragged 
		this.oldZIndex = target.style.zIndex; 
		target.style.zIndex = 10000; 
		// we need to access the element in OnMouseMove 
		this.splitterElement = target; 

		// tell our code to start moving the element with the mouse 
		addMouseMoveHandlers();

		// cancel out any text selections 
		document.body.focus(); 

		// prevent text selection in IE 
		setSelectionState(window.top.document.body,true);

		// prevent IE from trying to drag an image 
		addEvent(target,'dragstart',emptyHandler, false);

		return false; 
	}
}

Splitter.prototype.onSplitterMouseUp = function(evt){
	if (this.splitterElement != null) {
		var ghostSplitter = document.getElementById('ghost_splitter');
		this.splitterElement.style.zIndex = this.oldZIndex; 

		//remove event handlers
		removeMouseMoveHandlers();
		setSelectionState(window.top.document.body,false);
		removeEvent(this.splitterElement,'dragstart',emptyHandler, false);
		
		this.splitterElement = null; 
		
		//resize the menu frame
		var newWidth = ghostSplitter.offsetLeft+8;
		cfgSet("MenuSize", newWidth);
		updatePercentageWidths(newWidth);
		ghostSplitter.style.display='none';

		var splitter = document.getElementById('splitter');
		splitter.style.visibility='visible';
	} 
}

/*
 * Convert the frame width into percentages for the task menu/message frame
 * and set both accordingly
 */
function updatePercentageWidths(menuFrameWidth) {
    var perc;
    var menuFrame = document.getElementById('menuFrame');
    var parent = document.getElementById('container_float');
    var messageFrame = document.getElementById('messageFrame');
    var parentWidth=parent.offsetWidth;
    perc = Math.round((menuFrameWidth/parentWidth)*100);
    if (perc<=20) {
        perc=20;
    }

    var messageFramePerc = 100-perc;
    menuFrame.style.width=perc+'%';
    messageFrame.style.width=messageFramePerc+'%';
}

function onSplitterMouseMove(evt) {

	if (evt == null) {
		evt = window.event; 
	}
	
	if (evt!=null) {
	
		var ghostSplitter = document.getElementById('ghost_splitter');	
		var mouseX = evt.screenX != null ? evt.screenX : evt.screenLeft;
		var windowX = window.screenX != null ? window.screenX : window.screenLeft;
		var minXBounds = this.containerBounds[0];
		var maxXBounds = this.containerBounds[2];
		if (evt.clientX <= minXBounds) {
			ghostSplitter.style.left = minXBounds+'px';
		}
		else if (evt.clientX >= maxXBounds){
			ghostSplitter.style.left = maxXBounds+'px';
		}
		else {
			// this is the actual "drag code" 
			var target = evt.target != null ? evt.target : evt.srcElement;
			ghostSplitter.style.left = (mouseX-windowX-ghostSplitter.offsetWidth-minXBounds-4) + 'px'; 
		}
	}
}

Splitter.prototype.getObservers = function() {
	return this.m_observers;
}

Splitter.prototype.update = function() {
	return true;
}