[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