[BUGFIX] Update selected ratio in preview element 79/51979/3
authorHelmut Hummel <typo3@helhum.io>
Tue, 7 Mar 2017 19:30:00 +0000 (20:30 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Wed, 8 Mar 2017 10:25:11 +0000 (11:25 +0100)
When selecting a different ratio and accepting the image manipulation,
not only the image thumbnails, but also the selected ratio should be updated.

Also set the selected ratio correctly when initializing the image manipulation
and set the value even if selected ratio is not defined in TCA but is present
in allowed aspect ratios.

Also always set crop area from saved collection.

Resolves: #80169
Releases: master
Change-Id: I63c24e14b724c3f47ff3101afb4bcb56983c1b28
Reviewed-on: https://review.typo3.org/51979
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Joerg Boesche <typo3@joergboesche.de>
Tested-by: Joerg Boesche <typo3@joergboesche.de>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationElement.html
typo3/sysext/backend/Resources/Private/Templates/ImageManipulation/ImageManipulationWizard.html
typo3/sysext/backend/Resources/Private/TypeScript/ImageManipulation.ts
typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js
typo3/sysext/core/Classes/Imaging/ImageManipulation/CropVariantCollection.php

index 51ac543..1022fb7 100644 (file)
                                                <div class="col-xs-6 col-sm-4 col-md-3 media-gallery__item">
                                                        <p>
                                                                <b><f:translate id="{cropVariant.title}" default="{cropVariant.title}" /></b><br/>
-                                                               <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: <f:translate id="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" default="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" />
+                                                               <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: <span class="t3js-image-manipulation-selected-ratio" data-crop-variant-id="{cropVariant.id}"><f:translate id="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" default="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" /></span>
                                                        </p>
                                                        <div class="t3js-image-manipulation-preview media-object"
-                                                                data-preview-height="150"
-                                                                data-crop-variant-id="{cropVariant.id}">
+                                                               data-preview-height="150"
+                                                               data-crop-variant-id="{cropVariant.id}">
                                                                <f:image image="{image}" crop="{formEngine.field.value}"
                                                                                 cropVariant="{cropVariant.id}"
                                                                                 maxHeight="150"
index 767dc56..1bbf5e6 100644 (file)
@@ -63,7 +63,7 @@
                                                                                                                                        class="sr-only" id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
                                                                                                                                        name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value="{cropVariant.id}"
                                                                                                                                        type="radio">
-                                                                                                                               <span>{ratio.title -> f:translate(id: ratio.title)}</span> <i class="fa fa-check"></i></label>
+                                                                                                                               <span class="t3-js-ratio-title" data-ratio-id="{cropVariant.id}{ratio.id}">{ratio.title -> f:translate(id: ratio.title)}</span> <i class="fa fa-check"></i></label>
                                                                                                                </f:for>
                                                                                                        </div>
                                                                                                </f:if>
index 67a6bda..4faab5b 100644 (file)
@@ -838,9 +838,12 @@ class ImageManipulation {
       const cropVariant: CropVariant = data[cropVariantId];
       const cropData: Area = this.convertRelativeToAbsoluteCropArea(cropVariant.cropArea, imageData);
 
-      let $preview: JQuery = this.trigger
+      const $preview: JQuery = this.trigger
         .closest('.form-group')
         .find(`.t3js-image-manipulation-preview[data-crop-variant-id="${cropVariantId}"]`);
+      const $previewSelectedRatio: JQuery = this.trigger
+        .closest('.form-group')
+        .find(`.t3js-image-manipulation-selected-ratio[data-crop-variant-id="${cropVariantId}"]`);
 
       if ($preview.length === 0) {
         return;
@@ -863,9 +866,12 @@ class ImageManipulation {
         previewHeight = cropData.height;
       }
 
-      let ratio: number = previewWidth / cropData.width;
-
-      let $viewBox: JQuery = $('<div />').html('<img src="' + $image.attr('src') + '">');
+      const ratio: number = previewWidth / cropData.width;
+      const $viewBox: JQuery = $('<div />').html('<img src="' + $image.attr('src') + '">');
+      const $ratioTitleText: JQuery = this.currentModal.find(
+        `.t3-js-ratio-title[data-ratio-id="${cropVariant.id}${cropVariant.selectedRatio}"]`
+      );
+      $previewSelectedRatio.text($ratioTitleText.text());
       $viewBox.addClass('cropper-preview-container');
       $preview.empty().append($viewBox);
       $viewBox.wrap('<span class="thumbnail thumbnail-status"></span>');
index a2cc2ed..0de3d3a 100644 (file)
@@ -687,6 +687,9 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T
                 var $preview = _this.trigger
                     .closest('.form-group')
                     .find(".t3js-image-manipulation-preview[data-crop-variant-id=\"" + cropVariantId + "\"]");
+                var $previewSelectedRatio = _this.trigger
+                    .closest('.form-group')
+                    .find(".t3js-image-manipulation-selected-ratio[data-crop-variant-id=\"" + cropVariantId + "\"]");
                 if ($preview.length === 0) {
                     return;
                 }
@@ -708,6 +711,8 @@ define(["require", "exports", "TYPO3/CMS/Core/Contrib/imagesloaded.pkgd.min", "T
                 }
                 var ratio = previewWidth / cropData.width;
                 var $viewBox = $('<div />').html('<img src="' + $image.attr('src') + '">');
+                var $ratioTitleText = _this.currentModal.find(".t3-js-ratio-title[data-ratio-id=\"" + cropVariant.id + cropVariant.selectedRatio + "\"]");
+                $previewSelectedRatio.text($ratioTitleText.text());
                 $viewBox.addClass('cropper-preview-container');
                 $preview.empty().append($viewBox);
                 $viewBox.wrap('<span class="thumbnail thumbnail-status"></span>');
index 7327a68..949dde5 100644 (file)
@@ -58,13 +58,13 @@ class CropVariantCollection
                         $id = key($persistedCollectionConfig);
                         next($persistedCollectionConfig);
                     }
-                    if (isset($persistedCollectionConfig[$id]['cropArea'], $cropVariantConfig['cropArea'])) {
+                    if (isset($persistedCollectionConfig[$id]['cropArea'])) {
                         $cropVariantConfig['cropArea'] = $persistedCollectionConfig[$id]['cropArea'];
                     }
                     if (isset($persistedCollectionConfig[$id]['focusArea'], $cropVariantConfig['focusArea'])) {
                         $cropVariantConfig['focusArea'] = $persistedCollectionConfig[$id]['focusArea'];
                     }
-                    if (isset($persistedCollectionConfig[$id]['selectedRatio'], $cropVariantConfig['selectedRatio'])) {
+                    if (isset($persistedCollectionConfig[$id]['selectedRatio'], $cropVariantConfig['allowedAspectRatios'][$persistedCollectionConfig[$id]['selectedRatio']])) {
                         $cropVariantConfig['selectedRatio'] = $persistedCollectionConfig[$id]['selectedRatio'];
                     }
                 }