windowmanager.js

这是linux下ssl vpn的实现程序

var comboBoxes = null; 
var ie = false;
var hideComboBoxesOnDrag = false; // hide combo boxes upon drag. this is set by simple browser detection
var allComboBoxesHidden = false;
var dragging;
var beNice = false; // only recheck combo boxes on drag start / stop

// Add a new method to array

Array.prototype.remove=function(s){
  for(i=0;i<this .length;i = i + 1){
    if(s==this[i]) this.splice(i, 1);
  }
}

// Windows - TODO encapsulate these in an object
var managedWindows = new Array();
var windowGroups = new Object();

// Roughly detect the browser

if ((i = navigator.userAgent.indexOf('MSIE')) >= 0) {
   ie = true;
   hideComboBoxesOnDrag = true;
}

///////////////////////////////////////////////////////////////////////////
//
// PUBLIC API METHODS 
//
///////////////////////////////////////////////////////////////////////////

/**
 * Start dragging an element.
 *
 * @param event event object that started the drag
 * @param id id of element to drag
 */

function registerDrag(event, id) {
    var control = document.getElementById(id);
    var dragable = buildDragable(calcRealX(event.clientX), calcRealY(event.clientY), 
		getX(control), getY(control), document.getElementById(id));
	dragging = dragable;
    if (ie) {
        document.attachEvent("onmousemove", enableDragging);
        document.attachEvent("onmouseup", stopDragging);
    }
    else {
    	document.addEventListener("mousemove", enableDragging, true);
	    document.addEventListener("mouseup", stopDragging, true);
    }    
    if(hideComboBoxesOnDrag) {   
    	if(beNice) {
	        hideAllComboBoxes();
       	}
	    else {
	    	checkComboBoxes();
	    }
    }
    finishEvent(event);
}
/**
 * Toggle the visibility of a 'window' element by changing its style.visibility
 * attribute. When visibile the component will be placed just below the
 * second specified elemenet.
 *
 * If the window element covers a native control in IE (select elements),
 * the control will be  hidden until the window is closed or is dragged
 * out of the way.
 *
 * @param control element to toggle
 * @param positionAgainst element to place window below
 * @param popupGroup popup group
 */
function togglePopupBelow(control, positionAgainst) {
	if(!isUndefined(control)) {
		if(!isUndefined(control.style)) {
			control.style.top = ( getElementPositionY(positionAgainst) + getHeight(positionAgainst) + 4 )  + 'px';
			control.style.left = getElementPositionX(positionAgainst)  + 'px';	
		}
		toggleGroupedWindow(control, 'popup');
	}
}
/**
 * Toggle the visibility of a 'window' element by changing its style.visibility
 * attribute. 
 *
 * If the window element covers a native control in IE (select elements),
 * the control will be  hidden until the window is closed or is dragged
 * out of the way.
 *
 * @param control element to toggle
 */

function toggleWindow(control) {
	toggleGroupedWindow(control, '');
}

/** 
 * Toggle the visiblity of a popup window. No more than one popup window
 * is dislayed at a time. Any currently visible popups will be hidden when
 * another is made visible.
 *
 * @param control popup to  hide or display
 */
function togglePopup(control) {
	toggleGroupedWindow(control, 'popup');
}

/**
 * Toggle the visibility of a 'window' element by changing its style.visibility
 * attribute. 
 *
 * If the window element covers a native control in IE (select elements),
 * the control will be  hidden until the window is closed or is dragged
 * out of the way.
 *
 * Any other windows with the same group name will be closed when this
 * window is opened
 *
 * @param control element to toggle
 * @param windowGroup group name of window
 */

function toggleGroupedWindow(control, windowGroup) {
    if(!isUndefined(control.style) && 'visible' == control.style.visibility) {
		control.style.visibility = 'hidden';
		if(hideComboBoxesOnDrag) {
			managedWindows.remove(control);
			delete windowGroups[control.id];
			if(!isUndefined(comboBoxes) && comboBoxes.length > 0) {
				for (var i = 0; i < comboBoxes.length; i = i + 1) {
					comboBoxes[i].style.visibility = 'visible';						
				}
			}
		}
		return false;
	}
	else {
		// Hide other windows in same group	
		if(windowGroup != '') {
			for(j in windowGroups) {
				if(windowGroups[j] == windowGroup) {
					windowControl = document.getElementById(j);
					if(windowControl.style.visibility == 'visible') {
						toggleGroupedWindow(windowControl, windowGroup);
					}
				}
			}
			windowGroups[control.id] = windowGroup;
		}
		
		// Make this window visible		
		control.style.visibility = 'visible';
		
		// Hide the combo boxes		
		if(hideComboBoxesOnDrag) {
			managedWindows.push(control);
			comboBoxes = document.getElementsByTagName('select');	
			checkComboBoxes();
		}
		
		return true;
	}
}
          
          
/**
 * Set the selected tab in the currently displayed tab set. The selected tabs
 * contents will be made visible and the deselected tabs contents will be
 * hidden. The tab headings will also be adjusted accordingly.
 *
 * Any current open managed windows will also be hidden.
 *
 * @param selectTab name of tab to select
 * @param deselectTabs Array of tab names to deselect
 */
function setSelectedTab(selectTab, deselectTabs) {
	for (i=0; i < deselectTabs.length ; i = i + 1) {
	    document.getElementById('tab_item_' + deselectTabs[i]).className = 'deselectedTab';
	    document.getElementById('tab_link_' + deselectTabs[i]).className = '';
	    document.getElementById('tab_panel_' + deselectTabs[i]).className = 'tabPanelHidden';	
	}
    document.getElementById('tab_item_' + selectTab).className = 'selectedTab';
    document.getElementById('tab_link_' + selectTab).className = 'currentTab';
    document.getElementById('tab_panel_' + selectTab).className = 'tabPanel';
	document.forms[0].selectedTab.value = selectTab;
	for(var j = 0; j < managedWindows.length; j = j + 1) {
    	if(!isNull(managedWindows[j].style) && managedWindows[j].style.visibility == 'visible') {
    		toggleWindow(managedWindows[j]);
    	}
    }
}

///////////////////////////////////////////////////////////////////////////
//
// SUPPORTING METHODS 
//
///////////////////////////////////////////////////////////////////////////


/**
 * Build the draggable element wrapper object
 *
 * @param x absolute x coordinate of element
 * @param y absolute y coordinate of element
 * @parma left relative to parent x coordinate of element
 * @param top relative to parent y coordinate of element
 * @param control element
 */

function buildDragable(x, y, left, top, control) {
	var dragable = new Object();	
	dragable.elNode = control;
    dragable.elNode.style.zIndex = 1000;
	dragable.cursorStartX = x;
	dragable.cursorStartY = y;
	dragable.elStartLeft  = left;
	dragable.elStartTop   = top;
	return dragable;
}

/*
 * Invoked by event when mouse is released to stop dragging whatever
 * currently being dragged
 *
 * @param event mouse release event
 */

function stopDragging(event) {
    if (ie) {
        document.detachEvent("onmousemove", enableDragging);
        document.detachEvent("onmouseup",   stopDragging);
    }
    else {
        document.removeEventListener("mousemove", enableDragging, true);
        document.removeEventListener("mouseup", stopDragging, true);
    }
    if(hideComboBoxesOnDrag) {
    	checkComboBoxes();
    }
}

/*
 * Adjust an X coordinate taking into account any browser quirks
 *
 * @param x unadjusted x coordinate
 * @return adjusted x coordinate
 */
function calcRealX(x) {
    if(ie) {
		return x +  ( window.scrollX ? window.scrollX : 0);
    }
    else {
		return document.documentElement.scrollLeft + 
	      + document.body.scrollLeft + x;
	}
}

/*
 * Adjust a Y coordinate taking into account any browser quirks
 *
 * @param y unadjusted y coordinate
 * @return adjusted y coordinate
 */
function calcRealY(y) {
    if(ie) {
		return y + ( window.scrollY ? window.scrollY : 0);
    }
    else {
		return document.documentElement.scrollTop + 
	      + document.body.scrollTop + y;
	}
}

/*
 * Get the X cordinate of an element relative to its parent
 *
 * @param control element
 * @return relative x coordinate
 */
function getX(control) {
	if(isUndefined(control) || isUndefined(control.style)) {
	    return 0;
	}
	else {	
		var i = parseInt(control.style.left, 10);
		return isNaN(i) ? 0 : i;
	}
}

/*
 * Get the Y cordinate of an element relative to its parent
 *
 * @param control element
 * @return relative y coordinate
 */
function getY(control) {
    if(isUndefined(control)) {
	    return 0;
    }
    else {
		var i = parseInt(control.style.top,  10);
		return isNaN(i) ? 0 : i;
	}
}

/*
 * Get the width of an element
 *
 * @param control element
 * @return width
 */
function getWidth(control) {
	return control.offsetWidth;
}

/*
 * Get the height of an element
 *
 * @param control element
 * @return height
 */
function getHeight(control) {
	return control.offsetHeight;
}

/**
 * Consume drag event, ensuring no other components tries to 
 * 
 * @param event event
 */
function finishEvent(event) {
    if (ie) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    else {
        event.preventDefault();
    }
}

/**
 * Get the X coordinate that an event occured at
 *
 * @param evt event
 * @return x event coordinate
 */
function getEventX(evt) {
	if(ie) {
		return window.event.clientX;
	}
	else {
		return evt.clientX;
	}
}

/**
 * Get the Y coordinate that an event occured at
 *
 * @param evt event
 * @return y event coordinate
 */
function getEventY(evt) {
	if(ie) {
		return window.event.clientY;
	}
	else {
		return evt.clientY;
	}
}

function getElementPositionX(control){
	var offsetTrail = control;
	var offsetLeft = 0;
	while (offsetTrail){
		offsetLeft += offsetTrail.offsetLeft;
		offsetTrail = offsetTrail.offsetParent;
	}
	if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != 'undefined'){
		offsetLeft += document.body.leftMargin;
	}
	return offsetLeft;
} 

function getElementPositionY(control){
	var offsetTrail = control;
	var offsetTop = 0;
	while (offsetTrail){
		offsetTop += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}
	if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != 'undefined'){
		offsetTop += document.body.topMargin;
	}
	return offsetTop;
} 

function enableDragging(event) {
    dragging.elNode.style.left = ( dragging.elStartLeft + calcRealX(getEventX(event)) - dragging.cursorStartX ) + 'px';
    dragging.elNode.style.top = ( dragging.elStartTop  + calcRealY(getEventY(event)) - dragging.cursorStartY ) + 'px';
    if(hideComboBoxesOnDrag) {
    	if(!allComboBoxesHidden && beNice) {
	    	hideAllComboBoxes();
	    }
	    else {
	    	checkComboBoxes();
	    }
	}
    finishEvent(event);
}

function hideAllComboBoxes() {
	for (var i = 0; i < comboBoxes.length; i = i + 1) {
		comboBoxes[i].style.visibility = 'hidden';
	}
	allComboBoxesHidden = true;
}

function checkComboBoxes() {
	if(managedWindows.length == 0) {
		for (var i = 0; i < comboBoxes.length; i = i + 1) {
			comboBoxes[i].style.visibility = 'visible';
		}
	}
	else {
		for (var i = 0; i < comboBoxes.length; i = i + 1) {
			if(!isUndefined(comboBoxes[i].style) &&
				 !isUndefined(comboBoxes[i].style.top)) {
				var cx = calcRealX(findX(comboBoxes[i]));
				var cy = calcRealY(findY(comboBoxes[i]));
				var cwidth = getWidth(comboBoxes[i]);
				var cheight = getHeight(comboBoxes[i]);		
				var hidden = false;
				for(var j = 0; !hidden && j < managedWindows.length; j = j + 1) {
			    	if(!isNull(managedWindows[j].style)) {
					    var kx = getX(managedWindows[j]);
					    var ky = getY(managedWindows[j]);
					    var kwidth = getWidth(managedWindows[j]);
					    var kheight = getHeight(managedWindows[j]);
						if( intersects(kx, ky, kwidth, kheight, cx, cy, cwidth, cheight)) {
							hidden = true;
						    if(isUndefined(comboBoxes[i].style) ||  comboBoxes[i].style.visibility != 'hidden') {
								comboBoxes[i].style.visibility = 'hidden';						
								hidden = true;
							}
						}
					}
				}			
				if(!hidden && ( isNull(comboBoxes[i].style) || comboBoxes[i].style.visibility != 'visible') ) {
					comboBoxes[i].style.visibility = 'visible';		
				}
			}
		}	
	}
	allComboBoxesHidden = false;
}

function intersects(x1, y1, width1, height1, x2, y2, width2, height2) {
	if (width2 <= 0 || height2 <= 0 || width1 <= 0 || height1 <= 0) {
	    return false;
	}
	width2 += x2;
	height2 += y2;
	width1 += x1;
	height1 += y1;
	return ((width2 < x2 || width2 > x1) &&
		(height2 < y2 || height2 > y1) &&
		(width1 < x1 || width1 > x2) &&
		(height1 < y1 || height1 > y2));
}

function findX(control) {
	var x = 0;
	if (control.offsetParent) {
		while (control.offsetParent) {
			x += control.offsetLeft;
			control = control.offsetParent;
		}
	}
	else if (control.x) {
		x += control.x;
	}
	return x;
}


function findY(control) {
	var y = 0;
	if (control.offsetParent) {
		while (control.offsetParent) {
			y += control.offsetTop;
			control = control.offsetParent;
		}
	}
	else if (control.y) {
		y += control.y;
	}
	return y;
}