En el post anterior de este blog hablé de las ventajas de la librería "alertify.js". Y aunque es posible personalizar los colores de los avisos editando sus archivos .css creo que falta un pequeño detalle.JavaScript provee el método o función "alert" para mostrar un cuadro de diálogo y mediante el podemos notificar lo que queramos al usuario. A mi gusto es algo escueto porque solo muestra texto, no se puede asignar un icono acorde al aviso ni tampoco personalizar el título de la ventana; por su parte VBScript aporta una función llamada "MsgBox" que si nos permite hacer todo lo que mencionamos pero tiene la desventaja de solo funcionar en Internet Explorer (desconozco si funcione en Edge). Bien, ¿cómo podríamos asignar iconos al diálogo alert de alertify.js?, los invito a seguir leyendo este post para averiguarlo.
VBScript es un lenguaje propiedad de Microsoft del lado del cliente, es decir funciona directamente en el navegador web del usuario. Está basado en Visual Basic1 y por lo tanto hereda la función MsgBox para mostrar avisos al usuario, su funcionamiento es prácticamente igual a la versión para Visual Basic.
<script language="VBScript">
MsgBox "Hello world!"
</script>
Esto mostrará un aviso muy similar al creado con la función alert de JavaScript.
Usando VBScript
Usando JavaScript:
En cambio, después del parámetro título podemos asignar un icono y si lo deseamos podemos reemplazar el título de la ventana de la siguiente manera:
<script language="VBScript">
MsgBox "Hello world!", 48, "Titulo de la ventana"
</script>
Esto mostrará un aviso con un icono de símbolo de información.
Esto mostrará un aviso con un icono de símbolo de exclamación o aviso en color amarillo (atención).
<script language="VBScript">
MsgBox "Hello world!", 16, "Titulo de la ventana"
</script>
Esto mostrará un aviso con un icono de símbolo de error.
<script language="VBScript">
MsgBox "Hello world!", 16, "Titulo de la ventana"
</script>
Pueden visitar la web MsgBox Constants para conocer todas las modalidades de la función MsgBox. Ahora bien, como mencioné al principio, esto solo funciona en Internet Explorer; ni Chrome ni Firefox soportan VBScript por lo que es una grave limitación si queremos usar esto en nuestro proyecto web. ¿Hay forma de simular esto en alertify.js?, sí, si la hay y a continuación muestro como.
No soy experto en el uso de alertify.js aclaro, solo lo probé, seguí las indicaciones de como usarlo y me resolvió un problema, luego usando Chrome fuí analizando la estructura del aviso mostrado y buscando en el código fuente de la librería donde se encontraban tales secciones, vi sus raíces y luego implementé mis propios métodos basados en los que ya existían para generar nuevos diálogos. Así que por análisis y un poco de prueba y error pude crear nuevos diálogos en alertify.js.
Entonces para crear nuestros métodos para mostrar iconos en alertify.js haremos lo siguiente:
Dentro de la carpeta lib que se obtiene al descomprimir el archivo de la librería (0.3.11) encontraremos dos archivos: alertify.js y alertify.min.js. El archivo alertify.min.js es la versión compacta de alertify.js, es decir, no tiene saltos de línea ni ningún otro separador, por lo que es muy poco legible, pero en cambio mide tan solo 8 Kb contra 20 Mb que mide su contraparte expandida; lo que lo hace ideal para usarse en proyectos donde no podemos tener esperando al usuario hasta que descargue el archivo.
Nos concentraremos entonces en el archivo alertify.js. Abriremos algún editor de textos e iremos a la línea 615 del archivo original y justo bajo la línea alert : function (message, fn, cssClass) { _alertify.dialog(message, "alert", fn, "", cssClass); return this; }, agregaremos lo siguiente:
/* Custom alerts */
info : function (message, fn, cssClass) { _alertify.dialog(message, "info", fn, "", cssClass); return this; },
warning : function (message, fn, cssClass) { _alertify.dialog(message, "warning", fn, "", cssClass); return this; },
fail : function (message, fn, cssClass) { _alertify.dialog(message, "fail", fn, "", cssClass); return this; },
/* Custom alerts */
Con esto definiremos las entradas para las funciones info, warning y fail que usaremos para crear nuestra emulación del diálogo MsgBox.
Iremos ahora a la línea 264 del archivo original, reemplazaremos el texto
if (type === "prompt") html += "<div id=\"alertify-form\">";
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
if (type === "prompt") html += dialogs.input;
html += dialogs.buttons.holder;
html += "</article>";
if (type === "prompt") html += "</div>";
Por:
if (type === "prompt")
{
//prompt
html += "<div id=\"alertify-form\">";
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
html += dialogs.input;
html += dialogs.buttons.holder;
html += "</article>";
html += "</div>";
//prompt
}
else if (type === "info")
{
//info msgbox
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/info.png' alt='Info alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//info msgbox
}
else if (type === "warning")
{
//warning msgbox
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/warning.png' alt='Warning alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//warning msgbox
}
else if (type === "fail")
{
//fail msgbox, thanks to http://www.forosdelweb.com/f53/dos-divs-misma-linea-407192/ and https://www.dariobf.com/centrar-verticalmente-con-css-6-formas-diferentes-de-lograrlo/
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/error.png' alt='Error alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//fail msgbox
}
else
{
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
html += dialogs.buttons.holder;
html += "</article>";
}
Ahora hemos definido el código html para nuestros nuevos cuadros de diálogo info, warning y fail y hemos dejado intactos los diálogos originales (alert y prompt).
Finalmente, un poco más abajo del código fuente que hemos insertado localizaremos la siguiente instrucción: case "alert". Debajo de la instrucción break que cierra a alert (el método original) colocaremos esto:
/* custom alerts */
case "info":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
case "warning":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
case "fail":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
/* custom alerts */
Estos son los retoques finales, nuestros diálogos lucirán iguales que el de la función alert, pero con la diferencia de que mostrarán un icono acorde al tipo de diálogo.
Nota: Hay que especificar la ruta de nuestra imagen en <img src='xxx' alt='Error alert' width='30' border='0' align='absmiddle'> donde xxx corresponde a js/alert/error.png que es donde yo estoy poniendo mis imágenes al instalar la librería alertify.js modificada.
Eso es todo, ahora solo procederemos a llamar el método fail de alertify.js y estos son los resultados:
<script language="JavaScript">
alertify.fail("Hello world!");
</script>
Si deseamos crear su versión compacta en nuestro navegador web ingresaremos la siguiente dirección web: https://jscompress.com/ , copiaremos todo el código fuente de nuestra librería, presionaremos el botón "Compress JavaScript", descargaremos el archivo generado y lo llamaremos alertify.min.js y reemplazaremos al archivo original en nuestra carpeta. Listo, ya tenemos una versión mejorada de los cuadros de aviso de alertify.js.
Recuerden que la librería se distribuye originalmente bajo licencia MIT, esta es una licencia muy permisiva, por lo que no es necesario que nuestro proyecto derivado se distribuya bajo la misma licencia, incluso puede ir a parar a proyectos privados, pero, en lo personal creo que es muy poco ético apoderarse de un proyecto así y no dar ningún tipo de reconocimiento. Aclaro que no estoy tratando de imponer mi postura pues la licencia permite hacer esto y ya es cuestión de cada quien que hará, solo doy una recomendación.
Del mismo modo los iconos usados para crear los nuevos cuadros de diálogo de alertify.js son tomados del proyecto Nuvola, mismos que son distribuidos bajo licencia LGPL. Nota: el proyecto ya no está activo en la red desde hace algunos años (la web parece encontrarse en re-estructuración), pero los iconos pueden aún descargarse vía el proyecto "Wayback Machine".
<script language="VBScript">
MsgBox "Hello world!"
</script>
Esto mostrará un aviso muy similar al creado con la función alert de JavaScript.
Usando VBScript
Usando JavaScript:
En cambio, después del parámetro título podemos asignar un icono y si lo deseamos podemos reemplazar el título de la ventana de la siguiente manera:
<script language="VBScript">
MsgBox "Hello world!", 48, "Titulo de la ventana"
</script>
Esto mostrará un aviso con un icono de símbolo de información.
Esto mostrará un aviso con un icono de símbolo de exclamación o aviso en color amarillo (atención).
<script language="VBScript">
MsgBox "Hello world!", 16, "Titulo de la ventana"
</script>
Esto mostrará un aviso con un icono de símbolo de error.
<script language="VBScript">
MsgBox "Hello world!", 16, "Titulo de la ventana"
</script>
Pueden visitar la web MsgBox Constants para conocer todas las modalidades de la función MsgBox. Ahora bien, como mencioné al principio, esto solo funciona en Internet Explorer; ni Chrome ni Firefox soportan VBScript por lo que es una grave limitación si queremos usar esto en nuestro proyecto web. ¿Hay forma de simular esto en alertify.js?, sí, si la hay y a continuación muestro como.
No soy experto en el uso de alertify.js aclaro, solo lo probé, seguí las indicaciones de como usarlo y me resolvió un problema, luego usando Chrome fuí analizando la estructura del aviso mostrado y buscando en el código fuente de la librería donde se encontraban tales secciones, vi sus raíces y luego implementé mis propios métodos basados en los que ya existían para generar nuevos diálogos. Así que por análisis y un poco de prueba y error pude crear nuevos diálogos en alertify.js.
Entonces para crear nuestros métodos para mostrar iconos en alertify.js haremos lo siguiente:
Dentro de la carpeta lib que se obtiene al descomprimir el archivo de la librería (0.3.11) encontraremos dos archivos: alertify.js y alertify.min.js. El archivo alertify.min.js es la versión compacta de alertify.js, es decir, no tiene saltos de línea ni ningún otro separador, por lo que es muy poco legible, pero en cambio mide tan solo 8 Kb contra 20 Mb que mide su contraparte expandida; lo que lo hace ideal para usarse en proyectos donde no podemos tener esperando al usuario hasta que descargue el archivo.
Nos concentraremos entonces en el archivo alertify.js. Abriremos algún editor de textos e iremos a la línea 615 del archivo original y justo bajo la línea alert : function (message, fn, cssClass) { _alertify.dialog(message, "alert", fn, "", cssClass); return this; }, agregaremos lo siguiente:
/* Custom alerts */
info : function (message, fn, cssClass) { _alertify.dialog(message, "info", fn, "", cssClass); return this; },
warning : function (message, fn, cssClass) { _alertify.dialog(message, "warning", fn, "", cssClass); return this; },
fail : function (message, fn, cssClass) { _alertify.dialog(message, "fail", fn, "", cssClass); return this; },
/* Custom alerts */
Con esto definiremos las entradas para las funciones info, warning y fail que usaremos para crear nuestra emulación del diálogo MsgBox.
Iremos ahora a la línea 264 del archivo original, reemplazaremos el texto
if (type === "prompt") html += "<div id=\"alertify-form\">";
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
if (type === "prompt") html += dialogs.input;
html += dialogs.buttons.holder;
html += "</article>";
if (type === "prompt") html += "</div>";
Por:
if (type === "prompt")
{
//prompt
html += "<div id=\"alertify-form\">";
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
html += dialogs.input;
html += dialogs.buttons.holder;
html += "</article>";
html += "</div>";
//prompt
}
else if (type === "info")
{
//info msgbox
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/info.png' alt='Info alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//info msgbox
}
else if (type === "warning")
{
//warning msgbox
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/warning.png' alt='Warning alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//warning msgbox
}
else if (type === "fail")
{
//fail msgbox, thanks to http://www.forosdelweb.com/f53/dos-divs-misma-linea-407192/ and https://www.dariobf.com/centrar-verticalmente-con-css-6-formas-diferentes-de-lograrlo/
html += "<article class=\"alertify-inner\">";
html += "<table border='0' align='center'><tr><td valign='middle' style='display: flex; justify-content: center; align-items: center;'><div style='float:left;'><img src='js/alert/error.png' alt='Error alert' width='30' border='0' align='absmiddle'></div> " + dialogs.message.replace("{{message}}", message).replace("<p", "<div style='float:right;'").replace("</p>", "</div>") + "</td></tr><tr><td height='10'></td></tr></table>";
html += dialogs.buttons.holder;
html += "</article>";
//fail msgbox
}
else
{
html += "<article class=\"alertify-inner\">";
html += dialogs.message.replace("{{message}}", message);
html += dialogs.buttons.holder;
html += "</article>";
}
Ahora hemos definido el código html para nuestros nuevos cuadros de diálogo info, warning y fail y hemos dejado intactos los diálogos originales (alert y prompt).
Finalmente, un poco más abajo del código fuente que hemos insertado localizaremos la siguiente instrucción: case "alert". Debajo de la instrucción break que cierra a alert (el método original) colocaremos esto:
/* custom alerts */
case "info":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
case "warning":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
case "fail":
html = html.replace("{{buttons}}", dialogs.buttons.ok);
html = html.replace("{{ok}}", this.labels.ok);
break;
/* custom alerts */
Estos son los retoques finales, nuestros diálogos lucirán iguales que el de la función alert, pero con la diferencia de que mostrarán un icono acorde al tipo de diálogo.
Nota: Hay que especificar la ruta de nuestra imagen en <img src='xxx' alt='Error alert' width='30' border='0' align='absmiddle'> donde xxx corresponde a js/alert/error.png que es donde yo estoy poniendo mis imágenes al instalar la librería alertify.js modificada.
Eso es todo, ahora solo procederemos a llamar el método fail de alertify.js y estos son los resultados:
<script language="JavaScript">
alertify.fail("Hello world!");
</script>
Si deseamos crear su versión compacta en nuestro navegador web ingresaremos la siguiente dirección web: https://jscompress.com/ , copiaremos todo el código fuente de nuestra librería, presionaremos el botón "Compress JavaScript", descargaremos el archivo generado y lo llamaremos alertify.min.js y reemplazaremos al archivo original en nuestra carpeta. Listo, ya tenemos una versión mejorada de los cuadros de aviso de alertify.js.
Recuerden que la librería se distribuye originalmente bajo licencia MIT, esta es una licencia muy permisiva, por lo que no es necesario que nuestro proyecto derivado se distribuya bajo la misma licencia, incluso puede ir a parar a proyectos privados, pero, en lo personal creo que es muy poco ético apoderarse de un proyecto así y no dar ningún tipo de reconocimiento. Aclaro que no estoy tratando de imponer mi postura pues la licencia permite hacer esto y ya es cuestión de cada quien que hará, solo doy una recomendación.
Del mismo modo los iconos usados para crear los nuevos cuadros de diálogo de alertify.js son tomados del proyecto Nuvola, mismos que son distribuidos bajo licencia LGPL. Nota: el proyecto ya no está activo en la red desde hace algunos años (la web parece encontrarse en re-estructuración), pero los iconos pueden aún descargarse vía el proyecto "Wayback Machine".
Conclusiones:
Alertify.js puede ser muy flexible y hacerle todas las mejoras que gustemos gracias a su licencia libre adaptarla a nuestras necesidades. En el próximo artículos mostraré como poder anexarle otros métodos de entrada de datos aparte del método imput que ya provee.
1.- VBScript
¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.
1.- VBScript
No hay comentarios. :
Publicar un comentario