Bunch of new photos around the site + refactor trBoards directive

Now all the photo/copyright information is in one place (trBoards
directive)

modules/core/client/controllers/app.client.controller.js

@@ -19,6 +19,7 @@
     vm.appSettings = SettingsFactory.get();
     vm.languageNames = Languages.get('object');
     vm.goHome = goHome;
+    vm.photoCredits = [];
 
     // Used as a cache buster with ng-include
     // Includes a hash of latest git commit
@@ -73,6 +74,10 @@
      */
     $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
 
+      // Reset photo copyrights on each page change
+      // trBoards directive hits in after this and we'll fill this with potential photo credits
+      vm.photoCredits = [];
+
       // Reset page scroll on page change
       $window.scrollTo(0,0);
 
@@ -86,6 +91,13 @@
 
     });
 
+    /**
+     * Sniff and apply photo credit changes
+     */
+    $scope.$on('photoCreditsUpdated', function(scope, photo) {
+      vm.photoCredits.push(photo);
+    });
+
   }
 
 })();

modules/core/client/controllers/footer.client.controller.js

@@ -14,78 +14,19 @@
     // Exposed
     vm.isTransparent = false;
     vm.isHidden = false;
-    vm.photoCredits = [];
-
-    /*
-     * Please try to keep this updated while you add/change/remove images from different pages
-     */
-    var photos = {
-
-      'bokehblue': {
-        'name': 'Sandra',
-        'url': 'https://www.flickr.com/photos/artfullife/3589991695',
-        'license': 'CC',
-        'license_url': 'https://creativecommons.org/licenses/by-sa/2.0/'
-      },
-      'sierranevada': {
-        'name': 'Simona',
-        'url': 'http://www.wanderlust.lt',
-        'license': 'CC',
-        'license_url': 'http://creativecommons.org/licenses/by-nc-nd/4.0/'
-      },
-      'hitchroad': {
-        'name': 'Andrew W Bugelli',
-        'url': 'http://www.containstraces.blogspot.com/'
-      },
-      'forestpath': {
-        'name': 'Johnson',
-        'url': 'https://www.flickr.com/photos/54459164@N00/15506455245',
-        'license': 'CC',
-        'license_url': 'https://creativecommons.org/licenses/by-nc-sa/2.0/'
-      },
-      'horizonballoon': {
-        'name': 'Wesley Stanford',
-        'url': 'http://www.dualhorizons.blogspot.co.uk/'
-      },
-      'rainbowpeople': {
-        'name': 'Antonio Fulghieri',
-        'url': 'https://aaoutthere.wordpress.com/',
-        'license': 'CC',
-        'license_url': 'http://creativecommons.org/licenses/by-nc-nd/4.0/'
-      },
-
-    };
 
     // Changing footer styles/contents after navigation
-    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
+    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
 
       // Footer is transparent on these pages
       vm.isTransparent = (angular.isDefined(toState.footerTransparent) && toState.footerTransparent === true) ? true : false;
 
       // Footer is hidden on these pages
       vm.isHidden = (angular.isDefined(toState.footerHidden) && toState.footerHidden === true) ? true : false;
 
-      // Set photo credits for these pages
-      if( ['home'].indexOf(toState.name) > -1 ) {
-        vm.photoCredits = [ photos.rainbowpeople, photos.hitchroad ];
-      }
-      else if( ['forgot', 'signin', 'welcome', 'statistics', 'media'].indexOf(toState.name) > -1 ) {
-        vm.photoCredits = [ photos.bokehblue ];
-      }
-      else if( ['about'].indexOf(toState.name) > -1 ) {
-        vm.photoCredits = [ photos.bokehblue, photos.forestpath ];
-      }
-      else if( ['foundation', 'donate', 'donate-help', 'donate-policy'].indexOf(toState.name) > -1 ) {
-        vm.photoCredits = [ photos.forestpath ];
-      }
-      else if( ['faq'].indexOf(toState.name) > -1 ) {
-        vm.photoCredits = [ photos.horizonballoon ];
-      }
-      else {
-        vm.photoCredits = [];
-      }
     });
 
+
   }
 
 })();

modules/core/client/directives/tr-boards.client.directive.js

@@ -2,32 +2,118 @@
   'use strict';
 
   /**
-   * Directive that gives random class from provided class array.
-   * Typically you would rotate board-* classes found from /modules/core/client/less/board.less
+   * Directive that simply picks a background image given element and emits copyright info down the scope.
    *
    * Usage:
+   * <div tr-boards="imageid">
    *
-   * <div tr-boards="classes">
-   *
-   * When:
-   * vm.classes = ['board-sierranevada', 'board-hitchroad'];
+   * Or from many:
+   * <div tr-boards="['imageid1', 'imageid2']">
    */
   angular
     .module('core')
     .directive('trBoards', trBoardsDirective);
 
   /* @ngInject */
-  function trBoardsDirective($http) {
+  function trBoardsDirective() {
     return {
       restrict: 'A',
       replace: false,
       scope: {
-          trBoards: '='
+        trBoards: '='
       },
-      link: function (scope, elem, attr) {
+      link: function(scope, elem, attr) {
+
+        // If requested photo is missing or request is invalid, rely on this photo
+        var defaultPhoto = 'bokeh';
+
+        var photos = {
+          'bokeh': {
+            'name': 'Sandra', // "pinkorchid_too"
+            'url': 'https://www.flickr.com/photos/artfullife/3589991695',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-sa/2.0/',
+            'file': 'flickr-bokeh.jpg'
+          },
+          'forestpath': {
+            'name': 'Johnson', //Johnson Cameraface
+            'url': 'https://www.flickr.com/photos/54459164@N00/15506455245',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-nc-sa/2.0/',
+            'file': 'flickr-forestpath.jpg'
+          },
+          'forestpath-toned': {
+            'name': 'Johnson', //Johnson Cameraface
+            'url': 'https://www.flickr.com/photos/54459164@N00/15506455245',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-nc-sa/2.0/',
+            'file': 'flickr-forestpath-toned.jpg'
+          },
+          'sierranevada': {
+            'name': 'Simona',
+            'url': 'http://www.wanderlust.lt',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
+            'file': 'ss-sierranevada.jpg'
+          },
+          'hitchroad': {
+            // https://www.facebook.com/photo.php?fbid=10152802854942931&set=pcb.10152802854987931&type=1&theater
+            // Permission asked for Trustroots & Hitchwiki by Mikael Korpela
+            'name': 'Andrew W Bugelli',
+            'url': 'http://www.containstraces.blogspot.com/',
+            'file': 'ab-hitchroad-toned.jpg' // ab-hitchroad.jpg
+          },
+          'guitarcamper': {
+            // Permission granted for Trustroots (asked by Mikael Korpela)
+            'name': 'Guillaume Ohz',
+            'file': 'go-camper.jpg'
+          },
+          'maroccomap': {
+            // Permission granted for Trustroots (asked by Mikael Korpela)
+            'name': 'Guillaume Ohz',
+            'file': 'go-maroccomap.jpg'
+          },
+          'rainbowpeople': {
+            // Permission granted for Trustroots (asked by Mikael Korpela)
+            'name': 'Antonio Fulghieri',
+            'url': 'https://aaoutthere.wordpress.com/',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
+            'file': 'af-rainbow-people.jpg'
+          },
+          'happyhippies': {
+            // Permission granted for Trustroots (asked by Mikael Korpela)
+            'name': 'Antonio Fulghieri',
+            'url': 'https://aaoutthere.wordpress.com/',
+            'license': 'CC',
+            'license_url': 'https://creativecommons.org/licenses/by-nc-nd/4.0/',
+            'file': 'af-happyhippies.jpg'
+          },
+          'desertgirl': {
+            // https://www.facebook.com/agniete.melisa
+            // Permission granted for Trustroots (asked by Mikael Korpela)
+            'name': 'Agnietė Melisa',
+            'url': 'https://www.facebook.com/pages/My-Road-Tales/844001355694245',
+            'file': 'am-desertgirl.jpg'
+          }
+        };
+
+        // 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);
+        elem.css({
+          'background-image': 'url(/modules/core/img/board/' + photo.file + ')'
+          //'background-position': (photo.position ? photo.position : '50% 50%')
+        });
+
+        // Send copyright info down the scope... something will pick it up! (pst, core/app-controller)
+        scope.$emit('photoCreditsUpdated', photo);
 
-          // Add random background class to the element
-          elem.addClass(scope.trBoards[Math.floor(Math.random() * (scope.trBoards.length))]);
       }
     };
   }

modules/core/client/less/board.less

@@ -12,7 +12,9 @@
   background-repeat: no-repeat;
   background-size: cover;
   -moz-background-size: cover;
-  color: #fff;
+  &, label {
+    color: #fff;
+  }
   a {
     text-decoration: underline;
     &.btn {
@@ -85,70 +87,17 @@
 
   /**
    * Board images
-   *
-   * When you edit these, make sure to update also photo credits at /modules/core/client/controllers/footer.client.controller.js
+   * Most of the images for .board are coming from core/trBoards directive. Check it out.
+   * Keep just the most simplest stuff here.
    */
-  &.board-sierranevada {
-    /* Simona Sadzeviciute
-     * https://creativecommons.org/licenses/by/3.0/
-     */
-    background-image: url(/modules/core/img/board/sierranevada.jpg);
-    &.container-fullscreen {
-      background-image: url(/modules/core/img/board/sierranevada-full.jpg);
-    }
-    &.board-blur {
-      &.container-fullscreen {
-        background-image: url(/modules/core/img/board/sierranevada-full-blur.jpg);
-      }
-    }
-  }
-  &.board-bokehblue {
-    /* pinkorchid_too (Sandra)
-     * https://www.flickr.com/photos/artfullife/3589991695
-     * https://creativecommons.org/licenses/by-sa/2.0/
-     */
-    background-image: url(/modules/core/img/board/bokeh-blue-full.jpg);
-  }
-  &.board-forestpath {
-    /* Johnson Cameraface
-     * https://www.flickr.com/photos/54459164@N00/15506455245
-     * https://creativecommons.org/licenses/by-nc-sa/2.0/
-     */
-    background-image: url(/modules/core/img/board/forestpath-full.jpg);
-    &.board-blur {
-      background-image: url(/modules/core/img/board/forestpath-full-blur.jpg);
-    }
-  }
-  &.board-hitchroad {
-    /* Andrew W Bugelli
-     * https://www.facebook.com/photo.php?fbid=10152802854942931&set=pcb.10152802854987931&type=1&theater
-     * http://www.containstraces.blogspot.com/
-     * Permission asked for Trustroots & Hitchwiki by Mikael
-     */
-    background-image: url(/modules/core/img/board/hitchroad-full.jpg);
-    &.board-blur {
-      background-image: url(/modules/core/img/board/hitchroad-full-blur.jpg);
-    }
-  }
-  &.board-horizonballoon {
-    /* Wesley Stanford
-     * http://instagram.com/p/jSgoORQcVx/
-     * http://www.dualhorizons.blogspot.co.uk/
-     * Permission asked for Trustroots by Mikael
-     */
-     background-image: url(/modules/core/img/board/dualhorizons-balloon.jpg);
-  }
-  &.board-rainbowpeople {
-    /* Antonio Fulghieri
-     * https://aaoutthere.wordpress.com/
-     * Permission granted for Trustroots (asked by Mikael)
-     */
-     background-image: url(/modules/core/img/board/rainbow-people.jpg);
-  }
   &.board-map {
-    /* Screenshot from our own map...
-     */
+    // Screenshot from our own map...
     background-image: url(/modules/core/img/board/map.jpg);
   }
+  &.board-error {
+    // Photo by Mikael Korpela
+    // https://creativecommons.org/licenses/by-nc-nd/4.0/
+    background-image: url(/modules/core/img/board/error.jpg);
+  }
 
 }

modules/core/client/views/404.client.view.html

@@ -1,13 +1,17 @@
-<section class="container container-fullscreen container-error board board-forestpath">
-  <div class="row">
-    <div class="col-md-6 col-md-offset-3 text-center" role="alert">
-      <h2><em>Don't panic</em></h2>
-      <h1>This page cannot be found</h1>
-      <br><br>
-      <a ui-sref="home" class="btn btn-inverse btn-md">Continue...</a> <a ui-sref="contact" class="btn btn-inverse btn-md">Contact us</a>
-      <br><br>
-      <br>
-      <small>Photo by <a href="https://www.flickr.com/photos/54459164@N00/15506455245" class="text-muted">Johnson</a> <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/" class="text-muted" title="License"><i class="icon-cc icon-lg"></i></a></small>
+
+<section class="container container-fullscreen container-error board board-error">
+  <div class="middle-wrapper middle-wrapper-horizontal">
+    <div class="middle-content">
+
+      <div class="row">
+        <div class="col-md-6 col-md-offset-3 text-center" role="alert">
+          <h2><em>Don't panic</em></h2>
+          <h1>This page cannot be found.</h1>
+          <br><br>
+          <a ui-sref="home" class="btn btn-inverse btn-md">Continue...</a> <a ui-sref="contact" class="btn btn-inverse btn-md">Contact us</a>
+        </div>
+      </div>
+
     </div>
   </div>
-</div>
+</section>