[Mapbender-commits] r2251 - in branches/nimix_dev/http: css img
javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Fri Mar 14 07:05:17 EDT 2008
Author: nimix
Date: 2008-03-14 07:05:17 -0400 (Fri, 14 Mar 2008)
New Revision: 2251
Added:
branches/nimix_dev/http/img/balloon_ll.png
branches/nimix_dev/http/img/balloon_lr.png
branches/nimix_dev/http/img/balloon_ul.png
branches/nimix_dev/http/img/balloon_ur.png
Modified:
branches/nimix_dev/http/css/popup.css
branches/nimix_dev/http/javascripts/popup.js
Log:
add experimental balloon popups
Modified: branches/nimix_dev/http/css/popup.css
===================================================================
--- branches/nimix_dev/http/css/popup.css 2008-03-14 10:59:30 UTC (rev 2250)
+++ branches/nimix_dev/http/css/popup.css 2008-03-14 11:05:17 UTC (rev 2251)
@@ -1,6 +1,6 @@
@CHARSET "UTF-8";
/*fixes*/
-div.jqmNotice iframe {width:100%;height:100%;}
+div.jqmNotice iframe {width:100%;height:100%;border:none;margin-top:-25px;padding-top:20px;}
div.jqmNotice div.scrollDiv {overflow:auto;position:relative;top:0px;left:0px;right:0px;bottom:0px;width:100%;height:100%;}
div.jqmNotice {
@@ -9,25 +9,26 @@
position: absolute;
/*styles that can change*/
- background:#EEEEEE url(../img/info_on.gif) 5px 5px no-repeat;
+ background:#EEEEEE url(../img/info_on.gif) 8px 8px no-repeat;
border: 1px solid #000;
- padding: 0;
- padding-bottom:30px;
-}
+ -moz-border-radius:10px;
+ padding: 0px;
+/* padding-bottom:30px;
+*/}
div.jqmNotice .jqResize {
position: absolute;
- right: 2px;
- bottom: 2px;
+ right: 5px;
+ bottom: 5px;
width:16px;
height:16px;
background:url(../img/resize.gif);
}
-.jqmnTitle{margin: 0 25px;}
+.jqmnTitle{margin: 0 30px;}
.jqmnTitle h1{
- margin: 5px 0;
+ margin: 9px 0;
padding-left:5px;
width: 100%;
font-size:12px;
@@ -38,12 +39,38 @@
div.jqmNotice .jqmClose {
position: absolute;
cursor: pointer;
- right: 4px;
- top: 6px;
+ right: 8px;
+ top: 10px;
}
.jqmnContent{
border-top:1px;
color:#000;
- padding:0 20px 5px;
-}
\ No newline at end of file
+ margin:0px 20px 25px;
+}
+
+.balloonTL{
+ position:absolute;
+ background-image:url("../img/balloon_ul.png");
+ width:100px;
+ height:80px;
+}
+.balloonTR{
+ position:absolute;
+ background-image:url("../img/balloon_ur.png");
+ width:100px;
+ height:80px;
+}
+.balloonBR{
+ position:absolute;
+ background-image:url("../img/balloon_lr.png");
+ width:100px;
+ height:80px;
+}
+.balloonBL{
+ position:absolute;
+ background-image:url("../img/balloon_ll.png");
+ width:100px;
+ height:80px;
+}
+
Added: branches/nimix_dev/http/img/balloon_ll.png
===================================================================
(Binary files differ)
Property changes on: branches/nimix_dev/http/img/balloon_ll.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/nimix_dev/http/img/balloon_lr.png
===================================================================
(Binary files differ)
Property changes on: branches/nimix_dev/http/img/balloon_lr.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/nimix_dev/http/img/balloon_ul.png
===================================================================
(Binary files differ)
Property changes on: branches/nimix_dev/http/img/balloon_ul.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: branches/nimix_dev/http/img/balloon_ur.png
===================================================================
(Binary files differ)
Property changes on: branches/nimix_dev/http/img/balloon_ur.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: branches/nimix_dev/http/javascripts/popup.js
===================================================================
--- branches/nimix_dev/http/javascripts/popup.js 2008-03-14 10:59:30 UTC (rev 2250)
+++ branches/nimix_dev/http/javascripts/popup.js 2008-03-14 11:05:17 UTC (rev 2251)
@@ -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
- * maxRight: maximum right position if the user moves/resizes 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
@@ -59,8 +62,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;
@@ -229,7 +233,7 @@
//IE6 standards compliant mode
scrOf.Y = document.documentElement.scrollTop;
scrOf.X = document.documentElement.scrollLeft;
- }
+ }
return scrOf;
}
@@ -237,27 +241,64 @@
$.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
};
//override defaults
settings=$.extend(defaults,options)
-
+
//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-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
});
@@ -270,77 +311,88 @@
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
- $(".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
- $().bind("mousemove",data,$.mbPopupFn.drag).bind('mouseup',event.data,$.mbPopupFn.stopdrag);
- });
+ 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
+ $().bind("mousemove",$.extend(data,{drag:true}),$.mbPopupFn.move).bind('mouseup',event.data,$.mbPopupFn.stop);
+ });
//Make Window resizable
- $(".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
- $().bind("mousemove",data,$.mbPopupFn.resize).bind('mouseup',event.data,$.mbPopupFn.stopresize);
- });
+ 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
+ $().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");
- 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});
- },
- //on resize
- resize:function(event){
+ //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)
+ 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
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)
@@ -357,23 +409,20 @@
newDim.H=event.data.tY-event.data.Y;
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){
- 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();
- 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))),
@@ -388,6 +437,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