Download as
Browse Code »

Commit 0243306381f374aa6d226ba1d3c82b729acdbbd8

Authored by Edmar Moretti
1 parent e70a8979
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Adaptação da ferramenta Clique Grafico para Bootstrap

Showing 2 changed files with 67 additions and 75 deletions   Show diff stats
ferramentas/inseregrafico/index.js
  Diff comments   View file @0243306
... ... @@ -81,12 +81,6 @@ i3GEOF.insereGrafico = {
81 81 {i3GEO.guias.mostraGuiaFerramenta("i3GEOinseregraficoguia1","i3GEOinseregraficoguia");};
82 82 $i("i3GEOinseregraficoguia2").onclick = function()
83 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 84 i3GEOF.insereGrafico.ativaFoco();
91 85 i3GEOF.insereGrafico.comboTemas();
92 86 }
... ... @@ -217,7 +211,6 @@ i3GEOF.insereGrafico = {
217 211 $i("i3GEOinseregraficotemasi").innerHTML = retorno.dados;
218 212 if ($i("i3GEOinseregraficotemasLigados")){
219 213 $i("i3GEOinseregraficotemasLigados").onchange = function(){
220   - $i("i3GEOinseregraficolistai").innerHTML = "<p style=color:red >"+$trad('msgAguarde',i3GEOF.insereGrafico.dicionario)+"...<br>";
221 214 i3GEO.php.listaItensTema(i3GEOF.insereGrafico.listaItens,$i("i3GEOinseregraficotemasLigados").value);
222 215 i3GEO.mapa.ativaTema($i("i3GEOinseregraficotemasLigados").value);
223 216 };
... ... @@ -231,7 +224,10 @@ i3GEOF.insereGrafico = {
231 224 "",
232 225 false,
233 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 241 */
246 242 listaItens: function(retorno){
247 243 try{
248   - var i,
  244 + var i,c,
249 245 n,
250   - ins = [];
  246 + ins = "";
251 247 n = retorno.data.valores.length;
252   - ins.push("<table class=lista >");
253 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 260 i3GEO.util.aplicaAquarela("i3GEOinseregraficolistai");
261 261 }
262 262 catch(e)
263 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 266 Function: pegaItensMarcados
274 267  
275 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 270 pegaItensMarcados: function(){
278 271 var listadeitens = [],
279   - inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("input"),
280   - i,
  272 + inputs = $i("i3GEOinseregraficolistai").getElementsByTagName("li"),
  273 + i,linah,
281 274 it,
282   - c,
283 275 n;
284 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 283 return(listadeitens.join("*"));
... ... @@ -307,7 +296,7 @@ i3GEOF.insereGrafico = {
307 296 try
308 297 {
309 298 temp = par.split("*");
310   - par = "<table>";
  299 + par = "<div class='container-fluid'><table>";
311 300 i = temp.length-1;
312 301 if(i >= 0)
313 302 {
... ... @@ -315,11 +304,11 @@ i3GEOF.insereGrafico = {
315 304 {
316 305 t = temp[i];
317 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 309 while(i--);
321 310 }
322   - par += "</table>";
  311 + par += "</table></div>";
323 312 w = i3GEO.janela.cria(200,200,"","center","center","<div class='i3GeoTituloJanela'>Legenda</div>","FlegendaGr");
324 313 w = w[2].id;
325 314 $i(w).innerHTML = par;
... ...
ferramentas/inseregrafico/template_mst.html
  Diff comments   View file @0243306
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 19 </ul>
14 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 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 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 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 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 48 </div>
  49 +
47 50 </div>
48 51 \ No newline at end of file
... ...