Download as
Browse Code »

Commit fe00c6f606304bb3dbc498b0757da4b3a56ce93d

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

reformulação do layout da página e inclusão do prefixo i3geo_gl nos nomas das funções

Showing 1 changed file with 99 additions and 72 deletions   Show diff stats
geradordelinks.htm
  Diff comments   View file @fe00c6f
... ... @@ -13,29 +13,32 @@ P
13 13 </style>
14 14 <script src="pacotes/cpaint/cpaint2.inc.compressed.js" type="text/javascript"></script>
15 15 <script type="text/javascript" src="pacotes/openlayers/OpenLayers.js"></script>
  16 +<script type="text/javascript" src="classesjs/compactados/funcoes_compacto.js"></script>
  17 +
16 18 </head>
17 19 <body style="background-color:white;text-align:left;left:0px;">
18   -<div id=banner style=position:relative;top:0px;left:0px;text-align:left >
  20 +<!--<div id=banner style=position:relative;top:0px;left:0px;text-align:left >
19 21 <img style=left:0px; src="imagens/barrasuperior_geradordelinks_2006.jpg" width="765" >
20   -</div>
21   -<div style=width:550px;position:relative;top:0px;left:10px >
  22 +</div>-->
  23 +<div style=width:550px;position:relative;top:0px;left:10px;background-color:rgb(250,250,250) >
22 24 <p>Aqui você pode gerar links para abrir o I3Geo de forma personalizada.
23 25 Os links podem ser incluídos em qualquer página WEB, sendo possível
24 26 definir quais os temas serão mostrados e qual a extensão geográfica do mapa.</p>
25 27 </div>
26   -<div style=width:550px;left:10px;text-align:left; >Link (copie e cole ou clique para testar):
27   -<a href="" id=link target=blanck ></a>
  28 +<div style=width:550px;left:10px;text-align:left; ><p>Este &eacute; o link para abrir o mapa. Copie e cole em sua p&aacute;gina
  29 +na internet ou clique para testar:
  30 +<a style=color:blue;font-size:12px href="" id=link target=blanck ></a>
28 31 </div>
29 32 <div style='height:230px;width:550px;top:10px;left:10px;text-align:left;border:1px gray solid;' >
30 33 <div style=margin:10px; >
31   - <img style=position:absolute;top:0px;left:505px; src=imagens/question.gif onclick="javascript:document.getElementById('ajuda1').style.display='block'" />
  34 + <img style=position:absolute;top:0px;left:505px; src=imagens/question.gif onclick="javascript:$i('ajuda1').style.display='block'" />
32 35 <p><b>Escolha os temas que serão incluídos no mapa (opcional):</b></p>
33 36 <div id=grupos style=text-align:left; ></div>
34 37 <div id=subgrupos style=top:5px;text-align:left; ></div>
35 38 <div id=temas style=top:10px;text-align:left; ></div>
36   - <div style=position:absolute;top:35px;left:270px;text-align:left; >
37   - Temas que serão adicionados ao mapa:
38   - <div id=temasa style='width:250px;border:1px gray solid;height:155px;top:10px;left:0px;text-align:left;overflow:auto' ></div>
  39 + <div style=position:absolute;top:25px;left:270px;text-align:left; >
  40 + Temas j&aacute; escolhidos. Os que estiverem marcados, ficar&atilde;o ligados logo ao abrir o mapa:
  41 + <div id=temasa style='width:250px;border:1px gray solid;height:125px;top:10px;left:0px;text-align:left;overflow:auto' ></div>
39 42 </div>
40 43 </div>
41 44 </div>
... ... @@ -51,9 +54,13 @@ que estiverem marcados, aparecerão visíveis no mapa (ligados)&lt;/p&gt;
51 54 <p><b>Se vc quiser, o mapa poderá ser aberto mostrando pontos, digite abaixo as coordenadas
52 55 dos pontos em décimos de grau (exemplo: -54 -12 -54 1 -51 -15) (opcional):</b></p>
53 56 <p>Coordenadas dos pontos:</p>
54   - <input type=text size=80 id=pontos value="" onchange="crialink()" />
55   - <p>Nome do tema para a legenda do mapa:</p>
56   - <input type=text size=80 id=nometemapontos value="" onchange="crialink()" />&nbsp;
  57 + <div style=padding:5px; id=paiPontos >
  58 + <input type=text size=80 id=pontos value="" onchange="crialink()" />
  59 + </div>
  60 +<p>Nome do tema para a legenda do mapa:</p>
  61 + <div style=padding:5px; id=paiNometemapontos >
  62 + <input type=text size=80 id=nometemapontos value="" onchange="crialink()" />&nbsp;
  63 + </div>
57 64 </div>
58 65 </div>
59 66 <div style='width:550px;top:20px;left:10px;text-align:left;border:1px gray solid;' >
... ... @@ -61,7 +68,9 @@ dos pontos em décimos de grau (exemplo: -54 -12 -54 1 -51 -15) (opcional):&lt;/b&gt;&lt;/
61 68 <p><b>Caso existam perfis definidos na configuração do menu de temas, vc pode restringir a lista
62 69 de temas do menu de adição de temas do I3Geo (opcional)</b></p>
63 70 <p>Perfil:</p>
  71 + <div style=padding:5px; id=paiPerfil >
64 72 <input onchange="crialink()" type=text size=80 id=perfil value="" />
  73 + </div>
65 74 </div>
66 75 </div>
67 76 <div style='width:550px;top:25px;left:10px;text-align:left;border:1px gray solid;' >
... ... @@ -82,10 +91,22 @@ dos pontos em décimos de grau (exemplo: -54 -12 -54 1 -51 -15) (opcional):&lt;/b&gt;&lt;/
82 91 <div id=mapa1 style="width:250px;height:250px;border:1px solid blue;display:none"></div>
83 92 <div style=position:absolute;top:40px;left:270px;text-align:left; >
84 93 Coordenadas geográficas em décimos de grau:<br><br>
85   - Longitude mínima:<br><input onchange="crialink()" type=text size=10 value="" id=xmin /><br>
86   - Longitude máxima:<br><input onchange="crialink()" type=text size=10 value="" id=xmax /><br>
87   - Latitude mínima:<br><input onchange="crialink()" type=text size=10 value="" id=ymin /><br>
88   - Latitude máxima:<br><input onchange="crialink()" type=text size=10 value="" id=ymax /><br><br>
  94 + Longitude mínima:<br>
  95 + <div style=padding:5px;width:80px; id=paiXmin >
  96 + <input onchange="crialink()" type=text size=10 value="" id=xmin />
  97 + </div><br>
  98 + Longitude máxima:<br>
  99 + <div style=padding:5px;width:80px; id=paiXmax >
  100 + <input onchange="crialink()" type=text size=10 value="" id=xmax />
  101 + </div><br>
  102 + Latitude mínima:<br>
  103 + <div style=padding:5px;width:80px; id=paiYmin >
  104 + <input onchange="crialink()" type=text size=10 value="" id=ymin />
  105 + </div><br>
  106 + Latitude máxima:<br>
  107 + <div style=padding:5px;width:80px; id=paiYmax >
  108 + <input onchange="crialink()" type=text size=10 value="" id=ymax />
  109 + </div><br>
89 110 <input class=executar type=button value="capturar" onclick="capturageo()" />
90 111 </div>
91 112 </div>
... ... @@ -119,35 +140,41 @@ Free Software Foundation, Inc., no endereço
119 140  
120 141 File: i3geo/geradordelinks.htm
121 142  
122   -Include:
123   -
124   -classesjs/cpaint/cpaint2.inc.compressed.js
125   -pacotes/openlayers/OpenLayers.js
126 143 */
127 144 navm = false
128 145 navn = false
129 146 var app = navigator.appName.substring(0,1);
130 147 if (app=='N') navn=true; else navm=true;
  148 +
  149 +$inputText("paiPontos","","pontos","","","")
  150 +$inputText("paiNometemapontos","","nometemapontos","","","")
  151 +$inputText("paiPerfil","","perfil","","","")
  152 +$inputText("paiXmin","","xmin","","","")
  153 +$inputText("paiXmax","","xmax","","","")
  154 +$inputText("paiYmin","","ymin","","","")
  155 +$inputText("paiYmax","","ymax","","","")
  156 +
131 157 /*
132 158 Variable: g_locaplic
133 159  
134 160 Localização da instalação do i3geo.
135 161 */
136 162 g_locaplic = "http://"+window.location.host+"/i3geo";
137   -seltema("estadosl")
138   -crialink()
139   -pegagrupos()
140   -initOL()
  163 +i3geo_gl_seltema("estadosl")
  164 +i3geo_gl_crialink()
  165 +i3geo_gl_pegagrupos()
  166 +i3geo_gl_init()
  167 +
141 168 /*
142   -Function: crialink
  169 +Function: i3geo_gl_crialink
143 170  
144 171 Cria o link e mostra na tela.
145 172  
146 173 */
147   -function crialink()
  174 +function i3geo_gl_crialink()
148 175 {
149 176 var ins = g_locaplic+"/ms_criamapa.php?";
150   - var iguias = document.getElementById("temasa").getElementsByTagName("input");
  177 + var iguias = $i("temasa").getElementsByTagName("input");
151 178 var tsl = new Array(); //temas ligados
152 179 var tsd = new Array(); //temas
153 180 for (i=0;i<iguias.length; i++)
... ... @@ -163,35 +190,35 @@ function crialink()
163 190 {ins += "&temasa="+tsd.join(" ")}
164 191 if(tsl.length > 0)
165 192 {ins += "&layers="+tsl.join(" ")}
166   - if(document.getElementById("pontos").value != "")
  193 + if($i("pontos").value != "")
167 194 {
168   - ins += "&pontos="+document.getElementById("pontos").value
169   - ins += "&nometemapontos="+document.getElementById("nometemapontos").value
  195 + ins += "&pontos="+$i("pontos").value
  196 + ins += "&nometemapontos="+$i("nometemapontos").value
170 197 }
171   - if(document.getElementById("perfil").value != "")
  198 + if($i("perfil").value != "")
172 199 {
173   - ins += "&perfil="+document.getElementById("perfil").value
  200 + ins += "&perfil="+$i("perfil").value
174 201 }
175   - if(document.getElementById("interface").value != "")
  202 + if($i("interface").value != "")
176 203 {
177   - ins += "&interface="+document.getElementById("interface").value
  204 + ins += "&interface="+$i("interface").value
178 205 }
179   - if(document.getElementById("xmin").value != "")
  206 + if($i("xmin").value != "")
180 207 {
181   - ins += "&mapext="+document.getElementById("xmin").value+" "
182   - ins += document.getElementById("ymin").value+" "
183   - ins += document.getElementById("xmax").value+" "
184   - ins += document.getElementById("ymax").value
  208 + ins += "&mapext="+$i("xmin").value+" "
  209 + ins += $i("ymin").value+" "
  210 + ins += $i("xmax").value+" "
  211 + ins += $i("ymax").value
185 212 }
186   - document.getElementById("link").href = ins
187   - document.getElementById("link").innerHTML = ins
  213 + $i("link").href = ins
  214 + $i("link").innerHTML = ins
188 215 }
189 216 /*
190   -Function: pegagrupos
  217 +Function: i3geo_gl_pegagrupos
191 218  
192 219 Pega a lista de grupos existentes no menu de temas do i3geo.
193 220 */
194   -function pegagrupos()
  221 +function i3geo_gl_pegagrupos()
195 222 {
196 223 var p = "classesphp/mapa_controle.php?funcao=pegalistadegrupos&map_file=''";
197 224 var cp = new cpaint();
... ... @@ -207,13 +234,13 @@ Monta um combo com a lista de grupos.
207 234 function combogrupos(retorno)
208 235 {
209 236 obGrupos = retorno.data
210   - var ins = "<select style=width:250px onchange='combosubgrupos(this.value)' ><option value='' >Grupos:</option>"
  237 + var ins = "<select style=width:250px onchange='combosubgrupos(this.value)' ><option value='' >Escolha um grupo:</option>"
211 238 for (ig=0;ig<obGrupos.grupos.length; ig++)
212 239 {
213 240 if(obGrupos.grupos[ig].nome)
214 241 ins += "<option value="+ig+" >"+obGrupos.grupos[ig].nome+"</option>"
215 242 }
216   - document.getElementById("grupos").innerHTML = ins+"</select>"
  243 + $i("grupos").innerHTML = ins+"</select>"
217 244 combosubgrupos(-1)
218 245 }
219 246 /*
... ... @@ -229,7 +256,7 @@ i - id que identifica o grupo escolhido.
229 256 */
230 257 function combosubgrupos(i)
231 258 {
232   - var ins = "<select style=width:250px onchange='combotemas("+i+",this.value)' ><option value='' >Sub-grupos:</option>"
  259 + var ins = "<select style=width:250px onchange='combotemas("+i+",this.value)' ><option value='' >Escolha um sub-grupo:</option>"
233 260 if (obGrupos.grupos[i])
234 261 {
235 262 for (ig=0;ig<obGrupos.grupos[i].subgrupos.length; ig++)
... ... @@ -237,7 +264,7 @@ function combosubgrupos(i)
237 264 ins += "<option value="+ig+" >"+obGrupos.grupos[i].subgrupos[ig].nome+"</option>"
238 265 }
239 266 }
240   - document.getElementById("subgrupos").innerHTML = ins+"</select>"
  267 + $i("subgrupos").innerHTML = ins+"</select>"
241 268 combotemasgrupo(i)
242 269 }
243 270 /*
... ... @@ -253,7 +280,7 @@ i - id que identifica o grupo escolhido.
253 280 */
254 281 function combotemasgrupo(i)
255 282 {
256   - var ins = "<select style=width:250px MULTIPLE SIZE=10 onchange=seltema(this.value) ><option value='' >Clique no tema para incluir:</option>"
  283 + var ins = "<select style=width:250px MULTIPLE SIZE=10 onchange=i3geo_gl_seltema(this.value) ><option value='' >Clique no tema para incluir:</option>"
257 284 if (obGrupos.grupos[i])
258 285 {
259 286 for (ig=0;ig<obGrupos.grupos[i].temasgrupo.length; ig++)
... ... @@ -261,7 +288,7 @@ function combotemasgrupo(i)
261 288 ins += "<option value="+obGrupos.grupos[i].temasgrupo[ig].tid+" >"+obGrupos.grupos[i].temasgrupo[ig].nome+"</option>"
262 289 }
263 290 }
264   - document.getElementById("temas").innerHTML = ins+"</select>"
  291 + $i("temas").innerHTML = ins+"</select>"
265 292 }
266 293 /*
267 294 Function: combotemas
... ... @@ -278,12 +305,12 @@ function combotemas(grupo,sub)
278 305 {
279 306 var monta = function(retorno)
280 307 {
281   - var ins = "<select style=width:250px MULTIPLE SIZE=10 onchange=seltema(this.value) ><option value='' >Clique no tema para incluir:</option>"
  308 + var ins = "<select style=width:250px MULTIPLE SIZE=10 onchange=i3geo_gl_seltema(this.value) ><option value='' >Clique no tema para incluir:</option>"
282 309 for (ig=0;ig<retorno.data.temas.length; ig++)
283 310 {
284 311 ins += "<option value="+retorno.data.temas[ig].tid+" >"+retorno.data.temas[ig].nome+"</option>"
285 312 }
286   - document.getElementById("temas").innerHTML = ins+"</select>"
  313 + $i("temas").innerHTML = ins+"</select>"
287 314 }
288 315 var p = "classesphp/mapa_controle.php?funcao=pegalistadetemas&map_file=''&grupo="+grupo+"&subgrupo="+sub;
289 316 var cp = new cpaint();
... ... @@ -292,7 +319,7 @@ function combotemas(grupo,sub)
292 319 cp.call(p,"pegalistadetemas",monta);
293 320 }
294 321 /*
295   -Function seletma
  322 +Function i3geo_gl_seltema
296 323  
297 324 Acrescenta um tema no link.
298 325  
... ... @@ -302,12 +329,12 @@ Parameters:
302 329  
303 330 idtema - codigo do tema que será crescentado
304 331 */
305   -function seltema(idtema)
  332 +function i3geo_gl_seltema(idtema)
306 333 {
307 334 var novodiv = document.createElement("div");
308 335 novodiv.style.textAlign="left"
309 336 novodiv.id = idtema
310   - document.getElementById("temasa").appendChild(novodiv);
  337 + $i("temasa").appendChild(novodiv);
311 338 var novoel = document.createElement("img");
312 339 novoel.title = "excluir"
313 340 novoel.onclick = excluir
... ... @@ -324,7 +351,7 @@ function seltema(idtema)
324 351 novoel.onclick = descer
325 352 novodiv.appendChild(novoel);
326 353 var novoel = document.createElement("input");
327   - novoel.onclick = crialink
  354 + novoel.onclick = i3geo_gl_crialink
328 355 novoel.title = "visível/não visível"
329 356 novoel.type = "checkbox"
330 357 novoel.style.cursor="pointer"
... ... @@ -337,7 +364,7 @@ function seltema(idtema)
337 364 novoel.innerHTML = idtema
338 365 novodiv.appendChild(novoel);
339 366 novodiv.appendChild(document.createElement("br"));
340   - crialink()
  367 + i3geo_gl_crialink()
341 368 }
342 369 /*
343 370 Function: descer
... ... @@ -354,7 +381,7 @@ function descer(e)
354 381 divpai = pai.parentNode
355 382 if(pai.nextSibling)
356 383 divpai.insertBefore(pai,pai.nextSibling.nextSibling)
357   - crialink()
  384 + i3geo_gl_crialink()
358 385 }
359 386 /*
360 387 Function: subir
... ... @@ -370,7 +397,7 @@ function subir(e)
370 397 var pai = pegaElementoPai(e)
371 398 divpai = pai.parentNode
372 399 divpai.insertBefore(pai,pai.previousSibling)
373   - crialink()
  400 + i3geo_gl_crialink()
374 401 }
375 402 /*
376 403 Function: excluir
... ... @@ -385,7 +412,7 @@ function excluir(e)
385 412 {
386 413 var pai = pegaElementoPai(e)
387 414 pai.parentNode.removeChild(pai)
388   - crialink()
  415 + i3geo_gl_crialink()
389 416 }
390 417 /*
391 418 Function: pegaElementoPai
... ... @@ -409,13 +436,13 @@ function pegaElementoPai(e)
409 436 return(tparent)
410 437 }
411 438 /*
412   -Function: initOL
  439 +Function: i3geo_gl_init
413 440  
414 441 Inicialliza o OpenLayers para permitir ao usuário escolher a abrangência espacial do link.
415 442 */
416   -function initOL()
  443 +function i3geo_gl_init()
417 444 {
418   - document.getElementById("mapa1").style.display = "block";
  445 + $i("mapa1").style.display = "block";
419 446 OL = new OpenLayers.Map('mapa1',{controls:[],numZoomLevels: 13});
420 447 //
421 448 //layers
... ... @@ -434,7 +461,7 @@ function initOL()
434 461 //
435 462 var ls = new OpenLayers.Control.LayerSwitcher()
436 463 OL.addControl(ls);
437   - document.getElementById(ls.id).style.zIndex=2000;
  464 + $i(ls.id).style.zIndex=2000;
438 465 OL.setCenter(new OpenLayers.LonLat(-55,-14), 2);
439 466 var panel = new OpenLayers.Control.NavToolbar();
440 467 OL.addControl(panel);
... ... @@ -442,10 +469,10 @@ function initOL()
442 469 panel.div.style.top="-298px";
443 470 var zb = new OpenLayers.Control.PanZoomBar();
444 471 OL.addControl(zb);
445   - document.getElementById("OpenLayers_Control_PanZoom_pandown").style.display="none"
446   - document.getElementById("OpenLayers_Control_PanZoom_panup").style.display="none"
447   - document.getElementById("OpenLayers_Control_PanZoom_panleft").style.display="none"
448   - document.getElementById("OpenLayers_Control_PanZoom_panright").style.display="none"
  472 + $i("OpenLayers_Control_PanZoom_pandown").style.display="none"
  473 + $i("OpenLayers_Control_PanZoom_panup").style.display="none"
  474 + $i("OpenLayers_Control_PanZoom_panleft").style.display="none"
  475 + $i("OpenLayers_Control_PanZoom_panright").style.display="none"
449 476 zb.div.style.left="-8px"
450 477 }
451 478 /*
... ... @@ -456,11 +483,11 @@ Pega as coordenadas geográficas da extensão definida no OpenLayers.
456 483 function capturageo()
457 484 {
458 485 var b = OL.getExtent();
459   - document.getElementById("xmin").value = b.left
460   - document.getElementById("xmax").value = b.right
461   - document.getElementById("ymin").value = b.bottom
462   - document.getElementById("ymax").value = b.top
463   - crialink()
  486 + $i("xmin").value = b.left
  487 + $i("xmax").value = b.right
  488 + $i("ymin").value = b.bottom
  489 + $i("ymax").value = b.top
  490 + i3geo_gl_crialink()
464 491 }
465 492 </script>
466 493 </html>
... ...