[Mapbender-commits] r2736 - trunk/mapbender/http/javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Mon Aug 4 06:12:50 EDT 2008
Author: verenadiewald
Date: 2008-08-04 06:12:50 -0400 (Mon, 04 Aug 2008)
New Revision: 2736
Modified:
trunk/mapbender/http/javascripts/popup.js
Log:
current version
Modified: trunk/mapbender/http/javascripts/popup.js
===================================================================
--- trunk/mapbender/http/javascripts/popup.js 2008-08-04 09:59:43 UTC (rev 2735)
+++ trunk/mapbender/http/javascripts/popup.js 2008-08-04 10:12:50 UTC (rev 2736)
@@ -18,22 +18,25 @@
* width: popup width
* height: popup height
* title: popup title
- * frameName: name of the popups iframe if it loads a frame
- * opacity: opacity of the frame
- * moveOpacity: opacity while the user moves or resizes the frame
+ * frameName: name of the popups iframe if it loads a frame (recommended to set destroy to false)
+ * opacity: opacity of the frame default:1
+ * moveOpacity: opacity while the user moves or resizes the frame default:0.8
* html:content html of the frame (not parsed if url not false)
* url:content url of the frame
* minWidth: minimum width of the popup if the user resizes it
* maxWidth: maximum width of the popup if the user resizes it
* minHeight: minimum height of the popup if the user resizes it
* maxHeight: maximum height of the popup if the user resizes it
- * minTop: minimum top position if the user moves the popup
- * minLeft: minimum left position if the user moves the popup
+ * 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
* maxBottom: maximum bottom position if the user moves/resized the popup
- * style: additional styles for the popup
- * destroy: remove dom of popup if user closes it (don't use it for iframes with framename)
+ * 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
* closeCallback: function that is called if the user closes the window
+ * 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)
*
* @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
@@ -52,7 +55,7 @@
// }
this.id="popup"+String(create_pos);
-// this.id="popup"+String(++popup_top);
+// this.id="popup"+String(popup_top);
//Set defaults
defaults = {
@@ -60,8 +63,9 @@
top:25*create_pos,
width:300,height:250,
title:"Title",
- frameName:this.id
- }
+ frameName:this.id,
+ id:this.id
+ };
if(typeof(title)!='object'){
this.options = defaults;
@@ -109,6 +113,7 @@
*/
mb_popup.prototype.hide = function(){
$("#"+this.id).hide();
+ $("#balloon_"+this.id).hide();
}
/**
@@ -116,6 +121,7 @@
*/
mb_popup.prototype.destroy = function(){
$("#"+this.id).remove();
+ $("#balloon_"+this.id).remove();
}
/**
@@ -238,14 +244,14 @@
$.fn.mbPopup = function(options){
//default settings
defaults = {
- left:0,top:0,
- width:300,height:250,
+ left:0,top:0,width:300,height:250,
title:"",frameName:"",
opacity:1.0,moveOpacity:0.8,html:false,url:false,
minWidth:false,maxWidth:false,
minHeight:false,maxHeight:false,
minTop:"document",minLeft:"document",
maxRight:false,maxBottom:false,
+ dragable:true,resizeable:true,balloon:false,
style:null,destroy:true,
closeCallback:null
};
@@ -255,10 +261,47 @@
//add Styles
this.addClass("jqmNotice");
- this.css({top:settings.top,
- left:settings.left,
- width:settings.width,
- height:settings.height,
+ //automated settings for balloon popup
+ if(settings.balloon){
+ var dim = getScrollPos();
+
+ bubble_height = 80;
+ bubble_width = 100;
+ 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'>");
+ }
+
+ this.css({top:settings.top+"px",
+ left:settings.left+"px",
+ width:settings.width+"px",
+ height:settings.height+"px",
opacity:settings.opacity
});
@@ -271,13 +314,14 @@
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" /><div class="jqResize" />');
+ 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" />':''));
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++);
@@ -290,10 +334,11 @@
var data = $.mbPopupFn.parseDimensions(event);
//bind mouse events to popup
- $().bind("mousemove",data,$.mbPopupFn.drag).bind('mouseup',event.data,$.mbPopupFn.stopdrag);
+ $().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++);
@@ -306,27 +351,36 @@
var data = $.mbPopupFn.parseDimensions(event);
//bind mouse events to popup
- $().bind("mousemove",data,$.mbPopupFn.resize).bind('mouseup',event.data,$.mbPopupFn.stopresize);
+ $().bind("mousemove",$.extend(data,{drag:false}),$.mbPopupFn.move).bind('mouseup',event.data,$.mbPopupFn.stop);
});
//closeButton
$(".jqmClose", this).bind('click',data, function(event){
if(event.data.close)
event.data.close();
- if(event.data.destroy)
+ if(event.data.destroy){
event.data.El.slideUp('slow', function(){$(this).remove();});
- else
+ $("#balloon_"+event.data.El.attr("id")).remove();
+ }
+ else{
event.data.El.slideUp('slow');
+ $("#balloon_"+event.data.El.attr("id")).fadeOut();
+ }
});
//raise on click
- this.click(function(){this.style.zIndex=popup_top++});
+ 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++;});
+
+ //raise top postition
+ popup_top++;
};
//helper functions
$.mbPopupFn = {
- //on drag
- drag:function(event){
- //console.log("tesddt");
+ //on mouse action
+ 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)
@@ -339,9 +393,9 @@
newPos.Y=event.data.tY-event.data.H;
event.data.El.css({left:newPos.X,top:newPos.Y});
- },
- //on resize
- resize:function(event){
+ return;
+ }
+ //resize
var newDim = {W:Math.max(event.pageX-event.data.pX+event.data.W,0),
H:Math.max(event.pageY-event.data.pY+event.data.H,0)};
if(event.data.fW!==false&&newDim.W<event.data.fW)
@@ -359,10 +413,10 @@
event.data.El.css({width:newDim.W,height:newDim.H});
},
- stopdrag:function(event){
+ stop:function(event){
event.data.El.css('opacity',event.data.opacity)
$("iframe", event.data.El).show();
- $().unbind('mousemove',$.mbPopupFn.drag).unbind('mouseup',$.mbPopupFn.stopdrag);
+ $().unbind('mousemove',$.mbPopupFn.move).unbind('mouseup',$.mbPopupFn.stop);
$("#mouse_catcher").remove();
},
stopresize:function(event){
@@ -374,7 +428,9 @@
//parse move and resize dimensions
parseDimensions:function(d){
var dim = getScrollPos();
- return {El:d.data.El,
+ var bd = {X:parseInt($(d.data.El).css("border-left-width"))+parseInt($(d.data.El).css("border-right-width")),
+ Y:parseInt($(d.data.El).css("border-top-width"))+parseInt($(d.data.El).css("border-bottom-width"))};
+ ret = {El:d.data.El,
fX:(d.data.fX=="window"?dim.X:(d.data.fX=="document"?0:(d.data.fX<0?dim.dW-d.data.fX:d.data.fX))),
fY:(d.data.fX=="window"?dim.Y:(d.data.fY=="document"?0:(d.data.fY<0?dim.dH-d.data.fY:d.data.fY))),
tX:(d.data.tX=="window"?dim.X+dim.wW:(d.data.tX=="document"?dim.dW:(d.data.tX<0?dim.dW-d.data.tX:d.data.tX))),
@@ -389,6 +445,9 @@
H:parseInt(d.data.El.css("height")),
pX:d.pageX,pY:d.pageY
};
+ if(ret.tX)ret.tX-=bd.X;
+ if(ret.tY)ret.tY-=bd.Y;
+ return ret;
}
};
})
More information about the Mapbender_commits
mailing list