How to use .classList.add("hide"); to hide curtains when viewing a 2nd time-CodePudding

Curtains stay hidden when .setAttribute("hidden", true); is being used. https://jsfiddle.net/g2th3opc/

evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").setAttribute("hidden", true);

Curtains don't stay hidden when .classList.add("hide"); is being used. https://jsfiddle.net/06vdjka4/

evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");

To reproduce: Click 1 svg play button, then click the X.

Do that repeatedly, click on all of them, even the ones you already clicked on.

You will notice that the curtains don't stay hidden when .classList.add("hide"); is being used.

The curtains are supposed to stay hidden after clicking on the same svg play button a 2nd time.

Why don't they stay hidden, and is there a fix for that?

I tried to post a snippet but it went over the character limit.

CodePudding user response：

Your issue is the way you are showing the buttons:


  function showAllButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      // This is where the hide class is getting removed
      button.classList.remove("hide");
    }
    allButtons.forEach(showButton);
  }

  function resetPage() {
    resetBackground("body");
    resetCurtains(".with-curtain");

    // You aren't just matching buttons with this selector. You are matching everything that has been hidden!
    showAllButtons(".hide");

    resetButtons(".outer");
  }

  // This is called whenever an exit button is clicked
  function exitClickHandler(evt) {
    resetPage(); // During this function calls all other .sliding-panels divs are show
    // This only hides the current video's .sliding-panels div
    evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");
  }

The solution is to be more specific with your selector for un-hiding buttons:

    // Notice the increased specificity of this selector:
    showAllButtons(".container.hide");

Show code snippet

const manageUI = (function makeManageUI() {

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function showBackground(background) {
      background.classList.remove("bg1");
    }
    allBackgrounds.forEach(showBackground);
  }

  function resetCurtains(curtainSelector) {
    const allCurtains = document.querySelectorAll(curtainSelector);

    function showCurtain(curtain) {
      curtain.classList.remove("active");
    }
    allCurtains.forEach(showCurtain);
  }

  function showAllButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("hide");
    }
    allButtons.forEach(showButton);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function showButton(button) {
      button.classList.remove("isOpen");
    }
    allButtons.forEach(showButton);
  }

  function resetPage() {
    resetBackground("body");
    resetCurtains(".with-curtain");
    // Notice the increased specificity of this selector:
    showAllButtons(".container.hide");
    resetButtons(".outer");
  }

  function exitClickHandler(evt) {
    resetPage();
    evt.currentTarget.closest(".inner-container").querySelector(".sliding-panels").classList.add("hide");
  }

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

  function init() {
    const exitButtons = document.querySelectorAll(".exit");
    addClickToExit(exitButtons);
  }

  return {
    init
  };
}());

const manageCover = (function makeManageCover() {
  const config = {};

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

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

  function hideAll(elements) {
    elements.forEach(hide);
  }

  function resetBackground(backgroundSelector) {
    const allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".outer");
  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

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

  function coverClickHandler(evt) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(evt.currentTarget);
    const cover = evt.currentTarget;
    showCovers(cover);
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(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.querySelectorAll(selectors.container);
    const playButtons = document.querySelectorAll(selectors.playButton);
    addClickToButtons(playButtons);
  }

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

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

const videoPlayer = (function makeVideoPlayer() {
  const players = [];

  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 createStopHandler(player) {
    const stopButtons = document.querySelectorAll(".exit");
    stopButtons.forEach(function stopButtonHandler(button) {
      button.addEventListener("click", function buttonClickHandler() {
        player.stopVideo();
      });
    });
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100);
    createStopHandler(player);
  }

  function addPlayer(video, settings) {
    const defaults = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      videoId: video.dataset.id,
      width: 640
    };
    defaults.events = {
      "onReady": onPlayerReady
    };

    const playerOptions = combinePlayerOptions(defaults, settings);
    const player = new YT.Player(video, playerOptions);
    players.push(player);
    return player;
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {
  const defaults = {
    playerVars: {
      autoplay: 0,
      controls: 1,
      disablekb: 1,
      enablejsapi: 1,
      fs: 0,
      iv_load_policy: 3
    }
  };

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

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

  function createCoverClickHandler(playerOptions) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerOptions);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerOptions) {
    const clickHandler = createCoverClickHandler(playerOptions);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }

  return {
    add: addPlayer
  };

}());

function onYouTubeIframeAPIReady() {

  managePlayer.add(".playa", {});
  managePlayer.add(".playb", {});
  managePlayer.add(".playc", {});
  managePlayer.add(".playd", {});
  managePlayer.add(".playe", {
    playerVars: {
      playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
    }
  });
  managePlayer.add(".playe", {});
  managePlayer.add(".playf", {});
  managePlayer.add(".playg", {});
  managePlayer.add(".playh", {});
  managePlayer.add(".playi", {});

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

  manageUI.init({});

}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}


@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 290px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 10px;
}

.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  /*z-index: 2;*/
}


.container.active {
  flex: 1 0 0;
}

body.bg1 {
  animation: fadebody 5s ease 0s forwards;
}

.thePlay:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.inner-container {
  display: none;
}

/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.thePlay {
  
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.played {
   fill: green;
}



button.thePlay {
  pointer-events: none;
}

.exit {
  position: absolute;
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: transparent;
  fill: red;
  padding: 0;
}

.exitsvg {
  fill: none;
  fill-rule: evenodd;
  stroke: #ff0000;
  stroke-width: 17.80202103;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-opacity: 1;
  border: 4.625px solid #4e4e4e;
  border-radius: 100%;
}

.curtain {
  position: relative;
  max-width: 642px;
  margin: auto;
  flex: 1 0 0%;
  background: #0a0a0a;
  border: 20px solid #000;
  border-radius: 3.2px;
  border-color: #000 #101010 #000 #101010;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("data:image/svg xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(#filter)'/> </svg>");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain3 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain3 {
  to {
    transform: translateX(100%);
  }
}
.container.active .curtain .panel-right {
  animation: curtain4 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain4 {
  to {
    transform: translateX(100%);
  }
}


.container.active .curtain .panel-right {
  animation: curtain5 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain5 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain6 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain6 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain7 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain7 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain8 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain8 {
  to {
    transform: translateX(100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain9 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain9 {
  to {
    transform: translateX(100%);
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;

  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}

<div class="outer">
  <div class="container with-curtain">
    <button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
          <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>
    </button>
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="CHahce95B1g"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <g id="exit">
            <title>exit</title>
            <path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
            <path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
          </g>
        </svg>
      </button>
    </div>
  </div>
  <div class="container play2 with-curtain">
    <button class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain2">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play3 with-curtain">
    <button class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain3">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play4 with-curtain">
    <button class="playd thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain4">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play5 with-curtain">
    <button class="playe thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain5">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play6 with-curtain">
    <button class="playf thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain6">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play7 with-curtain">
    <button class="playg thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain7">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play8 with-curtain">
    <button class="playh thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain8">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
  <div class="container play9 with-curtain">
    <button class="playi thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
    </button>
    <div class="inner-container curtain curtain9">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame" data-id="-Xgi_way56U"></div>
        </div>
        <div class="sliding-panels">
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
      <button class="exit" type="button" aria-label="Close">
        <svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
          <use href="#exit" />
        </svg>
      </button>
    </div>
  </div>
</div>

CodePudding user response：

Just do this small fix to exit handler.

function exitClickHandler(evt) {
resetPage();

evt.currentTarget
    .closest(".inner-container")
    .querySelector(".sliding-panels")
    .removeAttribute("hidden"); //remove hidden attribute on exit
 }

https://jsfiddle.net/h9yfd1nv/