Adaptação da ferramenta Clique Grafico para Bootstrap

Edmar Moretti
1 parent e70a8979
Showing 2 changed files with 67 additions and 75 deletions Show diff stats
ferramentas/inseregrafico/index.js
ferramentas/inseregrafico/template_mst.html
@@ -81,12 +81,6 @@ i3GEOF.insereGrafico = {
 			{i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia1","i3GEOinseregraficoguia");};
 			$i("i3GEOinseregraficoguia2").onclick = function()
 			{i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia2","i3GEOinseregraficoguia");};
-			new YAHOO.widget.Button(
-				"i3GEOinseregraficobotao1",
-				{onclick:{fn: i3GEOF.insereGrafico.legenda}}
-			);
-			i3GEO.util.mensagemAjuda("i3GEOinseregraficomen1",$i("i3GEOinseregraficomen1").innerHTML);
-			//i3GEO.php.listaItensTema(i3GEOF.graficoTema.montaListaItens,i3GEO.temaAtivo);
 			i3GEOF.insereGrafico.ativaFoco();
 			i3GEOF.insereGrafico.comboTemas();
 		}
@@ -217,7 +211,6 @@ i3GEOF.insereGrafico = {
 		 		$i("i3GEOinseregraficotemasi").innerHTML = retorno.dados;
 		 		if ($i("i3GEOinseregraficotemasLigados")){
 		 			$i("i3GEOinseregraficotemasLigados").onchange = function(){
-		 				$i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >"+$trad('msgAguarde',i3GEOF.insereGrafico.dicionario)+"...<br>";
 		 				i3GEO.php.listaItensTema(i3GEOF.insereGrafico.listaItens,$i("i3GEOinseregraficotemasLigados").value);
 		 				i3GEO.mapa.ativaTema($i("i3GEOinseregraficotemasLigados").value);
 		 			};
@@ -231,7 +224,10 @@ i3GEOF.insereGrafico = {
 			"",
 			false,
 			"ligados",
-			"display:block"
+			" ",
+			false,
+			true,
+			"form-control comboTema"
 		);
 	},
 	/*
@@ -245,50 +241,43 @@ i3GEOF.insereGrafico = {
 	*/
 	listaItens: function(retorno){
 		try{
-			var i,
+			var i,c,
 				n,
-				ins = [];
+				ins = "";
 			n = retorno.data.valores.length;
-			ins.push("<table class=lista >");
 			for (i=0;i<n; i++){
-				ins.push("<tr><td><input size=2 style='cursor:pointer' name="+retorno.data.valores[i].item+" type=checkbox id=i3GEOinseregrafico"+retorno.data.valores[i].item+" /></td>");
-				ins.push("<td>&nbsp;"+retorno.data.valores[i].item+"</td>");
-				ins.push("<td><div class='i3geoForm100 i3geoFormIconeAquarela' ><input  id=i3GEOinseregrafico"+retorno.data.valores[i].item+"cor type=text size=13 value="+i3GEO.util.randomRGB()+" /></div></td></tr>");
+				ins += '<li><div class="form-group condensed"><div style="display:inline;width:100px;" class="checkbox text-left"><label>'
+					+ '<input type="checkbox" name="'
+					+ retorno.data.valores[i].item + '">'
+					+ '<span class="checkbox-material noprint"><span class="check"></span></span> '
+					+ retorno.data.valores[i].item
+					+ '</label></div>';
+
+				ins += 	'&nbsp;<div style="display:inline-block;" class="form-group label-fixed condensed" >'
+					+ '<input style="width:100px;" class="form-control input-lg i3geoFormIconeAquarela" type="text" value="' + i3GEO.util.randomRGB() + '" id="cliqueGr' + i + '"/></div></div></li>';
 			}
-			ins.push("</table>");
-			$i("i3GEOinseregraficolistai").innerHTML = ins.join("");
+			$i("i3GEOinseregraficolistai").innerHTML = ins;
 			i3GEO.util.aplicaAquarela("i3GEOinseregraficolistai");
 		}
 		catch(e)
 		{$i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >Erro "+e+"<br>";}
 	},
 	/*
-	Function: corj
-
-	Abre a janela para o usu&aacute;rio selecionar uma cor interativamente
-	*/
-	corj: function(obj)
-	{i3GEO.util.abreCor("",obj);},
-	/*
 	Function: pegaItensMarcados
 	Recupera os itens que foram marcados e monta uma lista para enviar como parametro para a fun&ccedil;&atilde;o de gera&ccedil;&atilde;o dos gr&aacute;ficos
 	*/
 	pegaItensMarcados: function(){
 		var listadeitens = [],
-			inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("input"),
-			i,
+			inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("li"),
+			i,linah,
 			it,
-			c,
 			n;
 		n = inputs.length;
-		for (i=0;i<n; i++)
-		{
-			if (inputs[i].checked === true)
-			{
-				it = inputs[i].id;
-				c = $i(it+"cor").value;
-				listadeitens.push(it.replace("i3GEOinseregrafico","")+","+c);
+		for (i=0;i<n; i++){
+			it = inputs[i].getElementsByTagName("input");
+			if (it[0].checked === true)	{
+				listadeitens.push(it[0].name+","+it[1].value);
 			}
 		}
 		return(listadeitens.join("*"));
@@ -307,7 +296,7 @@ i3GEOF.insereGrafico = {
 		try
 		{
 			temp = par.split("*");
-			par = "<table>";
+			par = "<div class='container-fluid'><table>";
 			i = temp.length-1;
 			if(i >= 0)
 			{
@@ -315,11 +304,11 @@ i3GEOF.insereGrafico = {
 				{
 					t = temp[i];
 					t = t.split(",");
-					par += "<tr style='text-align:left'><td style='background-color:rgb("+t[1]+","+t[2]+","+t[3]+")'>&nbsp;&nbsp;</td><td style='text-align:left'>"+t[0]+"</td></tr>";
+					par += "<tr style='text-align:left'><td style='width:20px;background-color:rgb("+t[1]+","+t[2]+","+t[3]+") !Important;'>&nbsp;&nbsp;</td><td style='text-align:left'> "+t[0]+"</td></tr>";
 				}
 				while(i--);
 			}
-			par += "</table>";
+			par += "</table></div>";
 			w = i3GEO.janela.cria(200,200,"","center","center","<div class='i3GeoTituloJanela'>Legenda</div>","FlegendaGr");
 			w = w[2].id;
 			$i(w).innerHTML = par;
-<div id='i3GEOinseregraficoguiasYUI' class='yui-navset'
-	style='top: 0px; cursor: pointer; left: 0px;'>
-	<ul class='yui-nav'
-		style='border-width: 0pt 0pt 0px; border-color: rgb(240, 240, 240); border-bottom-color: white;'>
-		<li><div id='i3GEOinseregraficoguia1'
-				style='text-align: center; left: 0px;'>
-				<a><em>{{{fonteDados}}}</em></a>
-			</div></li>
-		<li><div id='i3GEOinseregraficoguia2'
-				style='text-align: center; left: 0px;'>
-				<a><em>{{{propriedades}}}</em></a>
-			</div></li>
+<div id='i3GEOinseregraficoguiasYUI' class='yui-navset {{{escondeGuias}}}' style='top: 0px; cursor: pointer; left: 0px; margin-left: 2px;'>
+	<ul class='yui-nav' style='border-width: 0pt 0pt 0px; border-color: rgb(240, 240, 240); border-bottom-color: white;'>
+		<li>
+			<div id='i3GEOinseregraficoguia2' style='text-align: center; left: 0px;'>
+				<a title='{{{propriedades}}}'>
+					<em><span class="material-icons">settings</span></em>
+				</a>
+			</div>
+		</li>
+
+		<li>
+			<div id='i3GEOinseregraficoguia1' style='text-align: center; left: 0px;'>
+				<a>
+					<em>{{{fonteDados}}}</em>
+				</a>
+			</div>
+		</li>
+
 	</ul>
 </div>
-<br>
-<div class='guiaobj' id='i3GEOinseregraficoguia1obj'
-	style='left: 1px; display: none;'>
-	<p class='paragrafo'>Escolha o tema com os dados:
-	<div id='i3GEOinseregraficotemasi' class='styled-select'
-		style='display: block;'>{{{msgAguarde}}}...</div>
-	<div id='i3GEOinseregraficolistai' class='digitar'
-		style='left: 0px; top: 20px; 330 px; height: 80px; overflow: auto; display: block;'>{{{selecionaTema}}}</div>
-	<br> <br> <br>
-	<p class='paragrafo'>
-		<input id='i3GEOinseregraficobotao1' size='35' type='button'
-			value='mostrar legenda no mapa' />
-	<div id='i3GEOinseregraficomen1' style='top: 10px; left: 1px'>
-		<p class='paragrafo'>{{{selecionaItens}}}
+<div class="container-fluid" id='i3GEOinseregraficoguia1obj'>
+	<div style="width: 100%;" class='form-group label-fixed condensed'>
+		<label class="control-label" for="i3GEOtoponimiaDivListaFonte">Escolha o tema com os dados</label>
+		<div style="width: 100%;" class="input-group">
+			<div id='i3GEOinseregraficotemasi'></div>
+		</div>
 	</div>
+	<h5 class="alert alert-info">{{{selecionaItens}}}</h5>
+
+	<div id='i3GEOinseregraficolistai'>{{{selecionaTema}}}</div>
+
+	<button onclick="i3GEOF.insereGrafico.legenda()" class='btn btn-primary btn-sm btn-raised'>Legenda</button>
+
+	<h5 class="alert alert-info">{{{selecionaItens}}}</h5>
 </div>
-<div class='guiaobj' id='i3GEOinseregraficoguia2obj'
-	style='left: 1px; display: none;'>
-	<p class='paragrafo'>Tamanho do c&iacute;rculo:</p>
-	<div class='i3geoForm i3geoFormIconeNumero'>
-		<input type='number' value='50' id='i3GEOinseregraficow' />
+<div class="container-fluid" id='i3GEOinseregraficoguia2obj'>
+	<div class='form-group label-fixed condensed'>
+		<label class="control-label" for="i3GEOinseregraficow">Tamanho do c&iacute;rculo</label>
+		<input class="form-control input-lg" type='text' id='i3GEOinseregraficow' value='50' />
 	</div>
-	<br>
-	<p class='paragrafo'>{{{inclinacaoCirculo}}}:</p>
-	<div class='i3geoForm i3geoFormIconeNumero'>
-		<input type='number' value='1.5' id='i3GEOinseregraficoinclinacao' />
+	<div class='form-group label-fixed condensed'>
+		<label class="control-label" for="i3GEOinseregraficoinclinacao">{{inclinacaoCirculo}}}</label>
+		<input class="form-control input-lg" type='text' id='i3GEOinseregraficoinclinacao' value='1.5' />
 	</div>
-	<br>
-	<p class='paragrafo'>{{{tamanhoSombra}}}:</p>
-	<div class='i3geoForm i3geoFormIconeNumero'>
-		<input type='number' value='5' id='i3GEOinseregraficosombra' />
+	<div class='form-group label-fixed condensed'>
+		<label class="control-label" for="i3GEOinseregraficosombra">{{tamanhoSombra}}}</label>
+		<input class="form-control input-lg" type='text' id='i3GEOinseregraficosombra' value='5' />
 	</div>
+
 </div>
 \ No newline at end of file