Código fuente de los ejemplos de aplicación de la clase formEmerge

Estos es el código fuente del script y estilo situado en el encabezado del documento Ejemplos de aplicación de formEmerge.

Código JavaScript

//Una instancia de un calendario para usar en el ejemplo
var miCalendario = null;
//Una instancia de un emergente para el ejemplo
var emergeCalendario = null;
//Una instancia para el formulario de envío de datos
var miForm = null;
//Instancias para el ejemplo de la calculadora
var unaCalculadora = null;
var miCalc = null;
var emergeCalculadora = null;
//Una instancia para un bloc de notas y otro para opciones
var emergeNotas = null;
var emergeOpciones = null;

var emergeContextual = null;
var emergeMensaje = null;

//Carga de la página, donde creamos formularios emergentes
window.onload = function() {

    // EJEMPLO DEL CALENDARIO --------------------------------

    //Creamos el primer emergente para el calendario
    emergeCalendario = new formEmerge("emergeCalendario", "Calendario",
            true, 2, "marco");
    //Componemos un interior para ubicar el calendario
    var html = "<div class='previo-cal'>" +
    "<input type='button' value='&lt;' " +
    "onclick = 'miCalendario.mueveCalendar(-1)' />" +
    "<input type='text' id='ubica-titulo' value='' size='8' " +
    "onfocus = 'miCalendario.entraFecha(this)' " +
    "onblur = 'miCalendario.mueveMesAnyo(this)' />" +
    "<input type='button' value='&gt;' " +
    "onclick = 'miCalendario.mueveCalendar(1)' />" +
    "</div>" +
    "<div id='ubica-calendario'></div>";
    //Ponemos esa composición en el interior del emergente
    emergeCalendario.nuevoInterior(html);
    //Establecemos el cuadro de fecha como objeto respuesta.
    emergeCalendario.idObjetoRespuesta = "cuadro-fecha";
    //Cuando se abra el calendario, situamos la fecha del cuadro
    emergeCalendario.eventoAbrir = true;
    emergeCalendario.ejecutaEventoAbrir = function (){
        //Construimos la hoja del calendario según la fecha del objeto
        //respuesta. Si no es válida o está en blanco ponemos la fecha
        //actual. compruebaFecha() y fechaActual() son dos funciones
        //globales de calendar.js
        var fecha = "";
        var arrFecha = compruebaFecha(emergeCalendario.respuesta);
        if (arrFecha == null) {
            fecha = fechaActual()[4];
            emergeCalendario.respuesta = fecha;
        } else {
            fecha = arrFecha[3]
        }
        miCalendario.situaFecha(fecha);
    }
    //Cuando pulsemos aceptar extraemos la fecha del calendario
    emergeCalendario.eventoAceptar = true;
    emergeCalendario.ejecutaEventoAceptar = function(){
         emergeCalendario.respuesta = miCalendario.devuelveFecha("fecha-larga");
    }
    //Creamos un objeto calendario, pero no construimos inicialmente
    //ninguna hoja de calendario, pues esto se hará con el evento abrir
    //del emergente que llama al método situaFecha() del calendario que
    //creará la hoja de ese mes y fecha.
    var hoy = fechaActual();
    var fechaHoy = hoy[1]+"/"+hoy[2]+"/"+hoy[3];
    miCalendario = new calendar("miCalendario", "ubica-calendario",
            "ubica-titulo", fechaHoy, true);




    // EJEMPLO DEL FORMULARIO PARA ENVIO DE DATOS ---------------------
    //Creamos otro emergente para envío de datos
    miForm = new formEmerge("miForm", "Enviar datos",
            true, 3, "marco", "miform.php", "post");
    //Componemos un literal HTML para los campos de la primera pestaña
    var html1 = "<label>Nombre:<input type='text' name='nombre' value='' " +
    "size='35' class='fuente-mi-form' />" +
    "</label><br />" +
    "<label>Dirección:<input type='text' name='direccion' value='' " +
    "size='35' class='fuente-mi-form' />" +
    "</label><br />" +
    "<label>E-mail:<input type='text' name='email' value='' " +
    "size='35' class='fuente-mi-form' />" +
    "</label><br />" +
    "<label>Cuestión:<br /><textarea name='cuestion' rows='7' cols='40' "+
    "class='fuente-mi-form'></textarea>" +
    "</label>";
    //Componemos otro literal para la segunda pestaña
    var html2 = "<label>Edad:<input type='text' name='edad' value='' " +
    "size='10' class='fuente-mi-form' />" +
    "</label><br />" +
    "<label>Profesión:<input type='text' name='profesion' value='' " +
    "size='35' class='fuente-mi-form' />" +
    "</label><br />" +
    "<label>Aficiones:<input type='text' name='aficiones' value='' " +
    "size='35' class='fuente-mi-form' />" +
    "</label><br />";
    //Llenamos un array con los nombres de las pestañas
    var arrayPestanyas = new Array("Personales", "Otros datos");
    //Llenamos otro array con los contenidos literales HTML
    var arrayHtmls = new Array(html1, html2);
     //Creamos las pestañas con esos dos array y les damos
     //ancho, alto y "auto" para la propiedad overflow
    miForm.creaTabs(arrayPestanyas, arrayHtmls, "23em", "14em", "auto");


    //EJEMPLO DEL FORMULARIO EMERGENTE CON CALCULADORA -----------------
    //Creamos un objeto calculadora en un div del documento
    unaCalculadora = new calculadora("unaCalculadora", "div-una-calculadora");
    //Creamos un emergente para OTRO objeto calculadora
    emergeCalculadora = new formEmerge("emergeCalculadora", "Calculadora",
            false, 0, "marco");
    //Otro objeto calculadora para el emergente anterior, poniéndolo en su
    //interior.
    miCalc = new calculadora("miCalc", PID + "emergeCalculadoraInterior");


    //EJEMPLO DEL FORMULARIO EMERGENTE BLOC NOTAS -------------------
    //Creamos un emergente para contener el textarea de notas
    emergeNotas = new formEmerge("emergeNotas", "Notas", false, 0);
    //Componemos un literal HTML para el interior
    var interiorNotas = "<textarea rows='10' cols='30' id='textarea-notas' " +
    "style='font-size: 16px; font-family: Courier New; font-style: normal; " +
    "font-weight: normal;'></textarea><br />" +
    "<input type='button' value='opciones' " +
    "onclick = \"emergeOpciones.abrir('', '', " +
    "emergeNotas.form().offsetLeft+emergeNotas.form().offsetWidth, " +
    "emergeNotas.form().offsetTop)\" />";
    //Ponemos ese literal en el interior
    emergeNotas.nuevoInterior(interiorNotas);

    //Creamos otro emergente con opciones para cambiar el estilo de la
    //fuente en el textarea de emergeNotas
    emergeOpciones = new formEmerge("emergeOpciones", "Opciones", false, 3);
    //Componemos el literal HTML para el interior
    var contenidoOpciones = "<label>Tamaño fuente: " +
    "<input type='text' id='tamanyo-fuente-notas' value='' " +
    "size='2' maxlength='2' "+
    "onblur = \"limitaValor(this, 'entero', 6, 48)\" />" +
    "<label><br />" +
    "<label>Fuente: " +
    "<select id='fuente-notas'>" +
    "<option value='Courier New'>Courier New</option>" +
    "<option value='Times New Roman'>Times New Roman</option>" +
    "<option value='Palatino Linotype'>Palatino</option>" +
    "<option value='Arial'>Arial</option>" +
    "<option value='Arial Narrow'>Arial Narrow</option>" +
    "</select>" +
    "<label><br />" +
    "<label>Itálica: " +
    "<input type='checkbox' id='italica-notas' />" +
    "<label><br />" +
    "<label>Negrita: " +
    "<input type='checkbox' id='negrita-notas' />" +
    "<label>";
    //Ponemos ese literal en el interior
    emergeOpciones.nuevoInterior(contenidoOpciones);
    //Activamos el evento al abrir el formulaior para que llame a una
    //función auxiliar opcionesNotas(salida) que está en este script pero
    //fuera de este window.onload. Con salida=false toma el estilo de la
    //fuente (tamaño, familia, itálica, negrita) y los pone en los
    //cuadros de emergeOpciones
    emergeOpciones.eventoAbrir = true;
    emergeOpciones.ejecutaEventoAbrir = function(){
        opcionesNotas(false);
    }
    //Activamos los eventos aceptar y aplicar, ambos con la misma
    //función opcionesNotas(salida) pero con salida = true para hacer
    //el proceso contrario: poner las opciones de emergeOpciones en
    //emergeNotas
    emergeOpciones.eventoAceptar = true;
    emergeOpciones.ejecutaEventoAceptar = function(){
        opcionesNotas(true);
    }
    emergeOpciones.eventoAplicar = true;
    emergeOpciones.ejecutaEventoAplicar = function(){
        opcionesNotas(true);
    }


    //EJEMPLO DEL FORMULARIO PARA MENÚ CONTEXTUAL ---------------------
    //Un emergente para mensajes
    emergeMensaje = new formEmerge("emergeMensaje", "", false, 0);
    //Este es el emergente para el contextual. Se abre
    //con pantalla y sin botones.
    emergeContextual = new formEmerge("emergeContextual", "", true, 0);
    //Desactivamos la barra del título del emergente
    emergeContextual.form("Barra").style.display = "none";
    //Aplicamos un evento a la pantalla para que cuando hagamos click
    //se cierre el contextual
    document.getElementById(PID + "pantalla").onclick = cerrarFormularios;
    //Adjudicamos eventos a todos los elementos del documento que sean de
    //la clase "contextual". La función arrayClassName() la hice para
    //IE que no admite getElementsByClassName().
    var elementosContextuales = arrayClassName("contextual");
    for (var i=0; i<elementosContextuales.length; i++){
        elementosContextuales[i].onclick = abreContextual;
    }



}//fin del window.onload



//Entradas de menú para toda clase de elementos
var menuGeneral = "<a class='a-contextual' " +
"href='javascript: contextual(\"tag\")'>Tag</a><br />" +
"<a class='a-contextual' " +
"href='javascript: contextual(\"dom\")'>Analiza DOM</a><hr />" +
"<a class='a-contextual' " +
"href='javascript: contextual(\"html\")'>Html</a><br />" +
"<a class='a-contextual' "+
"href='javascript: contextual(\"texto\")'>Texto</a>";
//Entradas de menú para elementos <input>
var menuInput = "<a class='a-contextual' " +
"href='javascript: contextual(\"valor\")'>Valor</a><br />" +
"<a class='a-contextual' " +
"href='javascript: contextual(\"tipo\")'>Tipo</a>";

//En esta variable global se guarda el elemento que genera el contextual
var elementoContextual = null;

/* Al abrir el contextual se guarda la referencia
 * al elemento sobre el que se hizo click.
 */

function abreContextual(evento){
    //Buscamos el evento con mi función recogeEvento()
    //para unificar diferencias en IE, FF, OP y SA.
    //Actualizamos la referencia elementoContextual
    //y obtenemos el punto x,y del evento
    var evt = recogeEvento(evento);
    elementoContextual = evt.element;
    var izquierda = evt.x;
    var arriba = evt.y;
    //Seleccionamos el menú que queremos presentar según el
    //contexto. En este ejemplo hacemos una diferenciación para
    //los elementos input.
    var interior = menuGeneral;
    if (elementoContextual.tagName.toLowerCase() == "input"){
        interior += "<hr />" + menuInput;
    }
    //Abrimos el menú contextual
    emergeContextual.abrir(interior, "", izquierda, arriba);
}

/* Con esto ejecutamos las entradas del contextual.
 * El argumento queHacer trae uno de los posibles valores
 * para ejecutar una acción de menú.
 */

function contextual(queHacer){
    switch (queHacer){
        //ENTRADAS DE MENÚ GENERAL
        case "tag": {
            //Esto simplemente da un alert sobre el tagName
            alert("Este elemento es un <" +
            elementoContextual.tagName + ">");
            break;
        }
        case "dom": {
            //La función analizaDOM() es una construcción propia que
            //sirve para analizar el elemento: tag, hijos, atributos
            //y estilo actual.
            var html = analizaDOM(elementoContextual);
            //Abrimos el emergente de mensajes para presentarlo.
            //La posición izquierda arriba la tomamos del emergente
            //contextual usando su médoto form() para acceder al
            //elemento <form>
            emergeMensaje.abrir(html, "Analizador del DOM",
                    emergeContextual.form().offsetLeft +
                    emergeContextual.form().offsetWidth,
                    emergeContextual.form().offsetTop,
                    "20em", "10em", "auto");
            break;
        }
        case "html": {
            //Extraemos el literal HTML del elemento
            var html = elementoContextual.innerHTML;
            if (html == "") {
                //hemos de poner algo distinto de vacío para que el interior
                //del emergente vacie el contenido anterior.
                html = "&nbsp;"
            } else {
                //Le quitamos los caracteres reservados pues lo vamos a
                //a presentar como un literal de texto
                html = html.replace(/&/g, "&amp;");
                html = html.replace(/</g, "&lt;");
                html = html.replace(/>/g, "&gt;");
            }
            //Abrimos el emergente de mensajes para presentarlo.
            emergeMensaje.abrir(html, "HTML del elemento",
                    emergeContextual.form().offsetLeft +
                    emergeContextual.form().offsetWidth,
                    emergeContextual.form().offsetTop,
                    "20em", "10em", "auto");
            break;
        }
        case "texto": {
            //La funcion getInnerText() es una construcción propia
            //para extraer los nodos texto de un elemento, pues FF
            //no admite elemento.innerText que IE tiene.
            var texto = getInnerText(elementoContextual);
            if (texto == "") texto = "&nbsp;"
            //Abrimos el emergente de mensajes para presentarlo.
            emergeMensaje.abrir(texto, "Texto interior",
                    emergeContextual.form().offsetLeft +
                    emergeContextual.form().offsetWidth,
                    emergeContextual.form().offsetTop,
                    "20em", "10em", "auto");
            break;
        }
        //ENTRADAS DE MENÚ PARA LOS INPUT
        case "valor": {
            //Esto nos da el atributo value de un input
            alert("Su valor es \"" +
            elementoContextual.value + "\"");
            break;
        }
        case "tipo": {
            //Esto nos da el atributo type de un input
            alert("Su tipo es \"" +
            elementoContextual.type + "\"");
            break;
        }

    }
}

//Función auxiliar para emergeNotas:
//Recibe (con salida=false) los valores de fuente del textarea de
//notas y lo pone en las opciones. Con salida=true hace la operación
//inversa.
function opcionesNotas(salida){
    var textareaNotas = document.getElementById("textarea-notas");
    if (textareaNotas != null) {
        //Gestiona la familia de la fuente
        var elemento = document.getElementById("fuente-notas");
        if (elemento != null) {
            if (salida) {
                textareaNotas.style.fontFamily = elemento.value;
            } else {
                elemento.value = textareaNotas.style.fontFamily;
            }
        }
        //Gestiona el tamaño de la fuente
        elemento = document.getElementById("tamanyo-fuente-notas");
        if (elemento != null) {
            if (salida) {
                textareaNotas.style.fontSize = parseInt(elemento.value) + "px";
            } else {
                elemento.value = parseInt(textareaNotas.style.fontSize);
            }
        }
        //Gestiona itálica
        elemento = document.getElementById("italica-notas");
        if (elemento != null) {
            if (salida) {
                if (elemento.checked) {
                    textareaNotas.style.fontStyle = "italic";
                } else {
                    textareaNotas.style.fontStyle = "normal";
                }
            } else {
                if (textareaNotas.style.fontStyle == "italic") {
                    elemento.checked = true;
                } else {
                    elemento.checked = false;
                }
            }
        }
        //Gestiona negrita
        elemento = document.getElementById("negrita-notas");
        if (elemento != null) {
            if (salida) {
                if (elemento.checked) {
                    textareaNotas.style.fontWeight = "bold";
                } else {
                    textareaNotas.style.fontWeight = "normal";
                }
            } else {
                if (textareaNotas.style.fontWeight == "bold") {
                    elemento.checked = true;
                } else {
                    elemento.checked = false;
                }
            }
        }                   
    }
}

Estilo CSS

/* ESTILO DEL CALENDARIO ---------------------------------------
   bloque div previo al calendario con 2 botones y un cuadro
   de texto para cambiar de mes y año */

div.previo-cal {
    text-align: center;
    }
div.previo-cal input {
    font: 0.85em 'Courier New';
    text-align: center;
    }

/* El div donde ubicaremos la tabla del calendario */

div#ubica-calendario{
    text-align: center;
    }

/* La propia tabla del calendario con sus celdas */

div#ubica-calendario table {
    font: 0.9em Courier New;
    border-collapse: collapse;
    /* para poder centrar la tabla en el div */
    display: inline;
    }
div#ubica-calendario table th {
    color: black;
    padding-left: 0.5em;
    padding-right: 0.5em;
    }
div#ubica-calendario table td {
    color: black;
    font-weight: bold;
    text-align: center;
    border: gray solid 1px;
    }

    
/* ESTILO PARA LA CALCULADORA --------------------------------
   sobreescribimos algún estilo del archivo calculadora-objeto.css
   para adaptarlo al formulario emergente */

div.PRECALCcalculadora {
    border: gray solid 1px;
    background-color: rgb(230,230,205);
    }

/* ESTILO PARA EL FORMULARIO QUE ENVÍA DATOS-------------------- */

.fuente-mi-form {
    font: 0.8em Courier New;
    }

/* ESTILO PARA EL FORMULARIO DE PROPIEDADES--------------------- */

ul.lista-propiedades {
    margin-left: 0;
    padding-left: 0;
    }
ul.lista-propiedades li {
    margin-left: 1.2em;
    padding-left: 0;
    }
ul.lista-propiedades ul {
    margin-left: 0em;
    padding-left: 0;
    }
ul.lista-propiedades ul li {
    margin-left: 1em;
    padding-left: 0;
    }

/* ESTILO PARA EL FORMULARIO POP-UP ---------------------------- */

a.a-contextual {
    padding: 0.1em;
    text-decoration: none;
    font-family: Arial;
    font-size: 0.9em;
    color: black;
    }

a.a-contextual:focus, a.a-contextual:hover, a.a-contextual:active  {
    background-color: rgb(49, 99, 98);
    color: white;
    }