KamaKAzii
4/26/2015 - 8:51 AM

gistfile1.js

archiPublicApp.directive('filmstrip', [function() {

  var directive = {
    controller: ['$scope', function($scope) {
      var rejigFilmstrip = function($filmstrip) {
        var $filmstripList = $filmstrip.find('ul');
        var $photos = $filmstrip.find('li');
        var finalWidth = 0;

        $photos.each(function() {
          var $img = $(this).find('img');
          var width = $img.width();
          finalWidth += width;
        });

        $filmstripList.width(finalWidth);
      };

      $scope.$on('lastElementLoaded', function(event, args) {
        var $filmstrip = args.element.parents('.filmstrip');

        // Init the filmstrip.
        rejigFilmstrip($filmstrip);
        $(window).on('resize', rejigFilmstrip($filmstrip));
      });
    }]
  };

  return directive;

}]);

archiPublicApp.directive('photoInFilmstrip', ['$timeout', function($timeout) {

  var directive = {
    link: function(scope, element, attr) {
      // Init the filmstrip on last element.
      if (scope.$last == true) {
        // Wait till the image within has loaded.
        element.find('img').on('load', function() {
          scope.$emit('lastElementLoaded', { 'element': element });
        });
      }
    }
  };

  return directive;

}]);