Two versions of a playButton Binding Audio With a grid link structure


#557

I have a way better idea..................


#558

That worries me.


#559

I have a new type of code, this one uses float, I just need to hook it up to the javascript.

Can you tell me, in the not working one, all the code that is not needed for this new code, and that I can delete?

Not working. Uses float
https://jsfiddle.net/nt2sL2e3/3/

Working: Uses float
https://jsfiddle.net/Lgrnraho/18/

I think this may be easier to do, what do you say?


#560

I can't easily tell you anything about the non-working code.


#561

Then this is the working code I need to change the javascript for it.
https://jsfiddle.net/Lgrnraho/19/


#562

One that resembles something like this:

 (function iife() {
   "use strict";
   document.querySelector(".myLink").classList.add("hide");

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

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

   function togglePlayButton(button) {
     var wrap = upTo(button, "wrap");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     show(wrap.querySelector(".myLink"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

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

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

   function upTo(el, className) {
     while (el.classList.contains(className) === false) {
       el = el.parentNode;
     }
     return el;
   }
    var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);

#563

But I have to remove a lot of stuff in it.


#564

I want to start off with this code and delete everything in the javascript I don't need.
https://jsfiddle.net/nt2sL2e3/6/


#565

I have no wrap, can I delete that line?
https://jsfiddle.net/nt2sL2e3/7/

all I have is initial, and links.


#566

Yes, that seems okay.


#567

I remove this too?

   function upTo(el, className) {
     while (el.classList.contains(className) === false) {
       el = el.parentNode;

       return el;
     }

#568

.links

Goes where in here?

I have no wrap.

document.querySelector(".myLink").classList.add("hide");

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

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



   function togglePlayButton(button) {
     var wrap = upTo(button, "wrap");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     show(wrap.querySelector(".myLink"));
     player.volume = 1.0;
     if (player.paused) {

#569

It would be more consistent to remove getPlayButton and use upTo(evt.target, ".playButton") instead.


#570

myLink seems to be poorly named, and there doesn't seem to be anything in the HTML code called myLink.


#571

I would change these to what?

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

   function upTo(el, className) {
     while (el.classList.contains(className) === false) {
       el = el.parentNode;

       return el;
     }
     
        function playButtonClickHandler(evt) {
     var button = getPlayButton(evt.target);
     togglePlayButton(button);
   }

#572

mylink is nowhere in the new code. HTML section
https://jsfiddle.net/nt2sL2e3/7/

The javascript is what's changing.

the html/css are perfect.

It's just the javascript.


#573

Remove the getPlayButton function, and change the handler so that it uses the upTo function instead, which would look something like upTo(evt.target, ".playButton")


#574

  upTo(evt.target, ".playButton") {
     while (el.classList.contains("playButton") === false) {
       el = el.parentNode;
     }
     return el;
   }

   function upTo(el, className) {
     while (el.classList.contains(className) === false) {
       el = el.parentNode;

       return el;
     }
     
        function playButtonClickHandler(evt) {
     var button = getPlayButton(evt.target);
     togglePlayButton(button);
   }

#575

What about this one?

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

#576

This?

var links = upTo(button, "links");