make transparency of crop gutters configurable via a slider

guardian · Sep 30, 2024 · 407a700 · 407a700
1 parent 186a4fe
commit 407a700
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/kahuna/public/js/crop/controller.js b/kahuna/public/js/crop/controller.js
@@ -177,6 +177,11 @@ crop.controller('ImageCropCtrl', [
         }
       };
 
+      ctrl.gutterTransparency = 0.8;
+      ctrl.changeGutterTransparency = (newOpacity) => {
+        ctrl.gutterTransparency = newOpacity;
+      };
+
       $scope.$watch('ctrl.cropType', (newCropType, oldCropType) => {
         const isCropTypeDisabled = ctrl.cropOptions.find(_ => _.key === newCropType).disabled;
 

diff --git a/kahuna/public/js/crop/view.html b/kahuna/public/js/crop/view.html
@@ -104,8 +104,21 @@
 <div class="warning status--info" ng-if="ctrl.shouldShowVerticalWarningGutters">
     Although this is a 5:3 crop, it might be used in a 5:4 space, so please ensure
     there is nothing important in the striped sides as these might be clipped.
+    <div style="display: flex; align-items: center; justify-content: center">
+        <small>STRIPE TRANSPARENCY</small>
+        <input type="range" min="0.3" max="1" step="0.1"
+               ng-model="ctrl.gutterTransparency"
+               (input)="ctrl.changeGutterTransparency($event.target.value)"
+        >
+    </div>
 </div>
 
+<style>
+    :root {
+        --crop-gutter-opacity: {{ctrl.gutterTransparency}}; /* overrides value in cropper-overrides.css */
+    }
+</style>
+
 <div class="easel" role="main" aria-label="Image cropper"
      ng-class="{'vertical-warning-gutters': ctrl.shouldShowVerticalWarningGutters}">
     <div class="easel__canvas">

diff --git a/kahuna/public/js/directives/ui-crop-box/cropper-override.css b/kahuna/public/js/directives/ui-crop-box/cropper-override.css
@@ -41,7 +41,9 @@
   background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
 }
 
-
+:root {
+  --crop-gutter-opacity: 0.8; /* default, overriden in crop/view.html based on slider */
+}
 
 /* GUTTERS to show what will be clipped if the 5:3 crop is used in 5:4 space */
 .easel.vertical-warning-gutters .cropper-view-box::before,
@@ -54,6 +56,7 @@
   top: 0;
   bottom: 0;
   mix-blend-mode: difference;
+  opacity: var(--crop-gutter-opacity);
 }
 .easel.vertical-warning-gutters .cropper-view-box::before { /* left gutter */
   left: 0;
@@ -64,5 +67,5 @@
   background: repeating-linear-gradient(45deg,  transparent,  white 1px,  transparent 3px,  transparent 6px);
 }
 .easel.vertical-warning-gutters .easel__canvas {
-  height: calc(100vh - 115px);
+  height: calc(100vh - 135px);
 }