/************************************************************************************************************************** Funciones para el manejo de VENTANAS dentro del navegador (C) Alberto Blanco 2008 Las ventanas son DIVs y/o IFRAME con posiciones absolutas, que tienen el z-index arriba del todo Se pueden ocultar los select (en ambos) y los obj (sólo en explorer, el firefox no me deja). En firefox los obj siempre estan por encima de todo, pero los select no, atienden al z-index En explorer tanto los obj como los select no atienden al z-index para el div, pero los select si se que se quedan debajo del IFRAME Por eso las propiedades noselect y noobject sólo las atiende si es Internet Explorer. En Firefox se ignora. Necesita los ficheros de script ManejoObjetos.js Eventos.js Cadenas.js **************************************************************************************************************************/ /****************************************************************************************************************************** Clase para las ventanas Constructor --------------------------------------------------------- Por defecto Propiedad Explicación ----------------------------------------------------------------------------------------------------------------------------- DIV tipo:DIV|IFRAME Tipo de contenedor de la ventna 0 top:xxx posicion en pixels. 0 left:xxx 300 ancho:xxx tamaño en pixels. 100 alto:xxx sin cabecera no aparece centrar:x|y|all Si aparece este parametro, ignora top y/o left y centra la ventana no aparece ajustar:x|y|all Si aparece este parámetro, ignora ancho y/o alto y ajusta la ventana al contenido false noselect:true|false oculta o no los select de la página false noobject:true|false oculta o no los objetc de la página (sólo explorer) true barra:true|false si tiene o no barra de cabecera true mover:true|false permite el movimiento de la ventana o no, si barra=true WINDIVCont classWin:xxxxxx nombre de la clase de estilo para el contenido Estilos que no surtiran efecto por que los fuerzo yo: visibility position='absolute' overflowX=this.ScrollX overflowY=this.ScrollY WINDIVCab classCab:xxxxxx nombre de la clase de estilo para las cabeceras Estilos que no surtiran efecto por que los fuerzo yo: visibility position='absolute' overflow='hidden' WINSPANTitulo classTitulo:xxxxxx nombre de la clase de estilo para el span del titulo de la ventana Estilos que no surtiran efecto por que los fuerzo yo: styleFloat='right' WININPUTCierre classCierre:xxxxxx nombre de la clase de estilo para el boton de cierre de la ventana Estilos que no surtiran efecto por que los fuerzo yo: height=Como la cabecera styleFloat='right' cursor='pointer' auto scrollX:true|false|auto Muestra o no el scroll horizontal. auto lo muestra sólo cuando es necesario auto scrollY:true|false|auto Muestra o no el scroll vertical. auto lo muestra sólo cuando es necesario null evtCerrar Funcion que sera llamada cuando se pulse el botón cerrar mediante eval(funcion) Debe devolver true o false. Si devuelve false, la ventana no se cerrará. null evtUnload Funcion que sera llamada cuando la ventana se cierre por que se ha cargado otra página en el navegador mediante eval(funcion) Ejemplos: miwin=new WINClassVentana(); miwin=new WINClassVentana('top:10,left:30,barra:false'); miwin=new WINClassVentana('barra:false,ajustar:all,centrar:all'); Excepciones: Si barra=false siempre mover=false. Si esta como parametro se ignora Si AjustarXflag=true ScrollX=false. Si esta como parametro se ignora Si AjustarYflag=true ScrollY=false. Si esta como parametro se ignora Si Ajustar ignora ancho y/o alto ******************************************************************************************************************************/ function WINClassVentana() { //Variables globales var clase=this; //Nos referenciamos a nosotros mismos var prop=''; //Donde recibimos la cadena de propiedades var WMovX=-1; // Para la funcion de movimiento var WMovY=-1; var IFRAME=null; //IFrame oculto para cargar la página var INPUTCierre=null; //Boton para cerrar la ventana en la cabecera //Valores por defecto para la clase var Tipo='DIV'; var Top=0,Left=0,Ancho=300,Alto=100; var CentrarYflag=false,CentrarXflag=false; var AjustarYflag=false,AjustarXflag=false; var ScrollX='auto',ScrollY='auto'; var NoSelect=false,NoObject=false; var Barra=true; var Mover=true; var ClassCab='WINDIVCab',ClassWin='WINDIVCont',ClassCierre='WININPUTCierre',ClassTitulo='WINSPANTitulo'; var pagina='',titulo=''; var EvtCerrar=null; var EvtUnload=null; //Recojo parametros si hay if (WINClassVentana.arguments.length>0) prop=WINClassVentana.arguments[0]; //Análisis de la cadena de propiedades si existe var p,dat; if (prop.length>0) { p=prop.split(','); //Me creo un array con los grupos de propiedad:valor for (var i=0;i1) dat[1]=trim(dat[1]); //Si hay valor, le hago el trim dat[0]=trim(dat[0].toLowerCase()); //Le quito los espacios a la propiedad, y la paso entera a minusculas switch(dat[0]) //Selecciono de que propiedad se trata { case 'tipo': switch(dat[1]) { case 'DIV': case 'IFRAME': break; default: dat[1]='DIV'; break; }; Tipo=dat[1]; break; case 'top': Top=Math.floor(dat[1]); break; case 'left': Left=Math.floor(dat[1]); break; case 'ancho': Ancho=Math.floor(dat[1]); break; case 'alto': Alto=Math.floor(dat[1]); break; case 'centrar': switch(dat[1].toLowerCase()) { case 'x': CentrarXflag=true; break; case 'y': CentrarYflag=true; break; case 'all': CentrarYflag=true; CentrarXflag=true; break; }; break; case 'ajustar': switch(dat[1].toLowerCase()) { case 'x': AjustarXflag=true; break; case 'y': AjustarYflag=true; break; case 'all': AjustarXflag=true; AjustarYflag=true; break; }; break; case 'scrollx': switch(dat[1].toLowerCase()) { case 'true': ScrollX='scroll'; break; case 'false': ScrollX='hidden'; break; case 'auto': ScrollX='auto'; break; }; break; case 'scrolly': switch(dat[1].toLowerCase()) { case 'true': ScrollY='scroll'; break; case 'false': ScrollY='hidden'; break; case 'auto': ScrollY='auto'; break; }; break; case 'noselect': NoSelect=(dat[1].toLowerCase()=='true')?true:false; break; case 'noobject': NoObject=(dat[1].toLowerCase()=='true')?true:false; break; case 'barra': Barra=(dat[1].toLowerCase()=='true')?true:false; break; case 'mover': Mover=(dat[1].toLowerCase()=='true')?true:false; break; case 'classcab': ClassCab=dat[1]; break; case 'classwin': ClassWin=dat[1]; break; case 'classcierre': ClassCierre=dat[1]; break; case 'classtitulo': ClassTitulo=dat[1]; break; case 'evtcerrar': EvtCerrar=dat[1]; break; case 'evtunload': EvtUnload=dat[1]; break; default: //Iluminado :) break; }; //Fin del select de las propiedades }; //Fin del blucle de propiedades }; //Fin del if de si hay propiedades //Ahora ajustamos incongruencias if (!Barra && Mover) Mover=false; if (AjustarXflag) ScrollX='hidden'; if (AjustarYflag) ScrollY='hidden'; //Propiedades this.OBJContendor=null; //Objeto (DIV o IFRAME) del contenido de la ventana this.DIVCabecera=null; //Div de la cabecera this.SPANTitulo=null; //Span para el titulo this.LoadFlag=false; // Esta a true mientras carga una página this.top=Top; this.left=Left; this.ancho=Ancho; this.alto=Alto; this.evtCerrar=EvtCerrar; this.evtUnload=EvtUnload; //Metodos this.Abre=mtWINAbre; //Abre la ventana this.Abre('url','titulo') ambos parametros opcionales this.Cierra=mtWINCierra; //Cierra la ventana win.Cerrar(); this.CargaPagina=mtWINCargaPagina; //Carga una página en la ventana win.Carga('url'); this.PonTitulo=mtWINPonTitulo; //Actualiza el titulo win.PonTitulo('titulo'); this.Foco=mtWINFoco; //Pone la ventana la primera win.Foco(); this.CentrarX=mtWINCentrarX; //Centra la ventana win.CentrarX(), si esta el flag de centrado alzado this.CentrarY=mtWINCentrarY; this.AjustarX=mtWINAjustarX; //Ajusta la ventana al tamaño del contenido win.AjustarX(); si esta el flag de ajuste alzado this.AjustarY=mtWINAjustarY; this.EstaAbierta=mtEstaAbierta; //True si esta abierta, false si no lo esta this.Descarga=mtDescarga; /******************************************************************************************************************** Funciones para los métodos ********************************************************************************************************************/ /******************************************** Se ha producido la descarga de la ventana ********************************************/ function mtDescarga() { eval(clase.evtUnload); }; /**************************************************************************************************** Abre una ventana. Se le puede pasar como parametro una página para que la cargue y el titulo. Crea dos divs flotantes y un iframe. El iframe permanece oculto y sirve para cargar la pagina que luego trasladamos al div del contenido. El otro div hace de cabeceras parametro1: pagina: dirección, dentro del dominio, de una página a cargar en la ventana parametro2: titulo ****************************************************************************************************/ function mtWINAbre() { var AltoBarra=0; var Frame; //Si ya estaba abierta paso del culo del programador if (clase.OBJContendor!=null) return; //Recojo la página, si es que me la pasan if (mtWINAbre.arguments.length>0) pagina=mtWINAbre.arguments[0]; if (mtWINAbre.arguments.length>1) titulo=mtWINAbre.arguments[1]; //Me creo un IFRAME oculto para poder cargar las páginas en el caso de que el tipo de ventana sea un div if (Tipo=='DIV') { IFRAME=document.createElement('IFRAME'); IFRAME.style.position='absolute'; // Fuerzo al iframe a permanecer oculto y que no estorbe :) IFRAME.style.visibility='hidden'; document.body.appendChild(IFRAME); }; //Me creo el div o iframe general y le asigno los atributos necesarios clase.OBJContendor=document.createElement(Tipo); clase.OBJContendor.className=ClassWin; //Le asigno la clase clase.OBJContendor.style.visibility='hidden'; //Fuerzo los atributos que necesito clase.OBJContendor.style.position='absolute'; clase.OBJContendor.style.overflowX=ScrollX; clase.OBJContendor.style.overflowY=ScrollY; clase.OBJContendor.style.zIndex=1; document.body.appendChild(clase.OBJContendor); //Se la añado a la pagina //Si la venatna es tipo div le asigno el evento para poder "coger el foco" cuando pinchen en el contenedor if (Tipo=='DIV') { EVTAsignaEvento(clase.OBJContendor, 'mousedown', clase.Foco); //Conecto el evento para cuando termine de cargar (y se lo dejamos ya puesto) EVTAsignaEvento(IFRAME, 'load', CargaDiv); } else { //Conecto el evento para cuando termine de cargar (y se lo dejamos ya puesto) EVTAsignaEvento(clase.OBJContendor, 'load', CargaDiv); }; //El div de la cabecera if (Barra) { clase.DIVCabecera=document.createElement('DIV'); clase.DIVCabecera.className=ClassCab; // Le asigno la clase clase.DIVCabecera.style.visibility='hidden'; //Fuerzo los atributos que necesito clase.DIVCabecera.style.position='absolute'; clase.DIVCabecera.style.overflow='hidden'; clase.DIVCabecera.style.zIndex=1; document.body.appendChild(clase.DIVCabecera); //Se la añado a la página //Me creo un bloque de texto para el titulo clase.SPANTitulo=document.createElement('SPAN'); clase.SPANTitulo.innerHTML=titulo; //Le mete el titulo clase.SPANTitulo.className=ClassTitulo; // Le asigno la clase //Le fuerzo los estilos que necesita if (OBJQueNavegador()=='IE') clase.SPANTitulo.style.styleFloat='left'; else clase.SPANTitulo.style.cssFloat='left'; //Me creo el boton de cierre INPUTCierre=document.createElement('INPUT'); INPUTCierre.type='button'; INPUTCierre.value='X'; INPUTCierre.className=ClassCierre; // Le asigno la clase //Fuerzo los estilos que necesita INPUTCierre.style.cursor='pointer'; if (OBJQueNavegador()=='IE') INPUTCierre.style.styleFloat='right'; else INPUTCierre.style.cssFloat='right'; //Al div de la cabecera le asigno el evento del mouse para el movimiento de la ventana if (Mover) { clase.DIVCabecera.style.cursor='pointer'; clase.SPANTitulo.style.cursor='pointer'; EVTAsignaEvento(clase.DIVCabecera, 'mousedown', evWINMovIni); }; //Al boton le asigno el evento click para que cierre la ventana EVTAsignaEvento(INPUTCierre, 'mousedown', evWINClickCierre); //Añado boton y titulo al div de la cabecera clase.DIVCabecera.appendChild(clase.SPANTitulo); //Se la añado al div de la cabercera clase.DIVCabecera.appendChild(INPUTCierre); //Se la añado al div de la cabercera // Le doy al boton el tamaño de alto de la cabecera INPUTCierre.style.height=clase.SPANTitulo.offsetHeight + 'px'; }; // //Posiciones iniciales. Luego pueden cambiar con autoajustar o centrar // //Y configuro el contenedor y la cabecera acorde al tamaño y a la posicion if (Barra) { clase.DIVCabecera.style.width=clase.ancho + 'px'; //EL alto de la cabecera lo define el usuario en el estilo clase.DIVCabecera.style.left=clase.left + 'px'; clase.DIVCabecera.style.top=clase.top + 'px'; AltoBarra=Math.floor(clase.DIVCabecera.offsetHeight); }; clase.OBJContendor.style.width=clase.ancho + 'px'; clase.OBJContendor.style.height=clase.alto + 'px'; clase.OBJContendor.style.left=clase.left + 'px'; clase.OBJContendor.style.top=(clase.top + AltoBarra) + 'px'; // //Y vamos a ver si carga la pagina // if (pagina!='') clase.CargaPagina(pagina); else AjusteYCentrado(); //No hay que cargar página, voy a ajustar tamañño y centrar }; /************************************************************************* Cierra la ventana abierta *************************************************************************/ function mtWINCierra() { //Me pulo la referencia externa de la matriz if (clase.OBJContendor==null) return; //Si ya estaba cerrada paso de el programador //Si estaba moviendose, fuerzo que pare if (WMovX!=-1 || WMovY!=-1) { EVTEliminaEvento(document, 'mousemove', evWINMovMueve); //Y le quito al document los movimientos de esta ventana EVTEliminaEvento(document, 'mouseup', evWINMovFin); if (Tipo=='IFRAME') { var obj=clase.OBJContendor.contentWindow.document; EVTEliminaEvento(obj, 'mousemove', evWINMovMueve); EVTEliminaEvento(obj, 'mouseup', evWINMovFin); }; WMovX=-1; WMovY=-1; }; //Me pulo las asignaciones document.body.removeChild(clase.OBJContendor); if (Barra) document.body.removeChild(clase.DIVCabecera); if (Tipo=='DIV') document.body.removeChild(IFRAME); //Me pulos los objetos delete clase.OBJContendor; if (Barra) delete clase.DIVCabecera; if (Tipo=='DIV') delete IFRAME; //Y los vuelvo a inicializar clase.OBJContendor=null;; clase.DIVCabecera=null; IFRAME=null; INPUTCierre=null; clase.SPANTitulo=null; //Restauro objetos de la pagina if (OBJQueNavegador()=='IE') { if (NoSelect) OBJSELECTMuestra(); //Restauro los object if (NoObject) OBJSELECTMuestra(); //Y restauro los select }; if(clase.evtUnload!=null) mtDescarga(); }; /******************************************* Carga una pagina en una ventana ********************************************/ function mtWINCargaPagina(pagina) { var Frame; if (clase.OBJContendor==null) return; //Si la llaman sin estar abierta, paso del programador if (pagina=='') return; //Si no me da pagina que coño quieren clase.LoadFlag=true; //Alzo el flag de que la ventana esta cargado //Dependiendo del tipo que sea, referencia el IFRAME adecuado if (Tipo=='DIV') Frame=IFRAME; else Frame=clase.OBJContendor; Frame.src=pagina; //Cargo la página }; //Cuando termina de cargar el iframe, le pasamos el contenido al div function CargaDiv() { //Si era un div le copio el contenido if (Tipo=='DIV') clase.OBJContendor.innerHTML=IFRAME.contentWindow.document.body.innerHTML; clase.LoadFlag=false; //Bajamos el flag de carga //Voy a ajustar tamaño y centrar AjusteYCentrado(); }; // Al terminar de cargar o de abrir se llama a esta funcion para ajustar tamaño y centrar la ventana function AjusteYCentrado() { var Al; clase.AjustarY(); //Primero ajustamos tamaño clase.AjustarX(); clase.CentrarY(); //Y luego centramos clase.CentrarX(); //Compruebo que la llamada sea de la funcion abrir para seguir if (clase.OBJContendor.style.visibility=='visible') { //Ya estaba abierta. En IE el gili si no hay ajuste de tamaño, a veces no la pinta (IFRAME) if (OBJQueNavegador()=='IE' && !AjustarYflag && !AjustarXflag) { Al=clase.OBJContendor.style.height; clase.OBJContendor.style.height='0px'; clase.OBJContendor.style.height=Al; }; return; }; if (OBJQueNavegador()=='IE') { //Oculto todos los select del documento, menos los que tenga la ventana if (NoSelect) OBJSELECTOculta(clase.OBJContendor,'SELECT'); //Oculto todos los obj del documento, menos los que tenga la ventana if (NoObject) OBJSELECTOculta(clase.OBJContendor,'OBJECT'); }; // Y muestra los divs clase.OBJContendor.style.visibility='visible'; if (Barra) clase.DIVCabecera.style.visibility='visible'; }; /************************************** Cambia el titulo a la ventana **************************************/ function mtWINPonTitulo(titulonew) { titulo=titulonew; clase.SPANTitulo.innerHTML=titulonew; }; /*************************************** Coloca el zindex arriba del to ***************************************/ function mtWINFoco() { //La pongo arriba del to var zm0=OBJzindexMax(); var zm1=Math.floor(clase.OBJContendor.style.zIndex); if (zm1<=zm0) { zm0++; clase.OBJContendor.style.zIndex=zm0; if (clase.DIVCabecera!=null) clase.DIVCabecera.style.zIndex=zm0; }; }; /***************************************************************************************** Colocacion de las ventanas *****************************************************************************************/ //Intenta centrar la ventana con su tamaño actual function mtWINCentrarY() { if (!CentrarYflag) return; var Top=0,AltoBarra=0; var AlWin=clase.OBJContendor.offsetHeight; var MAl; //Calculamos la mitad del alto de la pantalla if (OBJQueNavegador()=='IE') MAl=document.body.scrollTop + Math.round(document.body.clientHeight/2); else MAl=document.body.scrollTop + Math.round(window.innerHeight/2); if (Barra) AlWin+=clase.DIVCabecera.offsetHeight; Top = MAl - Math.round(AlWin/2); if (Top<0) Top=0; if (Barra) { clase.DIVCabecera.style.top=Top + 'px'; AltoBarra=Math.floor(clase.DIVCabecera.offsetHeight); }; clase.OBJContendor.style.top=(Top + AltoBarra) + 'px'; clase.top=Top; }; function mtWINCentrarX() { if (!CentrarXflag) return; var Left=0; var AnWin=clase.OBJContendor.offsetWidth; //De la ventana var MAn; //Calculamos la mitad del ancho de la pantalla if (OBJQueNavegador()=='IE') MAn=document.body.scrollLeft + Math.round(document.body.clientWidth/2); else MAn=document.body.scrollLeft + Math.round(window.innerWidth/2); Left = MAn - Math.round(AnWin/2); if (Left<0) Left=0; if (Barra) clase.DIVCabecera.style.left=Left + 'px'; clase.OBJContendor.style.left=Left + 'px'; clase.left=Left; }; //Ajusta la ventana al tamaño de su contenido function mtWINAjustarY() { if (!AjustarYflag) return; var Alto; var Frame; if (Tipo=='DIV') Frame=IFRAME; else Frame=clase.OBJContendor; if (Frame.contentWindow.document.body) { Alto=OBJalto(Frame.contentWindow.document.body); if (Alto!=-1) { if (OBJQueNavegador()=='IE') Alto+=4+20; Alto+=4; clase.OBJContendor.style.height=Alto + 'px'; clase.alto=Alto; }; }; }; function mtWINAjustarX() { if (!AjustarXflag) return; var Ancho; var Frame; if (Tipo=='DIV') Frame=IFRAME; else Frame=clase.OBJContendor; if (Frame.contentWindow.document.body) { Ancho=OBJancho(Frame.contentWindow.document.body); if (Ancho!=-1) { if (OBJQueNavegador()=='IE') Ancho+=20; Ancho+=4; clase.OBJContendor.style.width=Ancho + 'px'; if (Barra) clase.DIVCabecera.style.width=Ancho + 'px'; clase.ancho=Ancho; }; }; }; //Devuelve true si la ventana esta abierta, false si no lo esta function mtEstaAbierta() { if (clase.OBJContendor==null) return false; else return true; }; /******************************************************************************************************************** Funciones para los eventos ********************************************************************************************************************/ //Funcion asociada al evento mousedown del boton de las cabeceras (tengo que buscarme la ventana que es) function evWINClickCierre(e) { var flag=true; EVTNoPropagarEvento(e); //paro la cascada if (clase.evtCerrar!=null) flag=eval(clase.evtCerrar); //Si tiene evento antes del cierre, lo ejecuto if (flag) clase.Cierra(); }; /***************************************************************************************** Movimiento de las ventanas *****************************************************************************************/ //Esta funcion es llamada por el evento del div de la cabecera con el evento mousedown function evWINMovIni(e) { EVTNoPropagarEvento(e); //Como el evento nos valia, no lo dejo pasar a los siguientes elementos //La pongo arriba del to clase.Foco(); //Me quedo con las coordenadas de raton WMovX=e.screenX; WMovY=e.screenY; EVTAsignaEvento(document, 'mousemove', evWINMovMueve); //Y le asigno al document los movimientos de esta ventana EVTAsignaEvento(document, 'mouseup', evWINMovFin); //Si es un iframe, tengo que asignarle al documento del IFRAME el evento tambien if (Tipo=='IFRAME') { var obj=clase.OBJContendor.contentWindow.document; EVTAsignaEvento(obj, 'mousemove', evWINMovMueve); EVTAsignaEvento(obj, 'mouseup', evWINMovFin); }; }; //Esta funcion es llamada por el evento del document function evWINMovMueve(e) { var MY,MX; var CY,CX; var quien; e=EVTDimeEvento(e); //Recogemos una referencia válida al evento dependiendo del navegador //Resto a la coordenada inicial del raton la actual, y eso se lo sumo a las coordenadas de la ventana CX=clase.OBJContendor.style.left; CX=doNumber(CX); MX=Math.floor(CX) - (WMovX - e.screenX); CY=clase.OBJContendor.style.top; CY=doNumber(CY); MY=Math.floor(CY)-(WMovY-e.screenY); clase.OBJContendor.style.left=MX + 'px'; clase.OBJContendor.style.top=MY + 'px'; clase.DIVCabecera.style.left=MX + 'px'; clase.DIVCabecera.style.top=(MY - Math.floor(clase.DIVCabecera.offsetHeight)) + 'px'; //Me vuelvo a quedar con las coordenadas de raton WMovX=e.screenX; WMovY=e.screenY; EVTNoPropagarEvento(e); //Como el evento nos valia, no lo dejo pasar a los siguientes elementos }; //Esta funcion es llamada por el evento del document function evWINMovFin(e) { EVTEliminaEvento(document, 'mousemove', evWINMovMueve); //Y le quito al document los movimientos de esta ventana EVTEliminaEvento(document, 'mouseup', evWINMovFin); if (Tipo=='IFRAME') { var obj=clase.OBJContendor.contentWindow.document; EVTEliminaEvento(obj, 'mousemove', evWINMovMueve); EVTEliminaEvento(obj, 'mouseup', evWINMovFin); }; EVTNoPropagarEvento(e); //Como el evento nos valia, no lo dejo pasar a los siguientes elementos WMovX=-1; WMovY=-1; }; }; /*********************************** fin de la clase ************************************/