Yes, that does appear to be an issue that takes a bit of management. Back to the question I posed above though. #568
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Yes, that does appear to be an issue that takes a bit of management. Back to the question I posed above though. #568
This one uses upTo, the other code doesn’t.
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = upTo(evt.target, ".playButton");
togglePlayButton(button);
}
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
var button = wrapper.querySelector(".playButton");
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
hideAllButtons(button);
}
initButton(".wrape");
}());
This one is more descriptive, the other one isn’t.
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
var button = wrapper.querySelector(".playButton");
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
hideAllButtons(button);
}
initButton(".wrape");
You are deciding between using an upTo() or the getButtonContainer() function.
The upTo() function is a more flexible and generic version of the geButtonContainer() function.
There is a rule of three code of thumb that says don’t use more generic functions until you have the same or similar thing being done in three different ways.
Currently you have getButtonContainer() but you don’t have any other functions that use the same while
and parentNode
technique to get the element.
Because of that, it’s best to stay with getButtonContainer() and leave upTo() in your toolchest until there is a better need for it to be used later on.
What does that mean?
What do you mean by in 3 different ways?
it’s best to stay with getButtonContainer()
Wait, you’re telling me to stay with this code?
Would that be right?
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
If you had a function that goes up to the container
and another function that goes up to header
and another function that goes up to the sidebar
then you would have:
function getContainer(el) {
while (el.classList.contains("container") === false) {
el = el.parentNode;
}
return el;
}
function getHeader(el) {
while (el.classList.contains("header") === false) {
el = el.parentNode;
}
return el;
}
function getSidebar(el) {
while (el.classList.contains("sidebar") === false) {
el = el.parentNode;
}
return el;
}
Then that is a good example of duplication by the rule-of-three, and can then be simplified using the more generic function of upTo()
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
function getContainer(el) {
return upTo(el, "container");
}
function getHeader(el) {
return upTo("header");
}
function getSidebar(el) {
return upTo("sidebar");
}
Doing this optimization though before you have more than two examples of duplication is a mistake, because then you are guilty of premature optimization.
Keep this one in my toolchest.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = upTo(evt.target, ".playButton");
togglePlayButton(button);
}
This one uses while, parentNode, and getbutton container
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
This one uses while, parentNode, and getbutton container
https://jsfiddle.net/hhptwj0a/4/
Yes, and I have a banana on my desk. What about it?
You’re telling me to use that code.
And keep this one in my toolchest.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = upTo(evt.target, ".playButton");
togglePlayButton(button);
}
I want to make sure I understand you correctly.
You’re telling me to use that code.
And keep this one in my toolchest.
Yes, that’s right.
I removed the cover from this button, why isn’t it showing?
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I removed the cover from this button, why isn’t it showing?
https://jsfiddle.net/hhptwj0a/57/
That’s because you’ve used the inactive state is to hide the links.
I should remove that?
Now the button and background aren’t showing.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I should remove that?
If you don’t want the links to be initially hidden, then you should update the CSS so that they aren’t hidden when the button is initially inactive.
You still have to click to see the background and playbutton.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
How do I show those?
You still have to click to see the background and playbutton.
https://jsfiddle.net/hhptwj0a/68/
The init section is setting the initialOverlay click handler.
That can be made a bit smarter, by checking if the cover exists and taking appropriate action based on whether the cover exists or not.
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
if (wrapper.querySelector(".cover")) {
hideAllButtons(button);
wrapper.addEventListener("click", initialOverlayClickHandler);
} else {
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.addEventListener("click", playButtonClickHandler);
}
}
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Only one thing, there is no .cover in the CSS, or the html.
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
As you might recall, that type of code solution arose naturally out of the code when combining the different sets of code together so that one set of JavaScript is used to control all of the buttons.
I keep trying to push you that way, and you end up staggering off in some other direction for a while.
What I have:
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initialOverlayClickHandler() {
var wrapper = document.querySelector(".wrape");
var button = wrapper.querySelector(".playButton");
hideInitialOverlay(wrapper);
showPlayButton(button);
wrapper.removeEventListener("click", initialOverlayClickHandler);
button.addEventListener("click", playButtonClickHandler);
}
function initButton(selector) {
var wrapper = document.querySelector(selector);
var button = wrapper.querySelector(".playButton");
wrapper.classList.add("inactive");
wrapper.addEventListener("click", initialOverlayClickHandler);
hideAllButtons(button);
}
initButton(".wrape");
}());
Can I combine somehow, the top javascript,
with this lower javacript?
Inside this code?
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Removing all the stuff that’s not needed.
And keeping all the parts I’m using.
It works like this too:
http://jsfiddle.net/uf70rj0g/249/
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());