Commit a790c559c508887c48f6185162c468274ba6e26d
1 parent
dec31de1
Exists in
master
and in
7 other branches
carregamento do twitter apenas em dispositivos maiores que xs
Showing
4 changed files
with
143 additions
and
113 deletions
Show diff stats
init/index.js
... | ... | @@ -199,27 +199,43 @@ function mostraBotoesBT(men){ |
199 | 199 | var html = ""; |
200 | 200 | //menu |
201 | 201 | html = Mustache.to_html( |
202 | - $("#menuTpl").html(), | |
203 | - i3GEO.idioma.objetoIdioma(g_traducao_init) | |
202 | + $("#menuTpl").html(), | |
203 | + i3GEO.idioma.objetoIdioma(g_traducao_init) | |
204 | 204 | ); |
205 | 205 | $("#menuTpl").html(html); |
206 | 206 | // |
207 | 207 | $("#mensagemLogin").html(men); |
208 | 208 | html = Mustache.to_html( |
209 | - $("#jumbotron").html(), | |
210 | - { | |
211 | - "jumbotron" : $trad(35,g_traducao_init), | |
212 | - "host" : location.host, | |
213 | - "href" : location.href | |
214 | - } | |
209 | + $("#jumbotron").html(), | |
210 | + { | |
211 | + "jumbotron" : $trad(35,g_traducao_init), | |
212 | + "host" : location.host, | |
213 | + "href" : location.href | |
214 | + } | |
215 | 215 | ); |
216 | 216 | $("#jumbotron").html(html); |
217 | 217 | i3GEO.configura = {"locaplic" : ".."}; |
218 | 218 | i3GEO.idioma.IDSELETOR = "bandeiras"; |
219 | 219 | i3GEO.idioma.mostraSeletor(); |
220 | 220 | html = Mustache.to_html( |
221 | - "{{#d}}" + $("#botoesTpl").html() + "{{/d}}", | |
222 | - {"d":botoesIni,"abrir" : $trad(36,g_traducao_init)} | |
221 | + "{{#d}}" + $("#botoesTpl").html() + "{{/d}}", | |
222 | + {"d":botoesIni,"abrir" : $trad(36,g_traducao_init)} | |
223 | 223 | ); |
224 | 224 | $("#botoesTpl").html(html); |
225 | 225 | } |
226 | +function findBootstrapDeviceSize() { | |
227 | + var dsize = ['lg', 'md', 'sm', 'xs']; | |
228 | + for (var i = dsize.length - 1; i >= 0; i--) { | |
229 | + | |
230 | + // Need to add for Chrome. Works fine in Firefox/Safari/Opera without it. | |
231 | + // Chrome seem to have an issue with empty div's | |
232 | + $el = $('<div id="sizeTest" class="hidden-'+dsize[i]+'"> </div>'); | |
233 | + $el.appendTo($('body')); | |
234 | + | |
235 | + if ($el.is(':hidden')) { | |
236 | + $el.remove(); | |
237 | + return dsize[i]; | |
238 | + } | |
239 | + } | |
240 | + return 'unknown'; | |
241 | +} | ... | ... |
init/index.php
... | ... | @@ -93,7 +93,7 @@ include "head.php"; |
93 | 93 | <!-- Template para mensagem do i3Geo --> |
94 | 94 | <ul class="list-inline"> |
95 | 95 | <li><img class="pull-left" src='../imagens/i3Geo_bigTransp.png' |
96 | - style='width: 80px; margin: 5px;' /> <img class="pull-right" | |
96 | + style='width: 80px; margin: 5px;' /> <img class="pull-right hidden-xs" | |
97 | 97 | src='../pacotes/qrcode/php/qr_img.php?host={{{host}}}&d={{{href}}}' |
98 | 98 | style='width: 80px; margin: 5px;' /> |
99 | 99 | <p>{{{jumbotron}}}</p></li> |
... | ... | @@ -113,7 +113,7 @@ include "head.php"; |
113 | 113 | <div class="panel-body" style="height: 250px;"> |
114 | 114 | <div class="thumbnail" role="button" style="height: 90px;" data-toggle="quadroQrcode" data-url="{{{href}}}"> |
115 | 115 | <img class="img-rounded" style="height: 100%; width: 100%" src="imagens/{{{img}}}" /> |
116 | - <i class="fa fa-qrcode btn-qrcode pull-right" ></i> | |
116 | + <i class="fa fa-qrcode btn-qrcode pull-right hidden-xs" ></i> | |
117 | 117 | </div> |
118 | 118 | <h4>{{{titulo}}}</h4> |
119 | 119 | <div style="overflow: auto; height: 200px;"> |
... | ... | @@ -138,7 +138,7 @@ include "head.php"; |
138 | 138 | style="width: 260px; min-width: 260px; max-width: 260px;"> |
139 | 139 | <div class="panel panel-default"> |
140 | 140 | <div class="panel-body"> |
141 | - <a class="twitter-timeline" href="https://twitter.com/i3geo" | |
141 | + <a class="twitter-timeline tline" href="" | |
142 | 142 | data-widget-id="288061915689787392" height="300">Tweets @i3Geo</a> |
143 | 143 | </div> |
144 | 144 | </div> |
... | ... | @@ -147,7 +147,7 @@ include "head.php"; |
147 | 147 | style="width: 260px; min-width: 260px; max-width: 260px;"> |
148 | 148 | <div class="panel panel-default"> |
149 | 149 | <div class="panel-body"> |
150 | - <a class="twitter-timeline" href="https://twitter.com/hashtag/i3geo" | |
150 | + <a class="twitter-timeline htag" href="" | |
151 | 151 | data-widget-id="643417277208133633" height="300">i3geo Tweets</a> |
152 | 152 | </div> |
153 | 153 | </div> |
... | ... | @@ -164,7 +164,6 @@ include "head.php"; |
164 | 164 | <footer> |
165 | 165 | <div class="row text-center hidden"> |
166 | 166 | <div class="col-xs-6 center-block"> |
167 | - | |
168 | 167 | <a rel="license" href="http://creativecommons.org/licenses/GPL/2.0/legalcode.pt" |
169 | 168 | target="_blank"><img alt="Licença Creative Commons" style="border-width: 0" |
170 | 169 | src="https://i.creativecommons.org/l/GPL/2.0/88x62.png" /></a><br />O i3Geo está |
... | ... | @@ -209,34 +208,38 @@ include "head.php"; |
209 | 208 | $("#jumbotron").fadeOut(300) |
210 | 209 | } |
211 | 210 | ); |
212 | - //$("#mensagemLogin").delay(10000).fadeOut(300); | |
213 | - //carrega o TT | |
214 | - window.twttr = (function(d, s, id) { | |
215 | - var js, fjs = d.getElementsByTagName(s)[0], | |
216 | - t = window.twttr || {}; | |
217 | - if (d.getElementById(id)) return t; | |
218 | - js = d.createElement(s); | |
219 | - js.id = id; | |
220 | - js.src = "https://platform.twitter.com/widgets.js"; | |
221 | - fjs.parentNode.insertBefore(js, fjs); | |
211 | + var tamanho = findBootstrapDeviceSize(); | |
212 | + if(tamanho != "xs"){ | |
213 | + $(".tline").attr("src","https://twitter.com/i3geo"); | |
214 | + $(".tline").attr("src","https://twitter.com/hashtag/i3geo"); | |
222 | 215 | |
223 | - t._e = []; | |
224 | - t.ready = function(f) { | |
225 | - t._e.push(f); | |
226 | - }; | |
216 | + window.twttr = (function(d, s, id) { | |
217 | + var js, fjs = d.getElementsByTagName(s)[0], | |
218 | + t = window.twttr || {}; | |
219 | + if (d.getElementById(id)) return t; | |
220 | + js = d.createElement(s); | |
221 | + js.id = id; | |
222 | + js.src = "https://platform.twitter.com/widgets.js"; | |
223 | + fjs.parentNode.insertBefore(js, fjs); | |
227 | 224 | |
228 | - return t; | |
229 | - }(document, "script", "twitter-wjs")); | |
225 | + t._e = []; | |
226 | + t.ready = function(f) { | |
227 | + t._e.push(f); | |
228 | + }; | |
230 | 229 | |
231 | - $('[data-toggle="quadroQrcode"]').popover({ | |
232 | - html: true, | |
233 | - placement: "auto", | |
234 | - trigger: "click focus", | |
235 | - content: function(){ | |
236 | - var urlqr = "../pacotes/qrcode/php/qr_img.php?host=" + window.location.host + "&u=" + $(this).attr("data-url"); | |
237 | - return "<img style='width:200px; height: 200px;' src='" + urlqr + "' '>"; | |
238 | - } | |
239 | - }); | |
230 | + return t; | |
231 | + }(document, "script", "twitter-wjs")); | |
232 | + | |
233 | + $('[data-toggle="quadroQrcode"]').popover({ | |
234 | + html: true, | |
235 | + placement: "auto", | |
236 | + trigger: "click focus", | |
237 | + content: function(){ | |
238 | + var urlqr = "../pacotes/qrcode/php/qr_img.php?host=" + window.location.host + "&u=" + $(this).attr("data-url"); | |
239 | + return "<img style='width:200px; height: 200px;' src='" + urlqr + "' '>"; | |
240 | + } | |
241 | + }); | |
242 | + } | |
240 | 243 | $.material.init(); |
241 | 244 | }); |
242 | 245 | </script> | ... | ... |
ogc/index.js
1 | -function listaDoNivelMenu(templateMenus,templateGrupos,templateCamadas){ | |
1 | +function listaDoNivelMenu(templateMenus,templateGrupos,templateSubGrupos,templateCamadas){ | |
2 | 2 | var r = function(retorno) { |
3 | 3 | var menus = retorno.data; |
4 | 4 | var nmenus = menus.length; |
5 | 5 | var i = 0; |
6 | 6 | var s = []; |
7 | 7 | for(i=0; i<nmenus; i++){ |
8 | - var dataMenu = menus[i]; | |
9 | - var camadasRaiz = ckCamada(dataMenu.temas,templateCamadas); | |
10 | - dataMenu["camadas"] = camadasRaiz; | |
8 | + var camadasRaiz = "", | |
9 | + dataMenu = menus[i]; | |
10 | + if(dataMenu.temas){ | |
11 | + camadasRaiz = ckCamada(dataMenu.temas,templateCamadas); | |
12 | + dataMenu["camadas"] = camadasRaiz; | |
13 | + } | |
11 | 14 | var htmlMenus = Mustache.to_html( |
12 | 15 | templateMenus, |
13 | 16 | dataMenu |
... | ... | @@ -18,29 +21,72 @@ function listaDoNivelMenu(templateMenus,templateGrupos,templateCamadas){ |
18 | 21 | //pega os grupos do menu |
19 | 22 | for(i=0; i<nmenus; i++){ |
20 | 23 | var grupos = function(retorno){ |
21 | - var gr = retorno.data.grupos; | |
22 | - var c = gr.length - 3; | |
23 | - var g = []; | |
24 | - var i = 0; | |
24 | + if(retorno.data){ | |
25 | + var gr = retorno.data.grupos; | |
26 | + //verifica se existem dados na raiz e grupos | |
27 | + if(gr[0].length == 0 && gr[1].temasraiz.length == 0){ | |
28 | + $("#gruposMenu"+retorno.data.idmenu).html(""); | |
29 | + return; | |
30 | + } | |
31 | + var c = gr.length - 3; | |
32 | + var g = []; | |
33 | + var i = 0; | |
34 | + //camadas na raiz do grupo | |
35 | + for (i = 0; i < c; i++) { | |
36 | + if(gr[i].temasgrupo){ | |
37 | + var camadas = ckCamada(gr[i].temasgrupo,templateCamadas); | |
38 | + gr[i]["camadas"] = camadas; | |
39 | + } else { | |
40 | + gr[i]["camadas"] = ""; | |
41 | + } | |
42 | + g.push(gr[i]); | |
43 | + } | |
44 | + if(g){ | |
45 | + var htmlGrupos = Mustache.to_html( | |
46 | + "{{#grupos}}" + templateGrupos + "{{/grupos}}", | |
47 | + {"grupos":g} | |
48 | + ); | |
49 | + } | |
50 | + $("#gruposMenu"+retorno.data.idmenu).html(htmlGrupos); | |
51 | + for (i = 0; i < c; i++) { | |
52 | + var subgrupos = gr[i].subgrupos; | |
53 | + id_n1 = gr[i]["id_n1"]; | |
25 | 54 | |
26 | - for (i = 0; i < c; i++) { | |
27 | - var camadas = ckCamada(gr[i].temasgrupo,templateCamadas); | |
28 | - gr[i]["camadas"] = camadas; | |
29 | - g.push(gr[i]); | |
55 | + var nsubgrupos = subgrupos.length; | |
56 | + var j = 0; | |
57 | + for( j = 0; j < nsubgrupos; j++){ | |
58 | + subgrupos[j]["id_n1"] = id_n1; | |
59 | + subgrupos[j]["idmenu"] = retorno.data.idmenu; | |
60 | + } | |
61 | + var htmlSubGrupos = Mustache.to_html( | |
62 | + "{{#s}}" + templateSubGrupos + "{{/s}}", | |
63 | + {"s":subgrupos} | |
64 | + ); | |
65 | + if(id_n1){ | |
66 | + $("#subGruposGrupo"+id_n1).html(htmlSubGrupos); | |
67 | + } | |
68 | + } | |
30 | 69 | } |
31 | - | |
32 | - var htmlGrupos = Mustache.to_html( | |
33 | - "{{#grupos}}" + templateGrupos + "{{/grupos}}", | |
34 | - {"grupos":g} | |
35 | - ); | |
36 | - $("#gruposMenu"+retorno.data.idmenu).html(htmlGrupos); | |
37 | 70 | }; |
38 | - i3GEO.php.pegalistadegrupos(grupos, menus[i]["idmenu"], "nao"); | |
71 | + i3GEO.php.pegalistadegrupos(grupos, menus[i]["idmenu"], "sim"); | |
39 | 72 | } |
40 | 73 | //$.material.init(); |
41 | 74 | }; |
42 | 75 | i3GEO.php.pegalistademenus(r); |
43 | 76 | } |
77 | +function listaCamadasSubgrupo(idmenu,id_n1,id_n2){ | |
78 | + //console.info(id_n2) | |
79 | + var corpo = $("#corpoSubGrupo"+id_n2); | |
80 | + if(corpo.html().trim()+"x" == "x"){ | |
81 | + corpo.html('<div class="panel-body"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i><span class="sr-only">Aguarde</span></div>') | |
82 | + | |
83 | + } | |
84 | + var r = function(retorno){ | |
85 | + var camadas = ckCamada(retorno.data.temas,$("#templateCamadas").html()); | |
86 | + corpo.html('<div class="panel-body">' + camadas + "</div>"); | |
87 | + } | |
88 | + i3GEO.php.pegalistadetemas(r, idmenu, id_n1, id_n2); | |
89 | +} | |
44 | 90 | function ckCamada(camadas,templateCamadas){ |
45 | 91 | //remove as camadas que nao sao ogc |
46 | 92 | var ncamadas = []; | ... | ... |
ogc/index.php
... | ... | @@ -54,7 +54,9 @@ include "../init/head.php"; |
54 | 54 | <div id="corpoMenu{{idmenu}}" class="panel-collapse collapse" role="tabpanel" aria-multiselectable="true"> |
55 | 55 | <div class="panel-body"> |
56 | 56 | {{{camadas}}} |
57 | - <div id="gruposMenu{{idmenu}}"></div> | |
57 | + <div id="gruposMenu{{idmenu}}"> | |
58 | + <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i><span class="sr-only">Aguarde</span> | |
59 | + </div> | |
58 | 60 | </div> |
59 | 61 | </div> |
60 | 62 | </div> |
... | ... | @@ -73,12 +75,25 @@ include "../init/head.php"; |
73 | 75 | <div id="corpoGrupo{{id_n1}}" class="panel-collapse collapse" role="tabpanel" aria-multiselectable="true"> |
74 | 76 | <div class="panel-body"> |
75 | 77 | {{{camadas}}} |
76 | - <div id="subGruposGrupo{{id_n1}}">subgrupos</div> | |
78 | + <div id="subGruposGrupo{{id_n1}}">{{grupos}}</div> | |
77 | 79 | </div> |
78 | 80 | </div> |
79 | 81 | </div> |
80 | 82 | </div> |
81 | 83 | </script> |
84 | +<script id="templateSubGrupos" type="x-tmpl-mustache"> | |
85 | +<div class="panel panel-default"> | |
86 | + <div onclick="listaCamadasSubgrupo('{{idmenu}}','{{id_n1}}','{{id_n2}}')" class="panel-heading" role="tab" id="tituloSubGrupo{{id_n2}}"> | |
87 | + <h4 class="panel-title"> | |
88 | + <a class="collapsed" role="button" data-toggle="collapse" data-parent="#corpoGrupo{{id_n1}}" href="#corpoSubGrupo{{id_n2}}" aria-expanded="false" aria-controls="corpoSubGrupo{{id_n2}}"> {{{nome}}} </a> | |
89 | + </h4> | |
90 | + </div> | |
91 | + <div class="panel-body"> | |
92 | + <div id="corpoSubGrupo{{id_n2}}" class="panel-collapse collapse" role="tabpanel" aria-multiselectable="true"> | |
93 | + </div> | |
94 | + </div> | |
95 | +</div> | |
96 | +</script> | |
82 | 97 | <body style="background-color: #eeeeee; padding-top: 55px;"> |
83 | 98 | <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation"> |
84 | 99 | <div class="container-fluid"> |
... | ... | @@ -98,58 +113,7 @@ include "../init/head.php"; |
98 | 113 | <div class="container"> |
99 | 114 | <div class="row center-block"> |
100 | 115 | <div class="col-sm-12" id="arvore"> |
101 | - <!-- Modelo de menu --> | |
102 | - <!-- | |
103 | - <div class="panel-group" id="menu1" role="tablist" aria-multiselectable="true"> | |
104 | - <div class="panel panel-default"> | |
105 | - <div class="panel-heading" role="tab" id="tituloMenu1"> | |
106 | - <h4 class="panel-title"> | |
107 | - <a class="collapsed in" role="button" data-toggle="collapse" data-parent="#menu1" href="#corpoMenu1" aria-expanded="false" aria-controls="#corpoMenu1"> Collapsible Menu Item #1 </a> | |
108 | - </h4> | |
109 | - </div> | |
110 | - <div class="panel-body"> | |
111 | - <div id="corpoMenu1" class="panel-collapse collapse" role="tabpanel" aria-multiselectable="true"> | |
112 | - <div class="panel-body"> | |
113 | - <div class="checkbox"> | |
114 | - <label> <input type=checkbox name=criaLink /> Camada | |
115 | - </label> | |
116 | - </div> | |
117 | - </div> | |
118 | - <div class="panel panel-default"> | |
119 | - <div class="panel-heading" role="tab" id="tituloGrupo1"> | |
120 | - <h4 class="panel-title"> | |
121 | - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#corpoMenu1" href="#corpoGrupo1" aria-expanded="false" aria-controls="corpoGrupo1"> Collapsible Group Item #1 </a> | |
122 | - </h4> | |
123 | - </div> | |
124 | - <div class="panel-body"> | |
125 | - <div id="corpoGrupo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="corpoMenu1"> | |
126 | - <div class="checkbox"> | |
127 | - <label> <input type=checkbox name=criaLink /> Camada | |
128 | - </label> | |
129 | - </div> | |
130 | - <div class="panel panel-default"> | |
131 | - <div class="panel-heading" role="tab" id="tituloSubGrupo1"> | |
132 | - <h4 class="panel-title"> | |
133 | - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#corpoGrupo1" href="#corpoSubGrupo1" aria-expanded="false" aria-controls="subGrupo1"> Collapsible Group Item #2 </a> | |
134 | - </h4> | |
135 | - </div> | |
136 | - <div id="corpoSubGrupo1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="tituloSubGrupo1"> | |
137 | - <div class="panel-body"> | |
138 | - <div class="checkbox"> | |
139 | - <label> <input type=checkbox name=criaLink /> Camada | |
140 | - </label> | |
141 | - </div> | |
142 | - </div> | |
143 | - </div> | |
144 | - </div> | |
145 | - </div> | |
146 | - </div> | |
147 | - </div> | |
148 | - </div> | |
149 | - </div> | |
150 | - </div> | |
151 | - </div> | |
152 | - --> | |
116 | + <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i><span class="sr-only">Aguarde</span> | |
153 | 117 | </div> |
154 | 118 | </div> |
155 | 119 | </div> |
... | ... | @@ -169,6 +133,7 @@ include "../init/head.php"; |
169 | 133 | listaDoNivelMenu( |
170 | 134 | $("#templateMenu").html(), |
171 | 135 | $("#templateGrupos").html(), |
136 | + $("#templateSubGrupos").html(), | |
172 | 137 | $("#templateCamadas").html() |
173 | 138 | ); |
174 | 139 | $(window).on("scroll click", | ... | ... |