Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(function(exports) {
var bands = [
{
name: "The Beatles",
members: [
{
name: "George Harrison",
instrument: "Lead Guitar",
bio: "Blah blah blah",
songs: ["While my guitar gently weeps", "Here comes the sun"]
},
{
name: "Ringo Starr",
instrument: "Drums",
bio: "Peace and Love, Peace and love",
songs: ["Octopuses Garden", "Maxwell's Silver Hammer"]
}
]
},
{
name: "The Rolling Stones",
members: [
{
name: "Keith Richards",
instrument: "Lead Guitar",
bio: "Likes a cigarette",
songs: ["Sympathy for the Devil", "Satisfaction"]
},
{
name: "Mick Jagger",
instrument: "Vocals",
bio: "Born in London",
songs: ["Ruby Tuesday", "Tears go By"]
}
]
}
];
/*
urls:
#/ (Root) - show a list of bands
#/{band-name} - show band name and list of members/instruments
#/{band-name}/{member} - show Band name, member and bio
#/{band-name}/{member}/songs - Show band name, member and song list
*/
function href(...params) {
var onclick = icky.fname(params.pop());
var href = `#/${params.map(encodeURIComponent).join("/")}`;
return `href="${href}" onclick="${onclick}(this)"`;
}
function templateBand(band) {
function memberItem(member) {
return `<li><a ${href(band.name, member.name, () => viewMember(member))}>${member.name}</a></li>`;
}
return `<h2>${band.name}</h2>
<ol>
${icky.map(band.members, memberItem)}
</ol>
<div id="memberDetail"></div>
`;
}
function viewBand(band) {
icky.update("#bandDetail", () => templateBand(band));
}
function viewMember(member) {
icky.update("#memberDetail", () => templateBandMember(member));
}
function templateBandMember(member, bioOrSongs) {
if (!bioOrSongs) {
bioOrSongs = "bio";
}
const bio = `
<h4>Bio</h4>
<p>${member.bio}</p>`;
const songs = `<h4>Songs</h4>
<ol>${icky.map(member.songs, song => `<li>${song}</li>`)}</ol>`;
return `<h3>${member.name}</h3>
${bioOrSongs == "bio" ? bio : songs}
`; //<a ${href()}>Bio</a> <a ${href()}>Songs</a>
}
function templateRoot() {
function bandListItem(band) {
return `<li><a ${href(band.name, () => viewBand(band))}>${band.name}</a><div/></li>`;
}
return `
<ol>
${icky.map(bands, bandListItem)}
</ol>
<div id="bandDetail"></div>`;
}
icky.update("#ickyroot", templateRoot);
var [dummy, bandName, member, bioOrSongs] = location.hash.split("/").map(decodeURIComponent);
const getBandByName = name => bands.filter(band => band.name == name)[0];
const getMemberByName = (band, name) => band.members.filter(member => member.name == name)[0];
if (bandName) {
var band = getBandByName(bandName);
if (band) {
viewBand(band);
if (member) {
var p = getMemberByName(band, member);
viewMember(p);
}
}
}
})(window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment