Download as
Browse Code »

Commit e822579ced2e6c1a1bd7bd81321f442932b1fd9d

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

Ajustes no layout da ferramenta opacidade

Showing 5 changed files with 329 additions and 50 deletions   Show diff stats
css/nouislider.css 0 → 100644
  Diff comments   View file @e822579
... ... @@ -0,0 +1,260 @@
  1 +/*! nouislider - 10.0.0 - 2017-05-28 14:52:48 */
  2 +/* Functional styling;
  3 + * These styles are required for noUiSlider to function.
  4 + * You don't need to change these rules to apply your design.
  5 + */
  6 +.noUi-target,
  7 +.noUi-target * {
  8 + -webkit-touch-callout: none;
  9 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  10 + -webkit-user-select: none;
  11 + -ms-touch-action: none;
  12 + touch-action: none;
  13 + -ms-user-select: none;
  14 + -moz-user-select: none;
  15 + user-select: none;
  16 + -moz-box-sizing: border-box;
  17 + box-sizing: border-box;
  18 +}
  19 +.noUi-target {
  20 + position: relative;
  21 + direction: ltr;
  22 +}
  23 +.noUi-base {
  24 + width: 100%;
  25 + height: 100%;
  26 + position: relative;
  27 + z-index: 1;
  28 + /* Fix 401 */
  29 +}
  30 +.noUi-connect {
  31 + position: absolute;
  32 + right: 0;
  33 + top: 0;
  34 + left: 0;
  35 + bottom: 0;
  36 +}
  37 +.noUi-origin {
  38 + position: absolute;
  39 + height: 0;
  40 + width: 0;
  41 +}
  42 +.noUi-handle {
  43 + position: relative;
  44 + z-index: 1;
  45 +}
  46 +.noUi-state-tap .noUi-connect,
  47 +.noUi-state-tap .noUi-origin {
  48 + -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  49 + transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  50 +}
  51 +.noUi-state-drag * {
  52 + cursor: inherit !important;
  53 +}
  54 +/* Painting and performance;
  55 + * Browsers can paint handles in their own layer.
  56 + */
  57 +.noUi-base,
  58 +.noUi-handle {
  59 + -webkit-transform: translate3d(0, 0, 0);
  60 + transform: translate3d(0, 0, 0);
  61 +}
  62 +/* Slider size and handle placement;
  63 + */
  64 +.noUi-horizontal {
  65 + height: 18px;
  66 +}
  67 +.noUi-horizontal .noUi-handle {
  68 + width: 34px;
  69 + height: 28px;
  70 + left: -17px;
  71 + top: -6px;
  72 +}
  73 +.noUi-vertical {
  74 + width: 18px;
  75 +}
  76 +.noUi-vertical .noUi-handle {
  77 + width: 28px;
  78 + height: 34px;
  79 + left: -6px;
  80 + top: -17px;
  81 +}
  82 +/* Styling;
  83 + */
  84 +.noUi-target {
  85 + background: #FAFAFA;
  86 + border-radius: 4px;
  87 + border: 1px solid #D3D3D3;
  88 + box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
  89 +}
  90 +.noUi-connect {
  91 + background: #3FB8AF;
  92 + border-radius: 4px;
  93 + box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
  94 + -webkit-transition: background 450ms;
  95 + transition: background 450ms;
  96 +}
  97 +/* Handles and cursors;
  98 + */
  99 +.noUi-draggable {
  100 + cursor: ew-resize;
  101 +}
  102 +.noUi-vertical .noUi-draggable {
  103 + cursor: ns-resize;
  104 +}
  105 +.noUi-handle {
  106 + border: 1px solid #D9D9D9;
  107 + border-radius: 3px;
  108 + background: #FFF;
  109 + cursor: default;
  110 + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
  111 +}
  112 +.noUi-active {
  113 + box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
  114 +}
  115 +/* Handle stripes;
  116 + */
  117 +.noUi-handle:before,
  118 +.noUi-handle:after {
  119 + content: "";
  120 + display: block;
  121 + position: absolute;
  122 + height: 14px;
  123 + width: 1px;
  124 + background: #E8E7E6;
  125 + left: 14px;
  126 + top: 6px;
  127 +}
  128 +.noUi-handle:after {
  129 + left: 17px;
  130 +}
  131 +.noUi-vertical .noUi-handle:before,
  132 +.noUi-vertical .noUi-handle:after {
  133 + width: 14px;
  134 + height: 1px;
  135 + left: 6px;
  136 + top: 14px;
  137 +}
  138 +.noUi-vertical .noUi-handle:after {
  139 + top: 17px;
  140 +}
  141 +/* Disabled state;
  142 + */
  143 +[disabled] .noUi-connect {
  144 + background: #B8B8B8;
  145 +}
  146 +[disabled].noUi-target,
  147 +[disabled].noUi-handle,
  148 +[disabled] .noUi-handle {
  149 + cursor: not-allowed;
  150 +}
  151 +/* Base;
  152 + *
  153 + */
  154 +.noUi-pips,
  155 +.noUi-pips * {
  156 + -moz-box-sizing: border-box;
  157 + box-sizing: border-box;
  158 +}
  159 +.noUi-pips {
  160 + position: absolute;
  161 + color: #999;
  162 +}
  163 +/* Values;
  164 + *
  165 + */
  166 +.noUi-value {
  167 + position: absolute;
  168 + white-space: nowrap;
  169 + text-align: center;
  170 +}
  171 +.noUi-value-sub {
  172 + color: #ccc;
  173 + font-size: 10px;
  174 +}
  175 +/* Markings;
  176 + *
  177 + */
  178 +.noUi-marker {
  179 + position: absolute;
  180 + background: #CCC;
  181 +}
  182 +.noUi-marker-sub {
  183 + background: #AAA;
  184 +}
  185 +.noUi-marker-large {
  186 + background: #AAA;
  187 +}
  188 +/* Horizontal layout;
  189 + *
  190 + */
  191 +.noUi-pips-horizontal {
  192 + padding: 10px 0;
  193 + height: 80px;
  194 + top: 100%;
  195 + left: 0;
  196 + width: 100%;
  197 +}
  198 +.noUi-value-horizontal {
  199 + -webkit-transform: translate3d(-50%, 50%, 0);
  200 + transform: translate3d(-50%, 50%, 0);
  201 +}
  202 +.noUi-marker-horizontal.noUi-marker {
  203 + margin-left: -1px;
  204 + width: 2px;
  205 + height: 5px;
  206 +}
  207 +.noUi-marker-horizontal.noUi-marker-sub {
  208 + height: 10px;
  209 +}
  210 +.noUi-marker-horizontal.noUi-marker-large {
  211 + height: 15px;
  212 +}
  213 +/* Vertical layout;
  214 + *
  215 + */
  216 +.noUi-pips-vertical {
  217 + padding: 0 10px;
  218 + height: 100%;
  219 + top: 0;
  220 + left: 100%;
  221 +}
  222 +.noUi-value-vertical {
  223 + -webkit-transform: translate3d(0, 50%, 0);
  224 + transform: translate3d(0, 50%, 0);
  225 + padding-left: 25px;
  226 +}
  227 +.noUi-marker-vertical.noUi-marker {
  228 + width: 5px;
  229 + height: 2px;
  230 + margin-top: -1px;
  231 +}
  232 +.noUi-marker-vertical.noUi-marker-sub {
  233 + width: 10px;
  234 +}
  235 +.noUi-marker-vertical.noUi-marker-large {
  236 + width: 15px;
  237 +}
  238 +.noUi-tooltip {
  239 + display: block;
  240 + position: absolute;
  241 + border: 1px solid #D9D9D9;
  242 + border-radius: 3px;
  243 + background: #fff;
  244 + color: #000;
  245 + padding: 5px;
  246 + text-align: center;
  247 + white-space: nowrap;
  248 +}
  249 +.noUi-horizontal .noUi-tooltip {
  250 + -webkit-transform: translate(-50%, 0);
  251 + transform: translate(-50%, 0);
  252 + left: 50%;
  253 + bottom: 120%;
  254 +}
  255 +.noUi-vertical .noUi-tooltip {
  256 + -webkit-transform: translate(0, -50%);
  257 + transform: translate(0, -50%);
  258 + top: 50%;
  259 + right: 120%;
  260 +}
... ...
ferramentas/opacidademapa/dependencias.php 0 → 100755
  Diff comments   View file @e822579
... ... @@ -0,0 +1,22 @@
  1 +<?php
  2 +include(dirname(__FILE__)."/../blacklist.php");
  3 +verificaBlFerramentas(basename(dirname(__FILE__)));
  4 +/**
  5 + * Carrega os programas javascript necessarios para a ferramenta
  6 + * Esse programa e usado na tag <script> ou com a funcao scripttag do i3Geo
  7 + * Alem de carregar os scripts, carrega tambem o template no formato MUSTACHE, definindo a variavel
  8 + * javascript i3GEOF.filtro.MUSTACHE
  9 + * O template e substituido pelos valores definidos em index.js no momento da inicializacao da ferramenta
  10 + */
  11 +if(extension_loaded('zlib')){
  12 + ob_start('ob_gzhandler');
  13 +}
  14 +header("Content-type: text/javascript");
  15 +include("index.js");
  16 +include("dicionario.js");
  17 +echo "\n";
  18 +
  19 +if(extension_loaded('zlib')){
  20 + ob_end_flush();
  21 +}
  22 +?>
0 23 \ No newline at end of file
... ...
ferramentas/opacidademapa/index.js
  Diff comments   View file @e822579
... ... @@ -59,30 +59,17 @@ i3GEOF.opacidademapa = {
59 59 {YAHOO.panel}
60 60 */
61 61 janela: "",
62   - /*
63   - Para efeitos de compatibilidade antes da vers&atilde;o 4.7 que n&atilde;o tinha dicion&aacute;rio
64   - */
65   - criaJanelaFlutuante: function(){
66   - i3GEOF.opacidademapa.iniciaDicionario();
67   - },
68   - /*
69   - Function: iniciaDicionario
70   -
71   - Carrega o dicion&aacute;rio e chama a fun&ccedil;&atilde;o que inicia a ferramenta
72   -
73   - O Javascript &eacute; carregado com o id i3GEOF.nomedaferramenta.dicionario_script
74   - */
75   - iniciaDicionario: function(){
76   - if(typeof(i3GEOF.opacidademapa.dicionario) === 'undefined'){
77   - i3GEO.util.scriptTag(
78   - i3GEO.configura.locaplic+"/ferramentas/opacidademapa/dicionario.js",
79   - "i3GEOF.opacidademapa.iniciaJanelaFlutuante()",
80   - "i3GEOF.opacidademapa.dicionario_script"
81   - );
82   - }
83   - else{
84   - i3GEOF.opacidademapa.iniciaJanelaFlutuante();
85   - }
  62 + /**
  63 + * Template no formato mustache. E preenchido na carga do javascript com o programa dependencias.php
  64 + */
  65 + MUSTACHE : "",
  66 + /**
  67 + * Susbtitutos para o template
  68 + */
  69 + mustacheHash : function() {
  70 + var dicionario = i3GEO.idioma.objetoIdioma(i3GEOF.opacidademapa.dicionario);
  71 + dicionario["locaplic"] = i3GEO.configura.locaplic;
  72 + return dicionario;
86 73 },
87 74 /*
88 75 Function: inicia
... ... @@ -94,6 +81,18 @@ i3GEOF.opacidademapa = {
94 81 iddiv {String} - id do div que receber&aacute; o conteudo HTML da ferramenta
95 82 */
96 83 inicia: function(iddiv){
  84 + if(i3GEOF.opacidademapa.MUSTACHE == ""){
  85 + var t1 = i3GEO.configura.locaplic + "/ferramentas/opacidademapa/template_mst.html";
  86 +
  87 + $.get(t1).done(function(r1) {
  88 + i3GEOF.opacidademapa.MUSTACHE = r1;
  89 + i3GEOF.opacidademapa.inicia(iddiv);
  90 + }).fail(function() {
  91 + i3GEO.janela.closeMsg($trad("erroTpl"));
  92 + return;
  93 + });
  94 + return;
  95 + }
97 96 if (!$i("i3GEOFopacidademapaComboCabecaSel")) {
98 97 i3GEO.janela.comboCabecalhoTemasBs("i3GEOFopacidademapaComboCabeca","i3GEOFopacidademapaComboCabecaSel","opacidademapa","ligados",function(evt){
99 98 var botao = evt.target;
... ... @@ -125,17 +124,7 @@ i3GEOF.opacidademapa = {
125 124 String com o c&oacute;digo html
126 125 */
127 126 html:function(){
128   - var ins = "";
129   - if(navm){
130   - ins += '<div id="slider-bg" class="yui-h-slider" style="background: url('+i3GEO.configura.locaplic+'/pacotes/yui290/build/slider/assets/bg-h.gif) no-repeat -108px 0;height: 28px;width: 210px;" tabindex="-1" title="Slider">' +
131   - '<div id="slider-thumb" class="yui-slider-thumb"><img src="'+i3GEO.configura.locaplic+'/pacotes/yui290/build/slider/assets/thumb-n.gif"></div>' +
132   - '</div>';
133   - }
134   - else{
135   - ins += '<div id="slider-bg" class="yui-h-slider" style="background: url('+i3GEO.configura.locaplic+'/pacotes/yui290/build/slider/assets/bg-h.gif) no-repeat 5px 0;height: 28px;width: 210px;" tabindex="-1" title="Slider">' +
136   - '<div id="slider-thumb" class="yui-slider-thumb"><img src="'+i3GEO.configura.locaplic+'/pacotes/yui290/build/slider/assets/thumb-n.gif"></div>' +
137   - '</div>';
138   - }
  127 + var ins = Mustache.render(i3GEOF.opacidademapa.MUSTACHE, i3GEOF.opacidademapa.mustacheHash());
139 128 return ins;
140 129 },
141 130 /*
... ... @@ -158,10 +147,10 @@ i3GEOF.opacidademapa = {
158 147 };
159 148 var janela,divid,titulo;
160 149 //cria a janela flutuante
161   - titulo = "<div id='i3GEOFopacidademapaComboCabeca' class='comboTemasCabecalhoBs form-group' style='width:200px; left:5px;'>------</div></div><a class='i3GeoTituloJanelaBs' href='javascript:void(0)' onclick='i3GEO.ajuda.ferramenta(102)' >"+$trad("t20")+"</a>";
  150 + titulo = "<div id='i3GEOFopacidademapaComboCabeca' class='comboTemasCabecalhoBs form-group' style='width:200px; left:15px;'>------</div></div><a class='i3GeoTituloJanelaBs' href='javascript:void(0)' onclick='i3GEO.ajuda.ferramenta(102)' >"+$trad("t20")+"</a>";
162 151 janela = i3GEO.janela.cria(
163   - "340px",
164   - "40px",
  152 + "360px",
  153 + "60px",
165 154 "",
166 155 "",
167 156 "",
... ... @@ -182,9 +171,6 @@ i3GEOF.opacidademapa = {
182 171 $i("i3GEOF.opacidademapa_corpo").style.textAlign = "left";
183 172 i3GEOF.opacidademapa.aguarde = $i("i3GEOF.opacidademapa_imagemCabecalho").style;
184 173 i3GEOF.opacidademapa.inicia(divid);
185   - if(i3GEO.Interface.ATUAL == "googleearth"){
186   - $i('i3GEOFopacidademapaComboCabeca').style.display = "none";
187   - }
188 174 },
189 175 /*
190 176 Function: criaslide
... ... @@ -192,14 +178,10 @@ i3GEOF.opacidademapa = {
192 178 Cria a barra deslizante com base em YAHOO.widget.Slider
193 179 */
194 180 criaslide: function(){
195   - i3GEOF.opacidademapa.slider = YAHOO.widget.Slider.getHorizSlider($i("slider-bg"),$i("slider-thumb"), 0, 200, 0);
196   - i3GEOF.opacidademapa.slider.setValue(200,false);
  181 + i3GEOF.opacidademapa.slider = YAHOO.widget.Slider.getHorizSlider($i("slider-bg"),$i("slider-thumb"), 0, 300, 0);
  182 + i3GEOF.opacidademapa.slider.setValue(300,false);
197 183 i3GEOF.opacidademapa.slider.subscribe("change", function(offsetFromStart) {
198   - i3GEO.Interface.aplicaOpacidade(offsetFromStart / 200,i3GEOF.opacidademapa.tema);
  184 + i3GEO.Interface.aplicaOpacidade(offsetFromStart / 300,i3GEOF.opacidademapa.tema);
199 185 });
200   - if(navm){
201   - $i("slider-bg").style.left = "-100px";
202   - $i("i3GEOF.opacidademapa_corpo").style.background = "url("+i3GEO.configura.locaplic+"/pacotes/yui290/build/slider/assets/bg-h.gif) white no-repeat 10px 0px";
203   - }
204 186 }
205 187 };
206 188 \ No newline at end of file
... ...
ferramentas/opacidademapa/template_mst.html 0 → 100755
  Diff comments   View file @e822579
... ... @@ -0,0 +1,8 @@
  1 +<div class='container-fluid'>
  2 +<div id="slider-bg" class="yui-h-slider" style="background: url('{{{locaplic}}}/pacotes/yui290/build/slider/assets/bg-h.gif') no-repeat 5px 0; height: 28px; width: 315px;" tabindex="-1" title="Slider">
  3 + <div id="slider-thumb" class="yui-slider-thumb" style="top:11px;">
  4 + <img src="{{{locaplic}}}/pacotes/yui290/build/slider/assets/thumb-n.gif">
  5 + </div>
  6 +</div>
  7 +</div>
  8 +
... ...
js/mapa.js
  Diff comments   View file @e822579
... ... @@ -620,7 +620,8 @@ i3GEO.mapa =
620 620 "animacao",
621 621 "animacao",
622 622 "dependencias.php",
623   - "i3GEOF.animacao.iniciaJanelaFlutuante()");
  623 + "i3GEOF.animacao.iniciaJanelaFlutuante()"
  624 + );
624 625 },
625 626 /**
626 627 * Function: opacidade
... ... @@ -628,7 +629,13 @@ i3GEO.mapa =
628 629 * Abre a janela de dialogo da ferramenta de definicao da transparencia das camadas principais do mapa
629 630 */
630 631 opacidade : function() {
631   - i3GEO.util.dialogoFerramenta("i3GEO.mapa.dialogo.opacidade()", "opacidademapa", "opacidademapa");
  632 + i3GEO.util.dialogoFerramenta(
  633 + "i3GEO.mapa.dialogo.opacidade()",
  634 + "opacidademapa",
  635 + "opacidademapa",
  636 + "dependencias.php",
  637 + "i3GEOF.opacidademapa.iniciaJanelaFlutuante()"
  638 + );
632 639 },
633 640 /**
634 641 * Function: t3d
... ...