1
00:00:03,530 --> 00:00:06,090
No exercício anterior,

2
00:00:06,090 --> 00:00:08,370
vimos como podemos aproveitar

3
00:00:08,370 --> 00:00:11,820
os controles baseados em JavaScript fornecidos para

4
00:00:11,820 --> 00:00:14,820
os componentes JavaScript do Bootstrap

5
00:00:14,820 --> 00:00:18,240
para controlar o comportamento dos componentes.

6
00:00:18,240 --> 00:00:23,370
Em particular, vimos o uso do carrossel e

7
00:00:23,370 --> 00:00:25,140
como fomos capazes de introduzir

8
00:00:25,140 --> 00:00:26,880
dois botões para controlar

9
00:00:26,880 --> 00:00:29,190
o comportamento de ciclismo do carrossel.

10
00:00:29,190 --> 00:00:33,645
Agora, eu não estou totalmente satisfeito com essa implementação.

11
00:00:33,645 --> 00:00:36,510
Gostaria agora de recolher a coisa toda

12
00:00:36,510 --> 00:00:39,270
em um único botão que pode

13
00:00:39,270 --> 00:00:42,690
indicar o comportamento atual

14
00:00:42,690 --> 00:00:46,625
do carrossel e também ser capaz de controlar o carrossel.

15
00:00:46,625 --> 00:00:50,225
Então vamos ver como podemos alavancar

16
00:00:50,225 --> 00:00:53,180
mais código jQuery,

17
00:00:53,180 --> 00:00:56,800
a fim de conseguir isso, neste exercício.

18
00:00:56,800 --> 00:01:00,575
Para conseguir isso, voltaremos ao código

19
00:01:00,575 --> 00:01:03,995
em index.html, onde definimos os dois botões.

20
00:01:03,995 --> 00:01:08,960
Eu vou agora remover esta div para

21
00:01:08,960 --> 00:01:11,135
o grupo de botões porque nós vamos ter

22
00:01:11,135 --> 00:01:14,510
apenas um único botão em vez de dois botões.

23
00:01:14,510 --> 00:01:18,620
Então eu removi a div em torno dos dois botões.

24
00:01:18,620 --> 00:01:20,660
Eu também vou apagar um dos botões,

25
00:01:20,660 --> 00:01:22,415
porque nós vamos trabalhar com

26
00:01:22,415 --> 00:01:25,640
apenas um único botão para este exercício.

27
00:01:25,640 --> 00:01:28,640
Então deixe-me mudar o recuo.

28
00:01:28,640 --> 00:01:32,450
Então, agora, este botão em particular que temos lá,

29
00:01:32,450 --> 00:01:36,090
vou renomear este botão como CarouselButton.

30
00:01:37,120 --> 00:01:40,580
Vamos começar com este botão sendo

31
00:01:40,580 --> 00:01:43,940
um botão com o ícone de pausa.

32
00:01:43,940 --> 00:01:46,280
Vamos virar o ícone

33
00:01:46,280 --> 00:01:49,235
deste botão através do código JavaScript.

34
00:01:49,235 --> 00:01:50,750
Então, como fazemos isso?

35
00:01:50,750 --> 00:01:53,480
Dando uma olhada em nossa página web,

36
00:01:53,480 --> 00:01:56,855
vamos agora ver que temos um único botão aqui,

37
00:01:56,855 --> 00:02:00,830
que está atualmente indicando a pausa lá.

38
00:02:00,830 --> 00:02:05,530
Agora, minha esperança no final deste exercício

39
00:02:05,530 --> 00:02:07,580
é transformar este botão em

40
00:02:07,580 --> 00:02:10,730
um único controle em que se eu clicar neste botão,

41
00:02:10,730 --> 00:02:15,210
ele irá pausar o comportamento cíclico do carrossel,

42
00:02:15,210 --> 00:02:17,120
e então simultaneamente transformar

43
00:02:17,120 --> 00:02:19,790
este botão em um botão play, o

44
00:02:19,790 --> 00:02:21,590
que significa que este ícone

45
00:02:21,590 --> 00:02:23,705
será substituído com o ícone de reprodução.

46
00:02:23,705 --> 00:02:27,170
Para que este único botão indique qual é

47
00:02:27,170 --> 00:02:29,090
o estado atual

48
00:02:29,090 --> 00:02:33,400
do comportamento cíclico do meu carrossel. Como é que fazemos isso?

49
00:02:33,400 --> 00:02:34,940
Precisamos editar

50
00:02:34,940 --> 00:02:38,010
o código JavaScript para conseguir isso.

51
00:02:38,010 --> 00:02:41,240
Descendo para o código JavaScript

52
00:02:41,240 --> 00:02:43,910
na parte inferior da página index.html.

53
00:02:43,910 --> 00:02:47,450
Então aqui, nós tínhamos esse script que tínhamos

54
00:02:47,450 --> 00:02:49,580
incluído anteriormente,

55
00:02:49,580 --> 00:02:52,325
a fim de ativar os dois botões lá.

56
00:02:52,325 --> 00:02:54,980
Vou editar este código

57
00:02:54,980 --> 00:02:58,685
para fazer uso desse único botão que temos lá.

58
00:02:58,685 --> 00:03:00,860
Então, vindo aqui,

59
00:03:00,860 --> 00:03:01,910
eu vou remover

60
00:03:01,910 --> 00:03:03,950
esta segunda parte porque nós

61
00:03:03,950 --> 00:03:06,190
só temos um único botão agora aqui,

62
00:03:06,190 --> 00:03:08,575
que é o botão carouselButton,

63
00:03:08,575 --> 00:03:10,630
e sempre que isso for clicado,

64
00:03:10,630 --> 00:03:14,555
você precisa fazer algo em resposta a isso.

65
00:03:14,555 --> 00:03:16,400
Então, se o botão do carrossel é

66
00:03:16,400 --> 00:03:18,640
clicado, então o que você faz?

67
00:03:18,640 --> 00:03:22,370
Agora, felizmente, dependendo

68
00:03:22,370 --> 00:03:26,630
se o botão é um botão Reproduzir ou um botão Pausar,

69
00:03:26,630 --> 00:03:29,170
poderemos tomar as medidas apropriadas.

70
00:03:29,170 --> 00:03:30,620
Mas como sabemos se

71
00:03:30,620 --> 00:03:32,300
é um botão Reproduzir ou um botão Pausar?

72
00:03:32,300 --> 00:03:35,960
Então é aqui que vamos fazer uso de

73
00:03:35,960 --> 00:03:39,005
algum código jQuery, a fim de

74
00:03:39,005 --> 00:03:42,890
identificar se este é um botão play ou um botão de pausa.

75
00:03:42,890 --> 00:03:45,230
Para nos ajudar a identificar isso,

76
00:03:45,230 --> 00:03:50,750
vamos entrar aqui e usar uma declaração if,

77
00:03:50,750 --> 00:03:53,255
e lá dentro, vou testar

78
00:03:53,255 --> 00:03:56,585
para ver se isto é um jogo ou um botão de pausa.

79
00:03:56,585 --> 00:03:59,010
Então aqui eu digo,

80
00:04:00,550 --> 00:04:08,955
carouselButton.Crianças vão.

81
00:04:08,955 --> 00:04:10,530
Então o que significa que,

82
00:04:10,530 --> 00:04:12,115
para este botão carrossel,

83
00:04:12,115 --> 00:04:19,380
dentro de onde se há um elemento com a tag span,

84
00:04:19,380 --> 00:04:22,790
então nós obviamente sabemos que em nosso botão carrossel,

85
00:04:22,790 --> 00:04:24,620
nós tínhamos a tag span que

86
00:04:24,620 --> 00:04:28,910
continha o ícone Font Awesome lá.

87
00:04:28,910 --> 00:04:31,025
Então, para essa tag span,

88
00:04:31,025 --> 00:04:34,440
vamos verificar hasClass.

89
00:04:36,020 --> 00:04:39,540
Então vamos verificar este hasClass,

90
00:04:39,540 --> 00:04:42,020
e então a classe que vamos

91
00:04:42,020 --> 00:04:46,440
verificar é fa-pause.

92
00:04:46,910 --> 00:04:49,170
Então, o que significa que,

93
00:04:49,170 --> 00:04:53,445
se a tag span tem a classe fa-pause,

94
00:04:53,445 --> 00:04:55,760
então sabemos que este botão está

95
00:04:55,760 --> 00:04:58,085
atuando atualmente como o botão de pausa.

96
00:04:58,085 --> 00:05:00,770
Então, obviamente, quando o botão é clicado,

97
00:05:00,770 --> 00:05:03,135
o usuário está esperando que

98
00:05:03,135 --> 00:05:07,195
o comportamento cíclico deve ser pausado.

99
00:05:07,195 --> 00:05:09,200
Então é isso que identificamos aqui.

100
00:05:09,200 --> 00:05:11,480
Então você vê agora que estamos escrevendo

101
00:05:11,480 --> 00:05:15,260
algum código JavaScript mais avançado usando

102
00:05:15,260 --> 00:05:19,775
a sintaxe jQuery, a fim de fazer isso funcionar corretamente.

103
00:05:19,775 --> 00:05:23,615
Então, aqui dentro, o que preciso fazer?

104
00:05:23,615 --> 00:05:27,105
Agora, o que significa que, se o botão

105
00:05:27,105 --> 00:05:31,605
for atualmente um botão Pausa,

106
00:05:31,605 --> 00:05:34,615
então, obviamente, quando o botão é clicado,

107
00:05:34,615 --> 00:05:37,250
você deseja pausar o carrossel.

108
00:05:37,250 --> 00:05:41,825
Então, além disso, queremos agora ser capazes de inverter

109
00:05:41,825 --> 00:05:48,680
esse ícone de um ícone de pausa para um ícone de reprodução.

110
00:05:48,680 --> 00:05:50,750
Então o que vamos fazer é,

111
00:05:50,750 --> 00:05:53,540
vamos dizer logo ali depois disso,

112
00:05:53,540 --> 00:06:11,175
vamos dizer $carouselButton.Children span,

113
00:06:11,175 --> 00:06:15,330
e então vamos dizer, removeClass.

114
00:06:15,330 --> 00:06:23,915
Então vamos remover a aula de pausa.

115
00:06:23,915 --> 00:06:25,990
Então, repare como isso funciona.

116
00:06:25,990 --> 00:06:29,185
Vamos remover a classe de pausa disso,

117
00:06:29,185 --> 00:06:33,990
e então, vamos adicionar a PlayClass.

118
00:06:33,990 --> 00:06:38,170
Dessa forma, o ícone do seu botão agora

119
00:06:38,170 --> 00:06:42,370
será virado de um botão Pausa para um botão Reproduzir.

120
00:06:42,370 --> 00:06:45,250
Então vamos remover o PauseClass.

121
00:06:45,250 --> 00:06:48,340
Eu vou apenas copiar este código e,

122
00:06:48,340 --> 00:06:49,960
em seguida, colá-lo bem

123
00:06:49,960 --> 00:06:52,300
ali e, em seguida, fazer a edição para este código.

124
00:06:52,300 --> 00:06:55,930
Mesma coisa, para o CarouselButton para as crianças span,

125
00:06:55,930 --> 00:06:58,855
Eu vou em vez agora do removeClass,

126
00:06:58,855 --> 00:07:03,355
Eu diria addClass, e depois fa-play.

127
00:07:03,355 --> 00:07:05,800
Dessa forma, o que estamos fazendo é,

128
00:07:05,800 --> 00:07:07,765
estamos girando esse botão de

129
00:07:07,765 --> 00:07:10,695
um botão Pausa para um botão Reproduzir.

130
00:07:10,695 --> 00:07:16,310
Além disso, estamos pausando

131
00:07:16,310 --> 00:07:19,355
o comportamento de ciclismo do carrossel.

132
00:07:19,355 --> 00:07:22,795
Agora, se este não for o caso, então,

133
00:07:22,795 --> 00:07:24,870
ele deve ser um botão Play para que

134
00:07:24,870 --> 00:07:30,060
o efeito oposto deve ser introduzido.

135
00:07:30,060 --> 00:07:33,815
Então, eu vou simplesmente copiar este código

136
00:07:33,815 --> 00:07:38,900
e, em seguida, fazer os outros testes para a

137
00:07:38,900 --> 00:07:44,105
situação em que o botão é um PlayButton.

138
00:07:44,105 --> 00:07:49,020
Então eu diria outra coisa, agora, obviamente,

139
00:07:49,020 --> 00:07:54,750
eu não preciso disso se aqui, mas só para ter certeza duplamente,

140
00:07:54,750 --> 00:07:57,220
eu vou colocar isso lá dentro.

141
00:07:58,060 --> 00:08:00,830
Porque há apenas duas possibilidades,

142
00:08:00,830 --> 00:08:02,750
ou é um botão Pausa ou um botão Play,

143
00:08:02,750 --> 00:08:06,530
mas apenas para minha garantia,

144
00:08:06,530 --> 00:08:10,010
eu vou colocar isso como um fa-play lá.

145
00:08:10,010 --> 00:08:12,950
Agora lá dentro, vou mudar

146
00:08:12,950 --> 00:08:16,530
isto de pausa para ciclo.

147
00:08:16,530 --> 00:08:18,230
Porque a partir do exercício anterior,

148
00:08:18,230 --> 00:08:19,700
você se lembra que se você quiser que

149
00:08:19,700 --> 00:08:21,575
o comportamento de ciclismo para retomar,

150
00:08:21,575 --> 00:08:29,205
você teria que definir a ação do carrossel para ser ciclo.

151
00:08:29,205 --> 00:08:33,840
Então, da mesma forma, para as duas declarações restantes,

152
00:08:33,840 --> 00:08:37,875
eu vou remover a PlayClass

153
00:08:37,875 --> 00:08:42,715
e, em seguida, adicionar o PauseClass.

154
00:08:42,715 --> 00:08:48,095
Então, observe como estamos usando um pouco de

155
00:08:48,095 --> 00:08:52,310
código jQuery avançado para ser

156
00:08:52,310 --> 00:08:56,854
capaz de alterar dinamicamente o ícone de botões

157
00:08:56,854 --> 00:08:58,460
e, ao mesmo tempo,

158
00:08:58,460 --> 00:09:03,140
induzir o comportamento de ciclismo apropriado em nosso carrossel.

159
00:09:03,140 --> 00:09:05,760
Olhando para a nossa página web,

160
00:09:05,760 --> 00:09:09,390
agora você vê que meu carrossel está pedalando,

161
00:09:09,390 --> 00:09:14,465
e você vê que este botão é atualmente um botão Pausa.

162
00:09:14,465 --> 00:09:16,130
Quando eu clico neste botão,

163
00:09:16,130 --> 00:09:21,855
observe como ele muda de Pausar para um botão Reproduzir

164
00:09:21,855 --> 00:09:23,865
lá e, simultaneamente,

165
00:09:23,865 --> 00:09:27,325
meu comportamento de ciclismo do carrossel é pausado.

166
00:09:27,325 --> 00:09:28,840
Então, neste ponto,

167
00:09:28,840 --> 00:09:31,460
meu carrossel permanecerá pausado

168
00:09:31,460 --> 00:09:34,700
naquele local até que eu clique no botão.

169
00:09:34,700 --> 00:09:36,950
Então, agora, se eu clicar neste botão novamente,

170
00:09:36,950 --> 00:09:40,130
observe a mudança do botão Reproduzir para um botão Pausa

171
00:09:40,130 --> 00:09:42,320
e, em seguida, o comportamento de ciclismo

172
00:09:42,320 --> 00:09:44,795
do carrossel será retomado no local.

173
00:09:44,795 --> 00:09:46,625
Então, usando um único botão agora,

174
00:09:46,625 --> 00:09:50,570
eu sou capaz de controlar

175
00:09:50,570 --> 00:09:54,695
o comportamento do carrossel e também, simultaneamente,

176
00:09:54,695 --> 00:09:57,125
exibir o estado atual do

177
00:09:57,125 --> 00:09:59,460
comportamento de ciclismo do meu carrossel.

178
00:09:59,460 --> 00:10:00,740
Se esse é um botão Pausa,

179
00:10:00,740 --> 00:10:03,050
isso significa que meu carrossel está pedalando.

180
00:10:03,050 --> 00:10:04,535
Se esse for um botão Reproduzir

181
00:10:04,535 --> 00:10:06,560
, meu carrossel será pausado.

182
00:10:06,560 --> 00:10:08,630
Então, para retomar,

183
00:10:08,630 --> 00:10:10,175
terei que clicar no botão.

184
00:10:10,175 --> 00:10:14,600
Então, esta é mais uma mudança adicional

185
00:10:14,600 --> 00:10:17,120
que você pode fazer para o exercício.

186
00:10:17,120 --> 00:10:20,480
Então agora, você vê como em nosso código

187
00:10:20,480 --> 00:10:24,629
fizemos uso do método hasClass,

188
00:10:24,629 --> 00:10:27,000
e também vimos o uso dos métodos

189
00:10:27,000 --> 00:10:30,990
removeClass e addClass, métodos

190
00:10:30,990 --> 00:10:33,770
jQuery que aplicamos

191
00:10:33,770 --> 00:10:36,845
a fim de manipular o DOM para

192
00:10:36,845 --> 00:10:39,545
refletir o comportamento como

193
00:10:39,545 --> 00:10:43,445
pertinente neste caso particular.

194
00:10:43,445 --> 00:10:47,755
Com isso, completamos este exercício.

195
00:10:47,755 --> 00:10:51,450
É hora de você fazer um commit Git com

196
00:10:51,450 --> 00:10:56,710
a mensagem mais Bootstrap e jQuery.