Flickr background

flickr-background.js

"use strict";

var API_KEY = '__API_KEY__';
var PHOTOSET_IDS = ['__ID1__', '__ID2__', '__ID3__'];


angular.module('cartagenaApp')
  .directive('flickrBackground', function(Flickr, $http) {
    var _flickrBackground = function($scope, $element) {
      var nextPhoto;

      var _createUrl = function(photo) {
        return 'https://farm' + photo.farm + '.staticflickr.com/' +
          photo.server + '/' + photo.id + '_' + photo.secret + '_b.jpg';
      };

      var _next = function() {
        Flickr.getPhotos().then(function(photos) {
          //There is no nextPhoto preloaded (first call?)
          if (!nextPhoto) {
            nextPhoto = _.sample(photos);
            $http.get(_createUrl(nextPhoto));
          }
          $($element).css('background-image', 'url(\'' + _createUrl(nextPhoto) + '\')');

          //Preload next photo
          nextPhoto = _.sample(photos);
          $http.get(_createUrl(nextPhoto));
        });
      };

      _next();

      $scope.$on('next', _next);
    };
    return {
      restrict: 'A',
      link: _flickrBackground
    };
  });

angular.module('cartagenaApp')
  .service('Flickr', function($q, $http) {
    var cache;

    var _getPhotos = function(photoset) {
      return $http.get('https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&' +
        'api_key=' + API_KEY +
        '&photoset_id=' + photoset +
        '&format=json&nojsoncallback=1');
    };

    this.getPhotos = function() {
      return $q(function(resolve) {
        if (cache) {
          resolve(cache);
        } else {
          var promises = [];
          //load photos for all photoset ids into one array
          PHOTOSET_IDS.forEach(function(id) {
            promises.push(_getPhotos(id));
          });
          $q.all(promises).then(function(results) {
            cache = [];
            results.forEach(function(result) {
              cache = cache.concat(result.data.photoset.photo);
            });
            resolve(cache);
          });
        }
      });
    };
  });

index.html

    <div class="container-fluid main" flickr-background>
      <div ng-view=""></div>
    </div>

main.scss

.container-fluid.main {
  background-color: silver;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  opacity: 0.9;
}