Hola a todos, hoy os voy explicar como podemos hacer un pequeño contador como webcomponent.
Vamos a realizar paso a paso un pequeño contador como este:
Te recomiendo leer antes este articulo:
Empezaremos definiendo la clase:
|
1 2 3 4 5 6 7 8 9 |
class Counter extends HTMLElement { constructor() { super(); } } customElements.define('ddr-counter', Counter); |
Vamos a crear los siguientes atributos:
- value: valor actual del input
- step: paso al que va incremento/decremento.
- min: valor minimo permitido.
- max: valor maximo permitido.
Recuerda que se realiza haciendo simplemente get y set.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
class Counter extends HTMLElement { constructor() { super(); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } } customElements.define('ddr-counter', Counter); |
Ahora vamos a crear su propio HTML y CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
class Counter extends HTMLElement { constructor() { super(); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } render() { const container = document.createElement("div"); container.innerHTML = ` let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); } } customElements.define('ddr-counter', Counter); |
La idea es añadir en una cadena el contenido en HTML y CSS (en una etiqueta style).
Para que nos sea más fácil, vamos a obtener como atributos propios, los botones y el input.
Lo podemos hacer con querySelector, te recomiendo poner id o clases propias.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
class Counter extends HTMLElement { constructor() { super(); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } render() { const container = document.createElement("div"); container.innerHTML = ` let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); // Asociamos el boton de incremento const b1 = shadow.querySelector('#b_increment'); this.buttonIncrement = b1; // Asociamos el input del counter const input = shadow.querySelector('#input_counter'); this.inputText = input; // Asociamos el boton de decremento const b2 = shadow.querySelector('#b_decrement'); this.buttonDecrement = b2; } } customElements.define('ddr-counter', Counter); |
En la función connectedCallback, que se llama cuando se carga el componente, llamaremos a esta función que acabamos de realizar.
También si tenemos un valor inicial en el atributo value, lo asociaremos. En el caso de que tenga un mínimo y no le damos un valor, lo iniciamos a ese valor mínimo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
class Counter extends HTMLElement { constructor() { super(); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } connectedCallback() { this.render(); if(!this.value && this.min){ this.value = this.min; }else if(!this.value){ this.value = 0; } this.inputText.setAttribute('value', this.value); } render() { const container = document.createElement("div"); container.innerHTML = ` let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); // Asociamos el boton de incremento const b1 = shadow.querySelector('#b_increment'); this.buttonIncrement = b1; // Asociamos el input del counter const input = shadow.querySelector('#input_counter'); this.inputText = input; // Asociamos el boton de decremento const b2 = shadow.querySelector('#b_decrement'); this.buttonDecrement = b2; } } customElements.define('ddr-counter', Counter); |
Ahora, vamos a hacer la función que se realizará cuando pulsemos el botón de incremento.
Los pasos que haremos son los siguientes:
- Obtenemos el paso, sino le indicamos ninguno, seria 1.
- Sumamos el valor con el paso.
- Si hay un máximo y el valor es mayor que el máximo, el valor sera el máximo sino el valor calculado.
- Asociamos el valor al input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
class Counter extends HTMLElement { constructor() { super(); } connectedCallback() { this.render(); if(!this.value && this.min){ this.value = this.min; }else if(!this.value){ this.value = 0; } this.inputText.setAttribute('value', this.value); } increment() { // Parseo el paso let step = +this.step; // parseInt(this.step) // Sino existe el paso, por defecto es 1 if (!step) { step = 1; } // Sumamos el valor al paso const nextValue = +this.value + step; // Si existe un maximo y el valor es mayor que el maximo // Ponemos el maximo como valor if (this.max && nextValue > +this.max) { this.value = this.max; } else { this.value = nextValue; } // Asociamos el valor this.inputText.setAttribute('value', this.value); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } render() { const container = document.createElement("div"); container.innerHTML = ` `; let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); // Asociamos el boton de incremento const b1 = shadow.querySelector('#b_increment'); this.buttonIncrement = b1; // Asociamos el input del counter const input = shadow.querySelector('#input_counter'); this.inputText = input; // Asociamos el boton de decremento const b2 = shadow.querySelector('#b_decrement'); this.buttonDecrement = b2; } } customElements.define('ddr-counter', Counter); |
Lo mismo con el de decremento, solo que en lugar de usar el máximo, usamos el mínimo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
class Counter extends HTMLElement { constructor() { super(); } connectedCallback() { this.render(); if(!this.value && this.min){ this.value = this.min; }else if(!this.value){ this.value = 0; } this.inputText.setAttribute('value', this.value); } increment() { // Parseo el paso let step = +this.step; // parseInt(this.step) // Sino existe el paso, por defecto es 1 if (!step) { step = 1; } // Sumamos el valor al paso const nextValue = +this.value + step; // Si existe un maximo y el valor es mayor que el maximo // Ponemos el maximo como valor if (this.max && nextValue > +this.max) { this.value = this.max; } else { this.value = nextValue; } // Asociamos el valor this.inputText.setAttribute('value', this.value); } decrement() { // Parseo el paso let step = +this.step; // parseInt(this.step) // Sino existe el paso, por defecto es 1 if (!step) { step = 1; } // Restamos el valor al paso const nextValue = +this.value - step; // Si existe un minimo y el valor es menor que el maximo // Ponemos el minimo como valor if (this.min && nextValue < +this.min) { this.value = this.min; } else { this.value = nextValue; } // Asociamos el valor this.inputText.setAttribute('value', this.value); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } render() { const container = document.createElement("div"); container.innerHTML = ` let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); // Asociamos el boton de incremento const b1 = shadow.querySelector('#b_increment'); this.buttonIncrement = b1; // Asociamos el input del counter const input = shadow.querySelector('#input_counter'); this.inputText = input; // Asociamos el boton de decremento const b2 = shadow.querySelector('#b_decrement'); this.buttonDecrement = b2; } } customElements.define('ddr-counter', Counter); |
Nos falta asociar estos eventos a los botones con addEventListener en connectedCallback y bind en el constructor, sino lo hacemos no funcionaran al pulsar sobre ellos.
La función bind lo que hace es crear una nueva función que forzará a this dentro de la función a ser el parámetro pasado a bind().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
class Counter extends HTMLElement { constructor() { super(); // Hacemos bind para que podamos llamarlo en los addEventListener this.increment = this.increment.bind(this); this.decrement = this.decrement.bind(this); } connectedCallback() { this.render(); // Asociamos el click de los botones a su función this.buttonIncrement.addEventListener('click', this.increment); this.buttonDecrement.addEventListener('click', this.decrement); if(!this.value && this.min){ this.value = this.min; }else if(!this.value){ this.value = 0; } this.inputText.setAttribute('value', this.value); } increment() { // Parseo el paso let step = +this.step; // parseInt(this.step) // Sino existe el paso, por defecto es 1 if (!step) { step = 1; } // Sumamos el valor al paso const nextValue = +this.value + step; // Si existe un maximo y el valor es mayor que el maximo // Ponemos el maximo como valor if (this.max && nextValue > +this.max) { this.value = this.max; } else { this.value = nextValue; } // Asociamos el valor this.inputText.setAttribute('value', this.value); } decrement() { // Parseo el paso let step = +this.step; // parseInt(this.step) // Sino existe el paso, por defecto es 1 if (!step) { step = 1; } // Restamos el valor al paso const nextValue = +this.value - step; // Si existe un minimo y el valor es menor que el maximo // Ponemos el minimo como valor if (this.min && nextValue < +this.min) { this.value = this.min; } else { this.value = nextValue; } // Asociamos el valor this.inputText.setAttribute('value', this.value); } get value() { return this.getAttribute('value'); } set value(value) { this.setAttribute('value', value); } get step() { return this.getAttribute('step'); } set step(value) { this.setAttribute('step', value); } get min() { return this.getAttribute('min'); } set min(value) { this.setAttribute('min', value); } get max() { return this.getAttribute('max'); } set max(value) { this.setAttribute('max', value); } render() { const container = document.createElement("div"); container.innerHTML = ` let shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(container); // Asociamos el boton de incremento const b1 = shadow.querySelector('#b_increment'); this.buttonIncrement = b1; // Asociamos el input del counter const input = shadow.querySelector('#input_counter'); this.inputText = input; // Asociamos el boton de decremento const b2 = shadow.querySelector('#b_decrement'); this.buttonDecrement = b2; } } customElements.define('ddr-counter', Counter); |
Con esto tendríamos nuestro webcomponent ya listo para funcionar. Lo probamos en un HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
lang="en"> charset="UTF-8"> http-equiv="X-UA-Compatible" content="IE=edge"> name="viewport" content="width=device-width, initial-scale=1.0"> |
Te dejo el proyecto en stackblitz.
Aquí os dejo videos donde hacemos el webcomponent en el canal de youtube.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta