//clase para crear el html de las carpetas de grupos de categorias //en formato lista desplegable //en el caso de la lista, las carpetas de categorias y los recursos se anidan en elementos html //en función del grupo, que contiene sus categorías, y las categorias que contienen sus recursos //{ grupo 1 -> (categoria 1 -> recursos categoria 1, categoria 2 -> recursos categoria 2,...) //... grupo n -> (categoria x -> recursos categoria x, categoria y -> recursos categoria y)} //en el caso del formato grafico, los grupos se insertan en un div, //las categorias en un div en función del grupo al que pertenecen, las cuales se insertan en un div para todas ellas //y los recursos se insertaran en un div para cada categoria, y todos ellos en un div para todos los recursos // grupos{grupo 1, grupo 2....grupo n} // categorias{catgrupo1 {cat 1, cat2...}, catgrupo x {cat y, cat z}} // recursos{reccat1 { rec1, rec2...}, reccat2 {rec3, rec4}} function menuKmlLista(kmls) { //variable de ambito menu = this; var documentos = kmls; menu.contenedorPantalla = jQuery('#barra_lateral'); menu.interruptorPantalla = jQuery('#lista_img_formato_iconos'); function procesaKml(documentosKml) { for (doc in documentosKml) { var i = 0; var docKml = {}; docKml.id = documentosKml[doc].id; docKml.nombre = documentosKml[doc].nombre; //por defecto los recursos se ven en el mapa al cargar docKml.visible = 1; docKml.carpetasGrupo = documentosKml[doc].carpetasGrupo; docKml.numCarpetasGrupo = documentosKml[doc].numCarpetasGrupo; docKml.carpetas = documentosKml[doc].carpetas; docKml.marcadores = documentosKml[doc].marcadores; docKml.marcadoresPorCategoria = documentosKml[doc].marcadoresPorCategoria; //numero de carpetas de grupos //importante para distinguir entre kml's con un nivel de categorias o dos niveles docKml.numDatos = documentosKml[doc].numCarpetasGrupo; //contenedor del menu kml docKml.contenedorKml = jQuery('#'+menu.id); //contenedor de los grupos de categorias que estableceremos posteriormente docKml.contenedorGrupos = ""; menu[docKml.id] = docKml; if (i==0) { menu.gestorMapa = documentosKml[doc].gestorMapa; menu.wrapper = jQuery(documentosKml[doc].idContenedor); } creaMenuKml(docKml.id); } } function creaMenuKml(id) { //creamos el html para el contenedor formato lista, con el titulo del documento kml //el div denominado wrapper es un div contenedor que existe en el html //si es el primer kml, creamos un div general que contendrá todos los menús if(jQuery('#barra_lateral').length == 0) { var zonatitulo = '

Callejero interactivo

Cambiar formato del menú a pantalla gráfica

'; menu.wrapper.append('

'+zonatitulo+'

'); menu.contenedorPantalla = jQuery('#barra_lateral'); menu.interruptorPantalla = jQuery('#lista_img_formato_iconos'); } //si ya existe el div general, en los siguientes kml los insertamos dentro de él else { jQuery('#barra_lateral').append('

'); } //contendor para este kml menu.contenedorKml = jQuery('#'+id); var titKml = '' //creamos el html con el título e iconos del kml menu.contenedorKml.append('

'+menu[id].nombre+'

'); //creamos el contenedor para los grupos var htmlCarpetasGrupos = crearCarpetasGrupos(id,menu[id].carpetasGrupo); menu.contenedorKml.append(''); //activamos las funciones de 'acordeon' del menu activarMenuAcordeon(); //añadimos al icono de mostrar/ocultar el grupo el evento click, enlazarIconoKmlMostrar(menu[id].id); enlazarIconoKmlZoom(menu[id].id); }//creaMenuKml() function crearCarpetasGrupos(idKml,datosGrupo) { var htmlCarpetasGrupos = ""; for (grupo in datosGrupo) { var objetoGrupo = datosGrupo[grupo]; var htmlCarpetasCategorias = ""; var idContenedorGrupo = objetoGrupo.id; //creamos las subcarpetas, llamando al método con un array que contiene los id's de cada Grupo //para el array asociativo de categorias y el elemento que hará de contenedor var subcarpetas = objetoGrupo.categorias; htmlCarpetasCategorias = crearCarpetasCategorias(idKml,subcarpetas,idContenedorGrupo); //si hay grupos de categorias en el kml, crearemos el html correspondiente //y los eventos de mostrar/ocultar y zoom if (menu[idKml].numDatos > 0) { //html de cada grupo de categoria htmlCarpetasGrupos = htmlCarpetasGrupos + '

'+objetoGrupo.nombre+' Mostrar / ocultar los recursos de las categorías de este grupo en el mapa Zoom alrededor de los recursos de esta grupo de categorías

'+htmlCarpetasCategorias+'

'; //añadimos al icono de mostrar/ocultar el grupo el evento click, //con el que mostraremos u ocultaremos los recursos de las categorías de este grupo enlazarIconoGrupoMostrar(idKml,objetoGrupo); enlazarIconoGrupoZoom(idKml,objetoGrupo); }//if menu.numDatos > 0 //si solo hay categorias y no hay grupo, crearemos el contenedor de las categorias else { //html que envolverá las categorias htmlCarpetasGrupos = htmlCarpetasGrupos + '

'+htmlCarpetasCategorias+'

'; } }//for return htmlCarpetasGrupos; }//crearcarpetasgrupos //metodo privado para crear el html de las carpetas de categorias function crearCarpetasCategorias(idKml,datosCategoria,idContenedorCategoria) { //si en el kml hay dos niveles de carpetas, crearemos el html correspondiente //a cada categoria de cada grupo, con sus iconos y nombre //variable donde almacenaremos el html correspondiente a los marcadores de esta categoría y el contenedor de la categoria var htmlCategoria = ""; for (var idCategoria in datosCategoria) { var objetoCategoria = menu[idKml].carpetas[datosCategoria[idCategoria]]; var contenedorMarcadores = jQuery('#lista_cont_marcadores_'+objetoCategoria.id); //creamos el html correspondiente a los marcadores de esta categoría var htmlMarcadores = crearMarcadoresCategoria(idKml,objetoCategoria.id,contenedorMarcadores); if (menu[idKml].numDatos > 0) { htmlCategoria = htmlCategoria + '

'+objetoCategoria.nombre+' Mostrar / ocultar los recursos de esta categoría en el mapa Zoom alrededor de los recursos de esta categoría

'+htmlMarcadores+'

'; } else { htmlCategoria = htmlCategoria + '

'+objetoCategoria.nombre+' Mostrar / ocultar los recursos de esta categoría en el mapa Zoom alrededor de los recursos de esta categoría

'+htmlMarcadores+'

'; } //añadimos a los iconos de zoom y mostrar de la categoria el evento click, //con el que mostraremos u ocultaremos los recursos de esta categoria y haremos zoom alrededor de ellos enlazarIconoCategoriaMostrar(idKml,objetoCategoria); enlazarIconoCategoriaZoom(idKml,objetoCategoria); }//for return htmlCategoria; }//crearcarpetascategorias //metodo privado para crear el html de los marcadores de cada categoria function crearMarcadoresCategoria(idKml,idCategoria,contenedorMarcadores) { var idsMarcadores = menu[idKml].marcadoresPorCategoria[idCategoria]; var htmlMarcadores = ""; for (var idMarcador in idsMarcadores) { var idObjetoMarcador = idsMarcadores[idMarcador]; var objetoMarcador = menu.gestorMapa.marcadores[idObjetoMarcador]; htmlMarcadores = htmlMarcadores + '

'+objetoMarcador.nombre+' Mostrar / ocultar en el mapa Zoom en este recurso

'; //añadimos al span del marcador el evento click, con el que reproduciremos el click //del marcador correspondiente sobre el mapa //añadimos al icono de mostrar/ocultar el evento click, para mostrar u ocultar //el marcador correspondiente sobre el mapa //es importante pasar como parametro en el evento, el objeto Marcador actual //puesto que así mantememos en el ámbito del evento, el objeto correcto enlazarIconoMarcadorClick(objetoMarcador); enlazarIconoMarcadorZoom(objetoMarcador); enlazarIconoMarcadorMostrar(objetoMarcador); }//for return htmlMarcadores; }//crearMarcadores //metodo que aplica al icono y nombre del recursos el evento click en el mapa al hacer click function enlazarIconoMarcadorClick(objetoMarcador) { var objetoMarcador = objetoMarcador; jQuery('#lista_marcador_'+objetoMarcador.id).live('click',{objetoMarcadorId:objetoMarcador.id},function(e) { //ejecutamos el metodo del gestor de mapas que dispara un click en el marcador //que se le pasa como parámetro menu.gestorMapa.clickMarcador(e.data.objetoMarcadorId); }); } function enlazarIconoKmlZoom(objetoKmlId) { //añadimos al icono de zoom el evento para hacer zoom alrededor de todos los recursos del kml jQuery('#lista_kml_img_zoom_'+objetoKmlId).live('click',{docKmlId:objetoKmlId},function(e) { //recogemos el objeto marcador a partir del evento var objetoKmlId = e.data.docKmlId; //seleccionamos todos los marcadores del kml var marcadoresPorCategoria = menu[objetoKmlId].marcadoresPorCategoria; var arrayIdMarcadores = []; for (idCategoria in marcadoresPorCategoria) { var marcadores = marcadoresPorCategoria[idCategoria]; for (idMarcador in marcadores) { arrayIdMarcadores.push(marcadores[idMarcador]); } } //el mapa establecerá los límites alrededor del marcador cuyo id le pasamos menu.gestorMapa.calculaLimitesMapa(arrayIdMarcadores); }); }//enlazariconokmlzoom function enlazarIconoGrupoZoom(idKml,objetoGrupo) { //evento para realizar zoom sobre todos los recursos de las categorias del grupo jQuery('#lista_grupo_img_zoom_'+objetoGrupo.id).live('click',{objetoGrupoId:objetoGrupo.id},function(e) { //recogemos el objeto marcador a partir del evento var objetoGrupoId = e.data.objetoGrupoId; var objetoGrupo = menu[idKml].carpetasGrupo[objetoGrupoId]; var arrayIdMarcadores = []; var marcadores = objetoGrupo.marcadores; for (idMarcador in marcadores) { arrayIdMarcadores.push(marcadores[idMarcador]); } //el mapa establecerá los límites alrededor del marcador cuyo id le pasamos menu.gestorMapa.calculaLimitesMapa(arrayIdMarcadores); }); }//enlazarIconoGrupoZoom //metodo que aplica al icono de zoom el evento al hacer click function enlazarIconoCategoriaZoom(idKml,objetoCategoria) { jQuery('#lista_categoria_img_zoom_'+objetoCategoria.id).live('click',{objetoCategoriaId:objetoCategoria.id},function(e) { //recogemos el objeto marcador a partir del evento var objetoCategoriaId = e.data.objetoCategoriaId; var marcadores = menu[idKml].marcadoresPorCategoria[objetoCategoriaId]; var arrayIdMarcadores = []; for (idMarcador in marcadores) { arrayIdMarcadores.push(marcadores[idMarcador]); } //el mapa establecerá los límites alrededor del marcador cuyo id le pasamos menu.gestorMapa.calculaLimitesMapa(arrayIdMarcadores); }); }//enlazarIconoCategoriaZoom //metodo que aplica al icono de zoom el evento al hacer click function enlazarIconoMarcadorZoom(objetoMarcador) { var objetoMarcador = objetoMarcador; jQuery('#marcador_img_zoom_'+objetoMarcador.id).live('click',{objetoMarcador:objetoMarcador},function(e) { //recogemos el objeto marcador a partir del evento var objetoMarcador = e.data.objetoMarcador; var idMarcador = objetoMarcador.id; //el mapa establecerá los límites alrededor del marcador cuyo id le pasamos menu.gestorMapa.calculaLimitesMapa(idMarcador); }); }//enlazarIconoMarcadorZoom //añadimos al icono de mostrar/ocultar el kml el evento click, //con el que mostraremos u ocultaremos los grupos de este kml function enlazarIconoKmlMostrar(objetoKmlId) { //añadimos al icono de mostrar/ocultar el grupo el evento click, //con el que mostraremos u ocultaremos los grupos de este kml jQuery('#lista_kml_img_mostrar_'+objetoKmlId).live('click',{docKmlId:objetoKmlId},function(e) { //variable que recoge el objeto icono en el que hemos hecho click var icono = jQuery(this); //recogemos el objeto del kml actual a partir del evento var objetoKmlId = e.data.docKmlId; //seleccionamos el elemento que contiene los nombres de los grupos de este kml y sus iconos //pues al ocultar el kml, ocultamos los grupos var recursosKml = jQuery('#'+objetoKmlId); //como puede haber o no grupos de categorias, el evento click en el icono de mostrar //tendrá que reproducir el click en los iconos de mostrar/ocultar de los grupos, si los hay //y si no, de las categorias var claseIconoMostrar = ""; //seleccionarmos los iconos de mostrar grupo var iconosMostrarGrupo = jQuery('.lista_grupo_img_mostrar',recursosKml); //si hay iconos if (iconosMostrarGrupo.length > 0) { claseIconoMostrar = '.lista_grupo_img_mostrar' } //si no hay, simulamos el click en los iconos de las categorias else { claseIconoMostrar = '.lista_categoria_img_mostrar' } //emulamos el evento click en cada uno de ellos //si el kml está 'visible' if(menu[objetoKmlId].visible == 1) { //hacemos click en cada grupo, ocultándolo jQuery(claseIconoMostrar,recursosKml).trigger('click','ocultar'); //actualizamos la variable que contendrá el estado de visibilidad del kml icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar.png'); menu[objetoKmlId].visible = 0; } //si el grupo esta 'oculto' else { //hacemos click en cada marcador mostrandolo jQuery(claseIconoMostrar,recursosKml).trigger('click','mostrar'); //actualizamos la variable que contendrá el estado de visibilidad del kml icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png'); menu[objetoKmlId].visible = 1; } });//mostrar/ocultar }//enlazariconokmlmostrar //metodo que aplica al icono y nombre de categoria el evento click en el mapa al hacer click function enlazarIconoGrupoMostrar(idKml,objetoGrupo) { jQuery('#lista_grupo_img_mostrar_'+objetoGrupo.id).live('click',{objetoGrupo:objetoGrupo},function(e,forzarModo) { //variable que recoge el objeto en el que hemos hecho click var icono = jQuery(this); //el parametro modo nos indica si queremos forzar el mostrar u ocultar las categorias y recursos //necesario si este evento se dispara porque hacemos click en el icono de mostrar/ocultar kml //si no, alternaremos entre mostrar u ocultar en función del estado var modo = ""; forzarModo ? modo = forzarModo : modo = 'alternar'; //recogemos el objeto de la categoría actual a partir del evento var objetoGrupo = e.data.objetoGrupo; //seleccionamos el elemento que contiene los nombres de las categorias de este grupo y sus iconos //pues al ocultar el grupo, ocultamos las categorias var recursosGrupo = jQuery('#'+objetoGrupo.id); var estadoGrupo = ""; //comprobamos si hay que forzar el evento mostrar u ocultar, y si no, alternamos switch(modo) { case 'mostrar': mostrarGrupo(); break; case 'ocultar': ocultarGrupo(); break; case 'alternar': alternarGrupo(); break; } function mostrarGrupo() { //hacemos click en cada marcador mostrandolo jQuery('.lista_categoria_img_mostrar',recursosGrupo).trigger('click','mostrar'); //actualizamos la variable que contendrá el estado de la categoría y el icono icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png'); objetoGrupo.mostrarCarpeta(); } function ocultarGrupo() { //hacemos click en cada marcador ocultándolo jQuery('.lista_categoria_img_mostrar',recursosGrupo).trigger('click','ocultar'); //actualizamos la variable que contendrá el estado de la categoría y el icono icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar.png'); objetoGrupo.ocultarCarpeta(); } function alternarGrupo() { //emulamos el evento click en cada uno de ellos //si el grupo está visible if(objetoGrupo.visible == 1) { ocultarGrupo(); } //si el grupo esta oculta else { mostrarGrupo(); } } }); }//enlazarIconoGrupoMostrar //metodo que aplica al icono y nombre de categoria el evento click en el mapa al hacer click function enlazarIconoCategoriaMostrar(idKml,objetoCategoria) { var objetoCategoria = objetoCategoria; jQuery('#lista_categoria_img_mostrar_'+objetoCategoria.id).live('click',{objetoCategoria:objetoCategoria},function(e,forzarModo) { //variable que recoge el objeto en el que hemos hecho click var icono = jQuery(this); //el parametro modo nos indica si queremos forzar el mostrar u ocultar las categorias y recursos //necesario si este evento se dispara porque hacemos click en el icono de mostrar/ocultar kml //si no, alternaremos entre mostrar u ocultar en función del estado var modo = ""; forzarModo ? modo = forzarModo : modo = 'alternar'; //recogemos el objeto de la categoría actual a partir del evento var objetoCategoria = e.data.objetoCategoria; //seleccionamos el elemento que contiene los recursos de esta categoria var recursosCategoria = jQuery('#lista_cont_marcadores_'+objetoCategoria.id); var estadoCategoria = ""; //comprobamos si hay que forzar el evento mostrar u ocultar, y si no, alternamos switch(modo) { case 'mostrar': mostrarCategoria(); break; case 'ocultar': ocultarCategoria(); break; case 'alternar': alternarCategoria(); break; } function mostrarCategoria() { //hacemos click en cada marcador mostrandolo jQuery('.marcador_img_mostrar',recursosCategoria).trigger('click','mostrar'); //actualizamos la variable que contendrá el estado de la categoría icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png'); objetoCategoria.mostrarCarpeta(); } function ocultarCategoria() { //hacemos click en cada marcador ocultándolo jQuery('.marcador_img_mostrar',recursosCategoria).trigger('click','ocultar'); //actualizamos la variable que contendrá el estado de la categoría icono.attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar.png'); objetoCategoria.ocultarCarpeta(); } function alternarCategoria() { //emulamos el evento click en cada uno de ellos //si el grupo está visible if(objetoCategoria.visible == 1) { ocultarCategoria(); } //si el grupo esta oculta else { mostrarCategoria(); } } }); }//enlazariconocategoriamostrar //metodo que aplica al icono de mostrar/ocultar recurso el evento al hacer click function enlazarIconoMarcadorMostrar(objetoMarcador) { var objetoMarcador = objetoMarcador; jQuery('#marcador_img_mostrar_'+objetoMarcador.id).live('click',{objetoMarcador:objetoMarcador},function(e,modo) { //el parametro modo es necesario para el metodo mostrarocultarmarcadores if (!modo) { modo = 'alternar'; } //recogemos el objeto marcador a partir del evento var objetoMarcador = e.data.objetoMarcador; //el metodo del marcador, ocultará o mostrará el icono, y devuelve como valor //true, si se ha mostrado, o false, si se ha ocultado var esVisible = menu.gestorMapa.mostrarOcultarMarcadores(objetoMarcador.id,modo); //en función del estado del marcador, mostraremos un icono u otro if (esVisible == true) { jQuery(this).attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png'); } else { jQuery(this).attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar.png'); } }); }//crearMarcadoresCategoria ///metodo para crear los 'acordeones' del menu function activarMenuAcordeon() { //objetos kml var objetosKml = jQuery('.lista_cont_kml'); //icono (o texto) kml var iconosGrupos = jQuery('.lista_grupo_img_icon,.lista_grupo_txt'); //icono (o texto) grupo var iconosCategorias = jQuery('.lista_categoria_img_icon,.lista_categoria_txt'); //icono (o texto) categoria var iconosKml = jQuery('.lista_kml_img_icon,.lista_kml_txt'); //como la función se ejecuta cada vez que creamos un menú //eliminamos todos los eventos que pueda haber en los iconos iconosGrupos.unbind('click'); iconosCategorias.unbind('click'); iconosKml.unbind('click'); //comprobaremos si el menú tiene grupos o solo categorias //y enlazamos los eventos //cuando hacemos click en cualquier elemento de un menú, ocultaremos el otro si está desplegado objetosKml.each(function() { var esteKml = jQuery('.lista_cont_grupos',this); var restoKmls = jQuery('.lista_cont_grupos').not(esteKml); jQuery(this).click(function() { restoKmls.each(function() { if (jQuery(this).css('display') == 'block') { jQuery(this).slideUp(); } else { return true } }); }); }); //el icono del kml abrirá o cerrará el contenedor general de grupos jQuery('.lista_kml_img_icon,.lista_kml_txt').click(function() { var objeto = jQuery(this); var padreKml = jQuery(this).parents('.lista_cont_kml'); var esteKml = jQuery('.lista_cont_grupos',padreKml); var restoKmls = jQuery('.lista_cont_grupos').not(esteKml); //mostramos u ocultamos los grupos de este Kml alternativamente esteKml.slideToggle(); }); //nivel de grupos, si los hay jQuery('.lista_grupo_img_icon,.lista_grupo_txt').click(function() { var padreKml = jQuery(this).parents('.lista_cont_kml'); var padreGrupo = jQuery(this).parents('.lista_cont_grupo'); var esteGrupo = jQuery('.lista_cont_categoria',padreGrupo); var restoGrupos = jQuery('.lista_cont_categoria',padreKml).not(esteGrupo); //cerramos todas las categorias menos las de este grupo restoGrupos.each(function() { if (jQuery(this).css('display') == 'block') { jQuery(this).slideUp(); } else { return true } }); //mostramos u ocultamos las categorias del grupo alternativamente esteGrupo.slideToggle(); }); //nivel de categorias jQuery('.lista_categoria_img_icon,.lista_categoria_txt').click(function() { var padreKml = jQuery(this).parents('.lista_cont_kml'); var padreCategoria = jQuery(this).parents('.lista_cont_categoria'); var estaCategoria = jQuery('.lista_cont_marcadores',padreCategoria); //importante seleccionar el resto de categorias del mismo padre, para no afectar a otros kmls var restoCategorias = jQuery('.lista_cont_marcadores',padreKml).not(estaCategoria); //cerramos todas las categorias menos las de este grupo restoCategorias.each(function() { if (jQuery(this).css('display') == 'block') { jQuery(this).slideUp(); } else { return true } }); //mostramos u ocultamos las categorias del grupo alternativamente estaCategoria.slideToggle(); }); } procesaKml(documentos); }//menuKmllista