Novas opções na árvore de camadas quando utilizada a forma de organização em gru…

…pos. Agora pode-se expandir/recolher os grupos e ligar/desligar os temas de uma só vez

Novas opções na árvore de camadas quando utilizada a forma de organização em gru…
…pos. Agora pode-se expandir/recolher os grupos e ligar/desligar os temas de uma só vez
Edmar Moretti
1 parent 1ea4b8b2
Showing 3 changed files with 69 additions and 22 deletions Show diff stats
classesjs/classe_arvoredecamadas.js
classesjs/classe_configura.js
exemplos/legenda2.htm
@@ -384,7 +384,7 @@ i3GEO.arvoreDeCamadas = {
 			temas = i3GEO.arvoreDeCamadas.CAMADAS;
 			i3GEO.arvoreDeCamadas.CAMADAS = "";
 		}
-		var temp,currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,i,j,n,nk,k,incluidos=[];
+		var estilo,temp,currentIconMode,newVal,root,tempNode,titulo,d,c,ltema,temaNode,grupoNode,i,j,n,nk,k,incluidos=[];
 		//
 		//essa verificacao é necessaria quando a arvore é criada fora dos padrões normais
 		//
@@ -430,6 +430,13 @@ i3GEO.arvoreDeCamadas = {
 		tempNode = new YAHOO.widget.HTMLNode(d, root, true,true);
 		tempNode.enableHighlight = false;
 		//
+		//estilo usado no input qd existirem grupos
+		//
+		if(navm)
+		{estilo = "text-align:left;font-size:11px;vertical-align:middle;display:table-cell;";}
+		else
+		{estilo = "text-align:left;font-size:11px;vertical-align:vertical-align:top;padding-top:4px;";}		
+		//
 		//monta a árvore.
 		//se i3GEO.configura.grupoLayers estiver definido
 		//o processo é diferenciado
@@ -462,10 +469,16 @@ i3GEO.arvoreDeCamadas = {
 			c = i3GEO.configura.grupoLayers.length;
 			//grupos
 			for(i=0;i<c; i++){
-				d = {html:"<b>"+i3GEO.configura.grupoLayers[i].nome+"</b>"};
-				temaNode = new YAHOO.widget.HTMLNode(d, tempNode, false,true);
-				temaNode.expanded = false;
-				temaNode.enableHighlight = false;				
+				temp = "";
+				if(i3GEO.configura.grupoLayers[i].icone && i3GEO.configura.grupoLayers[i].icone==true){
+					temp += "<p style="+estilo+" ><input style=cursor:pointer onclick='i3GEO.arvoreDeCamadas.ligaDesligaTemas(\""+i3GEO.configura.grupoLayers[i].layers+"\",this.checked)' type=checkbox title='Ligar/desligar temas do grupo' />&nbsp;";
+				}
+				temp += "<span style="+estilo+";vertical-align:top ><b>"+i3GEO.configura.grupoLayers[i].nome+"</b></span></p>";
+				d = {html:temp};
+				grupoNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
+				grupoNode.enableHighlight = false;
+				if(i3GEO.configura.grupoLayers[i].expandido && i3GEO.configura.grupoLayers[i].expandido==true)
+				{grupoNode.expanded = true;}
 				n = i3GEO.configura.grupoLayers[i].layers.length;
 				//layers de um grupo
 				for(j=0;j<n; j++){
@@ -474,7 +487,12 @@ i3GEO.arvoreDeCamadas = {
 						ltema = temas[k];
 						if(ltema.name === i3GEO.configura.grupoLayers[i].layers[j]  && ltema.escondido == "nao"){
 							d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
-							temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
+							
+							if(i3GEO.configura.grupoLayers[i].dinamico && i3GEO.configura.grupoLayers[i].dinamico==true)
+							{temaNode = new YAHOO.widget.HTMLNode(d, grupoNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);}
+							else
+							{temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);}
+							
 							temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);							
 							temaNode.expanded = false;
 							temaNode.enableHighlight = false;
@@ -485,9 +503,9 @@ i3GEO.arvoreDeCamadas = {
 			}
 			//inclui os temas não agrupados
 			d = {html:"<b>Outros</b>"};
-			temaNode = new YAHOO.widget.HTMLNode(d, tempNode, false,true);
-			temaNode.expanded = false;
-			temaNode.enableHighlight = false;
+			grupoNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
+			grupoNode.expanded = false;
+			grupoNode.enableHighlight = false;
 			c = incluidos.length;
 			for(k=0;k<nk; k++){
 				ltema = temas[k];
@@ -498,7 +516,7 @@ i3GEO.arvoreDeCamadas = {
 				}
 				if (n === false){
 					d = {html:i3GEO.arvoreDeCamadas.montaTextoTema(ltema),id:ltema.name,tipo:"tema"};
-					temaNode = new YAHOO.widget.HTMLNode(d, tempNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
+					temaNode = new YAHOO.widget.HTMLNode(d, grupoNode, i3GEO.arvoreDeCamadas.EXPANDIDA,true);
 					temaNode.setDynamicLoad(i3GEO.arvoreDeCamadas.montaOpcoes, currentIconMode);
 					temaNode.expanded = false;
 					temaNode.enableHighlight = false;	
@@ -530,6 +548,26 @@ i3GEO.arvoreDeCamadas = {
 	},
 	/*
+	Function: ligaDesligaTemas
+	
+	Marca ou desmarca os checkbox da árvore de uma lista de temas
+	
+	Parametros:
+	
+	lista {string} - lista, separada por vírgulas, dos códigos dos temas
+	
+	status {boolean} - marca ou desmarca
+	*/
+	ligaDesligaTemas: function(lista,status){
+		var n,i;
+		lista = lista.split(",");
+		n = lista.length;
+		for(i=0;i<n;i++){
+			i3GEO.arvoreDeCamadas.capturaCheckBox(lista[i]).checked = status;
+		}
+		i3GEO.arvoreDeCamadas.aplicaTemas();
+	},
+	/*
 	Function: ativaDragDrop
 	Ativa a funcionalidade de arrastar um tema para mudar sua ordem de desenho ou excluir do mapa
@@ -57,12 +57,20 @@ i3GEO.configura = {
 	Lista de grupos e seus respectivos layers, para montagem da árvore de camadas.
 	Se essa propriedade estiver definida, as camadas serão agrupadas na árvore de camadas conforme os grupos definidos.
+	
+	Layers que não constarem nessa propriedade serão incluídos no grupo "outros"
+	
+	Ao definir grupos, a árvore não conterá as opções de mudança da prdem de desenho das camadas 
+	( veja http://localhost/i3geo/exemplos/legenda2.htm )
 	Por exemplo
 	i3GEO.configura.grupoLayers = [
-		{nome:"Grupo 1",layers:["zee","estadosl"]},
-		{nome:"Grupo 2",layers:["mundo"]}
-	]
+		{nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["zee","estadosl"]},
+		{nome:"Grupo 2",icone:false,dinamico:true,expandido:false,layers:["mundo"]}
+	];
+	
+	Onde "icone" indica se o ícone de ligar/desligar todos os temas do grupo será mostrado,
+	"dinamico" significa que o nó pode ser expandido ou não, e "expandido" significa que o nó inicia aberto se a árvore for dinâmica
 	Type:
 	{JSON}
@@ -154,11 +162,11 @@ i3GEO.configura = {
 			{ id:"omenudataArquivos5",text: $trad("u20a"), url: "javascript:i3GEO.mapa.dialogo.convertekml()" }
 			],
 			"interface": [
-			{ id:"omenudataInterface1",text: "Interface normal", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/'+i3GEO.parametros.interfacePadrao+'?'+i3GEO.configura.sid" },
-			{ id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/openlayers.htm?'+i3GEO.configura.sid" },
-			{ id:"omenudataInterface3",text: "Flash", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/flamingo.htm?'+i3GEO.configura.sid" },
-			{ id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/googlemaps.phtml?'+i3GEO.configura.sid" },
-			{ id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/aplicmap/googleearth.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface1",text: "Interface normal", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/geral.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface2",text: "OpenLayers", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/openlayers.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface3",text: "Flash", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/flamingo.htm?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface4",text: "Google Maps", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googlemaps.phtml?'+i3GEO.configura.sid" },
+			{ id:"omenudataInterface5",text: "Google Earth", url: "javascript:window.location = i3GEO.configura.locaplic+'/interface/googleearth.phtml?'+i3GEO.configura.sid" },
 			{ id:"omenudataInterface6",text: $trad("u21"), url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/geradordelinks.htm')" },
 			{ id:"omenudataInterface7",text: "Serviços WMS", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/ogc.htm')" },
 			{ id:"omenudataInterface8",text: "Hiperbólica", url: "javascript:var w = window.open(i3GEO.configura.locaplic+'/hiperbolica.html')" },
@@ -4,7 +4,7 @@
 <meta http-equiv="Category" content="I3Geo Mapa interativo MMA geoprocessamento sig mobile">
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
 <title>i3Geo - Mapa interativo</title>
-<script type="text/javascript" src="../classesjs/i3geo.js"></script>
+<script type="text/javascript" src="../classesjs/i3geonaocompacto.js"></script>
 	<style> 
 	.yui-log .i3geo {background-color:yellow;} /* customize a color */
 	.yui-log .redesenho {background-color:yellow;} /* customize a color */
@@ -167,9 +167,10 @@
 i3GEO.configura.locaplic = i3GEO.util.protocolo()+"://"+window.location.host+"/i3geo";
 i3GEO.configura.templateLegenda = "legendagrupos.htm";
 i3GEO.configura.grupoLayers = [
-                           	{nome:"Grupo 1",layers:["zee","estadosl"]},
-                           	{nome:"Grupo 2",layers:["mundo"]}
-                           ]
+	{nome:"Grupo 1",icone:true,dinamico:true,expandido:true,layers:["zee","estadosl"]},
+	{nome:"Grupo 2",icone:true,dinamico:true,expandido:true,layers:["mundo"]}
+];
+
 i3GEO.cria();
 i3GEO.inicia();