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.
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