KUN-8981 | (feat) url chooser performance

src/Kunstmaan/AdminBundle/Resources/ui/js/_url-chooser.js

@@ -140,7 +140,6 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
         }
     };
 
-
     // Save for Media-chooser
     saveMediaChooserModal = function (cke, isCropable) {
         if (!cke) {
@@ -201,7 +200,6 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
         }
     };
 
-
     // Get Url Parameters
     getUrlParam = function (paramName) {
         var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i'),
@@ -214,49 +212,16 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
     adaptUrlChooser = function () {
         $body.on('click', '.js-change-link-type', function (e) {
                 e.preventDefault();
-                var $form = $(this).closest('form'),
-                    $urlChooser = $(this).parents('.urlchooser-wrapper'),
-                    $urlChooserName = $urlChooser.data('chooser-name');
-
-                var values = {};
-
-                $.each($form.serializeArray(), function (i, field) {
-                    // Only submit required values.
-                    if (field.name.indexOf('link_type') !== -1 || field.name.indexOf('link_url') !== -1) {
-                        if (field.name.indexOf($urlChooserName) !== -1 && field.name.indexOf('link_url') === -1) {
-                            values[field.name] = field.value;
-                        }
-                    }
-                    else {
-                        // Main sequence can not be submitted.
-                        if (field.name.indexOf('sequence') === -1) {
-                            // handle array values
-                            if (endsWith(field.name, '[]')) {
-                                if (typeof values[field.name] === 'undefined' || typeof values[field.name] === 'string') {
-                                    values[field.name] = [field.value];
-                                } else {
-                                    values[field.name].push(field.value);
-                                }
-                            } else {
-                                values[field.name] = field.value;
-                            }
-                        }
-                    }
-                });
-
-                // Add the selected li value.
-                values[$(this).data('name')] = $(this).data('value');
-
-                $.ajax({
-                    url: $form.attr('action'),
-                    type: $form.attr('method'),
-                    data: values,
-                    success: function (html) {
-                        $urlChooser.replaceWith(
-                            $(html).find('#' + $urlChooser.attr('id'))
-                        );
-                    }
-                });
+                const urlChooser = e.target.closest('.urlchooser-wrapper');
+                const urlChooserText = urlChooser.querySelector('.urlchooser__link-type .text');
+                const newValue = e.target.closest('[data-value]').dataset.value;
+                const oldActive = urlChooser.querySelector('[data-show-on]:not(.hidden)');
+                const newActive = urlChooser.querySelector('[data-show-on="' + newValue + '"]');
+                const typeInput = urlChooser.querySelector('input[type="hidden"][data-button-id="'+urlChooser.getAttribute('data-link-type-id')+'"]');
+                typeInput.value = newValue;
+                urlChooserText.innerHTML = e.target.innerHTML;
+                oldActive.classList.add('hidden');
+                newActive.classList.remove('hidden');
             }
         );
     };
@@ -273,5 +238,4 @@ kunstmaanbundles.urlChooser = (function (window, undefined) {
         init: init
     };
 
-})
-(window);
+})(window);

src/Kunstmaan/AdminBundle/Resources/ui/js/app.js

@@ -32,8 +32,7 @@ kunstmaanbundles.app = (function($, window, undefined) {
         kunstmaanbundles.pagepartEditor.init();
 
         kunstmaanbundles.slugChooser.init();
-        // kunstmaanbundles.urlChooser.init();
-        console.log('no url chooser');
+        kunstmaanbundles.urlChooser.init();
         kunstmaanbundles.mediaChooser.init();
         kunstmaanbundles.iconChooser.init();
         kunstmaanbundles.bulkActions.init();

src/Kunstmaan/NodeBundle/Form/DataTransformer/URLChooserToLinkTransformer.php

@@ -10,10 +10,7 @@ class URLChooserToLinkTransformer implements DataTransformerInterface
 {
     use URLValidator;
 
-    /**
-     * @return array
-     */
-    public function transform($value)
+    public function transform($value): array
     {
         $data = [];
         if ($this->isEmailAddress($value)) {
@@ -33,10 +30,7 @@ public function transform($value)
         ]);
     }
 
-    /**
-     * @return string|null
-     */
-    public function reverseTransform($value)
+    public function reverseTransform($value): ?string
     {
         if (!empty($value['link_type'])) {
             switch ($value['link_type']) {

src/Kunstmaan/NodeBundle/Form/Type/InternalURLSelectorType.php

@@ -14,7 +14,7 @@ class InternalURLSelectorType extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
-        $builder->add('input', HiddenType::class,[
+        $builder->add('input', HiddenType::class, [
             'label' => false,
         ]);
         $builder->add('url', TextType::class, [

src/Kunstmaan/NodeBundle/Form/Type/URLChooserType.php

@@ -4,14 +4,9 @@
 
 namespace Kunstmaan\NodeBundle\Form\Type;
 
-use Kunstmaan\NodeBundle\Form\DataTransformer\TestTransformer;
 use Kunstmaan\NodeBundle\Form\DataTransformer\URLChooserToLinkTransformer;
-use Kunstmaan\NodeBundle\Form\EventListener\TestSubscriber;
-use Kunstmaan\NodeBundle\Form\EventListener\URLChooserFormSubscriber;
-use Kunstmaan\NodeBundle\Form\EventListener\URLChooserLinkTypeSubscriber;
 use Kunstmaan\NodeBundle\Validator\Constraint\ValidExternalUrl;
 use Symfony\Component\Form\AbstractType;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\Form\Extension\Core\Type\EmailType;
 use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
@@ -20,7 +15,6 @@
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Validator\Constraints\Callback;
 use Symfony\Component\Validator\Constraints\Email;
-use Symfony\Component\Validator\Constraints\NotBlank;
 use Symfony\Component\Validator\Context\ExecutionContextInterface;
 
 /**
@@ -69,17 +63,16 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 new Callback([$this, 'validateLink']),
             ],
         ]);
-        $builder->add(
-            'link_type',
-            ChoiceType::class,
-            [
-                'required' => true,
-                'choices' => $choices,
-                'translation_domain' => 'messages',
-            ]
-        );
+        $builder->add('link_type', URLTypeType::class, [
+            'required' => true,
+            'choices' => array_flip($choices),
+            'attr' => [
+                'class' => 'urlchooser-type',
+            ],
+        ]);
+
         $builder->add('choice_external', TextType::class, [
-            'attr' => ['placeholder' => 'https://']
+            'attr' => ['placeholder' => 'https://'],
         ]);
         $builder->add('choice_email', EmailType::class);
         $builder->add('choice_internal', InternalURLSelectorType::class);
@@ -115,8 +108,6 @@ public function getBlockPrefix()
 
     public function validateLink($value, ExecutionContextInterface $context): void
     {
-        /** @var FormInterface $form */
-        $form = $context->getRoot();
         $urlChooserTypeForm = $context->getObject()?->getParent();
         if (!$urlChooserTypeForm) {
             return;
@@ -125,12 +116,12 @@ public function validateLink($value, ExecutionContextInterface $context): void
         $type = $urlChooserTypeForm->get('link_type')->getData();
         if ($type === self::EXTERNAL) {
             $context->getValidator()->inContext($context)->validate($this->getFormDataValue($urlChooserTypeForm, 'choice_external'), [new ValidExternalUrl()]);
+
             return;
         }
 
         if ($type === self::EMAIL) {
             $context->getValidator()->inContext($context)->validate($this->getFormDataValue($urlChooserTypeForm, 'choice_email'), [new Email()]);
-            return;
         }
     }
 

src/Kunstmaan/NodeBundle/Form/Type/URLTypeType.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kunstmaan\NodeBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class URLTypeType extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setRequired('choices');
+        $resolver->setDefault('choices', []);
+        $resolver->setAllowedTypes('choices', 'array');
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['choices'] = $options['choices'];
+    }
+
+    public function getParent(): string
+    {
+        return HiddenType::class;
+    }
+}