Home > Net >  Dropping 1st color, switching between 2 others
Dropping 1st color, switching between 2 others

Time：10-09

What I am trying to do here is, after the 1st play svg is pressed, that color will stay removed. https://jsfiddle.net/x0pu2c31/

Where 2 other colors would flip back and forth between each other.

They are Blue now.

After one is pressed.

Have it switch between 2 chosen colors.

Green & Orange as an example.

Currently in the code, the colors change between Blue & Green.

How would I remove the Blue, and have the colors change between Green & Orange after the Blue is removed?

Like this:

Blue is pressed

Color comes back Green,

Green is pressed,

Color comes back Orange.

Orange is pressed,

Color comes back Green.

How the code works is, you click on the play svg, then you click on the X to close the page and go back.'

.played {
  fill: green;
}

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


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");
        showAllButtons(".container.hide");
        resetButtons(".outer");
    }

    function hideCurtains(exitButtons) {
        const container = exitButtons.closest(".inner-container");
        const curtains = container.querySelector(".sliding-panels");
        curtains.classList.add("hide");
    }

    function exitClickHandler(evt) {
        resetPage();
        hideCurtains(evt.currentTarget);
    }

    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.toggle("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 {
        init
    };
}());

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

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  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>");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  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>");
}

.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
  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>");
}

.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
  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>");
}

.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
  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>");
}

.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
  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>");
}

.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
  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>");
}

.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
  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>");
}

.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：

Currently you were only toggling the played class whenever you click the play button. Let's modify this part.

On the first click you'll only want to add the played state, but never remove it (you don't want to return to blue).

Instead, when clicking, check if the played class has already been added. If it hasn't, add it. If it has been added, then toggle a new class that overwrites the color. The second class does need to be toggled, as you'll want to keep switching between that and the played class.

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

function markAsVisited(played) {
    played.classList.toggle("visited");
}

function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    
    hideAll(config.containers);
    resetPage();
    
    if (!cover.classList.contains('played')) {
        markAsPlayed(cover);
    } else {
        markAsVisited(cover);
    }
    showCovers(cover);
}

In the CSS I've added an extra class to set the color.

.played {
  fill: green;
}

.played.visited {
  fill: orange;
}


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");
        showAllButtons(".container.hide");
        resetButtons(".outer");
    }

    function hideCurtains(exitButtons) {
        const container = exitButtons.closest(".inner-container");
        const curtains = container.querySelector(".sliding-panels");
        curtains.classList.add("hide");
    }

    function exitClickHandler(evt) {
        resetPage();
        hideCurtains(evt.currentTarget);
    }

    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 markAsVisited(played) {
        played.classList.toggle("visited");
    }

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        
        hideAll(config.containers);
        resetPage();
        
        if (!cover.classList.contains('played')) {
            markAsPlayed(cover);
        } else {
            markAsVisited(cover);
        }
        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 {
        init
    };
}());

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

.played.visited {
  fill: orange;
}



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

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  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>");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  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>");
}

.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
  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>");
}

.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
  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>");
}

.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
  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>");
}

.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
  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>");
}

.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
  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>");
}

.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
  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>");
}

.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>

Page link：https//www.codepudding.com/net/145562.html

Prev:JavaScript: sort an array of timestamps with day–month–year format
Next:Custom Rounding Ranges using Javascript?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding