All files / src/visual songSliderElements.js

100% Statements 36/36
84.62% Branches 22/26
100% Functions 7/7
100% Lines 36/36
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233                    31x                   3x 3x 3x 3x                         3x         3x           3x       12x 12x             12x 3x                               3x         3x               3x       6x     6x                 6x 3x                               3x       2x         2x               2x       2x     2x                 2x 1x                                 3x     3x             3x                       3x 3x                     211x           211x 20x             31x                      
/**
 * Imports the config module
 * @module config
 */
import config from "../config.js";
 
/**
 * Defines the visual representation of AmplitudeJS song slider elements.
 * @module visual/SongSliderElements
 */
let SongSliderElements = (function() {
  /**
   * Syncs all of the song slider elements.
   *
   * @access public
   * @param {number} location 	- The location of the song as a percentage.
   * @param {string} playlist 	- The playlist we are setting the song slider for.
   * @param {number} songIndex 	- The index of the song we are adjusting the song slider for.
   */
  function sync(location, playlist, songIndex) {
    syncMain(location);
    syncPlaylist(location, playlist);
    syncSong(location, songIndex);
    syncSongInPlaylist(location, playlist);
  }
 
  /**
   * Syncs the main slider location
   *
   * @access public
   * @param {number} location 	- The location of the song as a percentage.
   */
  function syncMain(location) {
    /*
			Ensure we have a location that's a number
		*/
    location = !isNaN(location) ? location : 0;
 
    /*
			Gets the main song sliders
		*/
    const mainSongSliders = document.querySelectorAll(".amplitude-song-slider");
 
    /*
			Iterates over all of the main sliders and sets the value to the
			percentage of the song played.
		*/
    for (let i = 0; i < mainSongSliders.length; i++) {
      /*
        Grab the playlist and song attributes from the element.
      */
      let playlist = mainSongSliders[i].getAttribute("data-amplitude-playlist");
      let song = mainSongSliders[i].getAttribute("data-amplitude-song-index");
 
      /*
        This method is responsible for only the global elements,
        so we make sure there are no playlist or songs defined on
        the element.
      */
      if (playlist == null && song == null) {
        mainSongSliders[i].value = location;
      }
    }
  }
 
  /**
   * Syncs playlist song slider locations
   *
   * @access public
   * @param {number} location 	- The location of the song as a percentage.
   * @param {string} playlist 	- The playlist we are setting the song slider for.
   */
  function syncPlaylist(location, playlist) {
    /*
			Ensure we have a location that's a number
		*/
    location = !isNaN(location) ? location : 0;
 
    /*
			Gets the playlist song sliders
		*/
    const playlistSongSliders = document.querySelectorAll(
      '.amplitude-song-slider[data-amplitude-playlist="' + playlist + '"]'
    );
 
    /*
			Iterates over all of the playlist sliders and sets the value to the
			percentage of the song played.
		*/
    for (let i = 0; i < playlistSongSliders.length; i++) {
      /*
        Grab the playlist and song attributes from the element.
      */
      let playlistAttribute = playlistSongSliders[i].getAttribute(
        "data-amplitude-playlist"
      );
      let songAttribute = playlistSongSliders[i].getAttribute(
        "data-amplitude-song-index"
      );
 
      /*
				This method is responsible for only the playlist elements,
				so we make sure the playlist attribute matches what is passed
				in.
			*/
      if (playlistAttribute == playlist && songAttribute == null) {
        playlistSongSliders[i].value = location;
      }
    }
  }
 
  /**
   * Syncs individual song slider locations
   *
   * @access public
   * @param {number} location 	- The location of the song as a percentage.
   * @param {number} songIndex 	- The index of the song we are adjusting the song slider for.
   */
  function syncSong(location, songIndex) {
    /*
			We only want to sync song sliders if the playlist is null.
		*/
    if (config.active_playlist == null) {
      /*
				Ensure we have a location that's a number
			*/
      location = !isNaN(location) ? location : 0;
 
      /*
				Gets the individual song sliders
			*/
      const songSliders = document.querySelectorAll(
        '.amplitude-song-slider[data-amplitude-song-index="' + songIndex + '"]'
      );
 
      /*
				Iterates over all of the individual song sliders and sets the value
				to the percentage of the song played.
			*/
      for (let i = 0; i < songSliders.length; i++) {
        /*
	        Grab the playlist and song attributes from the element.
	      */
        let playlistAttribute = songSliders[i].getAttribute(
          "data-amplitude-playlist"
        );
        let songAttribute = songSliders[i].getAttribute(
          "data-amplitude-song-index"
        );
 
        /*
					This method is responsible for only the playlist elements,
					so we make sure the playlist attribute matches what is passed
					in.
				*/
        if (playlistAttribute == null && songAttribute == songIndex) {
          songSliders[i].value = location;
        }
      }
    }
  }
 
  /**
   * Syncs individual song slider locations
   *
   * @access public
   * @param {number} location 	- The location of the song as a percentage.
   * @param {string} playlist 	- The playlist we are setting the song slider for.
   */
  function syncSongInPlaylist(location, playlist) {
    /*
			Ensure we have a location that's a number
		*/
    location = !isNaN(location) ? location : 0;
 
    let activePlaylistIndex =
      config.active_playlist != "" && config.active_playlist != null
        ? config.playlists[config.active_playlist].active_index
        : null;
 
    /*
			Gets the song in playlist sliders
		*/
    const songInPlaylistSliders = document.querySelectorAll(
      '.amplitude-song-slider[data-amplitude-playlist="' +
        playlist +
        '"][data-amplitude-song-index="' +
        activePlaylistIndex +
        '"]'
    );
 
    /*
			Iterates over all of the song in playlist sliders and sets the value
			to the percentage of the song played.
		*/
    for (let i = 0; i < songInPlaylistSliders.length; i++) {
      songInPlaylistSliders[i].value = location;
    }
  }
 
  /**
   * Visually syncs the song sliders back to 0. This usually happens when
   * a song has changed, we ensure that all song sliders get reset.
   *
   * @access public
   */
  function resetElements() {
    let songSliders = document.getElementsByClassName("amplitude-song-slider");
 
    /*
			Iterate over all of the song sliders and set them to
			0 essentially resetting them.
		*/
    for (let i = 0; i < songSliders.length; i++) {
      songSliders[i].value = 0;
    }
  }
 
  /**
   * Returns the public facing methods
   */
  return {
    sync: sync,
    syncMain: syncMain,
    syncPlaylist: syncPlaylist,
    syncSong: syncSong,
    syncSongInPlaylist: syncSongInPlaylist,
    resetElements: resetElements
  };
})();
 
export default SongSliderElements;