Commit a790c559c508887c48f6185162c468274ba6e26d

Authored by Edmar Moretti
1 parent dec31de1

carregamento do twitter apenas em dispositivos maiores que xs

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]+'">&nbsp;</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 &quot;head.php&quot;;
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 &quot;head.php&quot;;
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 &quot;head.php&quot;;
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 &quot;head.php&quot;;
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 &quot;head.php&quot;;
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&ccedil;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&aacute;
... ... @@ -209,34 +208,38 @@ include &quot;head.php&quot;;
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 &quot;../init/head.php&quot;;
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 &quot;../init/head.php&quot;;
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 &quot;../init/head.php&quot;;
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 &quot;../init/head.php&quot;;
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",
... ...