Trying to figure out how to get fade to work

Curriculum Help
38

Which variable names was I supposed to change?

.curtain to something else?

40

openCurtain function named

cover is the argument.

42

What is the parameter named for openCurtain function?

curtain

44 
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
46

What do you mean by what value?

48

I’m looking at this now:

So what value will curtain receive when openCurtain is called?


(function initCover() {

  function openCurtain(cover) {
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement.parentElement;
    const curtain = openCurtain(cover);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());
50

So what value will curtain receive when openCurtain is called?

.embed-youtube

52

I was looking in the html.

	<div class="curtain">
		<div class="ratio-keeper">
			<div class="embed-youtube " data-video-id="djV11Xbc914">
				<button class="embed-youtube-play" type="button" aria-label="Open"></button>
			</div>

embed-youtube should be placed in here instead?

document.querySelector(".curtain");

54 
function functionWithArgs(a, b) {
  console.log(a + b);
}
functionWithArgs(10, 5);
55

The value of curtain is cover.

57

So you pass cover which in this case is evt.currentTarget.parentElement.parentElement

You want me to remove .curtain?


  function openCurtain(cover) {
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

I’m confused.

59

I’m stuck.

If you now change it to curtain , then you can simply delete two of the three lines of code in the openCurtain function and everything will work for you.

I don’t understand what you are having me change and remove.

And which lines are being removed.

https://jsfiddle.net/3ae1mu8q/2/

  function openCurtain(cover) {
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

cover becomes curtain?
openCurtain(cover)

61 
  function openCurtain(curtain) {
    const curtain = document.querySelector(".curtain");

const curtain becomes what then?

This doesn’t work

  function openCurtain(curtain) {
    //const curtain = document.querySelector(".curtain");
   //curtain.classList.add("slide");
   return curtain;
  }

This doesn’t work

  function openCurtain(curtain) {
    //const cover = document.querySelector(".curtain");
   curtain.classList.add("slide");
   //return curtain;
  }

I don’t understand.

and you should then be able to figure out which two lines you can delete.

What am I not understanding?

62

I have this now.

Is this good so far?

  function openCurtain(curtain) {
   const curtain = document.querySelector(".curtain");
   curtain.classList.add("slide");
   return curtain;
  }

Next: then you can simply delete two of the three lines of code in the openCurtain function

But I can’t, nothing works. https://jsfiddle.net/q6ohg93w/1/

I really do not understand.

63

Change the function’s parameter name to curtain

From this

  function openCurtain(cover) {
   const curtain = document.querySelector(".curtain");
   curtain.classList.add("slide");
   return curtain;
  }

To this:

  function openCurtain(curtain) {
   const curtain = document.querySelector(".curtain");
   curtain.classList.add("slide");
   return curtain;
  }

Next, deleting any of those lines in any combination does not work.

I tested all different ways and configurations of removing any of the 2 lines.

Can you be more clearer in your instructions?

64

If these are all wrong, can you try to explain it better so I may be able to understand it?

I took what you said to do to mean this.

There are only 3 possibilities as I understand it.

None of these work.

Option 1) https://jsfiddle.net/mqw51dno/

  function openCurtain(curtain) {
    // const curtain = document.querySelector(".curtain");
    // curtain.classList.add("slide");
     return curtain;
  }

Option 2) https://jsfiddle.net/mqw51dno/1/

  function openCurtain(curtain) {
   const curtain = document.querySelector(".curtain");
   // curtain.classList.add("slide");
   // return curtain;
  }

Option 3) https://jsfiddle.net/mqw51dno/2/

  function openCurtain(curtain) {
   // const curtain = document.querySelector(".curtain");
      curtain.classList.add("slide");
   // return curtain;
  }
65

Is this what you meant? https://jsfiddle.net/6ybtr4ex/

(function manageCover() {

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget.parentElement.parentElement.parentElement;
    const curtain = openCurtain(cover);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());
66

Why not use it in your openCurtain function since you pass it to that function?

What do you mean by that?

This is what I have now: https://jsfiddle.net/tz5xvbdk/

(function manageCover() {

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
    openCurtain(curtain);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
}());
68

Can this be improved? https://jsfiddle.net/udwtb9g8/

  function showCover(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
  }

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    showCover(cover);
    const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
    openCurtain(curtain);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });
69

Currently all the videos are hidden, if I wanted to un hide all the videos, how would that be done?

https://jsfiddle.net/r9kbfse8/

Is there a piece of code I would remove that would allow for the videos to be shown?

const manageCover = (function makeManageCover() {

  function showCover(playButton) {
    const cover = playButton.parentElement;
    cover.classList.add("active");
  }

  function openCurtain(curtain) {
    curtain.classList.add("slide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    showCover(cover);
    const curtain = evt.currentTarget.parentElement.parentElement.parentElement;
    openCurtain(curtain);
  }

  const covers = document.querySelectorAll(".embed-youtube-play");
  covers.forEach(function addHandler(cover) {
    cover.addEventListener("click", coverClickHandler);
  });

  function addClickToButtons(playButtons) {
    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.querySelector(selectors.container);
    //const allContainers = document.querySelector(".container");
    //const playButtons = document.querySelector(selectors.playButton);
    //const allPlaybuttons = document.querySelector(".embed-youtube-play");
    addClickToButtons( /*allPlaybuttons*/);
  }

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

const manageUI = (function makeManageUI() {

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

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

  function exitClickHandler() {
    const thewrap = document.querySelector(".container2");
    show(thewrap);
    const cover = document.querySelector(".container1");
    hide(cover);
  }

  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);
  }

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

const videoPlayer = (function makeVideoPlayer() {

  let player;

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    //player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    //shufflePlaylist(player);
  }

  function onPlayerStateChange(event) {
    const player = event.target;
    return player;
  }

  function addPlayer(video, playerOptions) {
    playerOptions.videoId = playerOptions.videoId || video.dataset.id;
    playerOptions.events = playerOptions.events || {};
    playerOptions.events.onReady = onPlayerReady;
    playerOptions.events.onStateChange = onPlayerStateChange;

    const player = new YT.Player(video, playerOptions);
    return player;
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {

  const playerVars = {
    autoplay: 1,
    controls: 1,
    disablekb: 1,
    fs: 0,
    iv_load_policy: 3
  };

  const defaults = {
    height: 360,
    host: "https://www.youtube-nocookie.com",
    playerVars,
    width: 640
  };

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

  function combinePlayerOptions(opts1 = {}, opts2 = {}) {
    const combined = Object.assign({}, opts1, opts2);
    Object.keys(opts1).forEach(function checkObjects(prop) {
      if (typeof opts1[prop] === "object") {
        combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
      }
    });
    return combined;
  }

  function createPlayer(videoWrapper, playerOptions = {}) {
    const video = videoWrapper.querySelector(".video");
    const options = combinePlayerOptions(defaults, playerOptions);
    return videoPlayer.addPlayer(video, options);
  }

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

  function removePlayer(wrapper) {
    wrapper.player.destroy();
    delete wrapper.player;
    console.log("removePlayer");
  }

  function removePlayerHandler(evt) {
    const el = evt.target;
    //const container = el.closest(".container");
    const wrapper = document.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

  function initPlayer(wrapper, playerOptions) {
    show(wrapper);

    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
  }

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

const players = (function coverUIPlayerFacade() {
  function addPlayer(coverSelector, playerOptions) {
    const parent = document.querySelector(coverSelector).parentElement;
    const callback = managePlayer.adder(parent, playerOptions);
    manageCover.addCoverHandler(coverSelector, callback);
  }

  function init() {
    manageCover.init({
      container: ".container",
      playButton: ".embed-youtube-play"
    });

    manageUI.init({});
    manageUI.addExitHandlers(managePlayer.removePlayerHandler);
  }

  return {
    add: addPlayer,
    init
  };
}());

players.init();

function onYouTubeIframeAPIReady() {
  players.add(".playa", {
    playerVars: {
      loop: 1,
      playlist: "djV11Xbc914"
    }
  });
  players.add(".playb", {});
  players.add(".playc", {});
  players.add(".playd", {});
  players.add(".playe", {
    playerVars: {
      playlist: ["mnfmQe8Mv1g", "M7lc1UVf-VE",
        "-Xgi_way56U", "CHahce95B1g"]
    }
  });
  players.add(".playf", {});
}