1 00:00:03,530 --> 00:00:06,090 Dans l'exercice précédent, 2 00:00:06,090 --> 00:00:08,370 nous avons vu comment nous pouvons tirer parti des 3 00:00:08,370 --> 00:00:11,820 contrôles basés sur JavaScript qui sont fournis pour 4 00:00:11,820 --> 00:00:14,820 les composants JavaScript Bootstrap 5 00:00:14,820 --> 00:00:18,240 afin de contrôler le comportement des composants. 6 00:00:18,240 --> 00:00:23,370 En particulier, nous avons vu l'utilisation du carrousel et 7 00:00:23,370 --> 00:00:25,140 comment nous avons pu introduire 8 00:00:25,140 --> 00:00:26,880 deux boutons pour contrôler 9 00:00:26,880 --> 00:00:29,190 le comportement cycliste du carrousel. 10 00:00:29,190 --> 00:00:33,645 Maintenant, je ne suis pas entièrement satisfait de cette implémentation. 11 00:00:33,645 --> 00:00:36,510 Je voudrais maintenant réduire le tout 12 00:00:36,510 --> 00:00:39,270 en un seul bouton qui peut à la fois 13 00:00:39,270 --> 00:00:42,690 indiquer le comportement actuel 14 00:00:42,690 --> 00:00:46,625 du carrousel et être capable de contrôler le carrousel. 15 00:00:46,625 --> 00:00:50,225 Voyons donc comment nous pouvons tirer parti 16 00:00:50,225 --> 00:00:53,180 d'autres codes jQuery 17 00:00:53,180 --> 00:00:56,800 pour y parvenir, dans cet exercice. 18 00:00:56,800 --> 00:01:00,575 Pour y parvenir, nous allons revenir au code 19 00:01:00,575 --> 00:01:03,995 dans index.html où nous avons défini les deux boutons. 20 00:01:03,995 --> 00:01:08,960 Je vais maintenant supprimer cette div pour 21 00:01:08,960 --> 00:01:11,135 le groupe de boutons parce que nous allons avoir 22 00:01:11,135 --> 00:01:14,510 un seul bouton au lieu de deux boutons. 23 00:01:14,510 --> 00:01:18,620 J' ai donc enlevé la div autour des deux boutons. 24 00:01:18,620 --> 00:01:20,660 Je vais également supprimer un des boutons, 25 00:01:20,660 --> 00:01:22,415 parce que nous allons travailler avec 26 00:01:22,415 --> 00:01:25,640 un seul bouton pour cet exercice. 27 00:01:25,640 --> 00:01:28,640 Laisse-moi changer l'indentation. 28 00:01:28,640 --> 00:01:32,450 Donc maintenant, ce bouton particulier que nous avons là, 29 00:01:32,450 --> 00:01:36,090 je vais renommer ce bouton comme CarouselButton. 30 00:01:37,120 --> 00:01:40,580 Nous commencerons avec ce bouton étant 31 00:01:40,580 --> 00:01:43,940 un bouton avec l'icône de pause. 32 00:01:43,940 --> 00:01:46,280 Nous allons retourner l'icône de 33 00:01:46,280 --> 00:01:49,235 ce bouton via le code JavaScript. 34 00:01:49,235 --> 00:01:50,750 Alors comment on fait ça ? En 35 00:01:50,750 --> 00:01:53,480 regardant notre page Web, 36 00:01:53,480 --> 00:01:56,855 nous allons maintenant voir que nous avons un seul bouton ici, 37 00:01:56,855 --> 00:02:00,830 qui indique actuellement la pause là-bas. 38 00:02:00,830 --> 00:02:05,530 Maintenant, mon espoir à la fin de cet exercice 39 00:02:05,530 --> 00:02:07,580 est de transformer ce bouton en 40 00:02:07,580 --> 00:02:10,730 un seul contrôle par lequel si je clique sur ce bouton, 41 00:02:10,730 --> 00:02:15,210 il mettra en pause le comportement cyclique du carrousel, 42 00:02:15,210 --> 00:02:17,120 puis transformera simultanément 43 00:02:17,120 --> 00:02:19,790 ce bouton en un bouton de lecture, 44 00:02:19,790 --> 00:02:21,590 ce qui signifie que cette icône 45 00:02:21,590 --> 00:02:23,705 sera remplacée avec l'icône de lecture. 46 00:02:23,705 --> 00:02:27,170 Alors que ce bouton unique indique quel est 47 00:02:27,170 --> 00:02:29,090 l'état actuel 48 00:02:29,090 --> 00:02:33,400 du comportement cyclique de mon carrousel. Comment on fait ça ? 49 00:02:33,400 --> 00:02:34,940 Nous devons aller et éditer 50 00:02:34,940 --> 00:02:38,010 le code JavaScript pour y parvenir. 51 00:02:38,010 --> 00:02:41,240 Aller au code JavaScript 52 00:02:41,240 --> 00:02:43,910 en bas de la page index.html. 53 00:02:43,910 --> 00:02:47,450 Donc, ici, nous avions ce script que nous avions 54 00:02:47,450 --> 00:02:49,580 inclus plus tôt 55 00:02:49,580 --> 00:02:52,325 afin d'activer les deux boutons là. 56 00:02:52,325 --> 00:02:54,980 Je vais éditer ce code 57 00:02:54,980 --> 00:02:58,685 pour utiliser ce bouton unique que nous avons là. 58 00:02:58,685 --> 00:03:00,860 Donc, en descendant ici, 59 00:03:00,860 --> 00:03:01,910 je vais supprimer 60 00:03:01,910 --> 00:03:03,950 cette deuxième partie parce que nous 61 00:03:03,950 --> 00:03:06,190 n'avons qu'un seul bouton ici, 62 00:03:06,190 --> 00:03:08,575 qui est le CarouselButton, 63 00:03:08,575 --> 00:03:10,630 et chaque fois que c'est cliqué, 64 00:03:10,630 --> 00:03:14,555 vous devez faire quelque chose en réponse à cela. 65 00:03:14,555 --> 00:03:16,400 Donc, si on 66 00:03:16,400 --> 00:03:18,640 clique sur le bouton du carrousel, que faites-vous ? 67 00:03:18,640 --> 00:03:22,370 Maintenant, heureusement, 68 00:03:22,370 --> 00:03:26,630 selon que le bouton est un bouton Lecture ou Pause, 69 00:03:26,630 --> 00:03:29,170 nous serons en mesure de prendre une action appropriée. 70 00:03:29,170 --> 00:03:30,620 Mais comment savoir s'il s' 71 00:03:30,620 --> 00:03:32,300 agit d'un bouton Play ou d'un bouton Pause ? 72 00:03:32,300 --> 00:03:35,960 Donc, c'est là que nous allons utiliser du 73 00:03:35,960 --> 00:03:39,005 code jQuery afin d' 74 00:03:39,005 --> 00:03:42,890 identifier s'il s'agit d'un bouton de lecture ou d'un bouton de pause. 75 00:03:42,890 --> 00:03:45,230 Pour nous aider à identifier cela, 76 00:03:45,230 --> 00:03:50,750 nous allons aller à l'intérieur ici et ensuite utiliser une instruction if, 77 00:03:50,750 --> 00:03:53,255 et à l'intérieur, je vais tester pour 78 00:03:53,255 --> 00:03:56,585 voir s'il s'agit d'un bouton de lecture ou de pause. 79 00:03:56,585 --> 00:03:59,010 Donc ici, je dis, 80 00:04:00,550 --> 00:04:08,955 CarouselButton.Children span. 81 00:04:08,955 --> 00:04:10,530 Donc, ce qui signifie que, 82 00:04:10,530 --> 00:04:12,115 pour ce bouton de carrousel, 83 00:04:12,115 --> 00:04:19,380 à l'intérieur où s'il y a un élément avec la balise span, 84 00:04:19,380 --> 00:04:22,790 donc nous savons évidemment que dans notre bouton de carrousel, 85 00:04:22,790 --> 00:04:24,620 nous avions la balise span qui 86 00:04:24,620 --> 00:04:28,910 contenait l'icône Font Awesome là-bas. 87 00:04:28,910 --> 00:04:31,025 Donc, pour cette balise span, 88 00:04:31,025 --> 00:04:34,440 nous allons vérifier hasClass. 89 00:04:36,020 --> 00:04:39,540 Donc, nous allons vérifier cette HasClass, 90 00:04:39,540 --> 00:04:42,020 et puis la classe que nous allons 91 00:04:42,020 --> 00:04:46,440 vérifier est fa-pause. 92 00:04:46,910 --> 00:04:49,170 Donc, ce qui signifie que, 93 00:04:49,170 --> 00:04:53,445 si la balise span a la classe fa-pause, 94 00:04:53,445 --> 00:04:55,760 alors nous savons que ce bouton 95 00:04:55,760 --> 00:04:58,085 agit actuellement comme le bouton pause. 96 00:04:58,085 --> 00:05:00,770 Donc, évidemment, lorsque le bouton est cliqué, 97 00:05:00,770 --> 00:05:03,135 l'utilisateur s'attend à ce que 98 00:05:03,135 --> 00:05:07,195 le comportement cyclique soit mis en pause. 99 00:05:07,195 --> 00:05:09,200 C' est ce que nous identifions ici. 100 00:05:09,200 --> 00:05:11,480 Donc, vous voyez maintenant que nous 101 00:05:11,480 --> 00:05:15,260 écrivons du code JavaScript plus avancé en utilisant 102 00:05:15,260 --> 00:05:19,775 la syntaxe jQuery afin de faire ce travail correctement. 103 00:05:19,775 --> 00:05:23,615 Donc à l'intérieur, alors qu'est-ce que je dois faire ? 104 00:05:23,615 --> 00:05:27,105 Maintenant, ce qui signifie que si le bouton 105 00:05:27,105 --> 00:05:31,605 est actuellement un bouton Pause, 106 00:05:31,605 --> 00:05:34,615 alors, évidemment, quand on clique sur le bouton, 107 00:05:34,615 --> 00:05:37,250 vous voulez mettre le carrousel en pause. 108 00:05:37,250 --> 00:05:41,825 Ensuite, en plus, nous voulons maintenant pouvoir basculer 109 00:05:41,825 --> 00:05:48,680 cette icône d'une icône de pause à une icône de lecture. 110 00:05:48,680 --> 00:05:50,750 Donc, ce que nous allons faire est, 111 00:05:50,750 --> 00:05:53,540 nous allons dire juste là après cela, 112 00:05:53,540 --> 00:06:11,175 nous allons dire $carouselButton.Children span, 113 00:06:11,175 --> 00:06:15,330 et puis nous allons dire, removeClass. 114 00:06:15,330 --> 00:06:23,915 Donc, nous allons supprimer la classe pause. 115 00:06:23,915 --> 00:06:25,990 Alors remarquez comment cela fonctionne. 116 00:06:25,990 --> 00:06:29,185 Nous allons supprimer la classe pause de cela, 117 00:06:29,185 --> 00:06:33,990 puis, nous allons ajouter la PlayClass. 118 00:06:33,990 --> 00:06:38,170 Ainsi, l'icône de votre bouton 119 00:06:38,170 --> 00:06:42,370 va maintenant être retournée d'un bouton Pause à un bouton Lecture. 120 00:06:42,370 --> 00:06:45,250 Donc nous allons supprimer le PauseClass. 121 00:06:45,250 --> 00:06:48,340 Je vais juste copier ce code 122 00:06:48,340 --> 00:06:49,960 , puis le coller juste 123 00:06:49,960 --> 00:06:52,300 là, puis faire l'édition de ce code. 124 00:06:52,300 --> 00:06:55,930 Même chose, pour le CarouselButton pour la portée des enfants, 125 00:06:55,930 --> 00:06:58,855 je vais à la place maintenant du RemoveClass, 126 00:06:58,855 --> 00:07:03,355 je dirais addClass, puis fa-play. 127 00:07:03,355 --> 00:07:05,800 Donc, ce que nous faisons, c'est 128 00:07:05,800 --> 00:07:07,765 que nous retournons ce bouton d' 129 00:07:07,765 --> 00:07:10,695 un bouton Pause à un bouton Lecture. 130 00:07:10,695 --> 00:07:16,310 En outre, nous mettons en pause 131 00:07:16,310 --> 00:07:19,355 le comportement cycliste du carrousel. 132 00:07:19,355 --> 00:07:22,795 Maintenant, si ce n'est pas le cas alors, 133 00:07:22,795 --> 00:07:24,870 ce devrait être un bouton Play afin que 134 00:07:24,870 --> 00:07:30,060 l'effet inverse soit introduit. 135 00:07:30,060 --> 00:07:33,815 Ensuite, je vais simplement copier ce code, 136 00:07:33,815 --> 00:07:38,900 puis faire les autres tests pour la situation 137 00:07:38,900 --> 00:07:44,105 où le bouton est un PlayButton. 138 00:07:44,105 --> 00:07:49,020 Donc je dirais autre, maintenant évidemment, 139 00:07:49,020 --> 00:07:54,750 je n'ai pas besoin de ça si c'est ici, mais juste pour être doublement sûr, 140 00:07:54,750 --> 00:07:57,220 je vais mettre ça là-dedans. 141 00:07:58,060 --> 00:08:00,830 Parce qu'il n'y a que deux possibilités, 142 00:08:00,830 --> 00:08:02,750 soit c'est un bouton Pause ou un bouton Lecture, 143 00:08:02,750 --> 00:08:06,530 mais juste pour me rassurer, 144 00:08:06,530 --> 00:08:10,010 je vais mettre cela comme un fa-play là. 145 00:08:10,010 --> 00:08:12,950 Maintenant à l'intérieur, je vais changer 146 00:08:12,950 --> 00:08:16,530 ça de pause en cycle. 147 00:08:16,530 --> 00:08:18,230 Parce que de l'exercice précédent, 148 00:08:18,230 --> 00:08:19,700 vous vous souvenez que si vous voulez que 149 00:08:19,700 --> 00:08:21,575 le comportement de cyclisme reprenne, 150 00:08:21,575 --> 00:08:29,205 vous devrez définir l'action du carrousel pour être cycle. 151 00:08:29,205 --> 00:08:33,840 Ensuite, de même, pour les deux instructions restantes, 152 00:08:33,840 --> 00:08:37,875 je vais supprimer la PlayClass 153 00:08:37,875 --> 00:08:42,715 , puis ajouter le PauseClass. 154 00:08:42,715 --> 00:08:48,095 Donc, remarquez comment nous utilisons un peu de 155 00:08:48,095 --> 00:08:52,310 code jQuery avancé pour être 156 00:08:52,310 --> 00:08:56,854 en mesure de changer dynamiquement l'icône des boutons, 157 00:08:56,854 --> 00:08:58,460 et en même temps, 158 00:08:58,460 --> 00:09:03,140 induire le comportement de cyclisme approprié sur notre carrousel. En 159 00:09:03,140 --> 00:09:05,760 regardant notre page web, 160 00:09:05,760 --> 00:09:09,390 vous voyez maintenant que mon carrousel fait du vélo, 161 00:09:09,390 --> 00:09:14,465 et vous voyez que ce bouton est actuellement un bouton Pause. 162 00:09:14,465 --> 00:09:16,130 Lorsque je clique sur ce bouton, 163 00:09:16,130 --> 00:09:21,855 remarquez comment il passe de Pause à un bouton Play là 164 00:09:21,855 --> 00:09:23,865 , puis simultanément, 165 00:09:23,865 --> 00:09:27,325 mon comportement cycliste du carrousel est suspendu. 166 00:09:27,325 --> 00:09:28,840 Donc, à ce stade, 167 00:09:28,840 --> 00:09:31,460 mon carrousel restera en pause à cet 168 00:09:31,460 --> 00:09:34,700 endroit jusqu'à ce que je clique sur le bouton. 169 00:09:34,700 --> 00:09:36,950 Donc maintenant, si je clique à nouveau sur ce bouton, 170 00:09:36,950 --> 00:09:40,130 notez le changement du bouton Lecture à un bouton Pause, 171 00:09:40,130 --> 00:09:42,320 puis le comportement de cyclisme 172 00:09:42,320 --> 00:09:44,795 du carrousel reprendra sur place. 173 00:09:44,795 --> 00:09:46,625 Donc, en utilisant un seul bouton maintenant, 174 00:09:46,625 --> 00:09:50,570 je suis capable à la fois de contrôler 175 00:09:50,570 --> 00:09:54,695 le comportement du carrousel et aussi simultanément, 176 00:09:54,695 --> 00:09:57,125 d'afficher l'état actuel 177 00:09:57,125 --> 00:09:59,460 du comportement cycliste de mon carrousel. 178 00:09:59,460 --> 00:10:00,740 Si c'est un bouton Pause, 179 00:10:00,740 --> 00:10:03,050 cela signifie que mon carrousel est en train de rouler. 180 00:10:03,050 --> 00:10:04,535 Si c'est un bouton Play 181 00:10:04,535 --> 00:10:06,560 , mon carrousel est mis en pause. 182 00:10:06,560 --> 00:10:08,630 Donc, pour le reprendre, 183 00:10:08,630 --> 00:10:10,175 je vais devoir cliquer sur le bouton. 184 00:10:10,175 --> 00:10:14,600 Donc, c'est un changement supplémentaire 185 00:10:14,600 --> 00:10:17,120 que vous pouvez faire à l'exercice. 186 00:10:17,120 --> 00:10:20,480 Donc maintenant, vous voyez comment dans notre code nous 187 00:10:20,480 --> 00:10:24,629 avons utilisé la méthode hasClass, 188 00:10:24,629 --> 00:10:27,000 et nous avons également vu l'utilisation des méthodes 189 00:10:27,000 --> 00:10:30,990 RemoveClass et AddClass, des méthodes 190 00:10:30,990 --> 00:10:33,770 jQuery que nous avons appliquées 191 00:10:33,770 --> 00:10:36,845 afin de manipuler le DOM pour 192 00:10:36,845 --> 00:10:39,545 refléter le comportement comme 193 00:10:39,545 --> 00:10:43,445 pertinent dans ce cas particulier. 194 00:10:43,445 --> 00:10:47,755 Avec cela, nous terminons cet exercice. 195 00:10:47,755 --> 00:10:51,450 Il est temps pour vous de faire un commit Git avec 196 00:10:51,450 --> 00:10:56,710 le message plus Bootstrap et jQuery.