Music Scene Angular App | Selected works created by Derek Misler.

This was an Angular app built to overcome limitations in an old CMS. It simply pulls editorial content into the randomly-sorted widgets that link to other sections of the site. The design of the widgets eventually became the inspiration for the new ExploreAsheville.com. The sorting was done using the Fisher–Yates shuffle (found here: http://bost.ocks.org/mike/shuffle/).
Tools Utilized: Angular, jQuery, HTML5/CSS3, SVG

View this project on GitHub

I was given three directives: a slideshow of featured content, widgets of varying types, and everything had to be randomly sorted (more on that in a minute). Images were always included, but the slideshow may have featured YouTube videos. The widgets had varying types of content, as well:

Originally this app pulled from a blog's RSS feed that doesn't exist anymore, so for the sake of this post, the content is coming directly from the mainController.js:

$scope.stories =
[
  {
    title: "Asheville's Music Heritage",
    youtube: "7cpk7PTN7xA",
    caption: "The sounds of bluegrass and old-time music have their roots in the Appalachian mountain region around Asheville, N.C., where visitors can hear live music any night of the week. Asheville’s many festivals and diverse venues keep the area’s musical heritage alive and make it a unique destination for lovers of both traditional and contemporary music.",
    URL: "http://www.exploreasheville.com/iconic-asheville/music-heritage/",
    subhead: "Making Music in the Blue Ridge Mountains",
    featured: true,
    type: "story"
  },
  {
    title: "Music Itineraries",
    image: "jam-session-at-the-millroom.jpg",
    caption: "Enjoy the unique traditions of the Festival of Native Peoples in Cherokee or listen to the indie bands at the Lexington Avenue Arts &amp; Fun Festival. Whatever your musical tastes, Asheville's music festivals provide another compelling mix of musical sounds.",
    URL: "http://www.exploreasheville.com/music-scene/itineraries/",
    subhead: "Check out recommended music itineraries.",
    featured: false,
    type: "itinerary"
  },
...
]

The slideshow uses an if statement to check for YouTube videos:

<ul ng-style="listposition">
  <li ng-repeat="story in stories | filter:{featured:'true'}" ng-style="imagewrapper">
    <div ng-if="story.youtube" class="fluidmedia">
      <iframe width="960" height="405" ng-src="{{ youtubeURL + story.youtube + youtubeOptions }}" frameborder="0" allowfullscreen></iframe>
    </div>
    <img ng-if="!story.youtube" ng-src="{{ imageURL + story.image }}" />
    <div class="caption">
      <h3>{{ story.title }}</h3>
      <p>{{ story.caption | limitTo:240 }}<a ng-href="{{ story.URL }}">... read more</a></p>
    </div>
  </li>
</ul>

And the slideshow navigation takes advantage of ng-click to move the images:

<ul class="nav">
  <li ng-repeat="story in stories | filter:{featured:'true'}">
    <a ng-href="" ng-click="scrollTo($index)" ng-class="{sel: $index == selected}"></a>
  </li>
</ul>

// Scroll to appropriate position based on image index and width
$scope.scrollTo = function(index) {
  var newMargin = imageWidth * index;
  $scope.selected = index;
  $scope.listposition = {
    margin:("0 0 0 " + -newMargin + "px"),
    width: galleryWidth + "px"
  };
};

The widgets use the same ng-repeat="story in stories", but their design is different and utilizes SVGs:

<li ng-repeat="story in stories | filter:{featured:false} | limitTo:6:1" >
  <a title="Continue Reading..." href="" ng-href="{{ story.URL }}" class="widget {{ story.type }}">
    <h4 class="title"><span class="icon-arrow-left" ng-include="'/images/icon-arrow-left.svg'"></span>{{ story.type }}<span class="icon-arrow-right" ng-include="'/images/icon-arrow-right.svg'"></span></h4>
    <img ng-src="{{ imageURL + story.image }}">
    <h3 class="subhead">{{ story.title }}</h3>
    <p class="caption">{{ story.caption | limitTo:140 }}...</p> 
    <button class="button theme-small" ng-href="{{ story.URL }}" >read more</button>
  </a>
</li>

Random sorting with the Fisher–Yates shuffle

Because of the implications within the community of a tax-funded agency featuring a specific business, all content that could potentially mention a business' name had to be sorted randomly. I took inspiration from this blog post which uses the Fisher–Yates shuffle, reducing the complexity down to O(n):

var shuffleStories = function(stories) {
  var storiesTotal = stories.length,
      holdVar,
      i;
  while (storiesTotal) {
    // Pick a remaining element...
    i = Math.floor(Math.random() * storiesTotal--);
    // ...and swap it with the current element.
    holdVar = stories[storiesTotal];
    stories[storiesTotal] = stories[i];
    stories[i] = holdVar;
  }
  return stories;
}
shuffleStories($scope.stories);