Merge pull request guardian#4343 from guardian/only-display-crop-gutters-via-url-param

add a `shouldShowCropGuttersIfApplicable` query param

Author: twrichards

kahuna/public/js/crop/controller.js

@@ -182,8 +182,9 @@ crop.controller('ImageCropCtrl', [
 
         const maybeCropRatioIfStandard = cropOptions.find(_ => _.key === ctrl.cropType)?.ratioString;
         ctrl.shouldShowVerticalWarningGutters =
-          getFeatureSwitchActive("show-cropping-gutters-switch")
-          && window._clientConfig.staffPhotographerOrganisation === "GNM"
+          window._clientConfig.staffPhotographerOrganisation === "GNM"
+          && cropSettings.shouldShowCropGuttersIfApplicable()
+          && getFeatureSwitchActive("show-cropping-gutters-switch")
           && maybeCropRatioIfStandard === "5:3";
 
         if (isCropTypeDisabled) {

kahuna/public/js/crop/index.js

@@ -18,7 +18,7 @@ crop.config(['$stateProvider',
              function($stateProvider) {
 
     $stateProvider.state('crop', {
-        url: '/images/:imageId/crop?cropType&customRatio',
+        url: '/images/:imageId/crop?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: cropTemplate,
         controller: 'ImageCropCtrl',
         controllerAs: 'ctrl',

kahuna/public/js/image/index.js

@@ -23,7 +23,7 @@ image.config(['$stateProvider',
               function($stateProvider) {
 
     $stateProvider.state('image', {
-        url: '/images/:imageId?crop?cropType&customRatio',
+        url: '/images/:imageId?crop?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: imageTemplate,
         controller: 'ImageCtrl',
         controllerAs: 'ctrl',

kahuna/public/js/search/index.js

@@ -73,7 +73,7 @@ search.config(['$stateProvider', '$urlMatcherFactoryProvider',
     $stateProvider.state('search', {
         // FIXME [1]: This state should be abstract, but then we can't navigate to
         // it, which we need to do to access it's deeper / remembered chile state
-        url: '/?cropType&customRatio',
+        url: '/?cropType&customRatio&shouldShowCropGuttersIfApplicable',
         template: searchTemplate,
         deepStateRedirect: {
             // Inject a transient $stateParams for the results state

kahuna/public/js/util/crop.js

@@ -4,6 +4,7 @@ import { landscape, portrait, video, square, freeform, cropOptions } from './con
 
 const CROP_TYPE_STORAGE_KEY = 'cropType';
 const CUSTOM_CROP_STORAGE_KEY = 'customCrop';
+const SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY = 'shouldShowCropGuttersIfApplicable';
 
 const customCrop = (label, xRatio, yRatio) => {
   return { key:label, ratio: xRatio / yRatio, ratioString: `${xRatio}:${yRatio}`};
@@ -61,7 +62,15 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
     }
   };
 
-  function set({cropType, customRatio}) {
+  const setShouldShowCropGuttersIfApplicable = shouldShowCropGuttersIfApplicableStr => {
+    storage.setJs(
+      SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY,
+      shouldShowCropGuttersIfApplicableStr === "true",
+      true
+    );
+  };
+
+  function set({cropType, customRatio, shouldShowCropGuttersIfApplicable}) {
     // set customRatio first in case cropType relies on a custom crop
     if (customRatio) {
       setCustomCrop(customRatio);
@@ -71,6 +80,10 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
       setCropType(cropType);
     }
 
+    if (shouldShowCropGuttersIfApplicable) {
+      setShouldShowCropGuttersIfApplicable(shouldShowCropGuttersIfApplicable);
+    }
+
   }
 
   function getCropType() {
@@ -81,7 +94,11 @@ cropUtil.factory('cropSettings', ['storage', function(storage) {
     }
   }
 
-  return { set, getCropType, getCropOptions };
+  function shouldShowCropGuttersIfApplicable() {
+    return storage.getJs(SHOULD_SHOW_CROP_GUTTERS_IF_APPLICABLE_STORAGE_KEY, true);
+  }
+
+  return { set, getCropType, getCropOptions, shouldShowCropGuttersIfApplicable };
 }]);
 
 cropUtil.filter('asCropType', function() {