window.js

《SVG开发实践》源代码

			buttonLine.setAttributeNS(null,"stroke",this.buttonStyles["stroke"]);
			buttonLine.setAttributeNS(null,"stroke-width",this.buttonStyles["stroke-width"]);
			buttonLine.setAttributeNS(null,"pointer-events","none");
			closeButtonSymbol.appendChild(buttonLine);
			defsSection.appendChild(closeButtonSymbol);
		}
		this.closeButtonInstance = document.createElementNS(svgNS,"use");
		this.closeButtonInstance.setAttributeNS(null,"x",buttonPosition);
		this.closeButtonInstance.setAttributeNS(null,"y",this.titlebarHeight * 0.5);
		this.closeButtonInstance.setAttributeNS(null,"cursor","pointer");
		this.closeButtonInstance.setAttributeNS(null,"id","closeButton"+this.id);
		this.closeButtonInstance.setAttributeNS(xlinkNS,"href","#closeButton");
		this.closeButtonInstance.addEventListener("click",this,false);
		this.windowTitlebarGroup.appendChild(this.closeButtonInstance);
		buttonPosition -=  this.titlebarHeight;
	}
    
   //create maximize button
   if (this.maximizeButton) {
   	//test if id maximizeButton exists in defs section or create a new maximizeButton symbol
   	var maximizeButtonSymbol = document.getElementById("maximizeButton");
   	if (!maximizeButtonSymbol) {
   		var maximizeButtonSymbol = document.createElementNS(svgNS,"symbol");
   		maximizeButtonSymbol.setAttributeNS(null,"id","maximizeButton");
   		maximizeButtonSymbol.setAttributeNS(null,"overflow","visible");
   		//create background rect
   		var buttonRect = document.createElementNS(svgNS,"rect");
   		buttonRect.setAttributeNS(null,"x",(buttonWidth / 2 * -1));
   		buttonRect.setAttributeNS(null,"y",(buttonWidth / 2 * -1));
   		buttonRect.setAttributeNS(null,"width",buttonWidth);
   		buttonRect.setAttributeNS(null,"height",buttonWidth);
   		for (var attrib in this.buttonStyles) {
   			buttonRect.setAttributeNS(null,attrib,this.buttonStyles[attrib]);
   		}
   		buttonRect.setAttributeNS(null,"pointer-events","fill");
   		maximizeButtonSymbol.appendChild(buttonRect);
   		defsSection.appendChild(maximizeButtonSymbol);
   	}
   	this.maximizeButtonInstance = document.createElementNS(svgNS,"use");
   	this.maximizeButtonInstance.setAttributeNS(null,"x",buttonPosition);
   	this.maximizeButtonInstance.setAttributeNS(null,"y",this.titlebarHeight * 0.5);
   	this.maximizeButtonInstance.setAttributeNS(null,"cursor","pointer");
   	this.maximizeButtonInstance.setAttributeNS(null,"id","maximizeButton"+this.id);
   	this.maximizeButtonInstance.setAttributeNS(xlinkNS,"href","#maximizeButton");
   	this.maximizeButtonInstance.addEventListener("click",this,false);
   	this.windowTitlebarGroup.appendChild(this.maximizeButtonInstance);
   	buttonPosition -=  this.titlebarHeight;
   }

	//create minimize button
	if (this.minimizeButton) {
		//test if id minimizeButton exists in defs section or create a new minimizeButton symbol
		var minimizeButtonSymbol = document.getElementById("minimizeButton");
		if (!minimizeButtonSymbol) {
			var minimizeButtonSymbol = document.createElementNS(svgNS,"symbol");
			minimizeButtonSymbol.setAttributeNS(null,"id","minimizeButton");
			minimizeButtonSymbol.setAttributeNS(null,"overflow","visible");
			//create background rect
			var buttonRect = document.createElementNS(svgNS,"rect");
			buttonRect.setAttributeNS(null,"x",(buttonWidth / 2 * -1));
			buttonRect.setAttributeNS(null,"y",(buttonWidth / 2 * -1));
			buttonRect.setAttributeNS(null,"width",buttonWidth);
			buttonRect.setAttributeNS(null,"height",buttonWidth);
			buttonRect.setAttributeNS(null,"fill",this.buttonStyles["fill"]);
			buttonRect.setAttributeNS(null,"pointer-events","fill");
			minimizeButtonSymbol.appendChild(buttonRect);
			//create line
			var buttonLine = document.createElementNS(svgNS,"line");
			buttonLine.setAttributeNS(null,"x1",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"x2",(buttonWidth / 2 * -1));
			buttonLine.setAttributeNS(null,"y1",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"y2",(buttonWidth / 2));
			buttonLine.setAttributeNS(null,"stroke",this.buttonStyles["stroke"]);
			buttonLine.setAttributeNS(null,"stroke-width",this.buttonStyles["stroke-width"]);
			minimizeButtonSymbol.appendChild(buttonLine);
			defsSection.appendChild(minimizeButtonSymbol);
		}
		this.minimizeButtonInstance = document.createElementNS(svgNS,"use");
		this.minimizeButtonInstance.setAttributeNS(null,"x",buttonPosition);
		this.minimizeButtonInstance.setAttributeNS(null,"y",this.titlebarHeight * 0.5);
		this.minimizeButtonInstance.setAttributeNS(null,"cursor","pointer");
		this.minimizeButtonInstance.setAttributeNS(null,"id","minimizeButton"+this.id);
		this.minimizeButtonInstance.setAttributeNS(xlinkNS,"href","#minimizeButton");
		this.minimizeButtonInstance.addEventListener("click",this,false);
		this.windowTitlebarGroup.appendChild(this.minimizeButtonInstance);
		buttonPosition -=  this.titlebarHeight;
	}

	if (this.statusBarVisible) {
		this.statusbar = document.createElementNS(svgNS,"rect");
		this.statusbar.setAttributeNS(null,"y",(this.height - this.statusbarHeight));
		this.statusbar.setAttributeNS(null,"width",this.width);
		this.statusbar.setAttributeNS(null,"height",this.statusbarHeight);
		for (var attrib in this.statusbarStyles) {
			this.statusbar.setAttributeNS(null,attrib,this.statusbarStyles[attrib]);
		}
		this.windowMainGroup.appendChild(this.statusbar);
		this.statusTextElement = document.createElementNS(svgNS,"text");
		this.statusTextElement.setAttributeNS(null,"x",this.margin);
		this.statusTextElement.setAttributeNS(null,"y",this.height - (this.statusbarHeight - this.statustextStyles["font-size"]));
		var value = "";
		for (var attrib in this.statustextStyles) {
			value = this.statustextStyles[attrib];
			if (attrib == "font-size") {
				value += "px";
			}
			this.statusTextElement.setAttributeNS(null,attrib,value);
		}
		this.statusTextElement.setAttributeNS(null,"pointer-events","none");
		if (this.statusText.length > 0) {
			this.statusTextNode = document.createTextNode(this.statusText);
		}
		else {
			this.statusTextNode = document.createTextNode(" ");
		}
		this.statusTextElement.appendChild(this.statusTextNode);
		this.windowMainGroup.appendChild(this.statusTextElement);
	}

	//append titlebar group to window group
	this.windowGroup.appendChild(this.windowTitlebarGroup);

	//finally append group to windows group
	this.parentGroup.appendChild(this.windowGroup);

	//issue event that window was created
	this.timer.setTimeout("fireFunction",this.timerMs,"created");	
	}
	else {
		alert("could not create or reference 'parentNode' of window with id '"+this.id+"'");
	}
}

//test if window group exists or create a new group at the end of the file
Window.prototype.testParent = function() {
    //test if of type object
    var nodeValid = false;
    if (typeof(this.parentNode) == "object") {
    	if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g") {
    		this.parentGroup = this.parentNode;
    		nodeValid = true;
    	}
    }
    else if (typeof(this.parentNode) == "string") { 
    	//first test if Windows group exists
    	if (!document.getElementById(this.parentNode)) {
        	this.parentGroup = document.createElementNS(svgNS,"g");
        	this.parentGroup.setAttributeNS(null,"id",this.parentNode);
        	document.documentElement.appendChild(this.parentGroup);
        	nodeValid = true;
   		}
   		else {
       		this.parentGroup = document.getElementById(this.parentNode);
       		nodeValid = true;
   		}
   	}
   	return nodeValid;
}

//central mouse-event handling
Window.prototype.handleEvent = function(evt) {
    if (evt.type == "click") {
    	var elId = evt.currentTarget.getAttributeNS(null,"id");
        if (elId == "closeButton"+this.id) {
            this.close(true);
        }
        if (elId == "maximizeButton"+this.id) {
            this.maximize(true);
        }
        if (elId == "minimizeButton"+this.id) {
            this.minimize(true);
        }
        if (elId == "titleBar"+this.id || elId == "decoGroup"+this.id) {
            if (evt.detail == 2) {
            	if (this.minimized) {
            		this.maximize(true);
            	}
            	else {
            		this.minimize(true);
            	}
            }
        }
    }
    if (evt.type == "mousedown") {
    	var elId = evt.currentTarget.getAttributeNS(null,"id");
    	if (elId == "titleBar"+this.id || elId == "decoGroup"+this.id) {
    		//put it to the front
    		this.parentGroup.appendChild(this.windowGroup);
    		if (this.moveable) {
    			this.panStatus = 1;
    			//var coords = myMapApp.calcCoord(evt,document.documentElement);
				var coords = myMapApp.calcCoord(evt,this.parentGroup);
				this.panCoords = coords;
    			document.documentElement.addEventListener("mousemove",this,false);
    			document.documentElement.addEventListener("mouseup",this,false);
    			if (!this.showContent) {
    				this.windowTitlebarGroup.setAttributeNS(null,"display","none");
    				this.windowMainGroup.setAttributeNS(null,"display","none");
    				if (this.minimized) {
    					this.shadowTitleRect.setAttributeNS(null,"display","inherit");
    				}
    				else {
    					this.shadowRect.setAttributeNS(null,"display","inherit");
    				}
    			}
    			else {
 		    		if (this.titleBarVisible) {
   						this.titlebar.setAttributeNS(null,"cursor","move");
					}
					if (this.decorationGroup) {
   						this.decorationGroup.setAttributeNS(null,"cursor","move");
					}
    			}
    			this.windowGroup.setAttributeNS(batikNS,"static","true");
				this.fireFunction("moveStart");
    		}
    	}
    }
    if (evt.type == "mousemove") {
    	if (this.panStatus == 1) {
			//var coords = myMapApp.calcCoord(evt,document.documentElement);
    		var coords = myMapApp.calcCoord(evt,this.parentGroup);
			if (coords.x < this.constrXmin || coords.x > this.constrXmax || coords.y < this.constrYmin || coords.y > this.constrYmax) {
				this.stopDrag();
			}
			else {
				this.transX += coords.x - this.panCoords.x;
				this.transY += coords.y - this.panCoords.y;
				//check constraints
				if (this.transX < this.constrXmin) {
					this.transX = this.constrXmin;
				}
				if (this.transY < this.constrYmin) {
					this.transY = this.constrYmin;
				}
				if ((this.transX + this.width) > (this.constrXmax)) {
					this.transX = this.constrXmax - this.width;
				}
				if (this.minimized) {
					if ((this.transY + this.titlebarHeight) > (this.constrYmax)) {
						this.transY = this.constrYmax - this.titlebarHeight;
					}
				}
				else {
					if ((this.transY + this.height) > (this.constrYmax)) {
						this.transY = this.constrYmax - this.height;
					}
				}
				this.windowGroup.setAttributeNS(null,"transform","translate("+this.transX+","+this.transY+")");
				this.panCoords = coords;
				this.timer.setTimeout("fireFunction",this.timerMs,"moved");
    		}
    	}
    }
    if (evt.type == "mouseup") {
    	if (this.panStatus == 1) {
    		this.stopDrag();
    	}
    }
}

Window.prototype.fireFunction = function(evtType) {
	if (typeof(this.functionToCall) == "function") {
		this.functionToCall(this.id,evtType);
	}
	if (typeof(this.functionToCall) == "object") {
		this.functionToCall.windowStatusChanged(this.id,evtType);
	}
	if (typeof(this.functionToCall) == undefined) {
		return;
	}
}

//helper method to stop the dragging mode
Window.prototype.stopDrag = function() {
    	this.windowGroup.removeAttributeNS(batikNS,"static");
    	document.documentElement.removeEventListener("mousemove",this,false);
    	document.documentElement.removeEventListener("mouseup",this,false);
    	if (!this.showContent) {