From f2780d5478b24eb7c59f4e41e034583c788788f9 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 3 May 2022 16:14:58 +0200
Subject: [PATCH] add readonly mode for image cropper

---
 .../src/less/property-editors.less            |  5 ++
 .../imagecropper/imagecropper.controller.js   |  2 +
 .../imagecropper/imagecropper.html            | 61 +++++++++++--------
 3 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index c3ad08b8f8..7388ac5d0c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -773,6 +773,11 @@
     opacity: .95;
 }
 
+.imagecropper .umb-sortable-thumbnails li[disabled],
+.imagecropper .umb-sortable-thumbnails li[disabled]:hover {
+    cursor: not-allowed;
+}
+
 .imagecropper .umb-sortable-thumbnails li .crop-name,
 .imagecropper .umb-sortable-thumbnails li .crop-size,
 .imagecropper .umb-sortable-thumbnails li .crop-annotation {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
index 8bb50a07dc..b5131e9938 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.controller.js
@@ -140,6 +140,8 @@ angular.module('umbraco')
              * @param {any} targetCrop
              */
             function crop(targetCrop) {
+                if ($scope.readonly) return;
+
                 if (!$scope.currentCrop) {
                     // clone the crop so we can discard the changes
                     $scope.currentCrop = Utilities.copy(targetCrop);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
index 2c58337e82..204b65ca1c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/imagecropper/imagecropper.html
@@ -5,16 +5,18 @@
 
         <input type="hidden" name="modelValue" ng-model="model.value" />
 
-        <umb-property-file-upload culture="{{model.culture}}"
-                                  segment="{{model.segment}}"
-                                  property-alias="{{model.alias}}"
-                                  value="model.value.src"
-                                  required="model.validation.mandatory"
-                                  on-files-selected="filesSelected(value, files)"
-                                  on-files-changed="filesChanged(files)"
-                                  on-init="fileUploaderInit(value, files)"
-                                  hide-selection="true"
-                                  accept-file-ext="acceptFileExt">
+        <umb-property-file-upload 
+            culture="{{model.culture}}"
+            segment="{{model.segment}}"
+            property-alias="{{model.alias}}"
+            value="model.value.src"
+            required="model.validation.mandatory"
+            on-files-selected="filesSelected(value, files)"
+            on-files-changed="filesChanged(files)"
+            on-init="fileUploaderInit(value, files)"
+            hide-selection="true"
+            accept-file-ext="acceptFileExt"
+            ng-attr-readonly="{{ readonly || undefined }}">
 
             <div class="imagecropper clearfix">
 
@@ -22,11 +24,12 @@
                     <div class="umb-cropper__container">
 
                         <div ng-if="currentCrop">
-                            <umb-image-crop height="{{currentCrop.height}}"
-                                            width="{{currentCrop.width}}"
-                                            crop="currentCrop.coordinates"
-                                            center="model.value.focalPoint"
-                                            src="imageSrc">
+                            <umb-image-crop 
+                                height="{{currentCrop.height}}"
+                                width="{{currentCrop.width}}"
+                                crop="currentCrop.coordinates"
+                                center="model.value.focalPoint"
+                                src="imageSrc">
                             </umb-image-crop>
                         </div>
 
@@ -40,12 +43,15 @@
                 </div>
 
                 <div ng-if="!currentCrop && !pendingCrop" class="umb-cropper-imageholder clearfix">
-                    <umb-image-gravity src="imageSrc"
-                                       center="model.value.focalPoint"
-                                       on-value-changed="focalPointChanged(left, top)"
-                                       on-image-loaded="imageLoaded(isCroppable, hasDimensions)">
+                    <umb-image-gravity 
+                        src="imageSrc"
+                        center="model.value.focalPoint"
+                        on-value-changed="focalPointChanged(left, top)"
+                        on-image-loaded="imageLoaded(isCroppable, hasDimensions)"
+                        disable-focal-point="readonly">
                     </umb-image-gravity>
-                    <div class="umb-cropper-imageholder-buttons">
+
+                    <div ng-if="!readonly" class="umb-cropper-imageholder-buttons">
                         <button type="button" class="btn btn-link btn-crop-delete" ng-click="clear()"><umb-icon icon="icon-delete" class="red"></umb-icon> <localize key="content_uploadClear">Remove file</localize></button>
                         <button type="button" class="sr-only" ng-click="vm.clear()"><localize key="content_uploadClearImageContext">Click here to remove the image from the media item</localize></button>
                         <button type="button" ng-show="(model.value.focalPoint.left !== 0.5 && model.value.focalPoint.top !== 0.5)" class="btn btn-link btn-gravity-reset" ng-click="focalPointChanged(0.5,0.5)">
@@ -56,14 +62,15 @@
 
 
                 <ul ng-if="isCroppable" class="umb-sortable-thumbnails cropList clearfix">
-                    <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)">
+                    <li ng-repeat=" (key,value) in model.value.crops" ng-class="{'current':currentCrop.alias === value.alias}" ng-click="crop(value)" ng-attr-disabled="{{ readonly || undefined }}">
 
-                        <umb-image-thumbnail center="model.value.focalPoint"
-                                             crop="value.coordinates"
-                                             src="imageSrc"
-                                             height="{{value.height}}"
-                                             width="{{value.width}}"
-                                             max-size="75">
+                        <umb-image-thumbnail 
+                            center="model.value.focalPoint"
+                            crop="value.coordinates"
+                            src="imageSrc"
+                            height="{{value.height}}"
+                            width="{{value.width}}"
+                            max-size="75">
                         </umb-image-thumbnail>
 
                         <div class="crop-information">