Last active
January 23, 2018 02:40
-
-
Save bennettmcelwee/c682490581c4739ee2b8ce66ea2f5665 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(`<style> | |
.fp-album-wrapper:not(:hover) .fp-track-listing { | |
display: none; | |
margin-left: -0.5em; | |
} | |
.album-title .fp-track-listing { | |
position: absolute; | |
z-index: 1; | |
} | |
.fp-track-listing { | |
background-color: transparent !important; | |
padding: 0 10px 10px 0; | |
} | |
.fp-track-listing table { | |
background-color: white; | |
border: solid #cccccc 1px; | |
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2) !important; | |
} | |
.fp-track-listing tr:nth-of-type(even) { | |
background-color: #f8f8f8; | |
} | |
.fp-track-listing td { | |
padding: 0.25em 0.5em; | |
} | |
.fp-track-listing td.fp-index, | |
.fp-track-listing td.fp-time { | |
text-align: right; | |
} | |
.fp-track-listing td.fp-artist { | |
font-style: italic; | |
} | |
</style>`).appendTo('head'); | |
// Add useful classes | |
$('.album-container').closest('li').addClass('fp-album-wrapper') | |
$('.album-container > a').mouseenter(function() {window.fpOnAlbumHover(this)}) | |
window.fpOnAlbumHover = (link) => { | |
const wrapper = $(link).closest('.fp-album-wrapper') | |
fpCheckTrackListing(wrapper) | |
} | |
window.fpCheckTrackListing = (wrapper) => { | |
if (wrapper.find('.fp-track-listing').length === 0) { | |
fpGetListing(wrapper) | |
.then(album => { | |
// console.log(`${album.title} by ${album.artist}`) | |
// album.tracks.forEach(track => console.log(`${track.time}: ${track.title} by ${track.artist}`)) | |
const doShowArtist = ! album.tracks.every(track => track.artist === album.tracks[0].artist) | |
const html = album.tracks.map((track, i) => `<tr> | |
<td class="fp-index">${i + 1}</td> | |
<td class="fp-title">${track.title}</td> | |
${doShowArtist ? '<td class="fp-artist">' + track.artist + '</td>' : ''} | |
<td class="fp-time">${track.time}</td> | |
</tr>`) | |
html.unshift('<div class="fp-track-listing"><table><tbody>') | |
html.push('</tbody></table></div>') | |
wrapper.find('.album-title').append(html.join('')) | |
}) | |
} | |
} | |
window.fpGetListing = (wrapper) => { | |
// given a wrapper element, get the track list and save and return a promise | |
if (wrapper.data('track-listing-promise')) { | |
return wrapper.data('track-listing-promise') | |
} | |
const link = wrapper.find('.album-container > a') | |
const url = link.prop('href') | |
// console.log(`Fetching ${url}`) | |
const promise = $.get(url) | |
.then(result => { | |
const container = $('<div>' + result.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>').find('.tracklist-container') | |
// console.log('Got tracklist:', container) | |
const album = { | |
title: container.find('.album-title').text().trim(), | |
artist: container.find('.artist-name').text().trim(), | |
tracks: container.find('.tracklist').map(function () { | |
const track = jQuery(this) | |
return { | |
title: track.find('> .song').text().trim(), | |
artist: track.find('> .artist').text().trim(), | |
time: track.find('> .time').text().trim(), | |
} | |
}).get() | |
} | |
wrapper.removeData('track-listing-promise') | |
return album | |
}) | |
wrapper.data('track-listing-promise', promise) | |
return promise | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To do: For compilations, show artist for each track