upto is the same code as this:
There wonât be multiple links.
this will be the only one that uses links.
Thatâs right, and weâll need the var link code in the play button function.
I said I wanted to make 2 versions,
I didnât say I was going to use both on 1 page.
Thatâs fine. Remaining with upTo makes it more consistent with the code on other pages too.
Other benefits are that everything is accessed from the button variable, which makes the code more resilient to future change too.
function playButtonClickHandler() {
var link = getPlayButton(button, ".links");
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("playing");
hide(button.querySelector(".initial"));
link.classList.remove("inactive");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
playButton.querySelector(".play").style.display = "none";
playButton.querySelector(".pause").style.display = "inline-block";
player.play();
} else {
playButton.querySelector(".play").style.display = "inline-block";
playButton.querySelector(".pause").style.display = "none";
player.pause();
}
}
function getPlayButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
Wait a second:
Whatâs the point in doing this, if the code will be the same:
Letâs move on to version 2 then.
Getting this
to work like this
https://jsfiddle.net/02me2fvk/40/
new added code:
document.querySelector(".links").classList.add("hide");
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", linksClickHandler);
var player = document.querySelector("audio");
function linksClickHandler() {
var button = document.querySelector(".playButton");
hide(wrap.querySelector(".links"));
hide(button.querySelector(".initial"));
playButton.addEventListener("click", playButtonClickHandler);
show(play);
hide(pause);
button.classList.add("playing");
}
}
What is the benefit of that second code that you want to add to the first one?
It doesnât start playing after you click the image.
Unless thereâs a better way to implement that?
Getting the play button to show after you click the image with no audio playing.
Instead of the pause button showing after you click the imageâŚ
We need to slightly reorganise things to easily achieve that, by moving the if/else code up just under the var statements.
That way, we can have the if statement also check for something that the code below it changes.
We could check if â.playingâ isnât on the button, or we could check if the â.initialâ display image is hidden, or we could check of the â.inactiveâ class on the links isnât there.
Which of those three approaches do you think is most appropriate?
check if â.playingâ isnât on the button,
Okay, first thing to do is to move the if/else block of code up until itâs just below the var statements.
is that right or not?
Yes, what I instructed you to do is right.
function togglePlayButton(button) {
var link = upTo(button, ".links");
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
if (player.paused) {
hide(play);
show(pause);
player.play();
} else {
button.classList.add("playing");
hide(button.querySelector(".initial"));
link.classList.remove("inactive");
player.volume = 1.0;
show(play);
hide(pause);
player.pause();
}
Good one. You are now going to create a new function just above the togglePlayButton one, called isPlaying(button)
That function will just return true/false, and from the if statement, we will use that function to check if itâs okay to play.
This is a good time though to revisit the naming of the âplayingâ class. The purpose of it is to set how the play button looks after the initial image has been clicked.
The âplayingâ class is still there when it is playing and when itâs paused, so another name like âactiveâ is more appropriate, and certainly less confusing when weâre working with the code.
What do you think? Shall we rename âplayingâ to âactiveâ, or to something else that you think is more appropriate?
function isPlaying(button) {
;
}
We need to first do something about that last piece, because it will change how the function is named.
button.classList.add("playing");
So active, or no?
Should they be different names?
Active is the standard nomenclature. There should only be one place in each of the JavaScript and CSS code that needs to have playing renamed to active.