Changes to cope with separating HTML players and covers

JavaScript
25

all that it is returning

Refers to what inside here?

 function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

I am supposed to place this somewhere?

return createCallback();

26

remove from playerAdder all that it is returning

I don’t understand what that means in relation to this function.

What is being removed and replaced with return createCallback(); ?

function playerAdder(parent, playerOptions) {
    const wrapper = parent.querySelector(".wrap");
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }
27

Oh dear, it seems that you just don’t understand. There is a different way to deal with the duplication of the callback function, and that is from the initial code at https://jsfiddle.net/kcr3n01e/ to just delete the whole createCallback function.

1 Like
28

Thank you for catching this, this function was supposed to be removed from prior instructions, and I just noticed that now.

This function gets deleted:
It should have been removed a long time ago.

function createCallback(wrapper, playerOptions) {
    return function callback() {
      initPlayer(wrapper, playerOptions);
    };
  }

Everything else that was done: Can progress be made from here?

https://jsfiddle.net/5ymse1u6/

 function playerAdder(wrapper, playerOptions) {
    return function addPlayerCallback() {
      initPlayer(wrapper, playerOptions);
    };
  }

 return {
    adder: playerAdder,
    removePlayerHandler
  };
}());

 function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const wrapper = parent.querySelector(".wrap");
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }
29

The next part is where we give a cover to the manageUI code and get a player in return.

Before we can do that, we first need a cover. The addPlayer code uses coverSelector to get a cover, and then from that it gets the parentElement.

We need to split that into two different lines. One line defines a cover variable where querySelector and coverSelector are used to get the cover, and the other line defines a parent variable that uses the cover variable and parentElement.

When you have the cover variable being reliably defined, we can then move on to doing the manageUI stuff.

1 Like
31

I think I did this right: https://jsfiddle.net/p40sefr8/

Can progress be made from here?

function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }
32

Good one. The code that uses the cover to get the wrapper is the following:

    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");

We now need to extract that code out to a separate function in manageUI, so that we replace that code in the addPlayer function with just the following get the wrapper:

const wrapper = manageUI.getWrapper(cover);
1 Like
33

First I did this:

  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

This function needs a name, what should it be called?
Also, I’m not sure if cover is being changed to something else.

  function needsAName() {
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
  }

And then, where inside manageUI will this new function be placed?

const manageUI = (function makeManageUI() {

  function resetPage() {
    body.classList.add("fadingOut");
  }

  function exitClickHandler() {
    resetPage();
  }

  function addClickToExit(exitButtons) {
    exitButtons.forEach(function addExitButtonHandler(exitButtons) {
      exitButtons.addEventListener("click", exitClickHandler);
    });
  }

  function addExitHandlers(callback) {
    const resetVideo = document.querySelectorAll(".exit");
    resetVideo.forEach(function resetVideoHandler(video) {
      video.addEventListener("click", callback);
    });
  }

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
    body.addEventListener("animationend", animationEndHandler);
  }

  return {
    addExitHandlers,
    init
  };
}());
34

How about getWrapper?

Right at the top. There tends to be an ordering preference with functions, where the more generic functions are higher up than the more specific functions.

1 Like
35

At this link: https://jsfiddle.net/gfh92bw1/

I received this error

manageUI.getWrapper is not a function

After doing this:

const manageUI = (function makeManageUI() {
  const body = document.body;
  
    function getWrapper() {
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
  }

const players = (function coverUIPlayerFacade() {

  function addPlayer(coverSelector, playerOptions) {
    const cover = document.querySelector(coverSelector);
    const wrapper = manageUI.getWrapper(cover);
    const callback = managePlayer.adder(wrapper, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }
36

Good - that is why you need you provide access to the getWrapper function, by using the manageUI’s return object.

1 Like
37

https://jsfiddle.net/vgs6fcqt/

  return {
    addExitHandlers,
    getWrapper,
    init
  };
}());

Where I then receive this error:

cover is not defined

Then I do this?

  function getWrapper(evt) {
    const cover = evt.currentTarget;
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
  }

Where I then receive this error: https://jsfiddle.net/vgs6fcqt/2/

Cannot read properties of undefined (reading ‘parentElement’)

I am stuck here.

38

Well let’s see. Here is how getWrapper is being invoked.

    const wrapper = manageUI.getWrapper(cover);

getWrapper is being invoked with a variable called cover.

Here is the start of the getWrapper function.

  function getWrapper(evt) {
    const cover = evt.currentTarget;
    const parent = cover.parentElement;
    ...
}

In the getWrapper function, you have for some reason used evt for the function parameter.
That is wrong. getWrapper is not an event handler. It’s not used by any event-handling code at all.

Can you please help me to understand why you used evt there for the function parameter.

39

I was trying to resolve this error.

cover is not defined

In older code of mine this was used:
const cover = evt.currentTarget;

I will try this again.

Adding cover as the parameter: https://jsfiddle.net/4uwt085h/

function getWrapper(cover) {
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
  }

I get this error:

Cannot read properties of undefined (reading ‘classList’)

Uncaught TypeError: Cannot read properties of undefined (reading ‘classList’) at line 242 col 8

That points to this line: el.classList.remove("hide");

Inside this function:

Which is inside here:
const managePlayer = (function makeManagePlayer() {

Can progress be made from here to resolve that?

41

The getWrapper function is creating a wrapper variable, but nothing is being done with it. That wrapper needs to be returned at the end of the function.

1 Like
43

I did that here: https://jsfiddle.net/uobjxew7/

What next needs to be done?

  function getWrapper(cover) {
    const parent = cover.parentElement;
    const wrapper = parent.querySelector(".wrap");
    return wrapper
  }
44

The manageUI code now has a working getWrapper function which uses the cover to get the wrapper.

Currently getWrapper goes up to the cover’s parent and searches for the wrapper. A different technique needs to be used for this to work with the other HTML structure that you have.

That other technique involves having manageUI keep a list of wrappers, and a list of covers.
The init function can run a separate function that searches for those wrappers and covers.

There will be the same number of wrappers and covers. That way, we can search the covers to find the index number of the cover, and return the same index number from the wrappers.

That’s the overall idea, for it will work with all known types of HTML structure that you use.
Do you have you any questions before we carry on?

2 Likes
46

I am ready to begin to implement the other technique.

That other technique involves having manageUI keep a list of wrappers, and a list of covers.

47

Good one. We will be adding objects to a players array that contains both wrapper and cover properties. We will end up with players items in the array similar to {wrapper: …, cover: …} where the wrapper and cover properties each refer to the different HTML elements for each player.

Create a players array at the top of the manageUI function. Then at the top of the init function add a function call to findPlayers();

That function doesn’t exist yet, but we will be using it to populate the players array.

1 Like
48

I did this first: https://jsfiddle.net/pm0rs842/

  function findPlayers() {
  }

  function init() {
    manageCover.init({
      container: ".container",
      playButton: ".thePlay"
    });

Now I need to do the array that gets placed at the top of this function.

Here
const manageUI = (function makeManageUI() {

My attempt:

If I understand correctly:

wrapper refers to the play buttons: .playa - .playi
<button class="playa

cover refers to: .play1 - .play9
<div class="container play1

Where I get the error: https://jsfiddle.net/6qx8vbrh/

‘players’ has already been declared

Also, it would probably be const not let.

let players = {

  wrapper: ".playa",
  ".playb": ".playc",
  ".playd": ".playe",
  ".playf": ".playg",
  ".playh": ".playi",
  cover: ".play1",
  ".play3": ".play3",
  ".play4": ".play5",
  ".play6": ".play7",
  ".play8": ".play9"
};

const manageUI = (function makeManageUI() {

This is a guess:

  function findPlayers() {
      wrapper: ".playButtonContainer",
      cover: ".container"
  }

Maybe you just wanted me to do this: findPlayers()