Trying to wrap this code in a named function

Question

This is the piece of code I'm trying to wrap in a named function and can't seem to figure out how it would be done.

After the covers are clicked, they should not be visible after.

This is the full code:

https://jsfiddle.net/5ny8geL0/

const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
const covers = document.querySelectorAll(coversSelector);

for (let i = 0; i < covers.length; i += 1) {
    covers[i].addEventListener("click", coverClickHandler);
}

This is the rest of it.

(function manageCover() {
    "use strict";

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        covers[i].addEventListener("click", coverClickHandler);
    }

}());

I was thinking I would need to turn this into an if statement somehow and place it in the for loop.

const cover = evt.currentTarget;
hide(cover);

or I was thinking of something like this. Adding an if statement inside the for loop.

for (let i = 0; i < covers.length; i += 1) {
    if (covers[i] !== evt.target) covers[i].hideCovers();
}

const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function (url) {
            return new Promise(function (resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function () {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());

(function manageCover() {
    "use strict";

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        covers[i].addEventListener("click", coverClickHandler);
    }

}());

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

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

    let hasShuffled = false;

    function onPlayerStateChange(event) {
        const player = event.target;
        if (!hasShuffled) {
            player.setShuffle(true);
            player.playVideoAt(0);
            hasShuffled = true;
        }
        if (event.data === YT.PlayerState.PLAYING) {
            for (let i = 0; i < players.length; i++) {
                if (players[i] !== event.target) players[i].pauseVideo();
            }
        }

        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, settings) {
        players.push(new YT.Player(video, Object.assign({
            videoId: video.dataset.id,
            host: "https://www.youtube-nocookie.com",
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }, settings)));
    }

    function init(video, settings) {
        load.js("https://www.youtube.com/player_api").then(function () {
            YT.ready(function () {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

function loadPlayer(opts) {
    "use strict";

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

    function initPlayer(wrapper) {
        const video = wrapper.querySelector(".video");
        opts.width = opts.width || 198;
        opts.height = opts.height || 198;
        opts.autoplay = 1;
        opts.controls = 1;
        opts.rel = 0;
        opts.iv_load_policy = 3;
        opts.fs = 0;
        opts.disablekb = 1;

        function paramInOpts(settings, param) {
            if (opts[param] !== undefined) {
                settings[param] = opts[param];
            }
            return settings;
        }
        const settingsParams = ["width", "height", "videoid", "host"];
        const settings = settingsParams.reduce(paramInOpts, {});
        const playerVarsParams = ["autoplay", "cc_load_policy",
            "controls", "disablekb", "end", "fs", "iv_load_policy",
            "list", "listType", "loop", "playlist", "rel", "start"
        ];
        settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
        videoPlayer.init(video, settings);
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(opts.target);
    cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

loadPlayer({
    target: ".jacket-left",
    width: 277,
    height: 207
});

loadPlayer({
    target: ".jacket-middle",
    width: 277,
    height: 207
});
loadPlayer({
    target: ".jacket-right",
    width: 277,
    height: 207
});


loadPlayer({
    target: ".jacketc",
    width: 600,
    height: 338,
    loop: true,
    playlist
});
loadPlayer({
    target: ".alpha",
    start: 0,
    end: 280,
    loop: true
});
loadPlayer({
    target: ".beta",
    start: 0,
    end: 240,
    loop: true
});
loadPlayer({
    target: ".gamma",
    start: 0,
    end: 265,
    loop: true
});
loadPlayer({
    target: ".delta",
    start: 4,
    end: 254,
    loop: true
});
loadPlayer({
    target: ".epsilon",
    start: 0,
    end: 242,
    loop: true
});
loadPlayer({
    target: ".zeta",
    start: 0,
    end: 285,
    loop: true
});
loadPlayer({
    target: ".eta",
    start: 23,
    end: 312,
    loop: true
});
loadPlayer({
    target: ".theta",
    start: 2
});
loadPlayer({
    target: ".iota"
});

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

body {
  background: #353198;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.container {
  width: 936px;
  padding: 25px;
  margin: 100px auto;
  border-radius: 25px;
  border: 2px solid #0059dd;
  background: #000000;
}

.container-top {
  position: relative;
  height: 310px;
  margin: 0;
  /* was margin: 0 0 45px 0 - why the 45px bottom margin ? */
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
  background-size: cover;
}

/*
.container-left-video, 
.container-middle-video, 
.container-right-video {
*/
.v-contain {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  float: left;
  margin-left: 25px;
  width: 277px;
  background: red;
  border-radius: 25px;
}

/*
.container-left-video .jacket-left, 
.container-middle-video .jacket-middle, 
.container-right-video .jacket-right {
*/
.jacket {
  position: relative;
  width: 80px;
  height: 80px;
  margin: auto;
  background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
  background-size: 100% 200%;
}

/*.container-middle-video .jacket-middle {*/
.jacket-middle {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

/*.container-right-video .jacket-right {*/
.jacket-right {
  background-position: 0 -80px;
  background-size: 100% 200%;
}

/*
.container-left-video .jacket-left .circle, 
.container-middle-video .jacket-middle .circle, 
.container-right-video .jacket-right .circle {
*/
.circle {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  border: 1px solid #0059dd;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  transition: transform 0.1s ease 0s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}

/*
.container-left-video .jacket-left .play, 
.container-middle-video .jacket-middle .play, 
.container-right-video .jacket-right .play {
*/
.play {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 38px;
  height: 22px;
  fill: #0059dd;
}

/*
.container-left-video .jacket-left .circle:hover, 
.container-middle-video .jacket-middle .circle:hover, 
.container-right-video .jacket-right .circle:hover {
*/
.circle:hover {
  border: 1px solid red;
  transform: scale(1.1);
}

/*
.container-left-video .jacket-left .circle:hover .play, 
.container-middle-video .jacket-middle .circle:hover .play, 
.container-right-video .jacket-right .circle:hover .play {
*/
.circle:hover .play {
  fill: red;
}

/*
.container-left-video .wrap-left, 
.container-middle-video .wrap-middle, 
.container-right-video .wrap-right {
*/
.wrap {
  position: relative;
  width: 277px;
  height: 207px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 25px;
}

/*
.container-left-video .wrap-left iframe, 
.container-middle-video .wrap-middle iframe, 
.container-right-video .wrap-right iframe {
*/
.wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 277px;
  height: 207px;
  cursor: pointer;
}

.hide {
  display: none;
}

<div class="outer">
  <div class="tcell">
    <div class="container ">
      <div class="container-top">
        <div class="v-contain container-left-video">
          <div class="jacket jacket-left">
            <div class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg> </div>
          </div>
          <div class="wrap wrap-left hide">
            <div class="video" data-id="jMAShwisnQI"></div>
          </div>
        </div>
        <div class="v-contain container-middle-video">
          <div class="jacket jacket-middle">
            <div class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg> </div>
          </div>
          <div class="wrap wrap-middle hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
        <div class="v-contain container-right-video">
          <div class="jacket jacket-right">
            <div class="circle"> <svg class="play" width="38" height="22" viewBox="0 0 26 26">
                <title>Play</title>
                <path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
              </svg> </div>
          </div>
          <div class="wrap wrap-right hide">
            <div class="video" data-id="-SiGnAi845o"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The code breaks because you have to call the named function for it to add the event listeners:

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

 function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

 function manageCover() {
    "use strict";   

    const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
    const covers = document.querySelectorAll(coversSelector);

    for (let i = 0; i < covers.length; i += 1) {
        covers[i].addEventListener("click", coverClickHandler);
    }

};

manageCover();

Fiddle: https://jsfiddle.net/bua0msx1/1/

another option is to add the on click event on the html, that would be more clean.

Answer 2

How you do this depends on how much information you want to bake into the function vs. how much you want to pass to it as arguments.

If you bake all the information into it, you literally just put those statements in a function in the same location (so it closes over coverClickHandler) and that would work:

(function manageCover() {
    "use strict";

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

    function hookUpHandlers() {
        const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
        const covers = document.querySelectorAll(coversSelector);

        for (let i = 0; i < covers.length; i += 1) {
            covers[i].addEventListener("click", coverClickHandler);
        }
    }

    hookUpHandlers();
}());

There wouldn't be much point, though.

If you want a generic function that you can pass both the selector and the handler to, you'd do that like this:

function hookUpClickHandlers(selector, handler) {
    const list = document.querySelectorAll(coversSelector);
    for (let i = 0; i < list.length; i += 1) {
        list[i].addEventListener("click", handler);
    }
}

(function manageCover() {
    "use strict";

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

    hookUpClickHandlers(".jacket-left, .jacket-middle, .jacket-right", coverClickHandler);
}());

If you want to parameterize the event name as well, you can do that too:

function hookUpHandlers(selector, eventName, handler) {
    const list = document.querySelectorAll(coversSelector);
    for (let i = 0; i < list.length; i += 1) {
        list[i].addEventListener(eventName, handler);
    }
}

(function manageCover() {
    "use strict";

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }

    hookUpHandlers(".jacket-left, .jacket-middle, .jacket-right", "click", coverClickHandler);
}());