Refactor photo credits to a directive

Trustroots · Feb 26, 2016 · 597746f · 597746f
1 parent c382686
commit 597746f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/modules/core/client/controllers/app.client.controller.js b/modules/core/client/controllers/app.client.controller.js
@@ -21,7 +21,8 @@
     vm.pageTitle = $window.title;
     vm.goHome = goHome;
     vm.signout = signout;
-    vm.photoCredits = [];
+    vm.photoCredits = {};
+    vm.photoCreditsCount = 0;
 
     // Default options for Medium-Editor used site wide
     // @link https://github.com/yabwe/medium-editor
@@ -119,7 +120,8 @@
 
       // Reset photo copyrights on each page change
       // trBoards directive hits in after this and we'll fill this with potential photo credits
-      vm.photoCredits = [];
+      vm.photoCredits = {};
+      vm.photoCreditsCount = 0;
 
       // Reset page scroll on page change
       $window.scrollTo(0,0);
@@ -138,7 +140,8 @@
      * Sniff and apply photo credit changes
      */
     $scope.$on('photoCreditsUpdated', function(scope, photo) {
-      vm.photoCredits.push(photo);
+      angular.extend(vm.photoCredits, photo);
+      vm.photoCreditsCount++;
     });
 
   }

diff --git a/modules/core/client/directives/tr-board-credits.client.directive.js b/modules/core/client/directives/tr-board-credits.client.directive.js
@@ -0,0 +1,29 @@
+(function(){
+  'use strict';
+
+  /**
+   * Print out credits for photos used at the page by tr-boards directive
+   */
+  angular
+    .module('core')
+    .directive('trBoardCredits', trBoardCreditsDirective);
+
+  /* @ngInject */
+  function trBoardCreditsDirective() {
+    return {
+      replace: true,
+      template:
+        '<span class="boards-credits" ng-if="app.photoCreditsCount">' +
+          '<span ng-if="app.photoCreditsCount === 1">Photo by</span>' +
+          '<span ng-if="app.photoCreditsCount > 1">Photos by</span>' +
+          ' <span ng-repeat="(key, credit) in app.photoCredits track by key">' +
+            '<a ng-href="{{ credit.url }}" ng-bind="credit.name"></a>' +
+            '<span ng-if="credit.license"> (<a ng-href="{{ credit.license_url }}" ng-bind-html="credit.license" title="License" rel="license" aria-label="License"></a>)</span>' +
+            '<span ng-if="($first && app.photoCreditsCount > 1) || $middle">, </span>' +
+          '</span>' +
+        '</span>',
+      restrict: 'A'
+    };
+  }
+
+})();
diff --git a/modules/core/client/directives/tr-boards.client.directive.js b/modules/core/client/directives/tr-boards.client.directive.js
@@ -132,8 +132,12 @@
           //'background-position': (photo.position ? photo.position : '50% 50%')
         });
 
+        // 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', photo);
+        scope.$emit('photoCreditsUpdated', photoObject);
 
       }
     };

diff --git a/modules/core/server/views/partials/footer.server.view.html b/modules/core/server/views/partials/footer.server.view.html
@@ -9,17 +9,10 @@
       </nav>
       <nav class="col-xs-4 text-right" role="navigation">
         <ul class="list-inline">
-          <li class="photo-credits" ng-if="app.photoCredits.length > 0">
-            <span ng-if="app.photoCredits.length === 1">Photo by</span>
-            <span ng-if="app.photoCredits.length > 1">Photos by</span>
-            <span ng-repeat="credit in app.photoCredits track by credit.name">
-              <a ng-href="{% raw %}{{ credit.url }}{% endraw %}" ng-bind="credit.name"></a>
-              <span ng-if="credit.license">(<a ng-href="{% raw %}{{ credit.license_url }}{% endraw %}" ng-bind-html="credit.license" title="License" rel="license" aria-label="License"></a>)</span><span ng-if="($first && footer.photoCredits.length > 1) || $middle">, </span>
-            </span>
-          </li>
-          <li><a href="https://www.facebook.com/trustroots.org" tooltip="Facebook" aria-label="Trustroots at Facebook"><i class="icon-facebook icon-lg"></i></a></li>
-          <li><a href="https://twitter.com/trustroots" tooltip="Twitter" aria-label="Trustroots at Twitter"><i class="icon-twitter icon-lg"></i></a></li>
-          <li><a href="https://plus.google.com/+TrustrootsOrg" tooltip="+Google" aria-label="Trustroots at Google plus"><i class="icon-google icon-lg"></i></a></li>
+          <li class="photo-credits" ng-if="app.photoCreditsCount"><span tr-board-credits></span></li>
+          <li><a href="https://www.facebook.com/trustroots.org" uib-tooltip="Facebook" aria-label="Trustroots at Facebook"><i class="icon-facebook icon-lg"></i></a></li>
+          <li><a href="https://twitter.com/trustroots" uib-tooltip="Twitter" aria-label="Trustroots at Twitter"><i class="icon-twitter icon-lg"></i></a></li>
+          <li><a href="https://plus.google.com/+TrustrootsOrg" uib-tooltip="+Google" aria-label="Trustroots at Google plus"><i class="icon-google icon-lg"></i></a></li>
         </ul>
       </nav>
     </div><!-- /.row -->