Slide na arvore de camadas

Edmar Moretti
1 parent ec8268a8
Showing 6 changed files with 81 additions and 44 deletions Show diff stats
admin/admin.db
css/black.css
css/geral.css
ferramentas/preferencias/index.js
js/arvoredecamadas.js
js/interface.js
+/*
+Botao de ligar desligar do tipo chave
+*/
+.i3GEOarvCam .temaSwitch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  top: 3px;
+}
+
+.i3GEOarvCam .temaSwitch input {
+	display:none;
+}
+
+.i3GEOarvCam .temaSlider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+}
+
+.i3GEOarvCam .temaSlider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 1px;
+  bottom: 2px;
+  background-color: white;
+}
+
+.i3GEOarvCam input:checked + .temaSlider {
+  background-color: #2196F3;
+}
+
+.i3GEOarvCam input:focus + .temaSlider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+.i3GEOarvCam input:checked + .temaSlider:before {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.i3GEOarvCam .temaSlider.round {
+  border-radius: 34px;
+}
+
+.i3GEOarvCam .temaSlider.round:before {
+  border-radius: 50%;
+}
+
+/**/
 #i3GEOcopyright {
 	position: absolute;
 	left: 10px;
@@ -201,6 +201,7 @@ Utilizado na janela do buscador INDE
 	display: none;
 }
+/*
 .i3GEOarvCam input[type=checkbox]+label:before {
     color: white;
     content: "";
@@ -226,10 +227,10 @@ Utilizado na janela do buscador INDE
 }
 .i3GEOarvCam label {
-	margin-left: 30px;
+	margin-left: 0px;
 	cursor: move;
 }
-
+*/
 .i3GEOarvCamGrupo {
 	font-size: 12pt;
 	margin: auto;
@@ -257,6 +258,7 @@ Utilizado na janela do buscador INDE
 }
 .i3GEOarvCam .ygtvdepthcell {
 	background : none;
+	display: none;
 }
 .i3GEOarvCamTema input, .i3GEOarvCamTemaIE input {
@@ -194,10 +194,6 @@ i3GEOF.preferencias = {
 						tipo: "boolean",
 						elemento: "i3GEO.arvoreDeCamadas.OPCOESLEGENDA"
 					},{
-						titulo: $trad('ativaAguardeLegenda',i3GEOF.preferencias.dicionario),
-						tipo: "boolean",
-						elemento: "i3GEO.arvoreDeCamadas.AGUARDALEGENDA"
-					},{
 						titulo: $trad('mostraIconeTema',i3GEOF.preferencias.dicionario),
 						tipo: "boolean",
 						elemento: "i3GEO.arvoreDeCamadas.ICONETEMA"
@@ -435,7 +435,7 @@ i3GEO.arvoreDeCamadas =
 		 */
 		OPCOESARVORE : true,
 		/**
-		 * Propriedade: AGUARDALEGENDA
+		 * Propriedade: AGUARDALEGENDA (depreciado na versao 7)
 		 *
 		 * Ativa a op&ccedil;&atilde;o de aguarde para mostrar a legenda de um tema quando o usu&aacute;rio estaciona o mouse sobre o nome
 		 * de um tema.
@@ -1702,7 +1702,7 @@ i3GEO.arvoreDeCamadas =
 		 * {string} - texto formatado
 		 */
 		montaTextoTema : function(tema) {
-			var ck, html, estilo, f;
+			var ck, html, f;
 			if (tema.status * 1 === 2) {
 				ck = ' CHECKED ';
 			} else {
@@ -1736,46 +1736,36 @@ i3GEO.arvoreDeCamadas =
 					return "";
 				}
 			}
-			estilo = "i3GEOarvCamTema";
-			// verifica se a versao do IE e menor que 9
-			if (navm && parseInt(YAHOO.env.ua.ie, 10) < 9) {
-				estilo = "i3GEOarvCamTemaIE";
-			}
+			/*
+			<label class="switch">
+			  <input type="checkbox" >
+			  <div class="slider round"></div>
+			</label>
+			*/
 			// inicia o div
-			html = "<div onclick='i3GEO.mapa.ativaTema(\"" + tema.name + "\")' id='arrastar_" + tema.name + "' class='" + estilo + "' >";
-			// estilo = navm ? "cursor:pointer;vertical-align:15%;" : "cursor:pointer;";
-			html +=
-				"<input type='checkbox' name=\"layer\" value='" + tema.name + "' " + "id='" + tema.name + "ckbox'" + ck + "onclick=\""
-				+ i3GEO.arvoreDeCamadas.ATIVATEMA + "\"" + " /><label for='" + tema.name + "ckbox'  ";
+			html = "<div id='arrastar_" + tema.name + "'><label class='temaSwitch' for='" + tema.name + "ckbox'  ";
 			//
 			// inclui icone do tema
 			//
 			if (tema.iconetema !== "" && i3GEO.arvoreDeCamadas.ICONETEMA === true) {
 				html += "&nbsp;<img class='i3GEOiconeTema' src='" + tema.iconetema + "' />";
 			}
-			tema.AGUARDALEGENDA = i3GEO.arvoreDeCamadas.AGUARDALEGENDA;
 			//
 			// ajusta as propriedades conforme as caracteristicas de cada plugin
 			// verifica se o tema e do tipo plugin antes
-			// nao e necessario clonar
+			// Nao e necessario clonar
 			//
 			tema = i3GEO.pluginI3geo.aplicaPropriedades(tema);
-			estilo = "";
-			if (tema.AGUARDALEGENDA) {
-				html +=
-					" id='ArvoreTituloTema" + tema.name + "' style='position:relative;top:2px;'"
-					+ " onclick=\"i3GEO.tema.mostralegendajanela('" + tema.name + "','" + tema.tema
-					+ "','abrejanela');\" onmouseover=\"javascript:i3GEO.ajuda.mostraJanela('" + $trad("t7a")
-					+ "','');i3GEO.tema.mostralegendajanela('" + tema.name + "','" + tema.tema
-					+ "','ativatimer');\" onmouseout=\"javascript:i3GEO.ajuda.mostraJanela('');i3GEO.tema.mostralegendajanela('"
-					+ tema.name + "','','desativatimer');\" >" + tema.tema;
-			} else {
-				html +=
-					" id='ArvoreTituloTema" + tema.name + "' onmouseover=\"javascript:i3GEO.ajuda.mostraJanela('"
-					+ $trad("t7") + "','')\" onmouseout=\"javascript:i3GEO.ajuda.mostraJanela('')\" >" + tema.tema;
-			}
-			html += "</label></div>";
+			html +=
+					" id='ArvoreTituloTema" + tema.name + "' >";
+			html +=
+				"<input type='checkbox' name=\"layer\" value='" + tema.name + "' " + "id='" + tema.name + "ckbox'" + ck + "onclick=\""
+				+ i3GEO.arvoreDeCamadas.ATIVATEMA + "\"" + " />";
+			html += "<div onclick='i3GEO.mapa.ativaTema(\"" + tema.name + "\");'  class='temaSlider round' ></div>";
+
+			html += "</label>";
+			html += tema.tema + "</div>";
 			// adiciona o temporizador
 			// que redesenha o tema de tempos em tempos
 			if (i3GEO.tema.TEMPORIZADORESID[tema.name] == undefined && tema.temporizador != "") {
@@ -956,8 +956,6 @@ i3GEO.Interface =
 						new ol.interaction.PinchRotate(),
 						new ol.interaction.PinchZoom(),
 						new ol.interaction.DragZoom(),
-						// FIXME alt nao funciona
-						// new ol.interaction.DragRotateAndZoom({condition : ol.events.condition.altKeyOnly}),
 						new ol.interaction.DragPan()
 					];
 				}
@@ -975,12 +973,9 @@ i3GEO.Interface =
 				i3GEO.Interface.IDMAPA = "openlayers";
 				if (i3GEO.Interface.openlayers.googleLike === false) {
 					i3GEO.Interface.openlayers.parametrosView.projection = "EPSG:4326";
-					// precisa disso?
-					// i3GEO.Interface.openlayers.parametrosView.extent = ol.proj.get('EPSG:4326').getExtent();
 				}
 				else{
 					i3GEO.Interface.openlayers.parametrosView.projection = "EPSG:3857";
-					//i3GEO.Interface.openlayers.parametrosView.extent = ol.proj.get('EPSG:3857').getExtent();
 				}
 				i3GEO.Interface.openlayers.parametrosMap.view = new ol.View(
 					i3GEO.Interface.openlayers.parametrosView
@@ -1014,11 +1009,7 @@ i3GEO.Interface =
 					};
 					button1.addEventListener('click', zoomli, false);
 					element.appendChild(button1);
-
-
 					element.appendChild(document.createElement('br'));
-
-
 					var button3 = document.createElement('button');
 					button3.style.float = "left";
 					button3.innerHTML = "<img style='width:16px;' src='"+ i3GEO.configura.locaplic+"/imagens/oxygen/16x16/draw-triangle1.png' />";
		1	+/*
		2	+Botao de ligar desligar do tipo chave
		3	+*/
		4	+.i3GEOarvCam .temaSwitch {
		5	+ position: relative;
		6	+ display: inline-block;
		7	+ width: 36px;
		8	+ height: 18px;
		9	+ top: 3px;
		10	+}
		11	+
		12	+.i3GEOarvCam .temaSwitch input {
		13	+ display:none;
		14	+}
		15	+
		16	+.i3GEOarvCam .temaSlider {
		17	+ position: absolute;
		18	+ cursor: pointer;
		19	+ top: 0;
		20	+ left: 0;
		21	+ right: 0;
		22	+ bottom: 0;
		23	+ background-color: #ccc;
		24	+}
		25	+
		26	+.i3GEOarvCam .temaSlider:before {
		27	+ position: absolute;
		28	+ content: "";
		29	+ height: 14px;
		30	+ width: 14px;
		31	+ left: 1px;
		32	+ bottom: 2px;
		33	+ background-color: white;
		34	+}
		35	+
		36	+.i3GEOarvCam input:checked + .temaSlider {
		37	+ background-color: #2196F3;
		38	+}
		39	+
		40	+.i3GEOarvCam input:focus + .temaSlider {
		41	+ box-shadow: 0 0 1px #2196F3;
		42	+}
		43	+
		44	+.i3GEOarvCam input:checked + .temaSlider:before {
		45	+ -webkit-transform: translateX(20px);
		46	+ -ms-transform: translateX(20px);
		47	+ transform: translateX(20px);
		48	+}
		49	+
		50	+.i3GEOarvCam .temaSlider.round {
		51	+ border-radius: 34px;
		52	+}
		53	+
		54	+.i3GEOarvCam .temaSlider.round:before {
		55	+ border-radius: 50%;
		56	+}
		57	+
		58	+/**/
1	#i3GEOcopyright {	59	#i3GEOcopyright {
2	position: absolute;	60	position: absolute;
3	left: 10px;	61	left: 10px;