Notificaciones flotantes con JavaScript y CSS

Personalmente – aunque soy programador backend – me gusta que mis interfaces siempre tengan una UI bonita, ¿y a quién no eh xD?. Es por eso que esta entrada se la dedicaré a nuestros amigos de frontend 😉

Imagen de la notificación(Click en la imagen para ver la demo)

HTML




<div class="notification">
    <span class="icon">
        <i class=""></i>
    </span>
    <span class="text"></span>
    <span class="close">
        <i class="fa fa-close"></i>
    </span>
</div>




El marcado HTML es sencillo, solamente consta de un div con 3 span:

  • .icon Contendrá el ícono de acuerdo a la gravedad
  • .text Mensaje a mostrar
  • .close Ícono de cierre

CSS

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
.notification {
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,.1);
    border-radius: 5px;
    display: flex;
    height: 100px;
    justify-content: space-between;
    opacity: 0;
    padding-right: 15px;
    position: absolute;
    right: 30px;
    top: 150px;
    visibility: hidden;
    transition: all .5s ease;
    width: 270px;
}
.notification.visible {
    opacity: .8;
    top: 20px;
    visibility: visible;
}
.notification.info {
    background-color: #2980b9;
}
.notification.error {
    background-color: #e74c3c;
}
.notification.warning {
    background-color: #f39c12;
}
.notification > .icon {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 50px;
}
.notification > .icon > i {
    color: white;
    cursor: default;
}
.notification > .text {
    align-items: center;
    color: white;
    cursor: default;
    display: flex;
    font-size: 13px;
    width: calc(95% - 50px);
    word-wrap: normal;
}
.notification > .close {
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    position: absolute;
    right: 8px;
    top: 5px;
    transition: color .3s ease;
}
.notification > .close:hover {
    color: #fff;
}

El código CSS es realmente muy sencillo. Para la estructura utilizamos Flexbox. El contenedor está divido en 2, la parte izquierda para el ícono y la derecha para el mensaje. El elemento close (X) tiene una posición absolute para poderle ubicar en la esquina superior derecha.
Por defecto la notificación se encuentra 150px debajo del límite superior, para que cuando se le agregue la clase active ésta se deslice hacia arriba gracias a la propiedad transition. Por último veamos el código JavaScript.

JavaScript

function Notificator(htmlElement) {
    
    this.htmlElement = htmlElement;
    this.icon = htmlElement.querySelector('.icon > i');
    this.text = htmlElement.querySelector('.text');
    this.close = htmlElement.querySelector('.close');
    this.isRunning = false;
    this.timeout;
    
    this.bindEvents();
};

Notificator.prototype.bindEvents = function() {
	var self = this;
    this.close.addEventListener('click', function() {
        window.clearTimeout(self.timeout);
        self.reset();
    });
}

Notificator.prototype.info = function(message) {
    if(this.isRunning) return false;
    
    this.text.innerHTML = message;
	this.htmlElement.className = 'notification info';
    this.icon.className = 'fa fa-2x fa-info-circle';
    
    this.show();
}

Notificator.prototype.warning = function(message) {
    if(this.isRunning) return false;
    
    this.text.innerHTML = message;
	this.htmlElement.className = 'notification warning';
    this.icon.className = 'fa fa-2x fa-exclamation-triangle';
    
    this.show();
}

Notificator.prototype.error = function(message) {
    if(this.isRunning) return false;
    
    this.text.innerHTML = message;
	 this.htmlElement.className = 'notification error';
     this.icon.className = 'fa fa-2x fa-exclamation-circle';
     
     this.show();
}

Notificator.prototype.show = function() {
    if(!this.htmlElement.classList.contains('visible'))
        this.htmlElement.classList.add('visible');
    
    this.isRunning = true;
    this.autoReset();
};
    
Notificator.prototype.autoReset = function() {
	var self = this;
    this.timeout = window.setTimeout(function() {
        self.reset();
    }, 5000);
}

Notificator.prototype.reset = function() {
	this.htmlElement.className = "notification";
    this.icon.className = "";
    this.isRunning = false;
};

La clase Notificator recibe por constructor el elemento HTML que representa al notificador. A partir de este elemento extraemos los elementos icon, text y close, para poder acceder a ellas en tiempo de ejecución. La clase tiene métodos para mostrar mensajes, llamados info, warning y error. Al final de cada uno de estos métodos se llama a la función show cuya función es agregar la clase visible al notificador para empezar con la transición. También cambia el estado de la bandera isRunning a true que indica que está ‘corriendo’ actualmente, y por último llamada a la función autoReset, el cual hace una cuenta regresiva de 5 segundos para automáticamente desaparecer la notificación (si es que el usuario no le da a cerrar).

Fíjate que si se cierra manualmente la notificación, cancelamos el Timeout del autoReset con window.ClearTimeout, si no lo hacemos el timeout seguirá operativo y nos causará problemas cuando se lance otra notificación consecutiva (solo se mostrará un corto período de tiempo ya que el timeout sigue corriendo).

Modo de uso

var notificator = new Notificator(document.querySelector('.notificator'));
notificator.info('¡Este tutorial está de pelos!');

Haz click aquí para ver la demo

El código completo lo pueden encontrar en la rama 0.1 del repositorio en GitHub:

gitcat

Espero les haya servido esta entrada dedicada al desarrollo frontend que por cierto, no estaría mal aprender un poquillo 😉

¡Saludos!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s