/** * BRF 2006-2007 para R Cable y Telecomunicaciones * *------------------------------------------------- * funciones basadas en LighBox.JS (www.huddletogether.com/projects/lightbox/) * y sobre todo subModal (http://www.subimage.com/dhtml/subModal/), de donde se han * tomado algunas funciones auxiliares *------------------------------------------------- * lanza una capa centrada sobre todo el web oscureciendo lo que hay detrás (semitransparente) * y encima un Flash, una imagen, un iFrame, un VideoLAN/PCTV, etc. *------------------------------------------------ * interfaz: * function abrirPopUpMultimedia(ancho, alto, tipo, url) * function cerrarPopUpMultimediaUrl(url) * function cerrarPopUpMultimedia() * var gPUMVersion * var gPUMPrefijoIMX *------------------------------------------------ * v1.1 * 8/2/2007 * opcion tamano de popup liquido especificando ancho o alto 0 * centrado ANTES de mostrar * anadida variable de prefijo para carpeta imx de popupmultimedia **/ var gPUMVersion = "1.1"; // versión de popUpMultimedia var PUMmargenPopContenido = 20; // margen alrededor del multimedia var PUMmargenPopBordeVentana = 40; // margen que se deja al borde de ventana en caso de tamano liquido /** * localización de las imágenes de popUpMultimedia (un PNG gris, un t.gif y un botón de cerrar) * esta variable puede cambiarse (siempre antes de llamar a abrirPopUpMultimedia() para indicar dónde se * encuentran las imágenes que necesita popUpMultimedia (p.e. /imx/ si allí se han copiado t.gif, cerrar.gif y ) */ var gPUMPrefijoIMX = "/Descargas/javascript/";//"popUpMultimedia/"; /** * la función principal, abre un popup multimedia * * ancho = ancho del cotenido a mostrar en píxeles; si se pone 0, el ancho será líquido (el ancho de la ventana menos un margen) * alto = alto del cotenido a mostrar en píxeles; si se pone 0, el alto será líquido (el alto de la ventana menos un margen) * tipo = puede ser: * 'flash' y el parámetro URL es el SWF más los parámetros de SWF * 'iframe' y el parámetro URL es el contenido del iframe * 'imagen' y el parámetro URL es la URL de la imagen * 'videolan' y el parámetro URL es el vídeo de videolan a mostrar * url = el contenido a mostrar en el popupmultimedia según su tipo */ function abrirPopUpMultimedia(ancho, alto, tipo, url) { gPUMHideSelects = false; aPUMTamanoEspecificado = new Array(ancho, alto); bPUMAnchoLiquido=(ancho == 0); if (bPUMAnchoLiquido) { // cogemos tamaño de ventana visible var fullWidth = PUMgetViewportWidth(); // el ancho especificado será el ancho de pantalla menos los bordes, menos el margen alrededor del multimedia ancho = fullWidth - (PUMmargenPopBordeVentana*2) - (PUMmargenPopContenido*2) } bPUMAltoLiquido=(alto == 0); if (bPUMAltoLiquido) { // cogemos tamaño de ventana visible var fullHeight = PUMgetViewportHeight(); // el ancho especificado será el ancho de pantalla menos los bordes, menos el margen alrededor del multimedia alto = fullHeight - (PUMmargenPopBordeVentana*2) - (PUMmargenPopContenido*2) } var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10); if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) { gPUMHideSelects = true; } if(gPUMHideSelects){ PUMHideSelectBoxes(); } if (!bPUMPopupAbierto) { var body = document.getElementsByTagName('body')[0]; if (PUMPopMask==null) { // creamos el DIV con el fondo var lPopMask = null; lPopMask = document.createElement('div'); lPopMask.style.display = 'none'; lPopMask.id = 'mascaraPopUp'; lPopMask.style.position = 'absolute'; lPopMask.style.zIndex = '200'; lPopMask.style.top = '0px'; lPopMask.style.left = '0px'; lPopMask.style.width = '100%'; lPopMask.style.height = '100%'; lPopMask.style.opacity = '.6'; lPopMask.style.filter = 'alpha(opacity=60)'; lPopMask.style.backgroundColor = '#666666'; lPopMask.style.backgroundImage = 'none'; lPopMask.style.backgroundRepeat = 'repeat'; body.appendChild(lPopMask); PUMPopMask = document.getElementById('mascaraPopUp'); } if (PUMPopContenido==null) { // preparamos el contenido del
var sContenido; if (tipo == 'flash') { // es un flash, con el ancho y alto especificado y como movie el parámetro URL sContenido = ''; } else if (tipo == 'iframe') { // es un iframe, con el ancho y alto especificado y que carga como contenido lo indicado en el parámetro URL sContenido = ''; } else if (tipo == 'imagen') { sContenido = ''; // y seguimos más abajo... } else if (tipo == 'videolan') { sContenido = '' + '' + '' + ''; alert(sContenido); } else // esto debe ser un error sContenido = ''; // creamos el DIV con el contenido var lPopContenido = null; lPopContenido = document.createElement('div'); lPopContenido.id = 'contenidoPopUp'; lPopContenido.style.position = 'absolute'; lPopContenido.style.zIndex = '201'; lPopContenido.style.top = '0px'; lPopContenido.style.left = '0px'; lPopContenido.style.width = (ancho + PUMmargenPopContenido*2) + 'px'; lPopContenido.style.height = (alto + PUMmargenPopContenido*2) + 'px'; lPopContenido.style.backgroundColor = '#FFFFFF'; lPopContenido.style.display = 'none'; body.appendChild(lPopContenido); PUMPopContenido = document.getElementById('contenidoPopUp'); PUMPopContenido.innerHTML = '' + '' + '' + '' + '
' + sContenido + '
'; PUMaddEvent(PUMPopMask, "click", cerrarPopUpMultimedia); } bPUMPopupAbierto = true; PUMcentrar(ancho + PUMmargenPopContenido*2, alto + PUMmargenPopContenido*2); PUMPopMask.style.display = 'block'; PUMPopContenido.style.display = 'block'; window.onscroll = PUMcentrar; PUMaddEvent(window, "resize", PUMcentrar); // terminamos en caso de que sea imagen, cargando en background la que sustituirá a la de "wait" // lo hacemos al final no vaya a ser que no existiera aún nada y terminara de cargar la imagen if (tipo=='imagen') { PUMImagenMultimedia = new Image; PUMImagenMultimedia.src = url; PUMImagenMultimedia.onload = PUMswapImagenes; // ya nos avisará cuando termine } } } /** * funciones que cierran el popup; lo hace al pulsar el "cerrar" o al clickar fuera, en la zona gris * * la versión con URL se puede invocar de forma manual (p.e. desde un botón de "cerrar" dentro del iframe) y provoca que al cerrarse el popup * se redirige al usuario a la URL especificada */ function cerrarPopUpMultimediaUrl(url){ cerrarPopUpMultimedia(); if(url!=null){ window.parent.location.href=url; } } function cerrarPopUpMultimedia() { if(gPUMHideSelects){ PUMdisplaySelectBoxes(); } //document.listavideos.lista.style.visibility="visible"; if (PUMPopMask!=null) { if (bPUMPopupAbierto) { bPUMPopupAbierto = false; PUMPopContenido.style.display = 'none'; PUMPopMask.style.display = 'none'; window.onscroll = null; PUMremoveEvent(window, "resize", PUMcentrar); // nos cargamos también del HTML el objeto var body = document.getElementsByTagName('body')[0]; body.removeChild(PUMPopContenido); PUMPopContenido = null; body.removeChild(PUMPopMask); PUMPopMask = null; } } } /** * funciones y variables globales auxiliares (NO PUBLICAS) ================================================== */ var PUMPopMask = null; var PUMPopContenido = null; var PUMImagenMultimedia = null; var bPUMPopupAbierto = false; var bPUMAnchoLiquido = false; var bPUMAltoLiquido = false; var aPUMTamanoEspecificado; var gPUMHideSelects = false; /** * función de centrado de las capas para la primera vez que aparecen, para cuando se termina * de cargar la imagen (si es de tipo "imagen"), cuando se hace scroll o cuando el usuario * cambia la ventana del navegador */ function PUMcentrar(width, height) { if (bPUMPopupAbierto) { // cogemos tamaño de ventana visible var fullWidth = PUMgetViewportWidth(); var fullHeight = PUMgetViewportHeight(); // el fondo de pantalla gris ocupa todo el BODY var theBody = document.getElementsByTagName('body')[0]; //document.documentElement; var scTop = parseInt(theBody.scrollTop,10); var scLeft = parseInt(theBody.scrollLeft,10); PUMPopMask.style.height = fullHeight + "px"; PUMPopMask.style.width = fullWidth + "px"; PUMPopMask.style.top = scTop + "px"; PUMPopMask.style.left = scLeft + "px"; // calculamos ancho del popup a mostrar if (bPUMAnchoLiquido) { width = fullWidth - (PUMmargenPopBordeVentana*2); } else if (width == null || isNaN(width)) { width = PUMPopContenido.offsetWidth; } if (bPUMAltoLiquido) { height = fullHeight - (PUMmargenPopBordeVentana*2); } else if (height == null || isNaN(height)) { height = PUMPopContenido.offsetHeight; } PUMPopContenido.style.width = width + "px"; PUMPopContenido.style.height = height + "px"; PUMPopContenido.style.top = (scTop + ((fullHeight - height) / 2)) + "px"; PUMPopContenido.style.left = (scLeft + ((fullWidth - width) / 2)) + "px"; } } // esta función se llama cuando se carga la imagen referenciada en PUMImagenMultimedia function PUMswapImagenes() { // swapeamos la imagen existente ("wait") por ésta var lImagen = document.getElementById("iPopImagenMultimedia"); lImagen.src = PUMImagenMultimedia.src; // redimensionamos las capas para que quepa la imagen //PUMcentrar(PUMImagenMultimedia.width + PUMmargenPopContenido*2, PUMImagenMultimedia.height + PUMmargenPopContenido*2); } // funciones de gestión de eventos de objetos function PUMaddEvent(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } } function PUMremoveEvent(obj, evType, fn, useCapture){ if (obj.removeEventListener){ obj.removeEventListener(evType, fn, useCapture); return true; } else if (obj.detachEvent){ var r = obj.detachEvent("on"+evType, fn); return r; } else { alert("Handler could not be removed"); } } // funciones de cálculo del tamaño de la página visible function PUMgetViewportHeight() { if (window.innerHeight!=window.undefined) return window.innerHeight; if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight; if (document.body) return document.body.clientHeight; return window.undefined; } function PUMgetViewportWidth() { if (window.innerWidth!=window.undefined) return window.innerWidth; if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth; if (document.body) return document.body.clientWidth; return window.undefined; } /** * ocultar selects (un bug de IE hace que salgan siempre encima de cualquier capa) */ function PUMHideSelectBoxes() { for(var i = 0; i < document.forms.length; i++) { for(var e = 0; e < document.forms[i].length; e++){ if(document.forms[i].elements[e].tagName == "SELECT") { document.forms[i].elements[e].style.visibility="hidden"; } } } } /** * mostrar otra vez los selects ocultos (un bug de IE hace que salgan siempre encima de cualquier capa) */ function PUMdisplaySelectBoxes() { for(var i = 0; i < document.forms.length; i++) { for(var e = 0; e < document.forms[i].length; e++){ if(document.forms[i].elements[e].tagName == "SELECT") { document.forms[i].elements[e].style.visibility="visible"; } } } }