From dc28cf0f90c26762ceefa2fe3c9cafb787cc248c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20W=C3=B3js?= <adam@wojs.pl>
Date: Fri, 25 Jun 2021 10:39:31 +0200
Subject: [PATCH] IBX-154: Allowed to define if the alternative text for image
 field is required (#1782)

Co-authored-by: Dariusz Szut <dew326@gmail.com>
---
 src/bundle/Controller/AssetController.php          |  2 +-
 .../public/js/scripts/fieldType/ezimage.js         |  7 +++++--
 .../public/scss/fieldType/edit/_ezimage.scss       | 14 +++++++++-----
 .../views/admin/content_type/field_types.html.twig |  4 ++++
 .../views/fieldtypes/edit/ezimage.html.twig        |  6 +++++-
 5 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/bundle/Controller/AssetController.php b/src/bundle/Controller/AssetController.php
index 2055a9115c..41f9557ff4 100644
--- a/src/bundle/Controller/AssetController.php
+++ b/src/bundle/Controller/AssetController.php
@@ -84,7 +84,7 @@ public function uploadImageAction(Request $request): Response
                             'path' => $file->getRealPath(),
                             'fileSize' => $file->getSize(),
                             'fileName' => $file->getClientOriginalName(),
-                            'alternativeText' => null,
+                            'alternativeText' => $file->getClientOriginalName(),
                         ]),
                         $data->getLanguageCode()
                     );
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
index 5f110b33d1..82aa506260 100644
--- a/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
+++ b/src/bundle/Resources/public/js/scripts/fieldType/ezimage.js
@@ -66,9 +66,12 @@
          * @memberof EzStringValidator
          */
         validateAltInput(event) {
-            const isRequired = event.target.required;
+            const fileField = this.fieldContainer.querySelector(SELECTOR_INPUT_FILE);
+            const dataContainer = this.fieldContainer.querySelector('.ez-field-edit__data');
+            const isFileFieldEmpty = fileField.files && !fileField.files.length && dataContainer && !dataContainer.hasAttribute('hidden');
+            const isRequired = event.target.dataset.isRequired;
             const isEmpty = !event.target.value;
-            const isError = isEmpty && isRequired;
+            const isError = isEmpty && isRequired && !isFileFieldEmpty;
             const label = event.target.closest(SELECTOR_ALT_WRAPPER).querySelector('.ez-data-source__label').innerHTML;
             const result = { isError };
 
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezimage.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezimage.scss
index 2dc5f0705f..91010d7a63 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezimage.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezimage.scss
@@ -1,6 +1,6 @@
 .ez-field-edit--ezimage {
     .ez-field-edit-preview {
-        padding: 1.25rem 0 .75rem 1.25rem;
+        padding: 1.25rem 0 0.75rem 1.25rem;
 
         &__media {
             max-width: 100%;
@@ -11,12 +11,12 @@
 
         &__details {
             color: $ez-color-base-light;
-            font-size: .75rem;
-            padding-top: .5rem;
+            font-size: 0.75rem;
+            padding-top: 0.5rem;
         }
 
         .ez-field-edit-preview__image-alt {
-            margin-top: .5rem;
+            margin-top: 0.5rem;
         }
     }
 
@@ -25,7 +25,7 @@
             position: relative;
 
             &:before {
-                content : '!';
+                content: '!';
                 position: absolute;
                 top: 0;
                 left: -20px;
@@ -41,6 +41,10 @@
     }
 
     .ez-data-source__field--alternativeText {
+        .ez-data-source__label {
+            @include label-required();
+        }
+
         &.is-invalid {
             .ez-data-source__label-wrapper,
             .ez-data-source__label-wrapper .ez-field-edit__label {
diff --git a/src/bundle/Resources/views/admin/content_type/field_types.html.twig b/src/bundle/Resources/views/admin/content_type/field_types.html.twig
index 52f9d2fd6f..45d5280ab6 100644
--- a/src/bundle/Resources/views/admin/content_type/field_types.html.twig
+++ b/src/bundle/Resources/views/admin/content_type/field_types.html.twig
@@ -84,6 +84,10 @@
     <div class="ezimage-validator max-file-size{% if group_class is not empty %} {{ group_class }}{% endif %}">
         {{- form_row(form.maxSize, {'label_attr': {'class': 'ez-label'}}) -}}
     </div>
+
+    <div class="ezimage-validator is-alternative-text-required"{% if group_class is not empty %} {{ group_class }}{% endif %}>
+        {{ form_row(form.isAlternativeTextRequired, {'attr': {'class': 'ez-input ez-input--checkbox'}, 'label_attr': {'class': 'checkbox-inline ez-label'}}) }}
+    </div>
 {% endblock %}
 
 {% block ezinteger_field_definition_edit %}
diff --git a/src/bundle/Resources/views/fieldtypes/edit/ezimage.html.twig b/src/bundle/Resources/views/fieldtypes/edit/ezimage.html.twig
index 838a73e949..2726cf8824 100644
--- a/src/bundle/Resources/views/fieldtypes/edit/ezimage.html.twig
+++ b/src/bundle/Resources/views/fieldtypes/edit/ezimage.html.twig
@@ -25,7 +25,11 @@
                 <span class="ez-field-edit-preview__file-size">{{ form.parent.vars.value.value.fileSize|ez_file_size(2) }}</span>
             </div>
             <div class="ez-field-edit-preview__image-alt">
-                {{ form_row(form.alternativeText) }}
+                {% set alternative_text_label_class = form.vars.is_alternative_text_required ? 'required' : '' %}
+                {{ form_row(form.alternativeText, {
+                    attr: { 'data-is-required': form.vars.is_alternative_text_required },
+                    label_attr: { 'class': alternative_text_label_class }
+                }) }}
             </div>
         </div>
         <div class="ez-field-edit-preview__actions">