[Mapbender-commits] r3204 - branches/noframes/http/javascripts

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Fri Nov 7 05:19:04 EST 2008


Author: christoph
Date: 2008-11-07 05:19:04 -0500 (Fri, 07 Nov 2008)
New Revision: 3204

Modified:
   branches/noframes/http/javascripts/popup.js
Log:
merged from trunk

Modified: branches/noframes/http/javascripts/popup.js
===================================================================
--- branches/noframes/http/javascripts/popup.js	2008-11-07 10:14:54 UTC (rev 3203)
+++ branches/noframes/http/javascripts/popup.js	2008-11-07 10:19:04 UTC (rev 3204)
@@ -29,7 +29,7 @@
  *  maxHeight: maximum height of the popup if the user resizes it
  *  minTop: minimum top position if the user moves the popup default:"document"
  *  minLeft: minimum left position if the user moves the popup default:"document"
- *  maxRight: maximum right position if the user moves/resizes the popup
+ *  maxRight: maximum right position if the user moves/resizes the popup 
  *  maxBottom: maximum bottom position if the user moves/resized the popup
  * 	style: additional styles for the popup window
  *  destroy: remove dom of popup if user closes it (don't use it for iframes with framename) default:true
@@ -37,6 +37,7 @@
  *  resizeable: allow user to change the size default:true
  *  dragable: allow user to move the window default:true
  *  balloon: balloon popup from top, left (disables resizeable and dragable)
+ *  modal: create modal popup default:false
  * 
  * @param {String} html the "body" of the popup, can also be "url:http://foo.de" to display a website
  * @param {Number} width width of the popup
@@ -49,14 +50,13 @@
 	//get first free place
 	var create_pos=popup_count;
 	for(var i = 0; i < popup_count;i++)
-//		if(!document.getElementById("popup"+String(i))){
-//			create_pos=i;
-//			break;
-//		}
+		if(!document.getElementById("popup"+String(i))){
+			create_pos=i;
+			break;
+		}
 
-	this.id="popup"+String(create_pos);
-//	this.id="popup"+String(popup_top);
-	
+	this.id="popup"+String(++popup_top);
+		
 	//Set defaults
 	defaults = {
 		left:25*create_pos,
@@ -66,7 +66,7 @@
 		frameName:this.id,
 		id:this.id
 	};
-		
+
 	if(typeof(title)!='object'){
 		this.options = defaults;
 		
@@ -88,6 +88,8 @@
 	else
 		this.options=$.extend(defaults, title);
 
+	this.id = this.options.id;
+	
 	popup_count++;
 	
 	//create dom popup
@@ -114,6 +116,7 @@
 mb_popup.prototype.hide = function(){	
 	$("#"+this.id).hide();
 	$("#balloon_"+this.id).hide();
+	$("#modal_mouse_catcher").remove();
 }
 
 /**
@@ -122,6 +125,7 @@
 mb_popup.prototype.destroy = function(){	
 	$("#"+this.id).remove();
 	$("#balloon_"+this.id).remove();
+	$("#modal_mouse_catcher").remove();
 }
 
 /**
@@ -191,10 +195,43 @@
 mb_popup.prototype.setHtml = function(htmll){
 	this.options.url=null;
 	this.options.html=htmll;
-	$("#"+this.id+" .jqmnContent").html(htmll);
+	$("#"+this.id+" .Content").html('<div class="scrollDiv">'+htmll+'</div>');
 }
+/**
+ * behaves like document.open(); (clear popup)
+ */
+mb_popup.prototype.open = function(){
+	oDoc = this.getDocument();
+	if(oDoc!=null){
+		return oDoc.open();
+	}
+	this.setHtml("");
+}
 
 /**
+ * behaves like document.write(); (appends content to the popup)
+ * 
+ * @param {String} text or html to write into the document
+ */
+mb_popup.prototype.write = function(str){
+	oDoc = this.getDocument();
+	if(oDoc!=null){
+		return oDoc.write(str);
+	}
+	this.setHtml(this.options.html+str);
+}
+
+/**
+ * behaves like document.close(); (finish loading state if popup is an iframe)
+ */
+mb_popup.prototype.close = function(){
+	oDoc = this.getDocument();
+	if(oDoc!=null){
+		return oDoc.close();
+	}
+}
+
+/**
  * sets the url of the content
  *
  * @param {String} url new url of the popup  
@@ -202,14 +239,24 @@
 mb_popup.prototype.setUrl = function(url){
 	this.options.url=url;
 	this.options.html=null;
-	try{
-		eval("window.frames."+this.options.frameName+".location = \""+url+"\"");
-	}catch(e){
-		$("#"+this.id+" .jqmnContent").html('<iframe src="'+url+'"></iframe>');
+	
+	oDoc = this.getDocument();
+	if(oDoc){
+		oDoc.location.href = url;
 	}
+	else{
+		$("#"+this.id+" .Content").html('<iframe src="'+url+'"></iframe>');
+	}
 }
 
 /**
+ * reposition
+ */
+mb_popup.prototype.reposition =function(){
+//TODO	
+}
+
+/**
  * gets the visible state of the popup window
  * @return visible state of the popup
  * @type Boolean
@@ -219,6 +266,34 @@
 }
 
 /**
+ * (re) set Some Options of the popup Window and rerender it
+ * @param options object that contains the new options
+ */
+mb_popup.prototype.set = function(options){
+	this.destroy();
+	this.options=$.extend(this.options, options);
+	this.show();
+}
+
+/**
+ * get the DOM document of the client iframe
+ * @return DOM document or null if the popup doesn't contain an iframe
+ */
+mb_popup.prototype.getDocument = function(){
+	iFrame = $("#"+this.id+" iframe")[0];
+	try{
+		//try to load contentWindow first since not every browser 
+		//supports contentDocument (or gives the window instead)
+		oDoc = iFrame.contentWindow || iFrame.contentDocument;
+		if (oDoc.document) {
+	        oDoc = oDoc.document;
+    	}
+    	return oDoc;
+	}
+	catch(e){return null;}
+}
+
+/**
  * get Scroll position
  */
 function getScrollPos() {  
@@ -236,10 +311,12 @@
 		//IE6 standards compliant mode  
 		scrOf.Y = document.documentElement.scrollTop;  
 		scrOf.X = document.documentElement.scrollLeft;  
-	}  
+	}
 	return scrOf;  
 }
 
+
+
 (function($){
 	$.fn.mbPopup = function(options){
 		//default settings
@@ -252,112 +329,103 @@
 			minTop:"document",minLeft:"document",
 			maxRight:false,maxBottom:false,
 			dragable:true,resizeable:true,balloon:false,
-			style:null,destroy:true,
+			style:null,destroy:true,modal:false,
 			closeCallback:null
 		};
 		//override defaults
 		settings=$.extend(defaults,options)
+		this.settings = settings;
 		
 		//add Styles
-		this.addClass("jqmNotice");
+		this.addClass("mbPopup");
 		
+		//append additions styles
+		if(settings.style)
+			this.css(settings.style);
+		
 		//automated settings for balloon popup
 		if(settings.balloon){
-			var dim = getScrollPos();
-			
-			bubble_height = 80;
-			bubble_width = 100;
+			$("body").append("<div id='balloon_"+settings.id+"' class='balloonBL' style='visibility:hidden;'>");
 			settings.resizeable = false;
 			settings.dragable = false;
-			settings.hotSpotY=settings.top;
-			settings.hotSpotX=settings.left;
-			position = 0;
-			
-			console ={};
-			console.log = function(){};
-			
-			if(settings.hotSpotY-settings.height-bubble_height-parseInt(this.css("border-top-width"))<dim.Y){
-				//bubble on top
-				settings.top = settings.hotSpotY+bubble_height-parseInt(this.css("border-top-width"));
-			}
-			else{
-				//bubble on bottom
-				settings.top = settings.hotSpotY-settings.height-bubble_height+(top.ie?parseInt(this.css("border-bottom-width")):-parseInt(this.css("border-top-width")));
-				position+=2;
-			}
-			if(settings.hotSpotX+settings.width+parseInt(this.css("border-left-width"))+parseInt(this.css("border-right-width"))>(dim.X+dim.wW)){
-				//bubble on right
-				settings.left = settings.hotSpotX-parseInt(this.css("border-left-width"))-parseInt(this.css("border-right-width"))-settings.width;
-				position++;
-			}
-			else{
-				//bubble on left
-				settings.left = settings.hotSpotX-parseInt(this.css("border-left-width"));
-			}
+		}
 
-			$("body").append("<div id='balloon_"+settings.id+"' class='balloon"+(position>=2?"B":"T")+(position%2?"R":"L")+"' style='z-index:"+(popup_top++)+";left:"+(settings.hotSpotX-(position%2?bubble_width:0))+"px;top:"+(settings.hotSpotY-(position>=2?bubble_height:0))+"px'>");
+		//calculate positioning (mainly needed for balloon style)
+		pos = $.mbPopupFn.calcPositioning(settings, this);
+
+		//set balloon arm position
+		if(settings.balloon){
+			$("#balloon_"+settings.id).attr("class", "balloon"+(pos.position>=2?"B":"T")+(pos.position%2?"R":"L"))
+				.css({"z-index":(popup_top),visibility:"visible",left:String(pos.bX)+"px",top:String(pos.bY)+"px"});
+			settings.left = pos.pX;
+			settings.top = pos.pY;
 		}
 		
-		this.css({top:settings.top+"px",
-			left:settings.left+"px",
-			width:settings.width+"px",
-			height:settings.height+"px",
+		//fix IE width and height by adding the padding values
+		if($.browser.msie){
+			settings.width = pos.pW;
+			settings.height = pos.pH;
+		}
+		
+		//Set dimensions
+		this.css({top:String(settings.top)+"px",
+			left:String(settings.left)+"px",
+			width:String(settings.width)+"px",
+			height:String(settings.height)+"px",
 			opacity:settings.opacity
 			});
 		
-		if(settings.style)
-			this.css(settings.style);
-		
 		//Insert content
 		if(settings.url)
 			html = ('<iframe name="'+settings.frameName+'" src="'+settings.url+'"></iframe>');
 		else
 			html = ('<div class="scrollDiv">'+settings.html+'</div>');
 	
-		this.html('<div class="jqmnTitle jqDrag"><h1>'+settings.title+'</h1></div><div class="jqmnContent">'+html+'</div><img src="../img/close_icon.png" class="jqmClose" alt="close" />'+(settings.resizeable?'<div class="jqResize" />':''));
+		this.html('<div class="Title Drag"><h1>'+settings.title+'</h1></div><div class="Content">'+html+'</div><img src="../img/close_icon.png" class="Close" alt="close" />'+(settings.resizeable?'<div class="Resize" />':''));
 	
 		var data = {El:this,fY:settings.minTop,fX:settings.minLeft,tX:settings.maxRight,tY:settings.maxBottom,
 			fW:settings.minWidth,tW:settings.maxWidth,fH:settings.minHeight,tH:settings.maxHeight,
 			destroy:settings.destroy,opacity:settings.opacity,moveOpacity:settings.moveOpacity,close:settings.closeCallback}
-
+		
 		//Make window Dragable
 		if(settings.dragable)
-		$(".jqDrag", this).bind('mousedown',data,function(event){
-			//set to top
-			event.data.El.css("z-index",popup_top++);
-			event.data.El.css('opacity',event.data.moveOpacity)
-			//create helper div to steal mouse events
-			$("body").append("<div style=\"position:absolute;top:0px;left:0px;width:"+$().width()+"px;height:"+$().height()+"px;z-index:"+(popup_top+2)+(top.ie?";background:url(../img/transparent.gif)":"")+"\" id=\"mouse_catcher\"></div>");
-			$("iframe", event.data.El).hide();
-						
-			//Parse setiings of min and max position
-			var data = $.mbPopupFn.parseDimensions(event);
-			
-			//bind mouse events to popup
+			$(".Drag", this).bind('mousedown',data,function(event){
+				//set to top
+				event.data.El.css("z-index",popup_top++);
+				event.data.El.css('opacity',event.data.moveOpacity)
+				//create helper div to steal mouse events
+				$("body").append("<div style=\"position:absolute;top:0px;left:0px;width:"+$().width()+"px;height:"+$().height()+"px;z-index:"+(popup_top+2)+($.browser.msie?";background:url(../img/transparent.gif)":"")+"\" id=\"mouse_catcher\"></div>");
+				$("iframe", event.data.El).hide();
+							
+				//Parse setiings of min and max position
+				var data = $.mbPopupFn.parseDimensions(event);
+				
+				//bind mouse events to popup
 				$().bind("mousemove",$.extend(data,{drag:true}),$.mbPopupFn.move).bind('mouseup',event.data,$.mbPopupFn.stop);
-		});
+			});
 		
 		//Make Window resizable
 		if(settings.resizeable)
-		$(".jqResize", this).bind('mousedown',data,function(event){
-			//set to top
-			event.data.El.css("z-index",popup_top++);
-			event.data.El.css('opacity',0.8)
-			//create helper div to steal mouse events
-			$("body").append("<div style=\"position:absolute;top:0px;left:0px;width:"+$().width()+"px;height:"+$().height()+"px;z-index:"+(popup_top+2)+(top.ie?";background:url(../img/transparent.gif)":"")+"\" id=\"mouse_catcher\"></div>");
-			$("iframe", event.data.El).hide();
-
-			//Parse setiings of min and max position
-			var data = $.mbPopupFn.parseDimensions(event);
-			
-			//bind mouse events to popup
+			$(".Resize", this).bind('mousedown',data,function(event){
+				//set to top
+				event.data.El.css("z-index",popup_top++);
+				event.data.El.css('opacity',event.data.moveOpacity)
+				//create helper div to steal mouse events
+				$("body").append("<div style=\"position:absolute;top:0px;left:0px;width:"+$().width()+"px;height:"+$().height()+"px;z-index:"+(popup_top+2)+($.browser.msie?";background:url(../img/transparent.gif)":"")+"\" id=\"mouse_catcher\"></div>");
+				$("iframe", event.data.El).hide();
+	
+				//Parse setiings of min and max position
+				var data = $.mbPopupFn.parseDimensions(event);
+				
+				//bind mouse events to popup
 				$().bind("mousemove",$.extend(data,{drag:false}),$.mbPopupFn.move).bind('mouseup',event.data,$.mbPopupFn.stop);
-		});
+			});
 		
 		//closeButton
-		$(".jqmClose", this).bind('click',data, function(event){
+		this.closePopup = function(event){
 			if(event.data.close)
 				event.data.close();
+			$("#modal_mouse_catcher").remove();
 			if(event.data.destroy){
 				event.data.El.slideUp('slow', function(){$(this).remove();});
 				$("#balloon_"+event.data.El.attr("id")).remove();
@@ -366,8 +434,15 @@
 				event.data.El.slideUp('slow');
 				$("#balloon_"+event.data.El.attr("id")).fadeOut();
 			}
-		});
+		};
+		$(".Close", this).bind('click',data, this.closePopup);
 		
+		//create div to make window modal
+		if(settings.modal){
+			$("body").append("<div style=\"position:absolute;top:0px;left:0px;width:"+$().width()+"px;height:"+$().height()+"px;z-index:"+(popup_top-1)+($.browser.msie?";background:url(../img/transparent.gif)":"")+"\" id=\"modal_mouse_catcher\"></div>");
+			$("#modal_mouse_catcher").bind('click',data, this.closePopup);
+		}
+
 		//raise on click
 		this.click(function(){this.style.zIndex=popup_top++;$("#balloon_"+this.id).css("z-index", popup_top++);});
 		$("#balloon_"+settings.id).click(function(){$("#"+this.id.substr(8)).css("z-index", popup_top++);this.style.zIndex=popup_top++;});
@@ -381,18 +456,18 @@
 		move:function(event){
 			//drag
 			if(event.data.drag){
-			var newPos = {X:event.data.X+event.pageX-event.data.pX,
-				Y:event.data.Y+event.pageY-event.data.pY};
-			if(event.data.fX!==false&&newPos.X<event.data.fX)
-				newPos.X=event.data.fX;
-			if(event.data.fY!==false&&newPos.Y<event.data.fY)
-				newPos.Y=event.data.fY;
-			if(event.data.tX!==false&&newPos.X>event.data.tX-event.data.W)
-				newPos.X=event.data.tX-event.data.W;
-			if(event.data.tY!==false&&newPos.Y>event.data.tY-event.data.H)
-				newPos.Y=event.data.tY-event.data.H;
-			
-			event.data.El.css({left:newPos.X,top:newPos.Y});
+				var newPos = {X:event.data.X+event.pageX-event.data.pX,
+					Y:event.data.Y+event.pageY-event.data.pY};
+				if(event.data.fX!==false&&newPos.X<event.data.fX)
+					newPos.X=event.data.fX;
+				if(event.data.fY!==false&&newPos.Y<event.data.fY)
+					newPos.Y=event.data.fY;
+				if(event.data.tX!==false&&newPos.X>event.data.tX-event.data.W)
+					newPos.X=event.data.tX-event.data.W;
+				if(event.data.tY!==false&&newPos.Y>event.data.tY-event.data.H)
+					newPos.Y=event.data.tY-event.data.H;
+				
+				event.data.El.css({left:newPos.X,top:newPos.Y});
 				return;
 			}
 			//resize
@@ -412,6 +487,7 @@
 				newDim.H=event.data.tY-event.data.Y;	
 						
 			event.data.El.css({width:newDim.W,height:newDim.H});
+			
 		},
 		stop:function(event){
 			event.data.El.css('opacity',event.data.opacity)
@@ -419,12 +495,6 @@
 			$().unbind('mousemove',$.mbPopupFn.move).unbind('mouseup',$.mbPopupFn.stop);
 			$("#mouse_catcher").remove();
 		},
-		stopresize:function(event){
-			event.data.El.css('opacity',event.data.opacity)
-			$("iframe", event.data.El).show();
-			$().unbind('mousemove',$.mbPopupFn.resize).unbind('mouseup',$.mbPopupFn.stopresize);
-			$("#mouse_catcher").remove();
-		},
 		//parse move and resize dimensions
 		parseDimensions:function(d){
 			var dim = getScrollPos();
@@ -448,6 +518,42 @@
 			if(ret.tX)ret.tX-=bd.X;
 			if(ret.tY)ret.tY-=bd.Y;
 			return ret;	
+		},
+		calcPositioning:function(settings, el){
+			var dim = getScrollPos();
+			
+			pos = {};
+			pos.pH = settings.height + (parseInt(el.css("padding-top"))+parseInt(el.css("padding-bottom")));
+			pos.pW = settings.width + (parseInt(el.css("padding-left"))+parseInt(el.css("padding-right")));
+			if(settings.balloon){
+				pos.bH = $("#balloon_"+settings.id).height();
+				pos.bW = $("#balloon_"+settings.id).width();
+	
+				pos.position = 0;
+				
+				if(settings.top-pos.pH-pos.bH-parseInt(el.css("border-top-width"))<dim.Y){
+					//bubble on top
+					pos.pY = settings.top+pos.bH-parseInt(el.css("border-top-width"));
+				}
+				else{
+					//bubble on bottom
+					pos.pY = settings.top-pos.pH-pos.bH+($.browser.msie?parseInt(el.css("border-bottom-width")):-parseInt(el.css("border-top-width")));
+					pos.position+=2;
+				}
+				if(settings.left+pos.pW+parseInt(el.css("border-left-width"))+parseInt(el.css("border-right-width"))>(dim.X+dim.wW)){
+					//bubble on right
+					pos.pX = settings.left-parseInt(el.css("border-left-width"))-parseInt(el.css("border-right-width"))-pos.pW;
+					pos.position++;
+				}
+				else{
+					//bubble on left
+					pos.pX = settings.left-parseInt(el.css("border-left-width"));
+				}
+				
+				pos.bX=(settings.left-(pos.position%2?pos.bW:0));
+				pos.bY=(settings.top-(pos.position>=2?pos.bH:0));
+			}
+			return pos;
 		}
 	};
 	})



More information about the Mapbender_commits mailing list