Commit 0243306381f374aa6d226ba1d3c82b729acdbbd8

Authored by Edmar Moretti
1 parent e70a8979

Adaptação da ferramenta Clique Grafico para Bootstrap

ferramentas/inseregrafico/index.js
@@ -81,12 +81,6 @@ i3GEOF.insereGrafico = { @@ -81,12 +81,6 @@ i3GEOF.insereGrafico = {
81 {i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia1","i3GEOinseregraficoguia");}; 81 {i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia1","i3GEOinseregraficoguia");};
82 $i("i3GEOinseregraficoguia2").onclick = function() 82 $i("i3GEOinseregraficoguia2").onclick = function()
83 {i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia2","i3GEOinseregraficoguia");}; 83 {i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia2","i3GEOinseregraficoguia");};
84 - new YAHOO.widget.Button(  
85 - "i3GEOinseregraficobotao1",  
86 - {onclick:{fn: i3GEOF.insereGrafico.legenda}}  
87 - );  
88 - i3GEO.util.mensagemAjuda("i3GEOinseregraficomen1",$i("i3GEOinseregraficomen1").innerHTML);  
89 - //i3GEO.php.listaItensTema(i3GEOF.graficoTema.montaListaItens,i3GEO.temaAtivo);  
90 i3GEOF.insereGrafico.ativaFoco(); 84 i3GEOF.insereGrafico.ativaFoco();
91 i3GEOF.insereGrafico.comboTemas(); 85 i3GEOF.insereGrafico.comboTemas();
92 } 86 }
@@ -217,7 +211,6 @@ i3GEOF.insereGrafico = { @@ -217,7 +211,6 @@ i3GEOF.insereGrafico = {
217 $i("i3GEOinseregraficotemasi").innerHTML = retorno.dados; 211 $i("i3GEOinseregraficotemasi").innerHTML = retorno.dados;
218 if ($i("i3GEOinseregraficotemasLigados")){ 212 if ($i("i3GEOinseregraficotemasLigados")){
219 $i("i3GEOinseregraficotemasLigados").onchange = function(){ 213 $i("i3GEOinseregraficotemasLigados").onchange = function(){
220 - $i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >"+$trad('msgAguarde',i3GEOF.insereGrafico.dicionario)+"...<br>";  
221 i3GEO.php.listaItensTema(i3GEOF.insereGrafico.listaItens,$i("i3GEOinseregraficotemasLigados").value); 214 i3GEO.php.listaItensTema(i3GEOF.insereGrafico.listaItens,$i("i3GEOinseregraficotemasLigados").value);
222 i3GEO.mapa.ativaTema($i("i3GEOinseregraficotemasLigados").value); 215 i3GEO.mapa.ativaTema($i("i3GEOinseregraficotemasLigados").value);
223 }; 216 };
@@ -231,7 +224,10 @@ i3GEOF.insereGrafico = { @@ -231,7 +224,10 @@ i3GEOF.insereGrafico = {
231 "", 224 "",
232 false, 225 false,
233 "ligados", 226 "ligados",
234 - "display:block" 227 + " ",
  228 + false,
  229 + true,
  230 + "form-control comboTema"
235 ); 231 );
236 }, 232 },
237 /* 233 /*
@@ -245,50 +241,43 @@ i3GEOF.insereGrafico = { @@ -245,50 +241,43 @@ i3GEOF.insereGrafico = {
245 */ 241 */
246 listaItens: function(retorno){ 242 listaItens: function(retorno){
247 try{ 243 try{
248 - var i, 244 + var i,c,
249 n, 245 n,
250 - ins = []; 246 + ins = "";
251 n = retorno.data.valores.length; 247 n = retorno.data.valores.length;
252 - ins.push("<table class=lista >");  
253 for (i=0;i<n; i++){ 248 for (i=0;i<n; i++){
254 - 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>");  
255 - ins.push("<td>&nbsp;"+retorno.data.valores[i].item+"</td>");  
256 - 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>"); 249 + ins += '<li><div class="form-group condensed"><div style="display:inline;width:100px;" class="checkbox text-left"><label>'
  250 + + '<input type="checkbox" name="'
  251 + + retorno.data.valores[i].item + '">'
  252 + + '<span class="checkbox-material noprint"><span class="check"></span></span> '
  253 + + retorno.data.valores[i].item
  254 + + '</label></div>';
  255 +
  256 + ins += '&nbsp;<div style="display:inline-block;" class="form-group label-fixed condensed" >'
  257 + + '<input style="width:100px;" class="form-control input-lg i3geoFormIconeAquarela" type="text" value="' + i3GEO.util.randomRGB() + '" id="cliqueGr' + i + '"/></div></div></li>';
257 } 258 }
258 - ins.push("</table>");  
259 - $i("i3GEOinseregraficolistai").innerHTML = ins.join(""); 259 + $i("i3GEOinseregraficolistai").innerHTML = ins;
260 i3GEO.util.aplicaAquarela("i3GEOinseregraficolistai"); 260 i3GEO.util.aplicaAquarela("i3GEOinseregraficolistai");
261 } 261 }
262 catch(e) 262 catch(e)
263 {$i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >Erro "+e+"<br>";} 263 {$i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >Erro "+e+"<br>";}
264 }, 264 },
265 /* 265 /*
266 - Function: corj  
267 -  
268 - Abre a janela para o usu&aacute;rio selecionar uma cor interativamente  
269 - */  
270 - corj: function(obj)  
271 - {i3GEO.util.abreCor("",obj);},  
272 - /*  
273 Function: pegaItensMarcados 266 Function: pegaItensMarcados
274 267
275 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 268 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
276 */ 269 */
277 pegaItensMarcados: function(){ 270 pegaItensMarcados: function(){
278 var listadeitens = [], 271 var listadeitens = [],
279 - inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("input"),  
280 - i, 272 + inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("li"),
  273 + i,linah,
281 it, 274 it,
282 - c,  
283 n; 275 n;
284 n = inputs.length; 276 n = inputs.length;
285 - for (i=0;i<n; i++)  
286 - {  
287 - if (inputs[i].checked === true)  
288 - {  
289 - it = inputs[i].id;  
290 - c = $i(it+"cor").value;  
291 - listadeitens.push(it.replace("i3GEOinseregrafico","")+","+c); 277 + for (i=0;i<n; i++){
  278 + it = inputs[i].getElementsByTagName("input");
  279 + if (it[0].checked === true) {
  280 + listadeitens.push(it[0].name+","+it[1].value);
292 } 281 }
293 } 282 }
294 return(listadeitens.join("*")); 283 return(listadeitens.join("*"));
@@ -307,7 +296,7 @@ i3GEOF.insereGrafico = { @@ -307,7 +296,7 @@ i3GEOF.insereGrafico = {
307 try 296 try
308 { 297 {
309 temp = par.split("*"); 298 temp = par.split("*");
310 - par = "<table>"; 299 + par = "<div class='container-fluid'><table>";
311 i = temp.length-1; 300 i = temp.length-1;
312 if(i >= 0) 301 if(i >= 0)
313 { 302 {
@@ -315,11 +304,11 @@ i3GEOF.insereGrafico = { @@ -315,11 +304,11 @@ i3GEOF.insereGrafico = {
315 { 304 {
316 t = temp[i]; 305 t = temp[i];
317 t = t.split(","); 306 t = t.split(",");
318 - 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>"; 307 + 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>";
319 } 308 }
320 while(i--); 309 while(i--);
321 } 310 }
322 - par += "</table>"; 311 + par += "</table></div>";
323 w = i3GEO.janela.cria(200,200,"","center","center","<div class='i3GeoTituloJanela'>Legenda</div>","FlegendaGr"); 312 w = i3GEO.janela.cria(200,200,"","center","center","<div class='i3GeoTituloJanela'>Legenda</div>","FlegendaGr");
324 w = w[2].id; 313 w = w[2].id;
325 $i(w).innerHTML = par; 314 $i(w).innerHTML = par;
ferramentas/inseregrafico/template_mst.html
1 -<div id='i3GEOinseregraficoguiasYUI' class='yui-navset'  
2 - style='top: 0px; cursor: pointer; left: 0px;'>  
3 - <ul class='yui-nav'  
4 - style='border-width: 0pt 0pt 0px; border-color: rgb(240, 240, 240); border-bottom-color: white;'>  
5 - <li><div id='i3GEOinseregraficoguia1'  
6 - style='text-align: center; left: 0px;'>  
7 - <a><em>{{{fonteDados}}}</em></a>  
8 - </div></li>  
9 - <li><div id='i3GEOinseregraficoguia2'  
10 - style='text-align: center; left: 0px;'>  
11 - <a><em>{{{propriedades}}}</em></a>  
12 - </div></li> 1 +<div id='i3GEOinseregraficoguiasYUI' class='yui-navset {{{escondeGuias}}}' style='top: 0px; cursor: pointer; left: 0px; margin-left: 2px;'>
  2 + <ul class='yui-nav' style='border-width: 0pt 0pt 0px; border-color: rgb(240, 240, 240); border-bottom-color: white;'>
  3 + <li>
  4 + <div id='i3GEOinseregraficoguia2' style='text-align: center; left: 0px;'>
  5 + <a title='{{{propriedades}}}'>
  6 + <em><span class="material-icons">settings</span></em>
  7 + </a>
  8 + </div>
  9 + </li>
  10 +
  11 + <li>
  12 + <div id='i3GEOinseregraficoguia1' style='text-align: center; left: 0px;'>
  13 + <a>
  14 + <em>{{{fonteDados}}}</em>
  15 + </a>
  16 + </div>
  17 + </li>
  18 +
13 </ul> 19 </ul>
14 </div> 20 </div>
15 -<br>  
16 -<div class='guiaobj' id='i3GEOinseregraficoguia1obj'  
17 - style='left: 1px; display: none;'>  
18 - <p class='paragrafo'>Escolha o tema com os dados:  
19 - <div id='i3GEOinseregraficotemasi' class='styled-select'  
20 - style='display: block;'>{{{msgAguarde}}}...</div>  
21 - <div id='i3GEOinseregraficolistai' class='digitar'  
22 - style='left: 0px; top: 20px; 330 px; height: 80px; overflow: auto; display: block;'>{{{selecionaTema}}}</div>  
23 - <br> <br> <br>  
24 - <p class='paragrafo'>  
25 - <input id='i3GEOinseregraficobotao1' size='35' type='button'  
26 - value='mostrar legenda no mapa' />  
27 - <div id='i3GEOinseregraficomen1' style='top: 10px; left: 1px'>  
28 - <p class='paragrafo'>{{{selecionaItens}}} 21 +<div class="container-fluid" id='i3GEOinseregraficoguia1obj'>
  22 + <div style="width: 100%;" class='form-group label-fixed condensed'>
  23 + <label class="control-label" for="i3GEOtoponimiaDivListaFonte">Escolha o tema com os dados</label>
  24 + <div style="width: 100%;" class="input-group">
  25 + <div id='i3GEOinseregraficotemasi'></div>
  26 + </div>
29 </div> 27 </div>
  28 + <h5 class="alert alert-info">{{{selecionaItens}}}</h5>
  29 +
  30 + <div id='i3GEOinseregraficolistai'>{{{selecionaTema}}}</div>
  31 +
  32 + <button onclick="i3GEOF.insereGrafico.legenda()" class='btn btn-primary btn-sm btn-raised'>Legenda</button>
  33 +
  34 + <h5 class="alert alert-info">{{{selecionaItens}}}</h5>
30 </div> 35 </div>
31 -<div class='guiaobj' id='i3GEOinseregraficoguia2obj'  
32 - style='left: 1px; display: none;'>  
33 - <p class='paragrafo'>Tamanho do c&iacute;rculo:</p>  
34 - <div class='i3geoForm i3geoFormIconeNumero'>  
35 - <input type='number' value='50' id='i3GEOinseregraficow' /> 36 +<div class="container-fluid" id='i3GEOinseregraficoguia2obj'>
  37 + <div class='form-group label-fixed condensed'>
  38 + <label class="control-label" for="i3GEOinseregraficow">Tamanho do c&iacute;rculo</label>
  39 + <input class="form-control input-lg" type='text' id='i3GEOinseregraficow' value='50' />
36 </div> 40 </div>
37 - <br>  
38 - <p class='paragrafo'>{{{inclinacaoCirculo}}}:</p>  
39 - <div class='i3geoForm i3geoFormIconeNumero'>  
40 - <input type='number' value='1.5' id='i3GEOinseregraficoinclinacao' /> 41 + <div class='form-group label-fixed condensed'>
  42 + <label class="control-label" for="i3GEOinseregraficoinclinacao">{{inclinacaoCirculo}}}</label>
  43 + <input class="form-control input-lg" type='text' id='i3GEOinseregraficoinclinacao' value='1.5' />
41 </div> 44 </div>
42 - <br>  
43 - <p class='paragrafo'>{{{tamanhoSombra}}}:</p>  
44 - <div class='i3geoForm i3geoFormIconeNumero'>  
45 - <input type='number' value='5' id='i3GEOinseregraficosombra' /> 45 + <div class='form-group label-fixed condensed'>
  46 + <label class="control-label" for="i3GEOinseregraficosombra">{{tamanhoSombra}}}</label>
  47 + <input class="form-control input-lg" type='text' id='i3GEOinseregraficosombra' value='5' />
46 </div> 48 </div>
  49 +
47 </div> 50 </div>
48 \ No newline at end of file 51 \ No newline at end of file