How to remove variable from animation code

Question

I am trying to remove this namespaced-scoped variable from the code.

How would I be able to do that?

Is this able to be done?

Local Variable: let currentPlayButton = {};

https://jsfiddle.net/hxar8w1g/

const manageCover = (function makeManageCover() {

  let currentPlayButton = {};

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

}());

Full Function:

const manageCover = (function makeManageCover() {
  const config = {};
  const body = document.body;
  let currentPlayButton = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }

  function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function playButtonHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler);
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector(coverSelector);
    cover.addEventListener("click", handler);
  }

  function init(selectors) {
    config.containers = document.querySelectorAll(selectors.container);
    const playButtons = document.querySelectorAll(selectors.playButton);
    addClickToButtons(playButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addCoverHandler,
    init
  };
}());

Answer 1

It's not global, it's local to makeManageCover - which is just fine, there shouldn't be anything to worry about. Global variables are problematic, but namespaced-scoped variables are extremely common and can be difficult or impossible to eliminate.

But if you wanted to remove it from being in the top-level scope of makeManageCover, you could make an IIFE, declare it inside the IIFE, and return both the animationEndHandler and coverClickHandler. This is the exact same technique you're using for the whole manageCover, only on a smaller scale.

const { animationEndHandler, coverClickHandler } = (() => {
    let currentPlayButton = {};
    function animationEndHandler(evt) {
        const animationName = evt.animationName;
        if (animationName === "initial-fade") {
            body.classList.remove("initial-fade");
            showCover(currentPlayButton);
        }
    }
    function coverClickHandler(evt) {
        currentPlayButton = evt.currentTarget;
        body.classList.add("initial-fade");
    }
    return { animationEndHandler, coverClickHandler };
})();