0:00 0 0
Boton con doble confirmacion en JAVASCRIPT

Boton con doble confirmacion en JAVASCRIPT

  Sergi |  octubre 202019

Tengo una lucha interna contra JQuery. En los principios de mi experiencia en programación para la WEB, sólo se oía hablar de JQuery y de todo lo fantástico que era. Pero hoy en día, gracias a las estandarizaciones, y al gran aumento del uso de los navegadores web para prácticamente todo, se ha conseguido que JAVASCRIPT ya no necesite de JQuery para poder funcionar correctamente en cualquier navegador moderno. Con moderno me refiero con que sea posterior a ECMAScript 2015, aunque como siempre, habrá ciertas cosas que si queires estar a la última con tus scripts puede que tengas problemas de compatibilidad.

Pero a lo que iba, en mi lucha interna, poco a poco, voy confirtiendo todos los scripts y aplicaciones que tengo escritas en JAVASCRIPT usando JQuery, a una version en JAVASCRIPT PURO. Es el caso que hoy os presento. Yo estaba utilizando un script, muy bueno todo sea dicho, en JQuery, para poder hacer una doble confirmación al pulsar sobre un botón en una página web. A ver si me explico. Al hacer click, el botón pide una confirmación mostrando otro texto, o lo que el programador quiera, y luego una nueva pulsación sobre el botón. Esto es útil, por ejemplo, cuando es un botón de eliminación, así el usuario está obligado a una doble confirmación para poder eliminar, o realizar la acción "peligrosa" en nuestra aplicación.

Como no es mío, el código original es de Josep Viciana (Twitter: @emmgfx) y el nombre original del script es jquery.AutoConfirmButton.js v1.0.0. Por si os insteresa lo podréis encontrar en internet, yo ya ni me acuerdo de dónde lo descargué, y en el blog del autor ya no hay referencia a éste script tan útil. En los enlaces dejaré una copia para que podais descargar la versión que he "traducido". Por lo tanto todo el mérito se lo debemos a él, yo sólo lo he "traducido" para no utilizar JQuery.

Manos a la obra

Para configurar el script se precisa de muy pocas cosas, lo más importante son los callBack de las funciones a ejecutar después de cada click, y para personalizarlos más, los textos o íconos que se mostrarán en el botón. Este es el objeto a enviarÑ

var settings = {
textConfirm: 'Sure?',
textConfirmed: '',
classConfirm: 'btn-warning',
classConfirmed: 'btn-success',
classStandby: 'btn-danger',
disableOnConfirm: true,
cancelTime: 2000,
onFirstClickBefore: function (btn) {
btn.innetHtml = settings.textConfirm;
},
onFirstClickAfter: function(element){},
onConfirm: function(element){},
allowFirstClick: true
};

La clase classConfirmed la he agregado yo en esta versión, en la versión original no está. Se utiliza una vez se ha confirmado con el segundo click. Me pareció interesante ponerla, ya que, en algunas ocasiones, puede ser interesante cambiar el color del botón una vez realizada la acción.

Como usarlo

El uso del script es muy simple, y casi que parecido a como lo haríamos en JQuery, básicamente es autoConfirmacion(selector,opciones); en donde opciones es el objeto que hemos visto unas líneas más arriba.

Al utilizar selectores puedes enviar un ID o una CLASE CSS para así aplicarlo en más de un botón, por ejemplo, cuando tienes una tabla con una lista de clientes y el botón ELIMINAR para cada una de las líneas de la lista.

Aquí un ejemplo real de cómo lo utilicé, precisamente, en una lista para eliminar clientesÑ

    autoConfirmacion('.btnEliminar', {
disableOnConfirm: false,
classConfirm: 'text-warning',
classConfirmed: 'text-success',
classStandby: 'text-danger',
textConfirm: 'Confirma que desea eliminar el registro',
cancelTime: 2000,
onConfirm: function (btn) {
//hacer una llamada a una API
if (data === true) {
//elimina la fila
}
else {
btn.innerHTML = btn.dataset.text;
btn.classList.remove('text-success');
btn.classList.add('text-danger');
//muestra mensaje de error
}
});

Espero que con este ejemplo os quede claro como utilizar el script.

El código

Este es el código de mi versión, siempre estoy gustoso de recibir críticas o nuevas ideas para mejorarlo.

/**
* Double confirmation for the button with pure JAVASCRIPT
* autoconfrimacion v1.0.1
* Original Script from JQeury
*
* jquery.AutoConfirmButton.js v1.0.0
* Author: Josep Viciana
* Twitter: @emmgfx
* Blog: http://www.emm-gfx.net
*
* @param {object} selector select of the object or objects
* @param {object} options setup options
*/
function autoConfirmacion(selector, options) {
var settings = {
textConfirm: 'Sure?',
textConfirmed: '',
classConfirm: 'btn-warning',
classConfirmed: 'btn-success',
classStandby: 'btn-danger',
disableOnConfirm: true,
cancelTime: 2000,
onFirstClickBefore: function (btn) {
btn.innetHtml = settings.textConfirm;
},
onFirstClickAfter: function(element){},
onConfirm: function(element){},
allowFirstClick: true
};
settings = _mergeOptions(settings, options);
var objects = document.querySelectorAll(selector);
for (var i = 0; i < objects.length; i++) {
var btn = objects[i];
btn.onclick = function () {
if (parseBoolean(this.dataset.clicked, false) === true) {
this.dataset.clicked = false;
this.innerHTML = settings.textConfirmed;
this.classList.remove(settings.classConfirm);
this.classList.add(settings.classConfirmed);
if (settings.disableOnConfirm) {
this.classList.add("disabled");
this.disabled = true;
}
if (settings.onConfirm !== null && settings.onConfirm !== undefined) settings.onConfirm(this);
}
else {
this.dataset.text = this.innerHTML;
settings.onFirstClickBefore(this);
if (settings.allowFirstClick) {
this.dataset.clicked = true;
this.innerHTML = settings.textConfirm;
this.classList.remove(settings.classStandby);
this.classList.add(settings.classConfirm);
setTimeout(function (me) {
if (parseBoolean(me.dataset.clicked, false) === true) {
me.dataset.clicked = false;
me.classList.remove(settings.classConfirm);
me.classList.add(settings.classStandby);
me.innerHTML = me.dataset.text;
}
}, settings.cancelTime, this);
if (settings.onFirstClickAfter !== null && settings.onFirstClickAfter !== undefined) settings.onFirstClickAfter(this);
}
}

};
}
}

Y de regalo

Esta función es muy útil para opciones de configuración. Ahí va de regalo (creo que en otros blogs también la he incluido)

/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
*
* @param {object} obj1 origin
* @param {object} obj2 new object to merge
* @returns {object} obj3 a new object based on obj1 and obj2
*/
function _mergeOptions(obj1, obj2) {
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname1 in obj2) { obj3[attrname1] = obj2[attrname1]; }
return obj3;
}

Happy coding

#javascript #utilidades

0 Comentarios

 
 
 

Archivo