Mensaje Javascript 2

---

En esta segunda entrada referente a cómo mostrar un mensaje al usuario de un sitio web, le agregaremos tres parámetros a nuestra función showMessage:

1. Tipo de mensaje, el cual determinará el color de fondo del contenedor del mensaje.
2. Tiempo, será la cantidad de milisegundos que el mensaje deberá estar visible.
3. Callback, será una referencia a una función que se desee ejecutar después de que el mensaje se destruya.

Tal como en el ejercicio anterior, iremos cubriendo uno a uno de los elementos hasta tener el script completo.

Para manejar un tipo de mensaje, vamos a agregar un parámetro msgType que podrá tener como valores: 'error', 'success' y habrá un color default para cuando no se reciba este parámetro.

function showMessage(msg, msgType)

Ahora modificaremos un poco el código que establece el estilo de nuestra variable message y esto se debe a que el color de fondo dependerá del tipo de mensaje:

message.css({
    'height': '20px',
    'width': '100%',
    'position': 'fixed',
    'top': '-28px',
    'left': '0px',
    'margin': '0px',
    'background-color':
        msgType == 'error' ? '#d83a28' : (msgType == 'success' ? '#5aa250' : '#5f8be3'),
    'color': '#FFFFFF',
    'font-size': '15px',
    'text-align': 'center',
    'padding-top': '4px',
    'padding-bottom': '4px',
    'font-family': 'Verdana'
}).text(msg);

Se diría que le estamos asignando el color de una forma poco elegante, pero podríamos hacerlo un poco mejor si creamos una función llamada getMsgColor que reciba como parámetro el tipo de mensaje a mostrarse y nos devuelva el código del color.    Con este cambio el código quedaría de la siguiente manera:

function getMsgColor(msgType) {
    switch (msgType) {
        case 'error': return '#d83a28';
        case 'success': return '#5aa250';
        default: '#5f8be3';
    }
}

function showMessage(msg, msgType) {
    var message = $('<div></div>');
    message.css({
        'height': '20px',
        'width': '100%',
        'position': 'fixed',
        'top': '-28px',
        'left': '0px',
        'margin': '0px',
        'background-color': getMsgColor(msgType),
        'color': '#FFFFFF',
        'font-size': '15px',
        'text-align': 'center',
        'padding-top': '4px',
        'padding-bottom': '4px',
        'font-family': 'Verdana'
    }).text(msg);
    ... aquí continúa la función showMessage

La ventaja es que el código queda mucho más limpio y será muy fácil el agregar un nuevo tipo de mensaje con su color respectivo.    Probemos nuestra nueva función con el botón que ya tenemos (del ejercicio anterior):

<input type="button" value="Show message" onclick="return showMessage('Código y datos', 'success')" />

Para cubrir el segundo punto agregaremos otro parámetro llamado timeout que determinará el tiempo (en milisegundos) que deberá mostrarse el mensaje:

function showMessage(msg, msgType, timeout)

Y antes de mostrar nuestor mensaje verificaremos si recibimos un valor para nuestro parámetro timeout o bien le asignamos el tiempo default:

if (!timeout) timeout = 3500;
message.animate(
    { 'top': '0px' },
    'normal',
    null,
    function() {
        window.setTimeout(function() {
            message.animate({ 'top': '-28px' }, 'normal', null, function() { message.remove(); });
        }, timeout);
    }
);

Finalmente también nuestra función queremos que pueda mandar a llamar a una función determinada por el usuario para cuando haya sido destruído el mensaje.    Vamos a agregar un parámetro llamado callback:

function showMessage(msg, msgType, timeout, callback)

Al final el código de nuestro ejercicio debería quedar como el que a continuación coloco:

<input type="button" value="Show message" onclick="return showMessage('Código y datos', 'success', 2000, sayHello)" />
<script type="text/javascript">
    function getMsgColor(msgType) {
        switch (msgType) {
            case 'error': return '#d83a28';
            case 'success': return '#5aa250';
            default: return '#5f8be3';
        }
    }
    function showMessage(msg, msgType, timeout, callback) {
        var message = $('<div></div>');
        message.css({
            'height': '20px',
            'width': '100%',
            'position': 'fixed',
            'top': '-28px',
            'left': '0px',
            'margin': '0px',
            'background-color': getMsgColor(msgType),
            'color': '#FFFFFF',
            'font-size': '15px',
            'text-align': 'center',
            'padding-top': '4px',
            'padding-bottom': '4px',
            'font-family': 'Verdana'
        }).text(msg);
        $(document.body).append(message);
        if (!timeout) timeout = 3500;
        message.animate(
            { 'top': '0px' },
            'normal',
            null,
            function() {
                window.setTimeout(function() {
                    message.animate({ 'top': '-28px' }, 'normal', null, function() { message.remove(); if (callback) callback(); });
                }, timeout);
            }
        );
    }
    function sayHello() {
        alert('Hola mundo!');
    }
</script>

Espero les sea de mucha utilidad.