[Mapbender-commits] r2506 - branches/beck_dev/mapbender/http/php

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Tue Jun 17 06:26:31 EDT 2008


Author: Greq
Date: 2008-06-17 06:26:31 -0400 (Tue, 17 Jun 2008)
New Revision: 2506

Modified:
   branches/beck_dev/mapbender/http/php/mod_editApplication.php
Log:
(bolsena-hack)
- popup with button-class
==> selecting and draging implemented

Modified: branches/beck_dev/mapbender/http/php/mod_editApplication.php
===================================================================
--- branches/beck_dev/mapbender/http/php/mod_editApplication.php	2008-06-16 16:19:06 UTC (rev 2505)
+++ branches/beck_dev/mapbender/http/php/mod_editApplication.php	2008-06-17 10:26:31 UTC (rev 2506)
@@ -20,7 +20,7 @@
 require_once(dirname(__FILE__)."/../php/mb_validatePermission.php");
 require_once(dirname(__FILE__)."/../classes/class_administration.php");
 
-$editApplicationId = "gui1";
+$editApplicationId = "editApplicationTest";
 
 ?>
 <html>
@@ -32,82 +32,189 @@
   background-color: #eee;
 }
 .ui-selected {
+  border-width:5px;
+  border-style:solid;
+  border-color:blue;
   background-color: #E6F7D4;
 }
 
-</style><script type='text/javascript' src='../extensions/jquery-1.2.6.min.js'></script>
+</style>
+<link rel='stylesheet' type='text/css' href='../css/popup.css'>
+<script type='text/javascript' src='../extensions/jquery-1.2.6.min.js'></script>
 <script type='text/javascript' src='../extensions/jquery-ui-personalized-1.5.min.js'></script>
+<script type='text/javascript' src='../javascripts/popup.js'></script>
 <script language="JavaScript" type="text/javascript">
+<?php
+	include("../../lib/event.js");
+?>
+
+	var controlPopup;
+	var selectButton;
+	var dragButton;
+	var saveButton;
+
+	var $selection;
+		
 	$(function() {
+		controlPopup = new mb_popup({
+			left:300,
+			top:300,
+			html:"<div id='controls'></div>"
+		});
+		
+		selectButton = new Button({
+			on:"../img/button_blink_red/selArea_on.png",
+			over:"../img/button_blink_red/selArea_over.png",
+			off:"../img/button_blink_red/selArea_off.png",
+			appendTo:"#controls",
+			startParameters:{
+				selector:".collection"
+			}
+		});
+		
+		dragButton = new Button({
+			on:"../img/button_blink_red/pan_on.png",
+			over:"../img/button_blink_red/pan_over.png",
+			off:"../img/button_blink_red/pan_off.png",
+			appendTo:"#controls",
+		});
+		
+		saveButton = new Button({
+			on:"../img/button_blink_red/wmc_save_on.png",
+			over:"../img/button_blink_red/wmc_save_over.png",
+			off:"../img/button_blink_red/wmc_save_off.png",
+			appendTo:"#controls"
+		});
+		selectButton.registerStart(dragButton.triggerStop);
+		selectButton.registerStart(saveButton.triggerStop);
+		selectButton.registerStart(makeSelectable);
 
-//		$("#example2").selectable({
-//			stop:function() {
-//				$(".ui-selected").each(function() {
-//					console.log("is %s", this.firstChild.nodeValue);
-//				});
-//			}
-//		});
+		dragButton.registerStart(selectButton.triggerStop);
+		dragButton.registerStart(saveButton.triggerStop);
+		dragButton.registerStart(makeDraggable);
 
+		saveButton.registerStart(selectButton.triggerStop);
+		saveButton.registerStart(dragButton.triggerStop);
+		
+		controlPopup.show();
+		
+	});
 	
-		$all = $(".collection");
+	function Button (options) {
+		var start = new MapbenderEvent();
+		var stop = new MapbenderEvent();
+		
+		start.register(function() {
+			console.log("start: src: %s", srcOn);
+			$node.attr("src", srcOn);
+		});
+		
+		stop.register(function() {
+			console.log("stop");
+			$node.attr("src", srcOff);
+		});
+		
+		this.registerStart = function (func) {
+			start.register(func);
+		};
+		
+		this.registerStop = function (func) {
+			stop.register(func);
+		};
+		
+		this.triggerStart = function () {
+			start.trigger();
+		};
+		
+		this.triggerStop = function () {
+			stop.trigger();
+		};
+
+		var startParameters = {};
+		
+		var srcOn;
+		var srcOff;
+		var srcOver;
+
+		if (options.on) {
+			srcOn = options.on;
+		}
+		if (options.off) {
+			srcOff = options.off;
+		}
+		if (options.over) {
+			srcOver = options.over;
+		}
+		if (options.startParameters) {
+			startParameters = options.startParameters
+		}
+		startParameters.callback = function () {
+			stop.trigger();	
+		};
+			 
+		var $node = $("<img style='padding:5px' src='" + srcOff + "'/>");
+		$node.click(function() {
+			start.trigger(startParameters);	
+		});
+		
+		if (options.appendTo) {
+			$(options.appendTo).append($node);
+		}
+
+	}
+	
+	function makeDraggable (options) {
+		var callback = options.callback;
+		if ($selection !== null) {
+			$selection.draggable({
+				grid:[20,20],
+				stop:function () {
+					var divX;
+					var divY;
+					$selection.each(function() {
+						divX = this.style.left;
+						divY = this.style.top;
+					});
+					$selection.children().each(function() {
+						var newX = (parseInt(this.style.left) + parseInt(divX));
+						var newY = (parseInt(this.style.top) + parseInt(divY));
+						this.style.left = newX + "px";
+						this.style.top = newY + "px";
+						$(this).removeClass("ui-selectee");
+						$(this).removeClass("ui-selected");
+						$clone = $(this).clone();
+						$(".collection").append($clone);
+					});
+					$selection.remove();
+					$selection = null;
+					callback();				
+				}
+			});
+		}
+	}
+	
+	function makeSelectable(options) {
+		var selector = options.selector;
+		var callback = options.callback;
+		$all = $(selector);
 		$all.selectable({
 			stop:function() {
-				$div = $("<div></div>").appendTo($(".collection"));
+				var $div = $("<div></div>").appendTo($(".collection"));
 				$(".ui-selected").each(function() {
 					$clone = $(this).clone()
 					$div.append($clone);
 					$(this).remove();
 				});
-//				$(".ui-selected").remove();
-				$div.draggable({
-					grid:[20,20],
-					stop:function () {
-						var divX;
-						var divY;
-						$div.each(function() {
-							divX = this.style.left;
-							divY = this.style.top;
-						});
-						$div.children().each(function() {
-							console.log("vorher: %s, %s", this.style.left, this.style.top);
-							console.log("vektor: %s, %s", divX, divY);
-//							var newX = Number(this.style.left) + divX;
-//							var newY = Number(this.style.left) + divX;
-							var newX = (parseInt(this.style.left) + parseInt(divX));
-							var newY = (parseInt(this.style.top) + parseInt(divY));
-							console.log("nachher: %s, %s", newX, newY);
-							this.style.left = newX + "px";
-							this.style.top = newY + "px";
-							console.log("nachher: %s, %s", this.style.left, this.style.top);
-							$clone = $(this).clone();
-							$(".collection").append($clone);
-						});
-						$div.remove();
-					}
-				});
-//				$all.selectable("destroy");
+				$selection = $div;
+				$all.selectable("destroy");
+				callback();
 			}
 		});
-	});
+	}
 </script>
   
 </head>
 
-<!--
-<body>
-<div class="playground">
-	<ul id="example2" style="list-style:none; height: 40px; cursor: default;">
-		<li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Item 1</li>
-		<li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Select Me</li>
-		<li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Item 3</li>
-		<li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>And Me</li>
-		<li style='float: left; padding: 5px; border: 1px solid #bbb; margin: 3px;'>Item 5</li>
-
-	</ul>
-</div>
-</body>
-</html>
--->
 <?php
 
 
@@ -115,7 +222,8 @@
 
 $sql = "SELECT fkey_gui_id,e_id,e_pos,e_public,e_comment,gettext($1, e_title) as e_title, e_element,";
 $sql .= "e_src,e_attributes,e_left,e_top,e_width,e_height,e_z_index,e_more_styles,";
-$sql .= "e_content,e_closetag,e_js_file,e_mb_mod,e_target,e_requires,e_url FROM gui_element WHERE e_public = 1 AND fkey_gui_id = $2 ORDER BY e_pos";
+$sql .= "e_content,e_closetag,e_js_file,e_mb_mod,e_target,e_requires,e_url FROM gui_element WHERE ";
+$sql .= "e_public = 1 AND fkey_gui_id = $2 ORDER BY e_pos";
 $v = array($_SESSION["mb_lang"], $editApplicationId);
 $t = array('s', 's');
 $res = db_prep_query($sql,$v,$t);
@@ -127,70 +235,74 @@
 		echo "' ><div class='collection'>";
 	}
 	else {
-		if (db_result($res,$i,"e_closetag") != "iframe" ) {
-			echo "<".db_result($res,$i,"e_element")." ";
-		}
-		else {
-			echo "<div ";
-		}
-//			echo "<div class='wrap' ";
-		echo " style = 'background-color:#ff0000;";
-		if(db_result($res,$i,"e_left") != "" && db_result($res,$i,"e_top") != ""){
-			echo "position:absolute;";
-			echo "left:".db_result($res,$i,"e_left").";";
-			echo "top:".db_result($res,$i,"e_top").";";
-		}
-		if(db_result($res,$i,"e_width") != "" && db_result($res,$i,"e_height") != ""){
-			echo "width:".db_result($res,$i,"e_width").";";
-			echo "height:".db_result($res,$i,"e_height").";";
-		}
-		if(db_result($res,$i,"e_z_index") != ""){
-	    	echo "z-index:".db_result($res,$i,"e_z_index").";";
-		}
-		if(db_result($res,$i,"e_more_styles") != ""){
-	    	echo db_result($res,$i,"e_more_styles");
-		}
-//			echo "' >";
-//			echo "<".db_result($res,$i,"e_element")." ";
-		if(db_result($res,$i,"e_id") != ""){
-			echo " id='".db_result($res,$i,"e_id")."'";
-			echo " name='".db_result($res,$i,"e_id")."'";
-		}
-		if(db_result($res,$i,"e_attributes") != ""){
-//				echo " ".stripslashes(preg_replace($pattern,$replacement,db_result($res,$i,"e_attributes")));
-		}
-		if(db_result($res,$i,"e_title") != ""){
-			echo " title='".db_result($res,$i,"e_title")."' ";
-		}
-		if(db_result($res,$i,"e_src") != "" && db_result($res,$i,"e_closetag") != "iframe" ){
-			if(db_result($res,$i,"e_closetag") == "iframe" && db_result($res,$i,"e_id") != 'loadData'){
-	      		echo " src = '".preg_replace($pattern,$replacement,db_result($res,$i,"e_src"));
-					if(mb_strpos(db_result($res,$i,"e_src"), "?")) {
-						echo "&";
-					}
-					else {
-		      			echo "?";
-	      			}
-	      			echo "e_id_css=".db_result($res,$i,"e_id")."&e_id=".db_result($res,$i,"e_id") . 
-						"&e_target=".db_result($res,$i,"e_target").
-						"&" . $urlParameters . "'";
-			}
-			else{
-				echo " src = '".preg_replace($pattern,$replacement,db_result($res,$i,"e_src"))."'";
-			}
-		}
-		echo "' >";
-		if(db_result($res,$i,"e_content") != ""){
-			echo " ".stripslashes(db_result($res,$i,"e_content"));
-		}
-		if(db_result($res,$i,"e_closetag") != "" && db_result($res,$i,"e_closetag") != "body"){
+		if (db_result($res,$i,"e_left") && db_result($res,$i,"e_top")) {
 			if (db_result($res,$i,"e_closetag") != "iframe" ) {
-				echo "</".db_result($res,$i,"e_closetag").">";
+				echo "<".db_result($res,$i,"e_element")." ";
 			}
 			else {
-				echo "</div>";
+				echo "<div ";
 			}
+	//			echo "<div class='wrap' ";
+			echo " style = 'background-color:#ff0000;";
+			if(db_result($res,$i,"e_left") != "" && db_result($res,$i,"e_top") != ""){
+				echo "position:absolute;";
+				echo "left:".db_result($res,$i,"e_left").";";
+				echo "top:".db_result($res,$i,"e_top").";";
+			}
+			if(db_result($res,$i,"e_width") != "" && db_result($res,$i,"e_height") != ""){
+				echo "width:".db_result($res,$i,"e_width").";";
+				echo "height:".db_result($res,$i,"e_height").";";
+			}
+			if(db_result($res,$i,"e_z_index") != ""){
+		    	echo "z-index:".db_result($res,$i,"e_z_index").";";
+			}
+			if(db_result($res,$i,"e_more_styles") != ""){
+		    	echo db_result($res,$i,"e_more_styles");
+			}
+	//			echo "' >";
+	//			echo "<".db_result($res,$i,"e_element")." ";
+			if(db_result($res,$i,"e_id") != ""){
+				echo " id='".db_result($res,$i,"e_id")."'";
+				echo " name='".db_result($res,$i,"e_id")."'";
+			}
+			if(db_result($res,$i,"e_attributes") != ""){
+	//				echo " ".stripslashes(preg_replace($pattern,$replacement,db_result($res,$i,"e_attributes")));
+			}
+			if(db_result($res,$i,"e_title") != ""){
+				echo " title='".db_result($res,$i,"e_title")."' ";
+			}
+			if(db_result($res,$i,"e_src") != "" && db_result($res,$i,"e_closetag") != "iframe" ){
+				if(db_result($res,$i,"e_closetag") == "iframe" && db_result($res,$i,"e_id") != 'loadData'){
+		      		echo " src = '".preg_replace($pattern,$replacement,db_result($res,$i,"e_src"));
+						if(mb_strpos(db_result($res,$i,"e_src"), "?")) {
+							echo "&";
+						}
+						else {
+			      			echo "?";
+		      			}
+		      			echo "e_id_css=".db_result($res,$i,"e_id")."&e_id=".db_result($res,$i,"e_id") . 
+							"&e_target=".db_result($res,$i,"e_target").
+							"&" . $urlParameters . "'";
+				}
+				else{
+					echo " src = '".preg_replace($pattern,$replacement,db_result($res,$i,"e_src"))."'";
+				}
+			}
+			echo "' >";
+			if(db_result($res,$i,"e_content") != ""){
+				echo " ".stripslashes(db_result($res,$i,"e_content"));
+			}
+			if(db_result($res,$i,"e_closetag") != "" && db_result($res,$i,"e_closetag") != "body"){
+				if (db_result($res,$i,"e_closetag") != "iframe" ) {
+					echo "</".db_result($res,$i,"e_closetag").">";
+				}
+				else {
+					echo "</div>";
+				}
+			}
+			
 		}
+		
 //			echo "</div>";
 	}
 //		if (db_result($res,$i,"e_element") == "body" && USE_LOAD_MESSAGE) {



More information about the Mapbender_commits mailing list