IBX-154: Allowed to define if the alternative text for image field is…

… required (#1782) Co-authored-by: Dariusz Szut <[email protected]>
ezsystems · Jun 25, 2021 · dc28cf0 · dc28cf0
1 parent 479e946
commit dc28cf0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">