Getting initial to work at the top of the code?

HTML & CSS
182

You will need @Paul_Wilkins to help you with the JS but this gets it working with the css and html I posted

(function iife() {
    "use strict";

    function show(el) {
        el.classList.remove("hidea");
        el.classList.remove("hideb");
        el.classList.remove("hidec");
        el.classList.remove("hided");
        el.classList.remove("hidee");
        el.classList.remove("hidef");
    }

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

    function upTo(el, selector) {
        while (el.matches(selector) === false) {
            el = el.parentNode;
        }
        return el;
    }

    function hideAllButtons(button) {
        button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playc, .pausec, .speakerc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
    }

    function getPlay(button) {
        return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
    }

    function getPause(button) {
        return button.querySelector(".pausea, .pauseb, .pausec, .paused, .pausee, .pausef");
    }

    function hideInitialOverlay(button) {
        var link = upTo(button, ".wrap");
        link.classList.remove("inactive");
        hide(button.querySelector(".title"));
        button.classList.add("activated");
    }

    function showPlayButton(button) {
        var play = getPlay(button);
        hideAllButtons(button);
        show(play);
        button.classList.remove("active");
    }

    function isPlaying(button) {
        var play = getPlay(button);
        return play.classList.contains("hidea") || play.classList.contains("hideb") || play.classList.contains("hidec") || play.classList.contains("hided") || play.classList.contains("hidee") || play.classList.contains("hidef");
    }

    function pauseAllButtons() {
        var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
        buttons.forEach(function hidePause(button) {
            if (isPlaying(button)) {
                showPlayButton(button);
            }
        });
    }

    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        player.setAttribute("src", src);
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
            playAudio(player, opts.src);
        }
    }

    function togglePlayButton(button) {
        var player = getAudio();
        var playing = isPlaying(button);

        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }


    function playButtonClickHandler(evt) {

        var button = upTo(evt.target, ".playButtone");
        togglePlayButton(button);
    }

    function initialOverlayClickHandler(evt) {
        var button = upTo(evt.target, ".wrap");
        hideInitialOverlay(button);
        button.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);
    }
    document.querySelector(".wrap").classList.add("inactive");
    var playButton = document.querySelector(".wrap");
    playButton.addEventListener("click", initialOverlayClickHandler);
}());

Whole code for easy copy and paste:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	background-color: black;
}
.wrap {
	width: 266px;
	height: 174px;
	overflow: hidden;
	position: relative;
}
.wrap a {
	float: left;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	margin: 0 4px 12px 0;
}
.wrap a:hover {
	border: 3px solid red;
}
.wrap li:nth-of-type(5n) a {
	margin-right: 0;
}
.wrap li:nth-of-type(15) a{
	position: relative;
	width: 44px;
	height: 44px;
	border: 3px solid #0059dd;
	background: #ffffff;
}
.wrap li:nth-of-type(15) a::before, .wrap li:nth-of-type(15) a::after {
	content: '';
	position: absolute;
	top: 0;
	width: 14px;
	height: 44px;
}
.wrap li:nth-of-type(15) a::before {
	left: 0;
	background-color: #00ffff;
}
.wrap li:nth-of-type(15) a::after {
	right: 0;
	background-color: #ff00ff;
}
.title {
	height: 168px;
	margin:0;
	background: url("https://i.imgur.com/BBYxKcf.jpg");
	border: 3px solid #0059dd;
	font-family: Tahoma;
	font-weight: bold;
	font-size: 30px;
	color: #0059dd;
	line-height: 100px;
	text-align: center;
	cursor: pointer;
}
.title{display:none}
.inactive .title{display:block;}

.title::before, .title::after {
	content: "";
	position: absolute;
	top: 0;
	left: 86px;
	width: 3px;
	height: 100%;
	background: #0059dd;
}
.title::after {
	left: 177px;
}
.nav {
	margin:0;
	padding:0;
	list-style:none;
}
.nav li{float:left;}
.activated .playButtone {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border: 3px solid #0059dd;
	fill: #aaff00;
}
.playe {
	position: absolute;
	left: 6px;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;/* move it under the image*/
}
.pausee {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.hidee, .wrap.inactive a {
	display: none;
}
</style>
</head>

<body>
<div class="wrap">
  <h1 class="title">Links</h1>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
  <audio></audio>
  <div class="playButtone" data-audio="http://hi5.1980s.fm/;"> 
   <svg class="playe" focusable="false" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
      <title>PLAY</title>
    </path>
    </svg> <svg class="pausee hidee" focusable="false" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
      <title>PAUSE</title>
    </path>
    </svg> 
   </div>
</div>
<script>

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hidea");
    el.classList.remove("hideb");
    el.classList.remove("hidec");
    el.classList.remove("hided");
    el.classList.remove("hidee");
    el.classList.remove("hidef");
  }

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

  function upTo(el, selector) {
    while (el.matches(selector) === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playc, .pausec, .speakerc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
  }

  function getPause(button) {
    return button.querySelector(".pausea, .pauseb, .pausec, .paused, .pausee, .pausef");
  }

  function hideInitialOverlay(button) {
    var link = upTo(button, ".wrap");
    link.classList.remove("inactive");
    hide(button.querySelector(".title"));
    button.classList.add("activated");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hidea") || play.classList.contains("hideb") || play.classList.contains("hidec") || play.classList.contains("hided") || play.classList.contains("hidee") || play.classList.contains("hidef");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    player.setAttribute("src", src);
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

  function togglePlayButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
   
    showButton(button, {playing});
    manageAudio(player, {src: button.getAttribute("data-audio"),
      playing
    });
  }


  function playButtonClickHandler(evt) {

    var button = upTo(evt.target, ".playButtone");
    togglePlayButton(button);
  }

  function initialOverlayClickHandler(evt) {
    var button = upTo(evt.target, ".wrap");
	hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }
  document.querySelector(".wrap").classList.add("inactive");
  var playButton = document.querySelector(".wrap");
  playButton.addEventListener("click", initialOverlayClickHandler);
}());




</script>
</body>
</html>

Of course your multiple classes need to be addressed so that you don’t have to keep adding them in to the routines.

2 Likes