[Mapbender-commits] r7142 - trunk/mapbender/http/plugins

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Fri Nov 19 08:25:43 EST 2010


Author: christoph
Date: 2010-11-19 05:25:43 -0800 (Fri, 19 Nov 2010)
New Revision: 7142

Modified:
   trunk/mapbender/http/plugins/mb_wmsTree.js
Log:
#723

Modified: trunk/mapbender/http/plugins/mb_wmsTree.js
===================================================================
--- trunk/mapbender/http/plugins/mb_wmsTree.js	2010-11-18 17:29:00 UTC (rev 7141)
+++ trunk/mapbender/http/plugins/mb_wmsTree.js	2010-11-19 13:25:43 UTC (rev 7142)
@@ -1,6 +1,58 @@
-// INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('test_tree','wmsTree',1,1,'','','div','','',1100,100,500,500,NULL ,'','','div','../plugins/mb_wmsTree.js','','mapframe1','','');
+/**
+ * Package: wmsTree
+ *
+ * Description:
+ * A basic WMS layer switch. You can turn entire WMS on or off by clicking an
+ * icon, and additionally change the display order by dragging and dropping.
+ *
+ * Files:
+ *  - ../plugins/mb_wmsTree.js
+ *
+ * SQL:
+ * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment,
+ * > e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height,
+ * > e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod,
+ * > e_target, e_requires, e_url) VALUES('<appId>','wmsTree',1,1,'','',
+ * > 'div','','',1020,100,200,500,NULL ,'','','div',
+ * > '../plugins/mb_wmsTree.js','','mapframe1','','');
+ * >
+ * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value,
+ * > context, var_type) VALUES('<appId>', 'wmsTree', 'css',
+ * > 'ul.wmstree-list {
+ * >    list-style: none;
+ * > }
+ * > span.wmstree-tick {
+ * >    float: right;
+ * >    cursor: pointer;
+ * > }
+ * > li.wmstree-handle {
+ * >    cursor: move;
+ * > }', '' ,'text/css');
+ * >
+ * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value,
+ * > context, var_type) VALUES('<appId>', 'wmsTree', 'liveUpdate', '1',
+ * > '1 = change the wms order in the map while dragging, 0 = change after drop'
+ * > ,'var');
+ *
+ * Help:
+ * http://www.mapbender.org/<wiki site name>
+ *
+ * Maintainer:
+ * http://www.mapbender.org/User:Christoph_Baudson
+ *
+ * Parameters:
+ * css        - text/css
+ * liveUpdate - *[optional]* 1 = change the wms order in the map while dragging,
+ *					0 = change after drop (default)
+ *
+ * License:
+ * Copyright (c) 2009, Open Source Geospatial Foundation
+ * This program is dual licensed under the GNU General Public License
+ * and Simplified BSD license.
+ * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
+ */
 
-var $wmsTree = $(this).append("<ul></ul>");
+var $wmsTree = $(this).append("<ul class='wmstree-list'></ul>");
 
 var WmsTreeApi = function (o) {
 	var that = this;
@@ -8,7 +60,7 @@
 	var $list = $wmsTree.children("ul");
 	
 	var updateAllTicks = function () {
-		$list.find("span.tick").each(function () {
+		$list.find("span.wmstree-tick").each(function () {
 			updateTick($(this));
 		});
 	};
@@ -22,65 +74,91 @@
 		var isVisible = layer.gui_layer_visible;
 
 		var $tick = $span.find("img");
-		if (isVisible) {
-			$tick.css("visibility", "visible");
-		}
-		else {
-			$tick.css("visibility", "hidden");
-		}
+		$tick.css("visibility", isVisible ? "visible" : "hidden");
 	};
 
 	var toggleWmsVisibility = function () {
 		var $row = $(this).parent();
-		var $tick = $row.find("img");
 		var wms = $row.data("wms");
 		if (typeof wms !== "object") {
 			return;
 		}
 		var layer = wms.objLayer[0];
 		var isVisible = layer.gui_layer_visible;
-		if (!isVisible) {
-			wms.handleLayer(layer.layer_name, "visible", 1);
-		}
-		else {
-			wms.handleLayer(layer.layer_name, "visible", 0);
-		}
+		wms.handleLayer(layer.layer_name, "visible", !isVisible ? 1 : 0);
 		map.setMapRequest();
 	};
 
+	var createRow = function (wms) {
+		if (!wms || wms.gui_wms_visible !== 1) {
+			return;
+		}
+		var name = wms.objLayer[0].layer_currentTitle;
+		var html = "<li class='ui-state-default wmstree-handle'>" +
+			"<span class='wmstree-label'>" + name + "</span>" +
+			"<span class='wmstree-tick'><img " +
+			"src='../img/tick.png' /></span></li>";
+		var $row = $(html);
+		var $tick = $row.find("span.wmstree-tick");
+		$row.data("wms", wms).hover(function () {
+			$(this).addClass("ui-state-hover");
+		}, function () {
+			$(this).removeClass("ui-state-hover");
+		});
+		$tick.click(toggleWmsVisibility);
+		updateTick($tick);
+		return $row;
+	};
+
 	var initTree = function () {
 		for (var i = 0; i < map.wms.length; i++) {
 			(function () {
 				var wms = map.wms[i];
-				var name = wms.objLayer[0].layer_name;
-				var html = "<li class='ui-state-default'>" +
-					"<span>" + name + "</span>" +
-					"<span class='tick'><img " +
-					"src='../img/tick.png' /></span></li>";
-				var $row = $(html);
-				var $tick = $row.find("span.tick");
-				$row.data("wms", wms);
-				$tick.click(toggleWmsVisibility);
-				updateTick($tick);
+				var $row = createRow(wms);
 				$list.append($row);
 			})();
 		}
+
+		var oldIndex, newIndex;
+
+		var rearrangeWms = function (ui) {
+			ui.item.removeClass("ui-state-hover");
+
+			var wms = ui.item.data("wms");
+			if (typeof oldIndex === "number" &&
+				typeof newIndex === "number" &&
+				oldIndex === newIndex
+			) {
+				return;
+			}
+			var steps = (newIndex - oldIndex);
+			var s = steps / Math.abs(steps);
+			for (var i = 0; i < Math.abs(steps); i++) {
+				map.move(wms.wms_id, null, s < 0);
+			}
+			map.setMapRequest();
+		};
+
 		$list.sortable({
 			axis: "y",
-			stop: function (event, ui) {
-				var wms = ui.item.data("wms");
-				var oldIndex = map.getWmsIndexById(wms.wms_id);
-				var newIndex = ui.item.prevAll().length;
-				if (oldIndex === newIndex) {
-					return;
+			containment: $wmsTree,
+			start: function (event, ui) {
+				oldIndex = ui.item.prevAll().length;
+			},
+			change: o.liveUpdate ? function (event, ui) {
+				newIndex = ui.placeholder.prevAll().length;
+				// if the item is previous to the placeholder,
+				// do not take it into account
+				if (ui.item.prevAll().length < newIndex) {
+					newIndex--;
 				}
-				var steps = (newIndex - oldIndex);
-				var s = steps / Math.abs(steps);
-				for (var i = 0; i < Math.abs(steps); i++) {
-					map.move(wms.wms_id, null, s < 0);
-				}
-				map.setMapRequest();
-			}
+				rearrangeWms(ui);
+				oldIndex = newIndex;
+			} : function () {},
+			stop: !o.liveUpdate ? function (event, ui) {
+				newIndex = ui.item.prevAll().length;
+				rearrangeWms(ui);
+			} : function () {}
 		}).disableSelection();
 
 	};
@@ -91,6 +169,25 @@
 			map.events.afterMapRequest.register(function () {
 				updateAllTicks();
 			});
+			Mapbender.events.afterLoadWms.register(function (obj) {
+				if (obj && obj.wms) {
+					var wms = obj.wms;
+					var pos = map.getWmsIndexById(wms.wms_id);
+					if (typeof pos !== "number") {
+						return;
+					}
+					var $row = createRow(wms);
+					// add row at correct position
+					if (pos === map.wms.length - 1) {
+						$list.append($row);
+					}
+					else {
+						new Mb_exception("Open issue: cannot add newly " + 
+							"inserted WMS to list if WMS is not put on top " +
+							"of map.");
+					}
+				}
+			});
 			initTree();
 		}
 		else {



More information about the Mapbender_commits mailing list