carousel attempt #1

gistfile1.js

app.directive('carousel', function() {

  var HEIGHT = 321;
  var SPACING = 12;

  var template = "\
    <div class='carousel-container'>\
      <h1 class='carousel-title'>{{movies.carouselTitle}}</h1>\
      <div class='carousel'>\
        <div class='carousel-slider'>\
          <div class='carousel-item' ng-repeat='movie in filteredMovies()'>\
            <flip movie='movie'></flip>\
          </div>\
        </div>\
        <div class='carousel-arrow-left'></div>\
        <div class='carousel-arrow-right'></div>\
      </div>\
      <div class='carousel-more'>See more &gt;</div>\
      <div class='carousel-less'>See less &lt;</div>\
    </div>\
  ";

  return {

    restrict: 'E',

    template: template,

    replace: true,

    scope: {
      movies: '=',
      categories: '='
    },

    link: function(scope, element, attrs) {

      scope.flowState = 'horizontal';

      $(element)
        .on('click', '.carousel-arrow-right', slideRight)
        .on('click', '.carousel-arrow-left', slideLeft)
        .on('click', '.carousel-more', flowVertical)
        .on('click', '.carousel-less', flowHorizontal);

      scope.$watch('filteredMovies().length', reflow);
      //scope.$watch('categories', reflow);

      scope.filteredMovies = function() {
        var matching = [];
        var categories = scope.categoryList();

        _.each(scope.movies.titles, function(title) {
          var missingTags = _.difference(categories, title.subcategoryList).length > 0;
          if (!missingTags) matching.push(title);
          title.$$hashKey = title.title;
          //if (true) matching.push(title);
        });

        console.log('matching:', matching);

        return matching;
      };

      scope.categoryList = function() {
        var list = [];
        if (scope.categories.length) list = scope.categories.split(' ');

        return list;
      };

      function slideRight() {
        var pageWidth = $(element).width();
        var slider = $(element).find('.carousel-slider');
        var minLeft = pageWidth - scope.innerWidth;
        var x = Math.max(minLeft, slider.position().left - pageWidth);

        slider.css('transform', 'translate(' + x + 'px, 0)');
        return false;
      }

      function slideLeft() {
        var pageWidth = $(element).width();
        var slider = $(element).find('.carousel-slider');
        var x = Math.min(0, slider.position().left + pageWidth);

        slider.css('transform', 'translate(' + x + 'px, 0)');
        return false;
      }

      function reflow() {
        if (scope.flowState === 'horizontal') flowHorizontal();
        else flowVertical();
      }

      function flowVertical() {
        var pageWidth = $(element).width();
        var x = 0, y = 0;
        scope.flowState = 'vertical';
        $(element).find('.carousel-item').each(function() {
          var width = $(this).width();
          if (x + width > pageWidth) {
            x = 0;
            y += HEIGHT + SPACING;
          }

          $(this).css('-webkit-transform', 'translate(' + x + 'px, ' + y + 'px)');
          x += width + SPACING;
        });
        $(element)
          .addClass('isExpanded')
          .find('.carousel')
            .css('height', (y + HEIGHT) + 'px');

        $(element).find('.carousel-slider').css('transform', 'translate(0, 0)');
      }

      function flowHorizontal() {
        scope.flowState = 'horizontal';
        scope.innerWidth = 0;
        $(element).find('.carousel-item').each(function() {
          $(this).css('-webkit-transform', 'translate(' + scope.innerWidth + 'px, 0px)');
          scope.innerWidth += $(this).width() + SPACING;
        });
        $(element)
          .removeClass('isExpanded')
          .find('.carousel')
            .css('height', HEIGHT + 'px');
        $(element).find('.carousel-slider').css('transform', 'translate(0, 0)');

        setTimeout(function() {
          $(element).find('.carousel-item').addClass('isAnimated');
        }, 0);
      }
    }
  };

});