// clase Dialog
/*
*
*
*
*/
function Dialog(containerElementId, generateElements, containerStyles)
{
// parámetros del constructor
this.containerElementId = containerElementId;
this.generateElements = generateElements;
this.containerStyles = containerStyles;
// elementos del DOM que se utilizarán si generateElements es true
this.darkenerElement = null;
this.containerElement = null;
// ruta y nombre del gif animado que da feedback mientras se produce
// una transacción asíncrona
this.loadingFeedbackImage = 'images/ajax-loader.gif';
// flag que nos indican si los elementos están preparados
this.prepared = false;
// métodos
this.show = showDialog;
this.hide = hideDialog;
this.prepareElements = prepareElements;
}
function prepareElements()
{
// si los elementos ya están preparados porque el diálogo se ha mostrado antes,
// no hace falta hacer nada nuevo
if(this.prepared) {
return;
}
// vamos a tener a mano porque lo utilizaremos tarde o temprano
var body = document.getElementsByTagName("body")[0];
// preparar el elemento contenedor del diálogo y el oscurecedor
if(this.generateElements) { // en este caso hay que generar dinámicamente el
// elemento contenedor y el div oscurecedor
// crear un div que oscurecerá el fondo y aplicar sus estilos
this.darkenerElement = document.createElement('div');
this.darkenerElement.setAttribute('style', 'width:100%; height:100%;'
+ 'position:absolute; top:0; left:0;'
+ 'background-color:#000;');
// crear el div contenedor del diálogo y aplicar sus estilos
this.containerElement = document.createElement('div');
this.containerElement.setAttribute('id', this.containerElementId);
for(var key in this.containerStyles)
{
YAHOO.util.Dom.setStyle(this.containerElement, key,
this.containerStyles[key]);
}
// todavia no se muestran
YAHOO.util.Dom.setStyle([this.darkenerElement, this.containerElement],
'display', 'none');
// pegar ambos elementos al elemento
body.appendChild(this.darkenerElement);
body.appendChild(this.containerElement);
} else {
/* el contenedor del diálogo y el oscurecedor ya están en el
* documento y no hay que generarlos, sólo que referenciarlos.
* en este caso se espera tener dos elementos similares a estos,
* y en este orden, en el documento:
*
*
*/
this.darkenerElement = document.getElementById('darkener');
this.containerElement = document.getElementById(this.containerElementId);
} // if-else
/*
// dos retoques al div oscurecedor: aplicar el width y height de body y un padding del margin de body
var bodyComputedSizes = {
'width': YAHOO.util.Dom.getStyle(body, 'width'),
'height': YAHOO.util.Dom.getStyle(body, 'height'),
'margin-top': YAHOO.util.Dom.getStyle(body, 'margin-top'),
'margin-bottom': YAHOO.util.Dom.getStyle(body, 'margin-bottom'),
'margin-left': YAHOO.util.Dom.getStyle(body, 'margin-left'),
'margin-right': YAHOO.util.Dom.getStyle(body, 'margin-right')
}
if(bodyComputedSizes['width']!='auto') // esto descarta IE
{
YAHOO.util.Dom.setStyle(this.darkenerElement, 'width', bodyComputedSizes['width']);
YAHOO.util.Dom.setStyle(this.darkenerElement, 'height', bodyComputedSizes['height']);
YAHOO.util.Dom.setStyle(this.darkenerElement, 'padding-top', bodyComputedSizes['margin-top']);
YAHOO.util.Dom.setStyle(this.darkenerElement, 'padding-bottom', bodyComputedSizes['margin-bottom']);
YAHOO.util.Dom.setStyle(this.darkenerElement, 'padding-left', bodyComputedSizes['margin-left']);
YAHOO.util.Dom.setStyle(this.darkenerElement, 'padding-right', bodyComputedSizes['margin-right']);
}
*/
this.prepared = true;
}
function showDialog(dialogURL, id)
{
this.prepareElements();
// imagen "cargando", como innerHTML (mejor benchmark), al elemento contenedor
this.containerElement.innerHTML = '
';
// ahora hacer aparecer los elementos haciéndolos opacos, desde opacity 0
YAHOO.util.Dom.setStyle([this.darkenerElement, this.containerElement],
'opacity', '0.0');
YAHOO.util.Dom.setStyle([this.darkenerElement, this.containerElement],
'display', 'block');
// hacer opaco el div oscurecedor con una animación
var darkenBackground = new YAHOO.util.Anim(this.darkenerElement,
{ opacity: { to: 0.7 } },
0.8, YAHOO.util.Easing.easeOut);
darkenBackground.animate();
// al mismo tiempo, hacer opaco el contenedor del diálogo con otra animación
var popDialog = new YAHOO.util.Anim(this.containerElement,
{ opacity: { to: 1.0 } },
0.3, YAHOO.util.Easing.easeOut);
popDialog.animate();
// mientras tanto, cargar asincronamente el html del diálogo
var callback =
{
cache:false,
success:function(o)
{
// esto rellenará el contenedor con responseText
document.getElementById(o.argument.containerElementId).innerHTML = o.responseText;
imageBrowser.initializeFromURL('tucolchoneria-imagenes-del-producto.xml.php?idpro=' + id);
},
failure:function(o)
{
o.argument.hide();
},
argument:this
}
// transacción asíncrona
var transaction = YAHOO.util.Connect.asyncRequest('GET', dialogURL,
callback, null);
}
function hideDialog()
{
var hideThisElement = function() {
YAHOO.util.Dom.setStyle(this.getEl(), 'display', 'none');
}
// ocultar contenedor del diálogo con una animación
var popDialog = new YAHOO.util.Anim(this.containerElement, { opacity: { to: 0.0 } },
0.2, YAHOO.util.Easing.easeOut);
popDialog.onComplete.subscribe(hideThisElement); // display:none al diálogo
popDialog.animate();
// aclarar el fondo con otra animación
var lightenBackground = new YAHOO.util.Anim(this.darkenerElement, { opacity: { to: 0.0 } },
0.8, YAHOO.util.Easing.easeOut);
lightenBackground.onComplete.subscribe(hideThisElement); // display:none al elemento oscurecedor
lightenBackground.animate();
}
//final de clase Dialog