Converting players to initButton

JavaScript
1

I hope I did these right.

Did I mess up on any?

This:

  var playButtons = document.querySelectorAll(".wrapb");
  playButtons.forEach(function(button) {
    button.addEventListener("click", initialOverlayClickHandler);
  });
}());

Becomes This:

     function initButton(selector) {
        var button = document.querySelector(selector);
        button.addEventListener("click", initialOverlayClickHandler);
    }
    initButton(".wrapb");
}());

This:

  var playButton = document.querySelector(".wrapf");
  playButton.addEventListener("click", playButtonClickHandler);
}());

Becomes this:

     function initButton(selector) {
        var playButton = document.querySelector(selector);
        playButton.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}());

or this:
https://jsfiddle.net/qhkLdveg/30/

    function initButton(selector) {
        var button = document.querySelector(selector);
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}());

This:

  var playButtons = document.querySelectorAll(".wrapc");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
  });
}());

Becomes:
I’m stuck on this one
https://jsfiddle.net/qhkLdveg/29/

     function initButton(selector) {
        var playButtons = document.querySelector(selector);
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapc");

I think I got it:
https://jsfiddle.net/qhkLdveg/31/

     function initButton(selector) {
        var button = document.querySelector(selector);
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapc");
    }());
2

Wait a second, I think these ways would be correct:

.wrapb

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapb");
}());

.wrapc

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapc");
}());

.wrapf
https://jsfiddle.net/qhkLdveg/35/

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapf");
}());
3

I have a question about this one:

.wrapc

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapc");
}());

Should I add: playButton

to:

<div class="wrapc">

like this?

<div class="wrapc playButton">

the flow goes like this:

<audio></audio>
<div class="wrapc">

  <div class="playButton svoefm" data-audio="http://getradio.me/svoefm">
    <svg class="play" width="12" height="14" viewbox="0 0 85 100">
4

I had a question which was going to be this, but let me see if I can answer it.

If I remove this line of code they all still work, so is it needed?

Why is this line in there?

var button = wrapper.querySelector(".playButton");

If it’s needed, what purpose does it serve, and how does it work without it?

  function initButton(selector) {
    var wrapper = document.querySelector(selector);

    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapc");
}());
5

Without this it has to search for the .playButton. With this line in there it goes straight to the .playButton without having to look for it.

var button = wrapper.querySelector(".playButton");
6

I was curious about one thing during this whole process.

This:

  var playButtons = document.querySelectorAll(".wrapb");
  playButtons.forEach(function(button) {
    button.addEventListener("click", initialOverlayClickHandler);
  });
}());

Becomes this:
https://jsfiddle.net/qhkLdveg/38/

 function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapb");
}());

But how come this line is no longer necessary?
playButtons.forEach(function(button) {

7

All are using initButtons now:

8

I’m confused about something:

How come jslint is telling me this?

I don’t get it.

Isn’t this required for the initButton?

Should I ignore that, or am I missing something in the code?
or should I remove that line from the code?

(function iife() {
    "use strict";

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

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

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

    function hideAllButtons(button) {
        var buttonSelectors = ".play, .pause, .initial, .speaker";
        button.querySelectorAll(buttonSelectors).forEach(hide);
    }

    function getPlay(button) {
        return button.querySelector(".play");
    }

    function getPause(button) {
        return button.querySelector(".pause");
    }

    function showPlayButton(button) {
        var play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        var play = getPlay(button);
        return play.classList.contains("hide");
    }

    function pauseAllButtons() {
        var buttons = document.querySelectorAll(".playButton");
        buttons.forEach(function hidePause(button) {
            if (isPlaying(button)) {
                showPlayButton(button);
            }
        });
    }

    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        var player = getAudio();
        var playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

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

    function initButton(selector) {
        var wrapper = document.querySelector(selector);
        var button = wrapper.querySelector(".playButton");
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}());
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.