[Mapbender-commits] r2183 - trunk/mapbender/http/javascripts

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Wed Mar 5 12:13:05 EST 2008


Author: nimix
Date: 2008-03-05 12:13:05 -0500 (Wed, 05 Mar 2008)
New Revision: 2183

Added:
   trunk/mapbender/http/javascripts/mod_horizTab.php
   trunk/mapbender/http/javascripts/mod_horizTabs.js
Modified:
   trunk/mapbender/http/javascripts/map.php
   trunk/mapbender/http/javascripts/mod_tab.js
   trunk/mapbender/http/javascripts/mod_tab.php
Log:
add new module dor horizontal tabs

Modified: trunk/mapbender/http/javascripts/map.php
===================================================================
--- trunk/mapbender/http/javascripts/map.php	2008-03-05 16:56:22 UTC (rev 2182)
+++ trunk/mapbender/http/javascripts/map.php	2008-03-05 17:13:05 UTC (rev 2183)
@@ -82,6 +82,7 @@
 require_once("../javascripts/wfs_obj.js");
 require_once("../extensions/jquery.js");
 require_once("../extensions/jqjson.js");
+require_once("../javascripts/style.js");
 
 //
 // Load WMS

Added: trunk/mapbender/http/javascripts/mod_horizTab.php
===================================================================
--- trunk/mapbender/http/javascripts/mod_horizTab.php	                        (rev 0)
+++ trunk/mapbender/http/javascripts/mod_horizTab.php	2008-03-05 17:13:05 UTC (rev 2183)
@@ -0,0 +1,43 @@
+<?php
+# $Id: $
+# http://www.mapbender.org/index.php/mod_horizTab.php
+# Copyright (C) 2002 CCGIS 
+#
+# This program is free software; you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation; either version 2, or (at your option)
+# any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
+
+/********** Configuration*************************************************/
+$gui_id = $_REQUEST["gui_id"];
+require_once(dirname(__FILE__)."/../classes/class_mb_exception.php");
+
+$tab_ids = array();
+include(dirname(__FILE__)."/../include/dyn_php.php");
+
+//write tab creation javascript function
+echo "open_tab_".$e_id."=".($open_tab?$open_tab:0).";\n";
+echo "function init_".$e_id."(){";
+echo "$(\"#".$e_id."\").tabControl()";
+for ($i=0; $i < count($tab_ids); $i++) {
+	$sql = "SELECT gettext($1, e_title) AS e_title FROM gui_element WHERE fkey_gui_id = $2 AND e_id = $3";
+	$v = array($_SESSION["mb_lang"], $gui_id, $tab_ids[$i]);
+	$t = array("s", "s", "s");
+	$res = db_prep_query($sql, $v, $t);
+	$row = db_fetch_array($res);
+	echo ".addTab({title:\"".$row["e_title"]."\",id:\"".$tab_ids[$i]."\"})";	
+}
+echo ".activateTab(open_tab_".$e_id.");}\n";
+
+//register init event for function
+echo "eventInit.register(init_".$e_id.");\n";
+?>
\ No newline at end of file

Added: trunk/mapbender/http/javascripts/mod_horizTabs.js
===================================================================
--- trunk/mapbender/http/javascripts/mod_horizTabs.js	                        (rev 0)
+++ trunk/mapbender/http/javascripts/mod_horizTabs.js	2008-03-05 17:13:05 UTC (rev 2183)
@@ -0,0 +1,100 @@
+/* 
+* $Id:$
+* COPYRIGHT: (C) 2001 by ccgis. This program is free software under the GNU General Public
+* License (>=v2). Read the file gpl.txt that comes with Mapbender for details. 
+*/
+
+//default styles
+try{if(horiztab_style){}}catch(e){horiztab_style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;font-size:7pt;border:solid #222222 1px;padding:1px 8px 1px 8px;line-height:22px;background:#aaaaaa;cursor:pointer;white-space:nowrap;";}
+try{if(horiztab_style_active){}}catch(e){horiztab_style_active="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;font-size:7pt;border:solid #222222 1px;border-bottom:solid #f8f8f8 1px;padding:2px 10px 1px 10px;line-height:22px;background:#eeeeee;font-weight:bold;cursor:pointer;white-space:nowrap;";}
+
+//load styles
+var styleObj = new StyleTag();
+styleObj.addClass("tabButton", horiztab_style);
+styleObj.addClass("tabButtonActive", horiztab_style_active);
+
+(function($){
+
+/**
+ * turns a div tag into a tab control
+ * @return jQuery
+ */
+	$.fn.tabControl = function(options){
+		defaults = {tab:true};
+		return this.each(function(){
+			this._tabSettings = $.extend(defaults, options)
+			this.tabs = [];
+			this.activeTab = false;
+			//append div for tab buttons
+			$(this).append("<div />")
+		});
+	};
+	
+/**
+ * adds a tab to a tab control
+ * @return jQuery
+ */
+	$.fn.addTab = function(options){
+		return this.each(function(){
+			//ensure function is called on a tabControl
+			if(!this._tabSettings)
+				return;
+				
+			//Add tab
+			this.tabs.push(options);
+
+			//add access button	for this tab and update height
+			this.tab_height = parseInt($("div",this)
+				.append("<span class=\"tabButton\" id=\"tabButton_"+options.id+"\">"+options.title+"</span> ")
+				.height());
+			 //bind click event to activate the tab
+			 $("#tabButton_"+options.id,this)
+			 	.bind("click",{i:this.tabs.length-1},function(event){
+					$(this.parentNode.parentNode).activateTab(event.data.i);
+				});
+
+			//set element to right position
+			$("#"+options.id).css({position:"absolute",
+				left:parseInt(this.style.left),
+				top:parseInt(this.style.top)+this.tab_height,
+				width:$(this).width(),
+				height:$(this).height()-this.tab_height,
+				zIndex:parseInt(this.style.zIndex+1)})
+			//and hide it
+			.hide();
+		});
+	}
+	
+/**
+ * activate tab i of the tab control
+ * @param integer i number of tab to activate (0 to number of tabs -1)
+ * @return jQuery
+ */
+	$.fn.activateTab = function(i){
+		return this.each(function(){
+			//ensure function is called on a tabControl
+			if(!this._tabSettings)
+				return;	
+
+			//hide old tab
+			if(this.activeTab!==false){
+				$("#"+this.tabs[this.activeTab].id).hide();
+				$("#tabButton_"+this.tabs[this.activeTab].id).removeClass("tabButtonActive").addClass("tabButton");
+			}
+
+			//move tab to right position
+			$("#"+this.tabs[i].id).css({position:"absolute",
+					left:parseInt(this.style.left),
+					top:parseInt(this.style.top)+this.tab_height,width:$(this).width(),
+					height:$(this).height()-this.tab_height,zIndex:parseInt(this.style.zIndex+1)})
+			//and show it
+			.show();
+			
+			//update button state
+			$("#tabButton_"+this.tabs[i].id).removeClass("tabButton").addClass("tabButtonActive");
+			this.activeTab=i;
+		});
+	}
+})
+(jQuery);
+

Modified: trunk/mapbender/http/javascripts/mod_tab.js
===================================================================
--- trunk/mapbender/http/javascripts/mod_tab.js	2008-03-05 16:56:22 UTC (rev 2182)
+++ trunk/mapbender/http/javascripts/mod_tab.js	2008-03-05 17:13:05 UTC (rev 2183)
@@ -347,8 +347,14 @@
 	var hideFrame = function(id) {
 		var index = getIndexById(id);
 		if (index !== null) {
-			var obj = document.getElementById(id).style;
-			obj.visibility = 'hidden';
+			var obj = document.getElementById(id);
+			obj.style.visibility = 'hidden';
+			//try to apply for childs of horizontal tabs
+			try{
+				if(obj.tabs)
+					document.getElementById(obj.tabs[obj.activeTab].id).style.visibility = 'hidden';
+			}
+			catch(e){}
 		}
 	};
 	
@@ -361,8 +367,21 @@
 	var showFrame = function(id) {
 		var index = getIndexById(id);
 		if (index !== null) {
-			var obj = document.getElementById(id).style;
+			var obj = document.getElementById(id);
 			var newpos = ((index+1) * tabHeight) + parseInt(tabTopOffset);
+			//try to apply for childs of horizontal tabs
+			try{
+				if(obj.tabs){
+					activeTab = document.getElementById(obj.tabs[obj.activeTab].id).style;
+					activeTab.visibility = 'visible';
+					activeTab.top = ((newpos + 1) + obj.tab_height) + "px";
+					activeTab.left = (tabLeftOffset) + "px";
+					activeTab.width = tabWidth;
+					activeTab.height = (parseInt(that.get(index).height) - 2) - obj.tab_height;
+				}
+			}
+			catch(e){}
+			obj=obj.style;
 			obj.top = (newpos + 1) + "px";
 			obj.left = (tabLeftOffset) + "px";
 			obj.width = tabWidth;

Modified: trunk/mapbender/http/javascripts/mod_tab.php
===================================================================
--- trunk/mapbender/http/javascripts/mod_tab.php	2008-03-05 16:56:22 UTC (rev 2182)
+++ trunk/mapbender/http/javascripts/mod_tab.php	2008-03-05 17:13:05 UTC (rev 2183)
@@ -45,6 +45,5 @@
 
 echo "var tab_ids = " . $output . ";";	
 
-include(dirname(__FILE__)."/../javascripts/style.js");
-include("mod_tab.js");
+include_once("mod_tab.js");
 ?>
\ No newline at end of file



More information about the Mapbender_commits mailing list