Skip to content

Instantly share code, notes, and snippets.

@joelip

joelip/album.js

Last active August 29, 2015 14:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joelip/11444174 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joelip/11444174 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joelip revised this gist May 1, 2014. 1 changed file with 15 additions and 4 deletions.
    19 changes: 15 additions & 4 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -109,12 +109,23 @@ if (document.URL.match(/\/album/)) {
    // create a click event handler for making changing Play to Pause
    $(numberColumn).click(function() {
    // add an 'playing' class so we can easily identify the playing song later
    if $('.playing') exists and our current element doesnt have the class playing
    var switchSongId = $('.playing').attr('id');
    $('.playing').text(switchSongId);
    if $('.playing') exists and our current element is not the element that has the class .playing
    // hold the number of the element we just clicked
    clickedSongNumber = $(this).attr('id');
    // get number of song that is already playing
    var previousSongId = $('.playing').attr('id');
    // set the text of the previous song == the id number on it (i.e. revert it back to the track number)
    $('.playing').text(previousSongId);
    // after we set the number back, remove the playing class so we can add it to our new playing song
    $('.playing').removeClass('.playing');
    $('#' + lastClickedSongNumber).addClass('playing');
    // add the playing class to the song we just clicked
    $('#' + clickedSongNumber).addClass('playing');
    // now that it's playing, set the text to pause
    $('.playing').text("Pause");

    /********** NOTE: I just realized that you need to also add a condition that checks to see if the song is
    already playing so that it switches the text from Pause to Play (i.e. stops the song). Let me know if
    you have trouble devising that **********/
    });
    }, function() {
    if element hasClass playing then dont change the text
  2. joelip revised this gist May 1, 2014. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -108,12 +108,8 @@ if (document.URL.match(/\/album/)) {

    // create a click event handler for making changing Play to Pause
    $(numberColumn).click(function() {

    // hold song number for later the next time we click another song
    lastClickedSongNumber = $(this).attr('id');

    // add an 'playing' class so we can easily identify the playing song later
    if $('.playing') exists
    if $('.playing') exists and our current element doesnt have the class playing
    var switchSongId = $('.playing').attr('id');
    $('.playing').text(switchSongId);
    $('.playing').removeClass('.playing');
  3. joelip revised this gist May 1, 2014. 1 changed file with 0 additions and 6 deletions.
    6 changes: 0 additions & 6 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -81,12 +81,6 @@ var setNumberContent = function(element, newContent) {
    return $(element).children(numberColumn).text(newContent);
    }

    // get song number of a row with a given id

    var getSongFromId = function(row) {
    return $(row).children('#' + rowId).attr('id');
    }

    // This 'if' condition is used to prevent the jQuery modifications
    // from happening on non-Album view pages.
    // - This line checks if the current url has "/album" in its path using a regex.
  4. joelip revised this gist May 1, 2014. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -101,10 +101,8 @@ if (document.URL.match(/\/album/)) {
    var $albumImage = $('.album-image img');

    var $songRow = $('tr');
    // var to hold previous song number while we hover
    var prevSongNumber = 0;
    // var to hold current playing song number
    var playingSongNumber;
    var lastClickedSongNumber;

    $songRow.hover(
    function() {
    @@ -132,7 +130,7 @@ if (document.URL.match(/\/album/)) {
    if element hasClass playing then dont change the text

    else
    setNumberContent(this, $(this).attr('id');
    setNumberContent(this, $(this).attr('id'));
    }
    );

  5. joelip revised this gist May 1, 2014. 1 changed file with 13 additions and 8 deletions.
    21 changes: 13 additions & 8 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    // Example Album 1
    var albumPicasso = {
    name: 'The Colors',
    @@ -119,15 +118,21 @@ if (document.URL.match(/\/album/)) {
    $(numberColumn).click(function() {

    // hold song number for later the next time we click another song
    playingSongNumber = $(this).attr('id');

    // add an 'active' class so we can easily identify the playing song later
    $('#' + playingSongNumber).addClass('playing');
    $('#' + playingSongNumber).text("Pause");

    lastClickedSongNumber = $(this).attr('id');

    // add an 'playing' class so we can easily identify the playing song later
    if $('.playing') exists
    var switchSongId = $('.playing').attr('id');
    $('.playing').text(switchSongId);
    $('.playing').removeClass('.playing');
    $('#' + lastClickedSongNumber).addClass('playing');
    $('.playing').text("Pause");
    });
    }, function() {
    setNumberContent(this, prevSongNumber);
    if element hasClass playing then dont change the text

    else
    setNumberContent(this, $(this).attr('id');
    }
    );

  6. joelip created this gist May 1, 2014.
    141 changes: 141 additions & 0 deletions album.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,141 @@

    // Example Album 1
    var albumPicasso = {
    name: 'The Colors',
    artist: 'Pablo Picasso',
    label: 'Cubism',
    year: '1881',
    albumArtUrl: '/images/album-placeholder.png',

    songs: [
    { name: 'Blue', length: '4:26' },
    { name: 'Green', length: '3:14' },
    { name: 'Red', length: '5:01' },
    { name: 'Pink', length: '3:21'},
    { name: 'Magenta', length: '2:15'}
    ]
    };

    // Example Album 2
    var albumMarconi = {
    name: 'The Telephone',
    artist: 'Guglielmo Marconi',
    label: 'EM',
    year: '1909',
    albumArtUrl: '/images/album-placeholder2.png',

    songs: [
    { name: 'Hello, Operator?', length: '1:01' },
    { name: 'Ring, ring, ring', length: '5:01' },
    { name: 'Fits in your pocket', length: '3:21'},
    { name: 'Can you hear me now?', length: '3:14' },
    { name: 'Wrong phone number', length: '2:15'}
    ]
    };

    var createSongRow = function(songNumber, songName, songLength) {

    var $newSongRow = $('<tr>');
    $newSongRow.append('<td class="col-md-1 number-column" id="' + songNumber + '">' + songNumber + '</td>');
    $newSongRow.append('<td class="col-md-9">' + songName + '</td>');
    $newSongRow.append('<td class="col-md-2">' + songLength + '</td>');

    return $newSongRow;
    };

    var changeAlbumView = function(album) {

    // update album title
    var $albumTitle = $('.album-title');
    $albumTitle.text(album.name);
    // update album artist
    var $albumArtist = $('.album-artist');
    $albumArtist.text(album.artist);
    // update the meta information
    var $albumMeta = $('.album-meta-info');
    $albumMeta.text(album.year + " on " + album.label);
    // update image by changing the src url
    var $albumImage = $('.album-image img');
    $albumImage.attr('src', album.albumArtUrl);

    // update the Song List
    var $songList = $('.album-song-listing');
    $songList.empty();
    var songs = album.songs;
    for (var i = 0; i < songs.length; i++) {
    var songData = songs[i];
    var $newRow = createSongRow(i + 1, songData.name, songData.length);
    $songList.append($newRow);
    }

    };

    // function for getting/setting song number column contents

    var numberColumn = '.number-column';

    var getNumberContent = function(element) {
    return $(element).children(numberColumn).text();
    }

    var setNumberContent = function(element, newContent) {
    return $(element).children(numberColumn).text(newContent);
    }

    // get song number of a row with a given id

    var getSongFromId = function(row) {
    return $(row).children('#' + rowId).attr('id');
    }

    // This 'if' condition is used to prevent the jQuery modifications
    // from happening on non-Album view pages.
    // - This line checks if the current url has "/album" in its path using a regex.
    if (document.URL.match(/\/album/)) {
    // Wait until the HTML is fully processed.
    $(document).ready(function() {
    // Code to switch views goes here.
    var albums = [albumPicasso, albumMarconi];
    changeAlbumView(albumPicasso);

    var albumIndex = 0;
    var $albumImage = $('.album-image img');

    var $songRow = $('tr');
    // var to hold previous song number while we hover
    var prevSongNumber = 0;
    // var to hold current playing song number
    var playingSongNumber;

    $songRow.hover(
    function() {
    // set var for holding song number
    prevSongNumber = getNumberContent(this);

    // change number to "Play"
    setNumberContent(this, "Play");

    // create a click event handler for making changing Play to Pause
    $(numberColumn).click(function() {

    // hold song number for later the next time we click another song
    playingSongNumber = $(this).attr('id');

    // add an 'active' class so we can easily identify the playing song later
    $('#' + playingSongNumber).addClass('playing');
    $('#' + playingSongNumber).text("Pause");

    });
    }, function() {
    setNumberContent(this, prevSongNumber);
    }
    );

    $albumImage.click(function(event) {

    albumIndex = (albumIndex + 1) % albums.length;
    console.log(albumIndex);
    changeAlbumView(albums[albumIndex]);
    });
    });
    }