[Mapbender-commits] r5971 - in trunk/mapbender: http/classes http/css http/frames http/javascripts http/plugins lib

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Mon Apr 19 04:40:22 EDT 2010


Author: christoph
Date: 2010-04-19 04:40:07 -0400 (Mon, 19 Apr 2010)
New Revision: 5971

Added:
   trunk/mapbender/http/plugins/mb_pane.js
Modified:
   trunk/mapbender/http/classes/class_element.php
   trunk/mapbender/http/css/admin.css
   trunk/mapbender/http/css/admin_service.css
   trunk/mapbender/http/css/admin_user.css
   trunk/mapbender/http/frames/index.php
   trunk/mapbender/http/javascripts/map.php
   trunk/mapbender/http/javascripts/map_obj.js
   trunk/mapbender/lib/core.js
Log:
added jQuery UI layout

Modified: trunk/mapbender/http/classes/class_element.php
===================================================================
--- trunk/mapbender/http/classes/class_element.php	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/classes/class_element.php	2010-04-19 08:40:07 UTC (rev 5971)
@@ -219,7 +219,11 @@
 			if ($this->moreStyles) {
 		    	$openTag .= $this->moreStyles;
 			}
-			$openTag .= "'>";
+			$openTag .= "'";
+			if ($this->element !== "body") {
+				$openTag .= " class='hide-during-splash'";
+			}
+			$openTag .= ">";
 
 			if ($this->element == "body") {
 				$e_id = "body";
@@ -250,9 +254,7 @@
 				}	
 				$openTag .= "<div id='loading_mapbender' " .
 								"style='margin:0px;padding:0px;width:100%;height:100%;'>" . 
-								$splashScreen . "</div>" . 
-								"<div id='complete_mapbender' " .
-								"style='display:none;width:99%;height:99%'>";
+								$splashScreen . "</div>";
 				unset ($e_id, $gui_id);
 			}
 		}
@@ -269,7 +271,7 @@
 	
 	private function getHtmlCloseTag () {
 		if ($this->element == "body") {
-			return "</div></body>";
+			return "</body>";
 		}
 		if ($this->closeTag != "") {
 			return "</" . $this->closeTag . ">";

Modified: trunk/mapbender/http/css/admin.css
===================================================================
--- trunk/mapbender/http/css/admin.css	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/css/admin.css	2010-04-19 08:40:07 UTC (rev 5971)
@@ -22,8 +22,10 @@
 	background-color: #DCDCDC;
 
 }
-#loading_mapbender div, 
-#complete_mapbender div{
+.hide-during-splash {
+	display: none;
+}
+body {
 	font-size: 12px;
 	font-weight: bold;
 	text-decoration: underline;

Modified: trunk/mapbender/http/css/admin_service.css
===================================================================
--- trunk/mapbender/http/css/admin_service.css	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/css/admin_service.css	2010-04-19 08:40:07 UTC (rev 5971)
@@ -22,8 +22,10 @@
 	background-color: #DCDCDC;
 	font-weight: bold;
 }
-#loading_mapbender div, 
-#complete_mapbender div{
+.hide-during-splash {
+	display: none;
+}
+body {
 	font-size: 12px;
 	font-weight: bold;
 	text-decoration: underline;

Modified: trunk/mapbender/http/css/admin_user.css
===================================================================
--- trunk/mapbender/http/css/admin_user.css	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/css/admin_user.css	2010-04-19 08:40:07 UTC (rev 5971)
@@ -22,8 +22,10 @@
 	background-color: #DCDCDC;
 	font-weight: bold;
 }
-#loading_mapbender div, 
-#complete_mapbender div{
+.hide-during-splash {
+	display: none;
+}
+body {
 	font-size: 12px;
 	font-weight: bold;
 	text-decoration: underline;

Modified: trunk/mapbender/http/frames/index.php
===================================================================
--- trunk/mapbender/http/frames/index.php	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/frames/index.php	2010-04-19 08:40:07 UTC (rev 5971)
@@ -72,8 +72,11 @@
 ?>
 <style type="text/css">
 <!--
+.hide-during-splash {
+	display: none;
+}
 <?php
-$sql = "SELECT * FROM gui_element_vars WHERE fkey_e_id = 'body' AND fkey_gui_id = $1 and var_type='text/css'";
+$sql = "SELECT var_value FROM gui_element_vars WHERE fkey_gui_id = $1 and var_type='text/css'";
 $v = array($gui_id);
 $t = array('s');
 $res = db_prep_query($sql,$v,$t);

Modified: trunk/mapbender/http/javascripts/map.php
===================================================================
--- trunk/mapbender/http/javascripts/map.php	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/javascripts/map.php	2010-04-19 08:40:07 UTC (rev 5971)
@@ -142,6 +142,7 @@
 Mapbender.modules = {};
 <?php
 $executeJsPluginsArray = array();
+$linkJsPluginsArray = array();
 
 $mb_sql = "SELECT DISTINCT e_js_file, e_id, e_src, e_target, e_pos, e_url, " . 
 	"e_left, e_top, e_title, gettext($1, e_title) AS e_current_title, " . 
@@ -183,8 +184,8 @@
 
 	echo "Mapbender.modules." . $e_id . " = " . $elementAttributes . ";\n";
 	echo "var t = Mapbender.modules." . $e_id . ".target;";
-	echo "var sel = [];for (var k in t) {sel.push('#' + t[k])}\n";
-	echo "Mapbender.modules." . $e_id . ".\$target = \$(sel.join(', '));\n";
+	echo "var sel = [];for (var k in t) {sel.push($('#' + t[k]).get(0))}\n";
+	echo "Mapbender.modules." . $e_id . ".\$target = sel.length > 0 ? \$(sel) : $([]);\n";
 	echo "$('#" . $e_id . "').data('api', Mapbender.modules." . $e_id . ");";
 	
 	//
@@ -197,10 +198,15 @@
 			// Create the jQuery plugin in output buffer
 			//
 			ob_start();
+			include "../include/dyn_js_object.php";
+			$elementVars = ob_get_contents();
+			ob_end_clean();
+
+			ob_start();
 			echo "var options = Mapbender.modules." . $e_id . ";\n";
 			
 			// extend the options variable by JS element vars 
-			include "../include/dyn_js_object.php";
+			echo $elementVars;
 	
 			echo "\n$.fn.$e_id = function (options) {\n" . 
 				"\treturn this.each(function () {\n\n";
@@ -223,6 +229,8 @@
 			echo "$('#$e_id').$e_id(options);\n";
 			$executeJsPluginsArray[] = ob_get_contents();
 			ob_end_clean();
+			$linkJsPluginsArray[] = "var options = {'id':'" . $e_id . 
+				"'};" . $elementVars . ";linkPlugins(options);";
 		}
 		else {
 			$jsArray = explode(",", $jsFileString);
@@ -242,11 +250,42 @@
 }
 
 $jsText = implode("\n", $executeJsPluginsArray);
+$linkJsPluginsText = implode("\n", $linkJsPluginsArray);
+
 echo <<<JS
 
 $(function () {
+	var linkPlugins = function (settings) {
+		if (!settings.inputs || !settings.inputs.length) {
+			return;
+		}
+		for (var p = 0; p < settings.inputs.length; p++) {
+			var i = settings.inputs[p];
+			for (q = 0; q < i.linkedTo.length; q++) {
+				(function () {
+					var link = i.linkedTo[q];
+					var method = i.method;
+					var element = $("#" + link.id).mapbender();
+					element.events[link.event].register(function (obj) {
+						var target = $("#" + settings.id).mapbender();
+						if (target && typeof target[i.method] === "function") {
+							target[i.method](obj[link.attr]);
+						}
+					});
+				})();
+			}
+		}		
+	};
+	
+	Mapbender.events.hideSplashScreen.trigger();
+
 	$jsText
 	
+	$linkJsPluginsText
+	
+	$("img").bind("mousedown", function (e) {
+		e.preventDefault();
+	});
 	// creates the map objects (mapframe1, overview...)
 	Mapbender.events.initMaps.trigger();
 

Modified: trunk/mapbender/http/javascripts/map_obj.js
===================================================================
--- trunk/mapbender/http/javascripts/map_obj.js	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/http/javascripts/map_obj.js	2010-04-19 08:40:07 UTC (rev 5971)
@@ -79,7 +79,7 @@
 
         }
 		else {
-			this.oldExtentPix = new Extent(0, this.height, this.width, 0);
+			this.oldExtentPix = new Extent(0, this.getHeight(), this.getWidth(), 0);
 		}
         
 
@@ -110,6 +110,7 @@
      * @type integer
      */
     this.getWidth = function(){
+		return $(this.getDomElement()).innerWidth();
         return parseInt(this.width, 10);
     };
     
@@ -134,6 +135,27 @@
 		});
     };
     
+	this.setDimensions = function (w, h) {
+		this.width = parseInt(w, 10);
+        this.height = parseInt(h, 10);
+
+        if (this.frameName) {
+            document.getElementById(this.frameName).style.width = this.width;
+            document.getElementById(this.frameName).style.height = this.height;
+        }
+        var domElement = this.getDomElement();
+        domElement.style.width = this.width;
+        domElement.style.height = this.height;
+		
+		this.calculateExtent(this.extent);
+		this.setMapRequest();
+		
+		this.events.dimensionsChanged.trigger({
+			width: this.width,
+			height: this.height
+		});
+		
+	};
     /**
      * get the height of the mapObj
      *
@@ -142,6 +164,7 @@
      * @type integer
      */
     this.getHeight = function(){
+		return $(this.getDomElement()).innerHeight();
         return parseInt(this.height, 10);
     };
     
@@ -682,16 +705,16 @@
         var maxY = parseFloat(arrayBBox[3]);
         var xtentx = maxX - minX;
         var xtenty = maxY - minY;
-        var deltaX = xtentx / this.width;
-        var deltaY = xtenty / this.height;
+        var deltaX = xtentx / this.getWidth();
+        var deltaY = xtenty / this.getHeight();
         
  		var digitsX = Math.round(Math.log(deltaX)/Math.log(10));
 		var digitsY = Math.round(Math.log(deltaY)/Math.log(10));
 		var roundX = Math.pow(10, -digitsX);
 		var roundY = Math.pow(10, -digitsY);
 		
-		var posX = parseFloat(minX + (aPoint.x / this.width) * xtentx);
-		var posY = parseFloat(maxY - (aPoint.y / this.height) * xtenty);
+		var posX = parseFloat(minX + (aPoint.x / this.getWidth()) * xtentx);
+		var posY = parseFloat(maxY - (aPoint.y / this.getHeight()) * xtenty);
 		posX = Math.round(posX * roundX) / roundX;
 		posY = Math.round(posY * roundY) / roundY;
 		var newX = posX, newY = posY;
@@ -721,7 +744,7 @@
         var minY = parseFloat(arrayBBox[1]);
         var maxX = parseFloat(arrayBBox[2]);
         var maxY = parseFloat(arrayBBox[3]);
-        return new Point(Math.round((aPoint.x - minX) * this.width / (maxX - minX)), Math.round((maxY - aPoint.y) * this.height / (maxY - minY)));
+        return new Point(Math.round((aPoint.x - minX) * this.getWidth() / (maxX - minX)), Math.round((maxY - aPoint.y) * this.getHeight() / (maxY - minY)));
     };
     
     /**
@@ -780,8 +803,8 @@
         url += "&";
         url += "SRS=" + this.epsg + "&";
         url += "BBOX=" + extent.toString() + "&";
-        url += "WIDTH=" + this.width + "&";
-        url += "HEIGHT=" + this.height + "&";
+        url += "WIDTH=" + this.getWidth() + "&";
+        url += "HEIGHT=" + this.getHeight() + "&";
         url += "FORMAT=" + currentWms.gui_wms_mapformat + "&";
         url += "BGCOLOR=0xffffff&";
         
@@ -879,8 +902,8 @@
         var bbox = this.extent.toString().split(",");
         var xtenty;
         if (this.epsg == "EPSG:4326") {
-            var pxLenx = (parseFloat(bbox[2]) - parseFloat(bbox[0])) / this.width;
-            var pxLeny = (parseFloat(bbox[3]) - parseFloat(bbox[1])) / this.height;
+            var pxLenx = (parseFloat(bbox[2]) - parseFloat(bbox[0])) / this.getWidth();
+            var pxLeny = (parseFloat(bbox[3]) - parseFloat(bbox[1])) / this.getHeight();
             var lat_from = ((parseFloat(bbox[3]) - parseFloat(bbox[1]) / 2) * Math.PI) / 180;
             var lat_to = ((parseFloat(bbox[3]) - parseFloat(bbox[1]) / 2 + pxLeny) * Math.PI) / 180;
             var lon_from = ((parseFloat(bbox[2]) - parseFloat(bbox[0]) / 2) * Math.PI) / 180;
@@ -890,7 +913,7 @@
         }
         else {
             xtenty = parseFloat(bbox[3]) - parseFloat(bbox[1]);
-            scale = (xtenty / this.height) * (mb_resolution * 100);
+            scale = (xtenty / this.getHeight()) * (mb_resolution * 100);
         }
         return parseInt(Math.round(scale), 10);
     };
@@ -942,10 +965,10 @@
             ((parseFloat(arrayBBox[3]) - parseFloat(arrayBBox[1])) /
             2);
         }
-        var minx = parseFloat(x) - (this.width / (mb_resolution * 100 * 2) * scale);
-        var miny = parseFloat(y) - (this.height / (mb_resolution * 100 * 2) * scale);
-        var maxx = parseFloat(x) + (this.width / (mb_resolution * 100 * 2) * scale);
-        var maxy = parseFloat(y) + (this.height / (mb_resolution * 100 * 2) * scale);
+        var minx = parseFloat(x) - (this.getWidth() / (mb_resolution * 100 * 2) * scale);
+        var miny = parseFloat(y) - (this.getHeight() / (mb_resolution * 100 * 2) * scale);
+        var maxx = parseFloat(x) + (this.getWidth() / (mb_resolution * 100 * 2) * scale);
+        var maxy = parseFloat(y) + (this.getHeight() / (mb_resolution * 100 * 2) * scale);
         this.repaint(new Point(minx, miny), new Point(maxx, maxy));
     };
     
@@ -970,8 +993,8 @@
 		var i;
         this.mb_MapFutureObj[cnt] = {};
         this.mb_MapFutureObj[cnt].reqCnt = mod_back_cnt;
-        this.mb_MapFutureObj[cnt].width = this.width;
-        this.mb_MapFutureObj[cnt].height = this.height;
+        this.mb_MapFutureObj[cnt].width = this.getWidth();
+        this.mb_MapFutureObj[cnt].height = this.getHeight();
         this.mb_MapFutureObj[cnt].epsg = this.epsg;
         this.mb_MapFutureObj[cnt].extent = this.extent;
         this.mb_MapFutureObj[cnt].layers = [];
@@ -1033,8 +1056,8 @@
 				newMapRequest += getLayerHtmlCode(
 					idArray[i], 
 					that.extent, 
-					that.width, 
-					that.height,
+					that.getWidth(), 
+					that.getHeight(),
 					0,
 					0,
 					requestCnt
@@ -1174,7 +1197,7 @@
 			//
 			// abort if no animation is required
 			//
-			if (newLeft === 0 && newTop === 0 && newHeight === that.height && newWidth === that.width) {
+			if (newLeft === 0 && newTop === 0 && newHeight === that.getHeight() && newWidth === that.getWidth()) {
 				return;
 			}
 			
@@ -1204,15 +1227,15 @@
 			//
 			// animate new images (zoom)
 			//
-			if (newWidth !== that.width || newHeight !== that.height) {
+			if (newWidth !== that.getWidth() || newHeight !== that.getHeight()) {
 				var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
 				currentMapImg.css({
 					width: newWidth,
 					height: newHeight				
 				}).animate(
 					{
-						width: that.width + "px",
-						height: that.height + "px"
+						width: that.getWidth() + "px",
+						height: that.getHeight() + "px"
 					}, "normal", "linear", function () {
 						$(this).data("animationFinished", true);
 						if ($(this).data("loaded") && ($(this).data("animationFinished"))) {
@@ -1258,7 +1281,7 @@
 			var height = oldLLPix.y - oldURPix.y;
 			
 			// zoom
-			if (width !== that.width || height !== that.height) {
+			if (width !== that.getWidth() || height !== that.getHeight()) {
 				// zoom
 				var oldMapImg = $("#" + that.elementName + "_request_" + (index-1) + " div img");
 				oldMapImg.css({
@@ -1511,9 +1534,21 @@
     this.elementName = elementName;
     this.mapURL = [];
     var domElement = this.getDomElement();
-    domElement.style.width = this.width;
-    domElement.style.height = this.height;
-    
+	if (this.width) {
+	    domElement.style.width = this.width;
+	}
+	else {
+		this.width = this.getWidth();
+	}
+	if (this.height) {
+		domElement.style.height = this.height;
+	}
+	else {
+		this.height = this.getHeight();
+	}
+    console.log(this.width);
+    console.log(this.height);
+
     ignoredWms = [];
     this.layers = [];
     this.styles = [];

Added: trunk/mapbender/http/plugins/mb_pane.js
===================================================================
--- trunk/mapbender/http/plugins/mb_pane.js	                        (rev 0)
+++ trunk/mapbender/http/plugins/mb_pane.js	2010-04-19 08:40:07 UTC (rev 5971)
@@ -0,0 +1,26 @@
+var $pane = $(this);
+
+var PaneApi = function (o) {
+	var paneOptions = {};
+	var paneTypes = ["center", "west", "east", "north", "south"];
+	
+	for (var i in paneTypes) {
+		var type = paneTypes[i];
+		if (o[type]) {
+			var $currentPane = $("#" + o[type]);
+			if (!$currentPane.is("div") && !$currentPane.is("iframe")) {
+				$currentPane = $currentPane.wrap("<div></div>").parent();
+			}
+			$currentPane.appendTo($pane).addClass("ui-layout-" + type).addClass("pane");
+		}
+	}
+	var layout = $pane.layout({
+		applyDefaultStyles: false,
+		center__onresize: function (name, element, state, options, layoutName) {
+			$(element).mapbender("setDimensions", $(element).innerWidth(), $(element).innerHeight());
+		}
+	});
+	layout.resizeAll();
+};
+
+$pane.mapbender(new PaneApi(options));

Modified: trunk/mapbender/lib/core.js
===================================================================
--- trunk/mapbender/lib/core.js	2010-04-16 15:32:53 UTC (rev 5970)
+++ trunk/mapbender/lib/core.js	2010-04-19 08:40:07 UTC (rev 5971)
@@ -7,6 +7,11 @@
  */
 
 /**
+ * Triggered on load
+ */
+Mapbender.events.hideSplashScreen = new Mapbender.Event();
+
+/**
  * Triggered after a map is requested.
  */
 Mapbender.events.afterMapRequest = new MapbenderEvent();
@@ -44,10 +49,10 @@
 Mapbender.events.gazetteerReady = new MapbenderEvent();
 
 
-Mapbender.events.init.register(function() {
+Mapbender.events.hideSplashScreen.register(function() {
 	// remove the splash screen, show the application
 	$("#loading_mapbender").remove();
-	$("#complete_mapbender").show();
+	$("body").children().removeClass("hide-during-splash");
 });
 
 Mapbender.events.afterInit.register(function () {



More information about the Mapbender_commits mailing list