1 00:00:03,530 --> 00:00:06,090 En el ejercicio anterior, 2 00:00:06,090 --> 00:00:08,370 vimos cómo podemos aprovechar 3 00:00:08,370 --> 00:00:11,820 los controles basados en JavaScript que se proporcionan para 4 00:00:11,820 --> 00:00:14,820 los componentes de JavaScript de Bootstrap con el 5 00:00:14,820 --> 00:00:18,240 fin de controlar el comportamiento de los componentes. 6 00:00:18,240 --> 00:00:23,370 En particular, vimos el uso del carrusel y 7 00:00:23,370 --> 00:00:25,140 cómo pudimos introducir 8 00:00:25,140 --> 00:00:26,880 dos botones para controlar 9 00:00:26,880 --> 00:00:29,190 el comportamiento ciclista del carrusel. 10 00:00:29,190 --> 00:00:33,645 Ahora, no estoy completamente satisfecho con esa implementación. 11 00:00:33,645 --> 00:00:36,510 Me gustaría ahora colapsar todo 12 00:00:36,510 --> 00:00:39,270 en un solo botón que puede 13 00:00:39,270 --> 00:00:42,690 indicar el comportamiento actual del 14 00:00:42,690 --> 00:00:46,625 carrusel y también ser capaz de controlar el carrusel. 15 00:00:46,625 --> 00:00:50,225 Así que vamos a ver cómo podemos aprovechar 16 00:00:50,225 --> 00:00:53,180 más código jQuery 17 00:00:53,180 --> 00:00:56,800 para lograr esto, en este ejercicio. 18 00:00:56,800 --> 00:01:00,575 Para lograrlo, volveremos al código 19 00:01:00,575 --> 00:01:03,995 en index.html donde definimos los dos botones. 20 00:01:03,995 --> 00:01:08,960 Ahora voy a eliminar este div para 21 00:01:08,960 --> 00:01:11,135 el grupo de botones porque vamos a tener 22 00:01:11,135 --> 00:01:14,510 solo un botón en lugar de dos botones. 23 00:01:14,510 --> 00:01:18,620 Así que he eliminado el div alrededor de los dos botones. 24 00:01:18,620 --> 00:01:20,660 También voy a eliminar uno de los botones, 25 00:01:20,660 --> 00:01:22,415 porque vamos a trabajar con 26 00:01:22,415 --> 00:01:25,640 un solo botón para este ejercicio. 27 00:01:25,640 --> 00:01:28,640 Así que déjame cambiar la sangría. 28 00:01:28,640 --> 00:01:32,450 Así que ahora, este botón en particular que tenemos allí, 29 00:01:32,450 --> 00:01:36,090 voy a cambiar el nombre de este botón como CarouselButton. 30 00:01:37,120 --> 00:01:40,580 Comenzaremos con este botón siendo 31 00:01:40,580 --> 00:01:43,940 un botón con el icono de pausa. 32 00:01:43,940 --> 00:01:46,280 Vamos a voltear el icono de 33 00:01:46,280 --> 00:01:49,235 este botón a través del código JavaScript. 34 00:01:49,235 --> 00:01:50,750 Entonces, ¿cómo hacemos eso? 35 00:01:50,750 --> 00:01:53,480 Echando un vistazo a nuestra página web, 36 00:01:53,480 --> 00:01:56,855 ahora veremos que tenemos un solo botón aquí, 37 00:01:56,855 --> 00:02:00,830 que actualmente indica la pausa allí. 38 00:02:00,830 --> 00:02:05,530 Ahora, mi esperanza al final de este ejercicio 39 00:02:05,530 --> 00:02:07,580 es convertir este botón en 40 00:02:07,580 --> 00:02:10,730 un solo control por el cual si hago clic en este botón, 41 00:02:10,730 --> 00:02:15,210 se detendrá el comportamiento cíclico del carrusel, 42 00:02:15,210 --> 00:02:17,120 y luego simultáneamente convertir 43 00:02:17,120 --> 00:02:19,790 este botón en un botón de reproducción, 44 00:02:19,790 --> 00:02:21,590 lo que significa que este icono 45 00:02:21,590 --> 00:02:23,705 será reemplazado con el icono de reproducción. 46 00:02:23,705 --> 00:02:27,170 Así que este solo botón indica cuál es 47 00:02:27,170 --> 00:02:29,090 el estado actual 48 00:02:29,090 --> 00:02:33,400 del comportamiento cíclico de mi carrusel. ¿Cómo hacemos eso? 49 00:02:33,400 --> 00:02:34,940 Tenemos que ir y editar 50 00:02:34,940 --> 00:02:38,010 el código JavaScript para lograrlo. 51 00:02:38,010 --> 00:02:41,240 Bajando al código JavaScript 52 00:02:41,240 --> 00:02:43,910 en la parte inferior de la página index.html. 53 00:02:43,910 --> 00:02:47,450 Así que aquí, teníamos este script que habíamos 54 00:02:47,450 --> 00:02:49,580 incluido anteriormente 55 00:02:49,580 --> 00:02:52,325 para activar los dos botones allí. 56 00:02:52,325 --> 00:02:54,980 Voy a editar este código 57 00:02:54,980 --> 00:02:58,685 para hacer uso de ese solo botón que tenemos allí. 58 00:02:58,685 --> 00:03:00,860 Así que al bajar aquí, 59 00:03:00,860 --> 00:03:01,910 voy a eliminar 60 00:03:01,910 --> 00:03:03,950 esta segunda parte porque 61 00:03:03,950 --> 00:03:06,190 solo tenemos un solo botón aquí, 62 00:03:06,190 --> 00:03:08,575 que es el CarouselButton, 63 00:03:08,575 --> 00:03:10,630 y siempre que se haga clic en 64 00:03:10,630 --> 00:03:14,555 eso, necesitas hacer algo en respuesta a hacerlo. 65 00:03:14,555 --> 00:03:16,400 Entonces, si se 66 00:03:16,400 --> 00:03:18,640 hace clic en el botón del carrusel, ¿qué haces? 67 00:03:18,640 --> 00:03:22,370 Ahora, afortunadamente, dependiendo de 68 00:03:22,370 --> 00:03:26,630 si el botón es un botón Reproducir o un botón de Pausa, 69 00:03:26,630 --> 00:03:29,170 podremos realizar una acción apropiada. 70 00:03:29,170 --> 00:03:30,620 Pero, ¿cómo sabemos si 71 00:03:30,620 --> 00:03:32,300 es un botón de reproducción o un botón de pausa? 72 00:03:32,300 --> 00:03:35,960 Así que aquí es donde vamos a hacer uso de 73 00:03:35,960 --> 00:03:39,005 algún código jQuery para 74 00:03:39,005 --> 00:03:42,890 identificar si se trata de un botón de reproducción o un botón de pausa. 75 00:03:42,890 --> 00:03:45,230 Para ayudarnos a identificar esto, 76 00:03:45,230 --> 00:03:50,750 vamos a entrar aquí y luego usar una declaración if, 77 00:03:50,750 --> 00:03:53,255 y dentro de allí, voy 78 00:03:53,255 --> 00:03:56,585 a probar para ver si se trata de un botón de reproducción o pausa. 79 00:03:56,585 --> 00:03:59,010 Así que aquí digo, 80 00:04:00,550 --> 00:04:08,955 CarouselButton.Niños span. 81 00:04:08,955 --> 00:04:10,530 Lo que significa que, 82 00:04:10,530 --> 00:04:12,115 para este botón de carrusel, 83 00:04:12,115 --> 00:04:19,380 dentro de donde si hay un elemento con la etiqueta span, 84 00:04:19,380 --> 00:04:22,790 por lo que obviamente sabemos que en nuestro botón de carrusel, 85 00:04:22,790 --> 00:04:24,620 teníamos la etiqueta span que 86 00:04:24,620 --> 00:04:28,910 contenía el icono Font Awesome allí. 87 00:04:28,910 --> 00:04:31,025 Entonces, para esa etiqueta span, 88 00:04:31,025 --> 00:04:34,440 vamos a verificar HasClass. 89 00:04:36,020 --> 00:04:39,540 Así que vamos a comprobar esta HasClass, 90 00:04:39,540 --> 00:04:42,020 y luego la clase que vamos a 91 00:04:42,020 --> 00:04:46,440 comprobar es fa-pausa. 92 00:04:46,910 --> 00:04:49,170 Entonces, lo que significa que, 93 00:04:49,170 --> 00:04:53,445 si la etiqueta span tiene la clase fa-pausa, 94 00:04:53,445 --> 00:04:55,760 entonces sabemos que este botón está 95 00:04:55,760 --> 00:04:58,085 actuando actualmente como el botón de pausa. 96 00:04:58,085 --> 00:05:00,770 Entonces, obviamente, cuando se hace clic en 97 00:05:00,770 --> 00:05:03,135 el botón, el usuario espera que 98 00:05:03,135 --> 00:05:07,195 el comportamiento cíclico se detenga. 99 00:05:07,195 --> 00:05:09,200 Así que eso es lo que identificamos aquí. 100 00:05:09,200 --> 00:05:11,480 Así que ahora ves que estamos escribiendo 101 00:05:11,480 --> 00:05:15,260 un código JavaScript más avanzado usando 102 00:05:15,260 --> 00:05:19,775 la sintaxis jQuery para hacer que esto funcione correctamente. 103 00:05:19,775 --> 00:05:23,615 Así que aquí adentro, ¿qué tengo que hacer? 104 00:05:23,615 --> 00:05:27,105 Ahora, lo que significa que si el botón 105 00:05:27,105 --> 00:05:31,605 es actualmente un botón de Pausa, 106 00:05:31,605 --> 00:05:34,615 entonces, obviamente, cuando se hace clic en el botón, 107 00:05:34,615 --> 00:05:37,250 desea pausar el carrusel. 108 00:05:37,250 --> 00:05:41,825 Entonces, además, queremos ahora poder voltear 109 00:05:41,825 --> 00:05:48,680 ese icono de un icono de pausa a un icono de reproducción. 110 00:05:48,680 --> 00:05:50,750 Así que lo que vamos a hacer es, 111 00:05:50,750 --> 00:05:53,540 vamos a decir justo allí después de esto, 112 00:05:53,540 --> 00:06:11,175 vamos a decir $CarouselButton.Children span, 113 00:06:11,175 --> 00:06:15,330 y luego vamos a decir, RemoveClass. 114 00:06:15,330 --> 00:06:23,915 Así que vamos a eliminar la clase de pausa. 115 00:06:23,915 --> 00:06:25,990 Así que observe cómo funciona esto. 116 00:06:25,990 --> 00:06:29,185 Vamos a eliminar la clase de pausa de eso, 117 00:06:29,185 --> 00:06:33,990 y luego, vamos a añadir la PlayClass. 118 00:06:33,990 --> 00:06:38,170 Así que de esa manera el icono de su botón ahora 119 00:06:38,170 --> 00:06:42,370 va a ser volteado de un botón Pausa a un botón Reproducir. 120 00:06:42,370 --> 00:06:45,250 Así que vamos a quitar la PauseClass. 121 00:06:45,250 --> 00:06:48,340 Voy a copiar este código y 122 00:06:48,340 --> 00:06:49,960 luego pegarlo 123 00:06:49,960 --> 00:06:52,300 allí y luego hacer la edición de este código. 124 00:06:52,300 --> 00:06:55,930 Lo mismo, para el carouselButton para el lapso de niños, 125 00:06:55,930 --> 00:06:58,855 voy a hacerlo ahora en lugar del removeClass, 126 00:06:58,855 --> 00:07:03,355 diría addClass, y luego fa-play. 127 00:07:03,355 --> 00:07:05,800 Así que, lo que estamos haciendo es, 128 00:07:05,800 --> 00:07:07,765 estamos volteando ese botón de 129 00:07:07,765 --> 00:07:10,695 un botón Pausa a un botón Reproducir. 130 00:07:10,695 --> 00:07:16,310 Además, estamos pausando 131 00:07:16,310 --> 00:07:19,355 el comportamiento de ciclismo del carrusel. 132 00:07:19,355 --> 00:07:22,795 Ahora, si este no es el caso entonces, 133 00:07:22,795 --> 00:07:24,870 debería ser un botón de reproducción para que 134 00:07:24,870 --> 00:07:30,060 se introduzca el efecto opuesto. 135 00:07:30,060 --> 00:07:33,815 Luego, simplemente copiaré este código 136 00:07:33,815 --> 00:07:38,900 y luego haré las otras pruebas para la situación en la 137 00:07:38,900 --> 00:07:44,105 que el botón es un PlayButton. 138 00:07:44,105 --> 00:07:49,020 Así que diría otra cosa, ahora obviamente, 139 00:07:49,020 --> 00:07:54,750 no necesito esto si está aquí, pero solo para estar doblemente seguro, 140 00:07:54,750 --> 00:07:57,220 voy a poner eso ahí. 141 00:07:58,060 --> 00:08:00,830 Porque solo hay dos posibilidades, 142 00:08:00,830 --> 00:08:02,750 ya sea un botón de pausa o un botón de reproducción, 143 00:08:02,750 --> 00:08:06,530 pero solo para mi seguridad, 144 00:08:06,530 --> 00:08:10,010 voy a poner eso como un fa-play allí. 145 00:08:10,010 --> 00:08:12,950 Ahora dentro, voy a cambiar 146 00:08:12,950 --> 00:08:16,530 esto de pausa a ciclo. 147 00:08:16,530 --> 00:08:18,230 Porque desde el ejercicio anterior, 148 00:08:18,230 --> 00:08:19,700 recuerda que si desea que 149 00:08:19,700 --> 00:08:21,575 el comportamiento de ciclismo se reanude, 150 00:08:21,575 --> 00:08:29,205 tendría que configurar la acción del carrusel para que sea ciclo. 151 00:08:29,205 --> 00:08:33,840 Entonces, de manera similar, para las dos declaraciones restantes, 152 00:08:33,840 --> 00:08:37,875 voy a eliminar PlayClass 153 00:08:37,875 --> 00:08:42,715 y luego agregar la PauseClass. 154 00:08:42,715 --> 00:08:48,095 Así que observe cómo estamos usando un poco de 155 00:08:48,095 --> 00:08:52,310 código jQuery avanzado 156 00:08:52,310 --> 00:08:56,854 para poder cambiar dinámicamente el icono de los botones, 157 00:08:56,854 --> 00:08:58,460 y al mismo tiempo, 158 00:08:58,460 --> 00:09:03,140 inducir el comportamiento de ciclismo apropiado en nuestro carrusel. 159 00:09:03,140 --> 00:09:05,760 Echando un vistazo a nuestra página web, 160 00:09:05,760 --> 00:09:09,390 ahora ves que mi carrusel está en bicicleta, 161 00:09:09,390 --> 00:09:14,465 y ves que este botón es actualmente un botón de pausa. 162 00:09:14,465 --> 00:09:16,130 Cuando hago clic en este botón, 163 00:09:16,130 --> 00:09:21,855 observe cómo cambia de Pausa a un botón Reproducir allí, 164 00:09:21,855 --> 00:09:23,865 y luego simultáneamente, 165 00:09:23,865 --> 00:09:27,325 mi comportamiento de ciclismo del carrusel se detiene. 166 00:09:27,325 --> 00:09:28,840 Así que en este punto, 167 00:09:28,840 --> 00:09:31,460 mi carrusel permanecerá en pausa en 168 00:09:31,460 --> 00:09:34,700 esa ubicación hasta que haga clic en el botón. 169 00:09:34,700 --> 00:09:36,950 Así que ahora, si vuelvo a hacer clic en este botón, 170 00:09:36,950 --> 00:09:40,130 observe el cambio del botón Reproducir a un botón de Pausa, 171 00:09:40,130 --> 00:09:42,320 y luego el comportamiento de ciclismo 172 00:09:42,320 --> 00:09:44,795 del carrusel se reanudará en el acto. 173 00:09:44,795 --> 00:09:46,625 Así que usando un solo botón ahora, 174 00:09:46,625 --> 00:09:50,570 puedo controlar 175 00:09:50,570 --> 00:09:54,695 el comportamiento del carrusel y también, simultáneamente, 176 00:09:54,695 --> 00:09:57,125 mostrar el estado actual del 177 00:09:57,125 --> 00:09:59,460 comportamiento de ciclismo de mi carrusel. 178 00:09:59,460 --> 00:10:00,740 Si eso es un botón de pausa, 179 00:10:00,740 --> 00:10:03,050 eso significa que mi carrusel está actualmente en bicicleta. 180 00:10:03,050 --> 00:10:04,535 Si eso es un botón de reproducción, 181 00:10:04,535 --> 00:10:06,560 entonces mi carrusel está en pausa. 182 00:10:06,560 --> 00:10:08,630 Entonces, para reanudarlo, 183 00:10:08,630 --> 00:10:10,175 tendré que hacer clic en el botón. 184 00:10:10,175 --> 00:10:14,600 Entonces, este es un cambio adicional 185 00:10:14,600 --> 00:10:17,120 que puede hacer al ejercicio. 186 00:10:17,120 --> 00:10:20,480 Así que ahora, ves cómo en nuestro código 187 00:10:20,480 --> 00:10:24,629 hicimos uso del método HasClass, 188 00:10:24,629 --> 00:10:27,000 y también vimos el uso de 189 00:10:27,000 --> 00:10:30,990 los métodos RemoveClass y AddClass, 190 00:10:30,990 --> 00:10:33,770 métodos jQuery que aplicamos 191 00:10:33,770 --> 00:10:36,845 para manipular el DOM para 192 00:10:36,845 --> 00:10:39,545 reflejar el comportamiento como 193 00:10:39,545 --> 00:10:43,445 pertinente en este caso particular. 194 00:10:43,445 --> 00:10:47,755 Con esto, completamos este ejercicio. 195 00:10:47,755 --> 00:10:51,450 Es hora de que hagas una confirmación de Git con 196 00:10:51,450 --> 00:10:56,710 el mensaje más Bootstrap y jQuery.