feat(Document): Added document image crop alignment control

roadiz · Oct 12, 2023 · 51e2cdb · 51e2cdb
1 parent 970d4c6
commit 51e2cdb
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 6 deletions.
diff --git a/lib/RoadizCoreBundle/src/Entity/Document.php b/lib/RoadizCoreBundle/src/Entity/Document.php
@@ -105,7 +105,7 @@ class Document extends AbstractDateTimed implements AdvancedDocumentInterface, H
      * bottom-right
      */
     #[ORM\Column(name: 'image_crop_alignment', type: 'string', length: 12, nullable: true)]
-    #[SymfonySerializer\Groups(['document', 'document_display', 'nodes_sources', 'tag', 'attribute'])]
+    #[SymfonySerializer\Ignore]
     #[Assert\Length(max: 12)]
     #[Assert\Choice(choices: [
         'top-left',

diff --git a/lib/RoadizCoreBundle/src/Serializer/Normalizer/DocumentNormalizer.php b/lib/RoadizCoreBundle/src/Serializer/Normalizer/DocumentNormalizer.php
@@ -60,6 +60,14 @@ public function normalize($object, $format = null, array $context = [])
                 }
             }
 
+            if (
+                !$object->isPrivate() &&
+                $object->isProcessable() &&
+                null !== $alignment = $object->getImageCropAlignment()
+            ) {
+                $data['imageCropAlignment'] = $alignment;
+            }
+
             if (
                 \in_array('document_folders_all', $serializationGroups, true)
             ) {

diff --git a/lib/Rozier/src/Forms/DocumentEditType.php b/lib/Rozier/src/Forms/DocumentEditType.php
@@ -118,6 +118,14 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ]);
         }
 
+        if ($document->isProcessable()) {
+            $builder->add('imageCropAlignment', ImageCropAlignmentType::class, [
+                'label' => 'document.imageCropAlignment',
+                'help' => 'document.imageCropAlignment.help',
+                'required' => false,
+            ]);
+        }
+
         /*
          * Display thumbnails only if current Document is original.
          */

diff --git a/lib/Rozier/src/Forms/ImageCropAlignmentType.php b/lib/Rozier/src/Forms/ImageCropAlignmentType.php
@@ -0,0 +1,44 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Themes\Rozier\Forms;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+final class ImageCropAlignmentType extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'label' => 'image_crop_alignment',
+            'required' => false,
+            'placeholder' => 'image_crop_alignment.none',
+            'expanded' => true,
+            'choices' => [
+                'image_crop_alignment.top-left' => 'top-left',
+                'image_crop_alignment.top' => 'top',
+                'image_crop_alignment.top-right' => 'top-right',
+                'image_crop_alignment.left' => 'left',
+                'image_crop_alignment.center' => 'center',
+                'image_crop_alignment.right' => 'right',
+                'image_crop_alignment.bottom-left' => 'bottom-left',
+                'image_crop_alignment.bottom' => 'bottom',
+                'image_crop_alignment.bottom-right' => 'bottom-right',
+            ]
+        ]);
+    }
+
+    public function getBlockPrefix(): string
+    {
+        return 'image_crop_alignment';
+    }
+
+
+    public function getParent(): string
+    {
+        return ChoiceType::class;
+    }
+}
diff --git a/lib/Rozier/src/Resources/app/less/forms/crop-alignment.less b/lib/Rozier/src/Resources/app/less/forms/crop-alignment.less
@@ -0,0 +1,38 @@
+
+.image-crop-alignments {
+    max-width: 200px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    padding: 1em;
+
+    &__grid {
+        display: grid;
+        aspect-ratio: 4 / 3;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        grid-gap: 2px;
+        margin: 1em 0;
+        align-items: center;
+        justify-items: center;
+        border: none;
+
+        .uk-form-label,
+        label {
+            display: none !important;
+        }
+
+        input[type=radio] {
+            margin-left: 0 !important;
+            border: none;
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+
+            &:checked:before {
+                width: 100%;
+                height: 100%;
+                border-radius: 0;
+                margin: 0;
+            }
+        }
+    }
+}
diff --git a/lib/Rozier/src/Resources/app/less/style.less b/lib/Rozier/src/Resources/app/less/style.less
@@ -70,6 +70,7 @@
 @import "forms/custom_switch.less";
 @import "forms/collection_form.less";
 @import "forms/inline_form.less";
+@import "forms/crop-alignment.less";
 
 
 /* -------- AUTOCOMPLETE -------- */

diff --git a/lib/Rozier/src/Resources/translations/messages.xlf b/lib/Rozier/src/Resources/translations/messages.xlf
@@ -1355,6 +1355,19 @@
             <trans-unit xml:space="preserve" id="document.document_display_gallery"><source>document.document_display_gallery</source></trans-unit>
             <trans-unit xml:space="preserve" id="documents.document_display_list"><source>documents.document_display_list</source></trans-unit>
             <trans-unit xml:space="preserve" id="nodeSource.noIndex"><source>nodeSource.noIndex</source></trans-unit>
+
+            <trans-unit xml:space="preserve" id="document.imageCropAlignment"><source>document.imageCropAlignment</source></trans-unit>
+            <trans-unit xml:space="preserve" id="document.imageCropAlignment.help"><source>document.imageCropAlignment.help</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.none"><source>image_crop_alignment.none</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.top-left"><source>image_crop_alignment.top-left</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.top"><source>image_crop_alignment.top</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.top-right"><source>image_crop_alignment.top-right</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.left"><source>image_crop_alignment.left</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.center"><source>image_crop_alignment.center</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.right"><source>image_crop_alignment.right</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.bottom-left"><source>image_crop_alignment.bottom-left</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.bottom"><source>image_crop_alignment.bottom</source></trans-unit>
+            <trans-unit xml:space="preserve" id="image_crop_alignment.bottom-right"><source>image_crop_alignment.bottom-right</source></trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/lib/Rozier/src/Resources/views/forms.html.twig b/lib/Rozier/src/Resources/views/forms.html.twig
@@ -305,6 +305,27 @@
     } %}
 {% endblock custom_forms_widget %}
 
+{%- block radio_widget -%}
+    <input type="radio" title="{{ label|trans }}" aria-label="{{ label|trans }}" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
+{%- endblock radio_widget -%}
+
+{% block image_crop_alignment_widget %}
+    {% apply spaceless %}
+    <div class="image-crop-alignments" {{ block('widget_container_attributes') }}>
+        <div class="uk-form-group uk-margin-bottom">
+        {%- for child in form %}
+            {{- form_widget(child) -}}
+            {{- form_label(child, null, {translation_domain: choice_translation_domain}) -}}
+            {% if child.vars.value == null %}
+                </div>
+                <div class="image-crop-alignments__grid uk-form-group uk-margin-bottom">
+            {% endif %}
+        {% endfor -%}
+        </div>
+    </div>
+    {% endapply %}
+{% endblock %}
+
 {% block checkbox_widget -%}
     <input class="rz-boolean-checkbox"
            type="checkbox"

diff --git a/lib/Rozier/src/Resources/views/partials/js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/js-inject.html.twig
@@ -1,5 +1,5 @@
 
-<script src="{{ asset('js/vendor.0a3de8e7bfaf93c96811.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/vendor.12bd9afa9e8697bea044.js', 'Rozier') }}" defer type="text/javascript"></script>
 
-<script src="{{ asset('js/app.0a3de8e7bfaf93c96811.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/app.12bd9afa9e8697bea044.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig b/lib/Rozier/src/Resources/views/partials/simple-js-inject.html.twig
@@ -1,3 +1,3 @@
 
-<script src="{{ asset('js/simple.0a3de8e7bfaf93c96811.js', 'Rozier') }}" defer type="text/javascript"></script>
+<script src="{{ asset('js/simple.12bd9afa9e8697bea044.js', 'Rozier') }}" defer type="text/javascript"></script>
 
diff --git a/lib/Rozier/src/static/css/app.403c9cc871420395d993.css b/lib/Rozier/src/static/css/app.403c9cc871420395d993.css
diff --git a/lib/Rozier/src/static/css/app.403c9cc871420395d993.css.map b/lib/Rozier/src/static/css/app.403c9cc871420395d993.css.map
diff --git a/...src/static/js/app.0a3de8e7bfaf93c96811.js → ...src/static/js/app.12bd9afa9e8697bea044.js b/...src/static/js/app.0a3de8e7bfaf93c96811.js → ...src/static/js/app.12bd9afa9e8697bea044.js
diff --git a/.../static/js/simple.0a3de8e7bfaf93c96811.js → .../static/js/simple.12bd9afa9e8697bea044.js b/.../static/js/simple.0a3de8e7bfaf93c96811.js → .../static/js/simple.12bd9afa9e8697bea044.js
diff --git a/.../static/js/vendor.0a3de8e7bfaf93c96811.js → .../static/js/vendor.12bd9afa9e8697bea044.js b/.../static/js/vendor.0a3de8e7bfaf93c96811.js → .../static/js/vendor.12bd9afa9e8697bea044.js
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,3 @@

		<script src="{{ asset('js/simple.0a3de8e7bfaf93c96811.js', 'Rozier') }}" defer type="text/javascript"></script>
		<script src="{{ asset('js/simple.12bd9afa9e8697bea044.js', 'Rozier') }}" defer type="text/javascript"></script>