diff --git a/kahuna/public/js/image/controller.js b/kahuna/public/js/image/controller.js index b2d6119a64..616079579b 100644 --- a/kahuna/public/js/image/controller.js +++ b/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 = [ diff --git a/kahuna/public/js/image/index.js b/kahuna/public/js/image/index.js index ccb1932036..ace6e3f3ab 100644 --- a/kahuna/public/js/image/index.js +++ b/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) => { diff --git a/kahuna/public/js/image/view.html b/kahuna/public/js/image/view.html index 3c33273db2..7f394770a8 100644 --- a/kahuna/public/js/image/view.html +++ b/kahuna/public/js/image/view.html @@ -175,6 +175,7 @@ ui-drag-data="ctrl.image | asImageDragData"> preview of original image -
  • { + return JSON.stringify( + buildMediaApiSearchArgs({ + offset: Math.max($index - 1, 0), + length: 3 + }) + ); + }; + ctrl.clearSelection = () => { selection.clear(); };