stones.js

(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);