Converting Javascript to use var utils

JavaScript
1

If this one is Good the way it is, then this one is done. And I can maybe use it as a template for others.

Before:

 (function iife() {
   "use strict";

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

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

   function playButtonClickHandler() {
     var button = document.querySelector(".playButton");
     var player = document.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     hide(button.querySelector(".initial"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
       button.classList.add("playing");
     } else {
       show(play);
       hide(pause);
       player.pause();
     }
   }

    function playButtonMouseoverHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var speaker = button.querySelector(".speaker");
      var pause = button.querySelector(".pause");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(speaker);
        show(pause);
      }
    }

    function playButtonMouseoutHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var pause = button.querySelector(".pause");
      var speaker = button.querySelector(".speaker");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(pause);
        show(speaker);
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

After:

(function iife() {
    "use strict";

    var player = {};
    player.utils = (function utils() {
        function show(el) {
            el.classList.remove("hide");
        }

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

        function hideAll(items) {
            items.forEach(function hideItem(item) {
                hide(item);
            });
        }
        return {
            show,
            hide,
            hideAll
        };
    }());
    player.icons = (function icons(utils) {
        var iconMap = new Map();

        function addIcon(svg, iconMap) {
            var name = svg.getAttribute("class").split(" ")[0];
            iconMap.set(name, svg);
        }

        function getSVGIcons(button) {
            var buttonSVG = button.querySelectorAll("svg");
            Array.from(buttonSVG).forEach(function addIconToMap(svg) {
                addIcon(svg, iconMap);
            });
            return iconMap;
        }

        function getSVGIcon(name) {
            return iconMap.get(name);
        }

        function showIcon(iconName) {
            utils.hideAll(iconMap);
            utils.show(getSVGIcon(iconName));
        }

        return {
            getSVGIcons,
            getSVGIcon,
            showIcon
        };
    }(player.utils));
    player.toggle = (function togglePlayer(icons) {
        var button;
        var audio;

        function isActive() {
            return audio.paused === false;
        }

        function toggle() {
            if (isActive()) {
                audio.pause();
                icons.showIcon("play");
            } else {
                audio.play();
                icons.showIcon("pause");
            }
        }

        function togglePlayingHandler() {
            button.classList.add("active");
            toggle();
        }

        function showPauseHandler() {
            if (isActive()) {
                icons.showIcon("pause");
            }
        }

        function showSpeakerHandler() {
            if (isActive()) {
                icons.showIcon("speaker");
            }
        }

        function init(playButton, audioPlayer) {
            button = playButton;
            audio = audioPlayer;
            icons.getSVGIcons(button);

            player.volume = 1.0;

            button.addEventListener("click", togglePlayingHandler, false);
            button.addEventListener("mouseover", showPauseHandler, false);
            button.addEventListener("mouseout", showSpeakerHandler, false);
        }
        return {
            init
        };
    }(player.icons));

    var button = document.querySelector(".playButton");
    var audio = button.querySelector("audio");
    player.toggle.init(button, audio);
}());

Code 1
https://jsfiddle.net/99j5wjuz/58/



(function iife() {
  "use strict";

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

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

  function playButton(button) {
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    button.classList.add("clicked");
    player.volume = 1.0;
    hide(pause);
    hide(speaker);
    if (player.paused) {
      hide(play);
      show(pause);
      player.play();
    } else {
      show(play);
      hide(pause);
      player.pause();
    }
  }

  function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getPlayButton(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getPlayButton(evt.target);
    showSpeaker(button);
  }

  var playButtons = document.querySelectorAll(".playButton");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

Code 2
https://jsfiddle.net/uzdyz3z3/4/


 (function iife() {
   "use strict";

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

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

   function playButton(button) {
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("clicked");
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

   }

   function getPlayButton(el) {
     while (el.classList.contains("playButton") === false) {
       el = el.parentNode;
     }
     return el;
   }

   function playButtonClickHandler(evt) {
     var button = getPlayButton(evt.target);
     playButton(button);
   }

   var playButtons = document.querySelectorAll(".playButton");
   playButtons.forEach(function(button) {
     button.addEventListener("click", playButtonClickHandler);
   });
 }());

Version 1
https://jsfiddle.net/cubphcqd/58/

 (function iife() {
   "use strict";

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

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

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

   function togglePlayButton(button) {
     var link = upTo(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

   }

   function playButtonClickHandler(evt) {
     var button = upTo(evt.target, ".playButton")
     togglePlayButton(button);
   }

   document.querySelector(".links").classList.add("inactive");

   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);


 }());

Version 2:
https://jsfiddle.net/aebwrk6p/51/

 (function iife() {
   "use strict";

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

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

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

   function isActive(button) {
     return button.classList.contains("active");

   }

   function togglePlayButton(button) {
     var link = upTo(button, ".links");
     var player = button.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");

     player.volume = 1.0;
     if (isActive(button) && player.paused) {

       hide(play);
       show(pause);
       player.play();
     } else {

       show(play);
       hide(pause);
       player.pause();
     }
     button.classList.add("active");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
   }

   function playButtonClickHandler(evt) {
     var button = upTo(evt.target, ".playButton")
     togglePlayButton(button);
   }

   document.querySelector(".links").classList.add("inactive");

   var playButton = document.querySelector(".playButton");
   playButton.addEventListener("click", playButtonClickHandler);


 }());

Code 5
https://jsfiddle.net/j2g8e7k6/10/

  (function iife() {
    "use strict";

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

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

    function togglePlayButton(button) {
      var player = button.querySelector("audio");
      var play = button.querySelector(".play");
      var pause = button.querySelector(".pause");
      player.volume = 1.0;
      if (player.paused) {
        hide(play);
        show(pause);
        player.play();
        button.classList.add("active");
      } else {
        button.classList.remove("active");
        show(play);
        hide(pause);
        player.pause();
      }

    }

    function getPlayButton(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function playButtonClickHandler(evt) {
      var button = getPlayButton(evt.target);
      togglePlayButton(button);
    }

    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);

  }());
2

You’ll find that I’ve made some updates since then.

3

Correction - the update is this: https://jsfiddle.net/fsesrh2b/10/

4

At least it would have been if JSLint was happy with it.

A few corrections later, this is the proper updated code. https://jsfiddle.net/fsesrh2b/15/

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.