Converting the inline javascript to pure javascript, how would this be done?


#102

And now you’ve made the class names less understandable. That is not a suitable pathway to success.


#103

When the list of selectors grows long enough to blast things past the 80 char limit, that’s a good sign that too many selectors are involved. There are well known solutions to that, which you seem to be currently ignoring.


#105
(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) {
        button.querySelectorAll(".js-button").forEach(hide);
    }

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

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

    function getSpeaker(button) {
        return button.querySelector(".speaker");
    }

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

    function hideInitialOverlay(button) {
        hide(button.querySelector(".initial"));
        showPlayButton(button);
    }

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

    function showPauseButton(button) {
        var pause = getPause(button);
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }

    function showSpeakerButton(button) {
        var speaker = getSpeaker(button);
        hideAllButtons(button);
        show(speaker);
    }

    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 playButton(button) {
        var player = getAudio();
        var playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

    function showPause(button) {
        if (isPlaying(button)) {
            showPauseButton(button);
        }
    }

    function showSpeaker(button) {
        if (isPlaying(button)) {
            showSpeakerButton(button);
        }
    }

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

    function playButtonMouseoverHandler(evt) {
        var button = getButtonContainer(evt.target);
        showPause(button);
    }

    function playButtonMouseoutHandler(evt) {
        var button = getButtonContainer(evt.target);
        showSpeaker(button);
    }

    function initialOverlayClickHandler(evt) {
        var button = getButtonContainer(evt.target);
        hideInitialOverlay(button);
        button.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);
        button.addEventListener("mouseover", playButtonMouseoverHandler);
        button.addEventListener("mouseout", playButtonMouseoutHandler);
        playButtonClickHandler(evt);
    }
    var playButtons = document.querySelectorAll(".wrapb");
    playButtons.forEach(function(button) {
        button.addEventListener("click", initialOverlayClickHandler);
    });
}());

#106
button.querySelectorAll(".js-button").forEach(hide);

Stuck:

<div class="initial js-button">
...
<div class="play js-button">
...
<div class="pause js-button">
...
<div class="speaker js-button">

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
    </path>
  </svg>

  <svg class="pause hide" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
    </path>
  </svg>

  <svg class="speaker hide" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill-rule="evenodd">
    </path>
  </svg>

  <svg class="play hide" width="90" height="108" viewbox="0 -10 85 120">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
    </path>
  </svg>
  <div class="lines"></div>
</div>

#107

@Paul_Wilkins

Are you allowed 3?

class="pause js-button hide"

It worked here:
https://jsfiddle.net/mfo81y6z/1/


#108

@Paul_Wilkins

Does the CSS need to change at all?

.wrapb .initial,
.wrapb .pause,
.wrapb .play,
.wrapb .speaker {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.wrapb .initial {
  stroke: #0059dd;
  stroke-width: 3px;
  fill: transparent;
}

.wrapb .pause,
.wrapb .play {
  stroke: #0059dd;
  stroke-width: 3px;
  fill: transparent;
}

.wrapb .speaker {
  fill: #1ed760;
}

#109

I can do this now:

.wrapb .js-button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

#110

Yes.

No it doesn’t.

WTF? No! I don’t have time for how amazingly wrong that is.

Decoupling Your HTML, CSS, and JavaScript
https://philipwalton.com/articles/decoupling-html-css-and-javascript/

The js- prefix is to instruct people that the class is ONLY for JavaScript to use. Nothing else.


#111

ok, I got it.

This is good:
https://jsfiddle.net/mfo81y6z/1/

.wrapb .initial,
.wrapb .pause,
.wrapb .play,
.wrapb .speaker {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

This is no good:
https://jsfiddle.net/mfo81y6z/3/

.wrapb .js-button{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

#112

How would we make this one shorter?
https://jsfiddle.net/8aebp5zt/123/

        videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
    }

#113

That code doesn’t seem to be used. Delete it. Maximum shortness acquired.


#114

That code is to disable double click full screen mode.
For the javascript player only.

The iframe player doesn’t need that code.
Only for when using the div tag only pure javascript player.

Why would I delete it?



#115

I just included the code into the rest of the code and this happened.
https://jsfiddle.net/qhkLdveg/2/


#116

I replaced:

All 6 of these:
button.querySelectorAll(".play, .pause, initial, .speaker").forEach(hide);

With this:
button.querySelectorAll(".js-button").forEach(hide);

Which is what I was supposed to do, right?


#117

damn, I have to do it manually.

I thought putting it into notepad using replace all would have done it.

It’s still not working:
https://jsfiddle.net/qhkLdveg/4/


#118

This worked:
https://jsfiddle.net/qhkLdveg/6/

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

This didn’t work:
https://jsfiddle.net/qhkLdveg/4/

function hideAllButtons(button) {
button.querySelectorAll(".js-button").forEach(hide);
  }

#119

With your code at https://jsfiddle.net/8aebp5zt/123/ that code doesn’t disable doubleclick for fullscreen.
That’s why you would delete it, because it’s not doing its job.


#120

It sure does, for me.

We need second opinions.

I’m tapping on the player rapidly and i’m not receiving full screen.


#121

Well doubleclick for fullscreen still work perfectly well on my Chrome browser.

As you’re intent on keeping it though, the code has lots of duplication.

        videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);

So remove that duplication by putting those event names into an array, and iterate over that array.

        const fullscreenevents = [
            "fullscreenchange",
            "webkitfullscreenchange",
            "msfullscreenchange",
            "mozfullscreenchange"
        ];
        fullscreenevents.forEach(function (eventname) {
            videoPlayer.addEventListener(eventname, fullScreeCallback, false);
        });

#122

I didn’t know that, then I won’t use the code then.

On the iframe you can disable it by just removing allowfullscreen.

allowfullscreen></iframe>