WIP add a shouldShowCropGuttersIfApplicable query param and only sh…

…ow crop gutters if `true` (and other conditions for showing the gutters)
guardian · Oct 1, 2024 · e91ec84 · e91ec84
1 parent 3a9f3f3
commit e91ec84
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/kahuna/public/js/crop/controller.js b/kahuna/public/js/crop/controller.js
@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import '../components/gr-keyboard-shortcut/gr-keyboard-shortcut';
 import {radioList} from '../components/gr-radio-list/gr-radio-list';
-import {cropUtil} from "../util/crop";
+import {cropUtil } from "../util/crop";
 import {cropOptions} from "../util/constants/cropOptions";
 import {getFeatureSwitchActive} from "../components/gr-feature-switch-panel/gr-feature-switch-panel";
 
@@ -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) {

diff --git a/kahuna/public/js/util/crop.js b/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) === "true";
+  }
+
+  return { set, getCropType, getCropOptions, shouldShowCropGuttersIfApplicable };
 }]);
 
 cropUtil.filter('asCropType', function() {