Not seeing the square links with javascript disabled

Yes, that does appear to be an issue that takes a bit of management. Back to the question I posed above though. #568

1 Like

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.

1 Like

Keep this one in my toolchest.

  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

   function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

        function playButtonClickHandler(evt) {
        var button = getButtonContainer(evt.target);
        togglePlayButton(button);
    }

Yes, and I have a banana on my desk. What about it?

1 Like

You’re telling me to use that code.

And keep this one in my toolchest.


  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.

Yes, that’s right.

1 Like

I removed the cover from this button, why isn’t it showing?

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.

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.

1 Like

You still have to click to see the background and playbutton.

How do I show those?

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);
    }
  }
1 Like

Only one thing, there is no .cover in the CSS, or the html.

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.

1 Like

What I have:

  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?

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);
}());