WIP next next next on image page

kahuna/public/js/image/controller.js

@@ -74,6 +74,8 @@ image.controller('ImageCtrl', [
   'optimisedImageUri',
   'lowResImageUri',
   'cropKey',
+  'nnnObject',
+  'fullscreen',
   'mediaCropper',
   'imageService',
   'imageUsagesService',
@@ -98,6 +100,8 @@ image.controller('ImageCtrl', [
             optimisedImageUri,
             lowResImageUri,
             cropKey,
+            nnnObject,
+            fullscreen,
             mediaCropper,
             imageService,
             imageUsagesService,
@@ -108,6 +112,88 @@ image.controller('ImageCtrl', [
             globalErrors) {
 
     let ctrl = this;
+    ctrl.test = console.log;
+
+    // TODO reuse nnnObject for 'Back to search' button
+    // TODO add chevron buttons for prev/next and reuse this function
+    const navigateNNN = (direction) => mediaApi.search(...nnnObject).then(result => {
+      const [query, params] = nnnObject;
+      const ids = result.data.map(_ => _.data.id);
+      const currentImagePositionInIds = ids.indexOf(ctrl.image.data.id);
+      if (currentImagePositionInIds === -1) {
+        alert("Something has gone wrong with the search results used for navigation");
+        //TODO probably navigate back to search results
+        return;
+      }
+      if (currentImagePositionInIds === 0 && direction === 'previous') {
+        //at start of results - can't go previous
+        return;
+      }
+      if (currentImagePositionInIds === ids.length - 1 && direction === 'next') {
+        //at end of results - can't go next
+        return;
+      }
+      const newNnnObject = [
+        query,
+        {
+          ...params,
+          offset: direction === 'next' ? params.offset + currentImagePositionInIds : Math.max(0, params.offset - 1)
+        }
+      ];
+      const targetImageId = ids[direction === 'next' ? currentImagePositionInIds + 1 : currentImagePositionInIds - 1];
+      $state.go('image', {
+        imageId: targetImageId,
+        nnnObject: JSON.stringify(newNnnObject),
+        fullscreen: !!(
+          document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement
+        )
+      });
+    });
+
+    const enterFullscreen = () => {
+
+      const imageEl = $element[0].querySelector('.easel__image');
+
+      console.log($element[0].querySelector('.easel__image'));
+
+      if (!imageEl) {
+        return;
+      }
+
+      // Fullscreen API has vendor prefixing https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide#Prefixing
+      const fullscreenElement = (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.mozFullScreenElement
+      );
+
+      const exitFullscreen = (
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.mozCancelFullScreen
+      );
+
+      const requestFullscreen = (
+        imageEl.requestFullscreen ||
+        imageEl.webkitRequestFullscreen ||
+        imageEl.mozRequestFullScreen
+      );
+
+      fullscreenElement
+        ? exitFullscreen.call(document)
+        : requestFullscreen.call(imageEl);
+
+      // `.call` to ensure `this` is bound correctly.
+      return fullscreenElement
+        ? exitFullscreen.call(document)
+        : requestFullscreen.call(imageEl);
+    };
+
+    if (fullscreen && fullscreen === 'true') {
+      enterFullscreen();
+    }
 
     keyboardShortcut.bindTo($scope)
       .add({
@@ -116,35 +202,25 @@ image.controller('ImageCtrl', [
         callback: () => $state.go('crop', {imageId: ctrl.image.data.id})
       })
       .add({
-        combo: 'f',
-        description: 'Enter fullscreen',
+        combo: 'left',
+        description: "previous image in search results",
         callback: () => {
-          const imageEl = $element[0].querySelector('.easel__image');
-
-          // Fullscreen API has vendor prefixing https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide#Prefixing
-          const fullscreenElement = (
-            document.fullscreenElement ||
-            document.webkitFullscreenElement ||
-            document.mozFullScreenElement
-          );
-
-          const exitFullscreen = (
-            document.exitFullscreen ||
-            document.webkitExitFullscreen ||
-            document.mozCancelFullScreen
-          );
-
-          const requestFullscreen = (
-            imageEl.requestFullscreen ||
-            imageEl.webkitRequestFullscreen ||
-            imageEl.mozRequestFullScreen
-          );
-
-          // `.call` to ensure `this` is bound correctly.
-          return fullscreenElement
-            ? exitFullscreen.call(document)
-            : requestFullscreen.call(imageEl);
+          console.log("left arrow pressed");
+          navigateNNN('previous');
         }
+      })
+      .add({
+        combo: 'right',
+        description: "next image in search results",
+        callback: () => {
+          console.log("right arrow pressed");
+          navigateNNN('next');
+        }
+      })
+      .add({
+        combo: 'f',
+        description: 'Enter fullscreen',
+        callback: enterFullscreen
       });
 
     ctrl.tabs = [

kahuna/public/js/image/index.js

@@ -23,13 +23,15 @@ image.config(['$stateProvider',
               function($stateProvider) {
 
     $stateProvider.state('image', {
-        url: '/images/:imageId?crop?cropType&customRatio&defaultCropType',
+        url: '/images/:imageId?crop?cropType&customRatio&defaultCropType&nnnObject&fullscreen',
         template: imageTemplate,
         controller: 'ImageCtrl',
         controllerAs: 'ctrl',
         resolve: {
             imageId: ['$stateParams', $stateParams => $stateParams.imageId],
             cropKey: ['$stateParams', $stateParams => $stateParams.crop],
+            nnnObject: ['$stateParams', $stateParams => JSON.parse($stateParams.nnnObject)],
+            fullscreen: ['$stateParams', $stateParams => $stateParams.fullscreen],
             image: ['$state', '$q', 'mediaApi', 'imageId',
                     ($state, $q, mediaApi, imageId) => {
 

kahuna/public/js/image/view.html

@@ -175,6 +175,7 @@
              ui-drag-data="ctrl.image | asImageDragData">
           <img ng-class="{'easel__image':true,'easel__image--checkered__background': ctrl.image.data.optimisedPng }"
                crossorigin="anonymous"
+1               ng-init="ctrl.test()"
                alt="preview of original image"
                ng-src="{{:: ctrl.optimisedImageUri}}"
                grid:track-image="ctrl.image"

kahuna/public/js/preview/image.html

@@ -34,7 +34,7 @@
     </ul>
 
     <a ng-if="! ctrl.selectionMode" class="preview__link"
-       ui-sref="image({imageId: ctrl.image.data.id})"
+       ui-sref="image({imageId: ctrl.image.data.id, nnnObject: ctrl.nnnObject})"
        data-cy="image-preview-link"
        ui-drag-data="ctrl.image | asImageDragData"
        title="{{::ctrl.imageDescription}}"

kahuna/public/js/preview/image.js

@@ -168,7 +168,8 @@ image.directive('uiPreviewImage', function() {
             image: '=',
             isSelected: '=',
             hideInfo: '=',
-            selectionMode: '='
+            selectionMode: '=',
+            nnnObject: '='
         },
         // extra actions can be transcluded in
         transclude: true,

kahuna/public/js/search/results.html

@@ -144,7 +144,7 @@
             gu:lazy-table-load-range="ctrl.loadRange($start, $end)"
             gu-lazy-table-shortcuts>
 
-            <li ng-repeat="image in ctrl.images track by image.data.id"
+            <li ng-repeat="image in ctrl.images track by $index+image.data.id"
                 gu:lazy-table-cell="image">
 
                 <div class="result"
@@ -180,6 +180,7 @@
                     </div>
 
                     <ui-preview-image image="image"
+                                      nnn-object="ctrl.nnnObject($index)"
                                       is-selected="ctrl.imageHasBeenSelected(image)"
                                       draggable="true"
                                       selection-mode="ctrl.inSelectionMode"

kahuna/public/js/search/results.js

@@ -465,7 +465,8 @@ results.controller('SearchResultsCtrl', [
             return $stateParams.query || '*';
         }
 
-        function search({query, until, since, offset, length, orderBy, countAll} = {}) {
+        function buildMediaApiSearchArgs({query, until, since, offset, length, orderBy, countAll} = {}){
+
             // FIXME: Think of a way to not have to add a param in a million places to add it
 
             /*
@@ -500,7 +501,7 @@ results.controller('SearchResultsCtrl', [
             }
 
 
-            return mediaApi.search(query, angular.extend({
+            return [query, angular.extend({
                 ids:        $stateParams.ids,
                 archived:   $stateParams.archived,
                 free:       $stateParams.nonFree === 'true' ? undefined : true,
@@ -522,9 +523,22 @@ results.controller('SearchResultsCtrl', [
                 syndicationStatus: $stateParams.syndicationStatus,
                 persisted: $stateParams.persisted,
                 countAll
-            }));
+            })];
+        }
+
+        function search({query, until, since, offset, length, orderBy, countAll} = {}) {
+          return mediaApi.search(...buildMediaApiSearchArgs({query, until, since, offset, length, orderBy, countAll}));
         }
 
+        ctrl.nnnObject = ($index) => {
+          return JSON.stringify(
+            buildMediaApiSearchArgs({
+              offset: Math.max($index - 1, 0),
+              length: 3
+            })
+          );
+        };
+
         ctrl.clearSelection = () => {
             selection.clear();
         };