Vuejs para programadores jQuery.
Clases y estilos VI
En este caso trabajaremos con botones en dos formas diferentes. El primer código permitirá que se escriba un estilo inline y se agregue a un contenido para probar el resultado.
Empezamos con el código HTML.
<form>
<div class="form-group row">
<label for="inputStyle" class="col-sm-6 col-form-label">Agregue estilo</label>
<input type="text" class="form-control" id="inputStyle" placeholder="Estilo">
</div>
</form>
<button type="button" class="btn btn-primary mb-2" id="buttonStyle">Aplicar estilo</button>
<blockquote id="bloque">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et sem varius, pretium diam eget, hendrerit nisl. Pellentesque ac gravida ante. Nullam gravida purus ac arcu laoreet consectetur. Mauris porta felis venenatis magna sollicitudin, vel pellentesque felis rutrum. Vestibulum posuere ornare blandit. Donec at euismod odio. Aenean eleifend faucibus dui, nec pellentesque est rhoncus malesuada. Suspendisse a laoreet libero. Donec ac mauris in lorem congue bibendum. Curabitur vulputate pretium massa, non rhoncus purus imperdiet lacinia. In vitae est finibus, cursus nisi in, facilisis nulla.
</blockquote>
Creamos aquí 3 cosas:
* Un input que permita que escribamos el estilo
* Un botón para aplicar el estilo
* Un texto para reflejar los cambios de estilos
El código js no tiene sorpresas:
<script>
const bloque = jQuery('#bloque')
const inputStyle = jQuery('#inputStyle')
jQuery('#buttonStyle').on('click', actualiza)
function actualiza() {
bloque.attr('style', inputStyle.val())
}
</script>
Creamos la constante bloque apuntando al contenido de texto, la constante inputStyle apuntando al form input y luego asociamos la función con el evento click del boton. La función aplica el contenido del input en el atributo style del bloque de texto.
VUEJS - ESTILOS INLINE
Veamos esto mismo en Vue.
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/VueJsButtonStyle.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/VueJsButtonStyle.html
- Codesandbox: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/indexButtonStyle.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/indexButtonStyle.html
JQUERY - CLASES CSS
Enlaces:
Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/jQueryButtonClass.html
GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/jQueryButtonClass.html
Vayamos ahora a un código algo mas completo. Configuraremos un botón con varios radioButtons para estilo y dos checkbox, uno para un estilo y el otro para el estado disable.
El codigo es largo en esta ocasión. Vamos por partes:
<form>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation10">
<label class="custom-control-label" for="customControlValidation10">Disable</label>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation11">
<label class="custom-control-label" for="customControlValidation11">Outline</label>
</div>
</form>
Creamos dos checkbox de la forma tradicional.
A continuación ponemos uno de los checkbox pero se repite 6 veces mas variando el id:
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" value="primary" id="customControlValidation2" name="buttonStyle" checked>
<label class="custom-control-label" for="customControlValidation2">Primary</label>
</div>
La clave está en los valores value, ya que cada uno de ellos tendrá el nombre de las diferentes variantes de los botones de Bootstrap. Si no conoce ese estilo de los botones de Bootstrap revise el siguiente link: https://getbootstrap.com/docs/4.5/components/buttons/ Lo único a recordar es que los RadioButtons deben tener el mismo name para que solo se pueda elegir uno de ellos. Finalmente agregamos: <div> <button id="buttonDestiny" type="button">Ver código generado</button> </div> <div class="code" id="code"> </div> Un botón donde veremos los cambios y un espacio para mostrar el código generado (en caso que se pulse el botón) y si queremos ocultar el código nuevamente simplemente volvemos a pulsar el botón. Todo reside en el código js así que vayamos a ello: Esta vez iremos por partes: const radioButton = jQuery('input:radio[name=buttonStyle]') const checkDisable = jQuery('#customControlValidation10') const checkOutline = jQuery('#customControlValidation11') const buttonDestiny = jQuery('#buttonDestiny') let status = 0 La primer constante apunta a TODOS los radioButtons (los indentifica por el mismo name) La segunda y la tercer constante apuntan a los checkbox. Uno controlara el estilo disable y el otro el estilo outline.
La última constante apunta al botón y al final creamos una variable con un valor inicial 0. Esta variable controlará el estado del botón. Si se ha pulsado por primera vez (status === 0) se mostrara el código debajo del botón y el status pasara a 1. Si por el contrario se está mostrando el código (status === 1) el código se ocultara y el status pasara a 0.
Eso se resuelve en la siguiente función:
function buttonCode() {
if (!status) {
status = 1
showCode()
} else {
status = 0
vaciaCode()
}
}
Cuando status tiene 0 es para el if (en JS) un valor FALSE, invertimos el resultado en el if con !. Actualizamos la variable y mostramos / ocultamos el código según la lógica explicada antes.
Las funciones usadas ahí son:
function vaciaCode() {
jQuery('#code').empty()
}
function showCode() {
jQuery('#code').empty().append('<blockoute><button class=\'btn ' + createClass() + '\'></button></blockoute>')
}
Las funciones son sencillas y podrían ser sustituidas por el código en lugar de invocar la función pero como lo usaremos en varios sitios del código es mejor tenerlo en una función para no repetir ese código continuamente.
vaciaCode es sencillo. Vacía el div con el id code que está bajo el botón.
showCode vacía el contenido y agrega un bloque de texto con el contenido del código. Para que HTML no interprete el botón como un botón real se codifican los símbolos de < (<) y de >(>) y se evita el conflicto de las comillas usando el \' que indica que es una comilla para imprimir y no el final de la cadena.
Sobre símbolos ascii en HTML: https://ascii.cl/es/codigos-html.htm
Para el uso de caracteres especiales en cadenas de texto mirar: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings
La funcion createClass() construye la clase usando los últimos valores elegidos
function createClass() {
let btn = jQuery('input:radio[name=buttonStyle]:checked').val()
if (checkOutline.prop('checked')) {
btn = 'outline-' + btn
}
return 'btn-' + btn
}
Se recoge el value del radioButton elegido, se verifica si el checkbox de outline esta checkeado (de ser así se agrega el estilo) y se devuelve las clases en un string.
Lo primero es recoger los valores
Sigamos:
buttonDestiny.on('click', buttonCode)
radioButton.on('input', actualiza) // cuando cambien los radiobutton se actualizara el botón
checkOutline.on('input', actualiza) // cuando cambie el checkbox de outline se actualizara el botón
checkDisable.on('input', actualiza) // cuando se cambie el checkbox del disable se actualizara el botón
actualiza() Asociamos los checkBox y los radioButtons a la función actualiza, el botón de click a la función mostrada antes y lanzamos actualiza por primera vez. Veamos esa función:
function actualiza() {
buttonDestiny.removeClass().addClass('btn ' + createClass())
buttonDestiny.attr('disabled', checkDisable.prop('checked'))
if (status) {
showCode()
} else {
vaciaCode()
}
}
Lo primero es remover todas las clases existentes para evitar sobrescritura. Lo siguiente es agregar las clases según los últimos valores elegidos (a través de la función createClass())
En la siguiente linea asociamos el estado checked del checkbox al atributo disable del boton:
checkDisable.prop('checked')
Devolvera true o false si segun este chequeado o no y en:
buttonDestiny.attr('disabled', checkDisable.prop('checked'))
asociamos ese resultado al atributo HTML disabled
Luego verificamos stauts (Si se esta mostrando el código o no) y actuamos en consecuencia.
VUEJS - CLASES CSS
Ha sido una larga explicación. Espero no haberme saltado nada. Ahora vamos a Vuejs. Enlaces:
- Codesandbox: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/VueJsButtonClass.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/VueJsButtonClass.html
showCode =!showCode
Indica: Guardar en showCode el valor opuesto (!) al que tiene en ese momento. Lo que significa que si es TRUE lo cambiara a FALSE y a la inversa.
Por último el bloque de texto tiene un condicional (v-if) cuya consecuencia es que renderiza el elemento solo si el valor tiene verdadero.
Hablemos de v-if.
Es un condicional que funciona como cualquier otro if de cualquier lenguaje. Espera un resultado boolean (TRUE o FALSE) y se puede usar para devolver el valor una variable, método o una acción directa.
v-if no renderiza el elemento. Eso quiere decir que el navegador NO tendrá ese elemento. Estoy es mas eficaz que un display: none porque esta acción le da el elemento al navegador, se renderiza y luego se oculta.
Este punto se entiende mejor si se conoce el Virtual DOM. Un DOM controlado por Vue y que actúa sobre el navegador entregado solamente lo que necesita, cuando lo necesite. Y cuando suceden cambios no se renderiza todo de nuevo sino solo aquellos elementos que cambiaron.
El virtual DOM no es parte de estos artículos pero pueden saber más del tema aquí: (ingles) https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20
v-if permite también un v-else:
<div v-if="valor">
<span>Verdadero</span>
<div>
<div v-else>
<span>Falso</span>
</div>
En este caso mostrara el mensaje Verdadero si valor es TRUE y si no mostrara el mensaje Falso. Lo veremos en mas detalle más adelante.
Volviendo al código, dentro del bloque de texto mostramos el resultado de una variable (el código del botón)
Miremos el JS:
<script>
new Vue({
el: '#app',
data: {
checkDisable: false,
checkOutline: false,
checkButton: 'primary',
showCode: false
},
computed: {
code () {
return '<button class="btn '+this.styleButton+'"></button>'
},
styleButton() {
let btn='btn btn-'
if (this.checkOutline) {
btn += 'outline-'
}
return btn + this.checkButton
}
}
})
</script>
Hemos definido 4 variables que definen estados iniciales:
* checkDisable se usa en el checkbox de Disable
* checkOutline se usa en el checkbox de Outline
* checkButton se usa en los radioButton y se define como chequeado el que tiene el value primary (recordar que los value son los estilos de botones de bootstrap)
* showCode para mostrar o no el codigo del boton.
En este código usamos la palabra computed para definir computadas. Las computadas son variables complejas que se actualizan cuando cualquiera de los valores que usa cambia y siempre deben devolver un valor.
Una variable normal en Vuejs se actualiza en todos los sitios donde se use pero las variables solo permiten guardar valores propios de Js. Si necesitamos algo más (como en este código) podemos recurrir a computadas. Se definen como un método (styleButton()) pero se usa como una variable (styleButton) por ahora diremos que definidas así lo único que no permiten es una asignación (ya veremos ese punto más adelante) pero por todo lo demás son para el sistema variables normales.
Definimos dos computadas:
styleButton() {
let btn='btn btn-'
if (this.checkOutline) {
btn += 'outline-'
}
return btn + this.checkButton
}
Esta computada es bastante similar a la función createClass de jQuery.
Primero guardamos un valor en btn que es lo básico de las clases de botones, en el if verificamos si checkOutline esta chequeado y si es así modificamos la variable agregando el estilo outline. Finalmente devolvemos el resultado agregando el value actual de los radioButton.
La computada siguiente:
code () {
return '<button class="btn '+this.styleButton+'"></button>'
}
Sencillamente devuelve el código con el último valor actualizado.
Este post ha sido un poco largo y tiene algunos conceptos nuevos. Si hay dudas preguntar. Tanto v-if como las computadas las seguiremos usando (Que es la mejor manera de entenderlas) en próximos códigos.
Espero que sea útil.
Index de clases:
- Codesandbox: https://githubbox.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/indexButtonClass.html
- GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/indexButtonClass.html
Consultas, dudas, comentarios: Slack de PEUM o en Twitter.
No hay comentarios:
Publicar un comentario