tr-boards.client.directive.js

import photos from '@/modules/core/client/services/photos.service';

(function () {
  'use strict';

  /**
   * Directive that simply picks a background image given element and emits copyright info down the scope.
   *
   * Usage:
   * <div tr-boards="imageid">
   *
   * Or from many:
   * <div tr-boards="['imageid1', 'imageid2']">
   *
   * To stop cover image being set for small screens (<= 480px width),
   * use `tr-boards-ignore-small` attribute.
   *
   */
  angular
    .module('core')
    .directive('trBoards', trBoardsDirective);

  /* @ngInject */
  function trBoardsDirective($window) {
    return {
      restrict: 'A',
      replace: false,
      scope: {
        trBoards: '='
      },
      link: function (scope, elem, attrs) {

        // Don't set background images for mobile screens if defined so via attribute
        if (angular.isDefined(attrs.trBoardsIgnoreSmall) && $window.innerWidth <= 480) {
          return;
        }

        // If requested photo is missing or request is invalid, rely on this photo
        var defaultPhoto = 'bokeh';

        // scope.trBoards might be an array (therefore just pick one key from it) or a string (thus just use it as is)
        var key = angular.isArray(scope.trBoards) ? scope.trBoards[Math.floor(Math.random() * (scope.trBoards.length))] : scope.trBoards;

        // Pick the photo
        var photo = photos[key] || photos[defaultPhoto];

        // Add photo as a background to the element
        elem.addClass('board-' + key);

        // For small screens, if mobile image exists, use it
        var file = ($window.innerWidth <= 480 && photo.file_mobile) ? photo.file_mobile : photo.file;

        elem.css({
          'background-image': 'url(/img/board/' + file + ')'
        });

        // To prevent key being literally `key`: `{key: ...}`, we want it to be actual keyname such as `hitchroad`.
        var photoObject = {};
        photoObject[key] = photo;

        // Send copyright info down the scope... something will pick it up! (pst, core/app-controller)
        scope.$emit('photoCreditsUpdated', photoObject);

      }
    };
  }

}());