IBX-3523: Introduced tabs to left sidebar in Content Edit interface

src/bundle/DependencyInjection/Configuration/Parser/AdminUiForms.php

@@ -28,6 +28,7 @@
 class AdminUiForms extends AbstractParser
 {
     public const FORM_TEMPLATES_PARAM = 'admin_ui_forms.content_edit_form_templates';
+    public const FIELD_TYPES_PARAM = 'admin_ui_forms.content_edit.fieldtypes';
 
     /**
      * Adds semantic configuration definition.
@@ -39,13 +40,47 @@ public function addSemanticConfig(NodeBuilder $nodeBuilder)
         $nodeBuilder
             ->arrayNode('admin_ui_forms')
                 ->info('Admin UI forms configuration settings')
+                ->beforeNormalization()
+                    ->always(static function (array $array): array {
+                        // handle deprecated config
+                        if (isset($array['content_edit_form_templates'])) {
+                            $array['content_edit']['form_templates'] = $array['content_edit_form_templates'];
+                            unset($array['content_edit_form_templates']);
+                        }
+
+                        return $array;
+                    })
+                ->end()
                 ->children()
-                    ->arrayNode('content_edit_form_templates')
-                        ->info('A list of Content Edit (and create) default Twig form templates')
-                        ->arrayPrototype()
-                            ->children()
-                                ->scalarNode('template')->end()
-                                ->integerNode('priority')->end()
+                    ->arrayNode('content_edit')
+                        ->info('Content Edit form configuration')
+                        ->children()
+                            ->arrayNode('form_templates')
+                                ->info('A list of Content Edit (and create) default Twig form templates')
+                                ->setDeprecated(
+                                    'ibexa/admin-ui',
+                                    '4.2.0',
+                                    'Setting "admin_ui.content_edit_form_templates" is deprecated. Use "admin_ui.content_edit.form_templates" instead.'
+                                )
+                                ->arrayPrototype()
+                                    ->children()
+                                        ->scalarNode('template')->end()
+                                        ->integerNode('priority')->end()
+                                    ->end()
+                                ->end()
+                            ->end()
+                            ->arrayNode('fieldtypes')
+                                ->info('Configuration for specific FieldTypes')
+                                ->useAttributeAsKey('identifier')
+                                ->arrayPrototype()
+                                    ->children()
+                                        ->scalarNode('identifier')->end()
+                                        ->booleanNode('meta')
+                                            ->info('Make this fieldtype a part of Meta group')
+                                            ->defaultFalse()
+                                        ->end()
+                                    ->end()
+                                ->end()
                             ->end()
                         ->end()
                     ->end()
@@ -61,18 +96,28 @@ public function mapConfig(
         $currentScope,
         ContextualizerInterface $contextualizer
     ): void {
-        if (!empty($scopeSettings['admin_ui_forms']['content_edit_form_templates'])) {
+        if (!empty($scopeSettings['admin_ui_forms']['content_edit']['form_templates'])) {
             $scopeSettings['admin_ui_forms.content_edit_form_templates'] = $this->processContentEditFormTemplates(
-                $scopeSettings['admin_ui_forms']['content_edit_form_templates']
+                $scopeSettings['admin_ui_forms']['content_edit']['form_templates']
             );
-            unset($scopeSettings['admin_ui_forms']['content_edit_form_templates']);
+            unset($scopeSettings['admin_ui_forms']['content_edit']['form_templates']);
+        }
+
+        if (!empty($scopeSettings['admin_ui_forms']['content_edit']['fieldtypes'])) {
+            $scopeSettings['admin_ui_forms.content_edit.fieldtypes'] = $scopeSettings['admin_ui_forms']['content_edit']['fieldtypes'];
+            unset($scopeSettings['admin_ui_forms']['content_edit']['fieldtypes']);
         }
 
         $contextualizer->setContextualParameter(
             static::FORM_TEMPLATES_PARAM,
             $currentScope,
             $scopeSettings['admin_ui_forms.content_edit_form_templates'] ?? []
         );
+        $contextualizer->setContextualParameter(
+            static::FIELD_TYPES_PARAM,
+            $currentScope,
+            $scopeSettings['admin_ui_forms.content_edit.fieldtypes'] ?? []
+        );
     }
 
     /**
@@ -81,6 +126,7 @@ public function mapConfig(
     public function postMap(array $config, ContextualizerInterface $contextualizer)
     {
         $contextualizer->mapConfigArray('admin_ui_forms.content_edit_form_templates', $config);
+        $contextualizer->mapConfigArray('admin_ui_forms.content_edit.fieldtypes', $config);
     }
 
     /**

src/bundle/Resources/config/admin_ui_forms.yaml

@@ -1,8 +1,9 @@
 system:
     admin_group:
         admin_ui_forms:
-            content_edit_form_templates:
-                - { template: '@ibexadesign/content/form_fields.html.twig', priority: 0 }
+            content_edit:
+                form_templates:
+                    - { template: '@ibexadesign/content/form_fields.html.twig', priority: 0 }
 
         field_templates:
             - { template: '@ibexadesign/ui/field_type/preview/content_fields.html.twig', priority: 20 }

src/bundle/Resources/config/services/components/content/edit.yaml

@@ -7,3 +7,7 @@ services:
     Ibexa\AdminUi\Component\Content\PreviewUnavailableTwigComponent:
         tags:
             - { name: ibexa.admin_ui.component, group: 'content-edit-form-before' }
+
+    Ibexa\AdminUi\Component\Content\ContentEditMetaFieldsComponent:
+        tags:
+            - { name: ibexa.admin_ui.component, group: 'content-edit-sections' }

src/bundle/Resources/config/services/events.yaml

@@ -27,7 +27,7 @@ services:
         arguments:
             - '%ibexa.site_access.groups%'
         tags:
-            - {name: kernel.event_subscriber}
+            - { name: kernel.event_subscriber }
 
     Ibexa\AdminUi\EventListener\AdminExceptionListener:
         arguments:
@@ -41,7 +41,7 @@ services:
 
     Ibexa\AdminUi\EventListener\MenuPermissionsListener:
         tags:
-            - {name: kernel.event_subscriber, priority: -250}
+            - { name: kernel.event_subscriber, priority: -250 }
 
     Ibexa\AdminUi\EventListener\ViewTemplatesListener:
         tags:
@@ -51,4 +51,10 @@ services:
         arguments:
             $siteAccessGroups: '%ibexa.site_access.groups%'
         tags:
-            - {name: kernel.event_subscriber}
+            - { name: kernel.event_subscriber }
+
+    Ibexa\AdminUi\EventListener\SetViewParametersListener:
+        arguments:
+            $groupedContentFormFieldsProvider: '@Ibexa\AdminUi\Form\Provider\GroupedNonMetaFormFieldsProvider'
+        tags:
+            - { name: kernel.event_subscriber }

src/bundle/Resources/config/services/forms.yaml

@@ -401,3 +401,7 @@ services:
     Ibexa\AdminUi\Form\Type\ContentType\FieldDefinitionsCollectionType:
         tags:
             - { name: form.type }
+
+    Ibexa\AdminUi\Form\Provider\GroupedNonMetaFormFieldsProvider:
+        arguments:
+            $innerGroupedContentFormFieldsProvider: '@Ibexa\Contracts\ContentForms\Content\Form\Provider\GroupedContentFormFieldsProviderInterface'

src/bundle/Resources/config/services/menu.yaml

@@ -45,6 +45,11 @@ services:
         tags:
             - { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.content_edit.sidebar_right }
 
+    Ibexa\AdminUi\Menu\ContentEditAnchorMenuBuilder:
+        public: true
+        tags:
+            - { name: knp_menu.menu_builder, method: build, alias: ibexa.admin_ui.menu.content_edit.anchor_menu }
+
     Ibexa\AdminUi\Menu\ContentCreateRightSidebarBuilder:
         public: true
         tags:

src/bundle/Resources/encore/ibexa.js.config.js

@@ -55,6 +55,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/autogenerate.identifier.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.back.to.top.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.middle.ellipsis.js'),
+    path.resolve(__dirname, '../public/js/scripts/admin.anchor.sections.navigation'),
 ];
 const fieldTypes = [];
 

src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js

@@ -1,4 +1,8 @@
 (function (global, doc) {
+    if (doc.querySelector('.ibexa-navigation-menu')) {
+        return;
+    }
+
     const EDIT_CONTENT_TOP_PADDING = 42;
     const formContainerNode = doc.querySelector('.ibexa-edit-content');
     const allSections = [...doc.querySelectorAll('.ibexa-anchor-navigation-sections__section')];

src/bundle/Resources/public/js/scripts/admin.anchor.sections.navigation.js

@@ -0,0 +1,156 @@
+(function (global, doc) {
+    if (!doc.querySelector('.ibexa-navigation-menu')) {
+        return;
+    }
+
+    const SECTION_ADJUST_MARGIN_TOP = 20;
+    const formContainerNode = doc.querySelector('.ibexa-edit-content');
+    const getSecondarySectionActiveItems = () => {
+        const secondarySectionItems = formContainerNode.querySelectorAll(
+            '.ibexa-edit-content__primary-section--active .ibexa-edit-content__secondary-section',
+        );
+
+        return [...secondarySectionItems];
+    };
+    let currentlyVisibleSections = getSecondarySectionActiveItems();
+    const fitSecondarySections = () => {
+        const primarySection = doc.querySelector('.ibexa-edit-content__primary-section--active');
+        const contentColumn = doc.querySelector('.ibexa-main-container__content-column');
+        const firstSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:first-child');
+        const lastSection = primarySection.querySelector('.ibexa-edit-content__secondary-section:last-child');
+        const contentContainer = contentColumn.querySelector('.ibexa-edit-content__container');
+
+        contentContainer.style.paddingBottom = '0px';
+
+        if (!firstSection.isSameNode(lastSection) && lastSection && lastSection.offsetHeight) {
+            const headerContainer = doc.querySelector('.ibexa-edit-header .ibexa-edit-header__container');
+            const heightFromLastSection = contentContainer.offsetHeight - lastSection.offsetTop;
+            const contentColumnBodyHeight = contentColumn.offsetHeight - headerContainer.offsetHeight;
+            const heightDiff = contentColumnBodyHeight - heightFromLastSection;
+
+            if (heightDiff > 0) {
+                contentContainer.style.paddingBottom = `${heightDiff}px`;
+            }
+        }
+    };
+    const navigateTo = (targetId) => {
+        const secondarySectionNode = formContainerNode.querySelector(`.ibexa-edit-content__secondary-section[data-id="${targetId}"]`);
+
+        formContainerNode.scrollTo({
+            top: secondarySectionNode.offsetTop,
+            behavior: 'smooth',
+        });
+    };
+    const setActiveSecondaryMenu = (node) => {
+        const secondaryMenuItems = doc.querySelectorAll(
+            '.ibexa-navigation-menu__secondary--active .ibexa-navigation-menu__secondary-item-btn',
+        );
+
+        secondaryMenuItems.forEach((item) => {
+            item.classList.toggle('ibexa-navigation-menu__secondary-item-btn--active', item.isSameNode(node));
+        });
+    };
+    const showPrimarySection = (id) => {
+        const primarySectionItems = formContainerNode.querySelectorAll('.ibexa-edit-content__primary-section');
+
+        primarySectionItems.forEach((item) => {
+            item.classList.toggle('ibexa-edit-content__primary-section--active', item.dataset.id === id);
+        });
+
+        currentlyVisibleSections = getSecondarySectionActiveItems();
+
+        fitSecondarySections();
+    };
+    const showSecondaryMenu = (node) => {
+        const items = doc.querySelectorAll('.ibexa-navigation-menu__secondary');
+
+        items.forEach((item) => item.classList.toggle('ibexa-navigation-menu__secondary--active', item.isSameNode(node)));
+    };
+    const onSelectPrimaryMenuList = (event) => {
+        const { targetId } = event.target.dataset;
+        const secondaryMenuNode = doc.querySelector(`.ibexa-navigation-menu__secondary[data-id="${targetId}"]`);
+        const primaryMenuItems = doc.querySelectorAll('.ibexa-navigation-menu__primary--list .ibexa-navigation-menu__primary-item');
+
+        primaryMenuItems.forEach((item) => {
+            item.classList.toggle('ibexa-navigation-menu__primary-item--active', item.isSameNode(event.target));
+        });
+        showPrimarySection(targetId);
+
+        if (secondaryMenuNode) {
+            showSecondaryMenu(secondaryMenuNode);
+        }
+    };
+    const onSelectPrimaryMenuDropdown = (event) => {
+        const targetId = event.target.value;
+        const secondaryMenuNode = doc.querySelector(`.ibexa-navigation-menu__secondary[data-id="${targetId}"]`);
+
+        showPrimarySection(targetId);
+
+        if (secondaryMenuNode) {
+            showSecondaryMenu(secondaryMenuNode);
+        }
+    };
+    const onSelectSecondaryMenu = (event) => {
+        const { targetId } = event.currentTarget.dataset;
+
+        navigateTo(targetId);
+    };
+    const bindPrimaryMenuListEvents = () => {
+        const items = doc.querySelectorAll('.ibexa-navigation-menu__primary--list .ibexa-navigation-menu__primary-item');
+
+        items.forEach((item) => item.addEventListener('click', onSelectPrimaryMenuList, false));
+    };
+    const bindPrimaryMenuDropdownEvents = () => {
+        const sourceSelect = doc.querySelector('.ibexa-navigation-menu__primary--dropdown .ibexa-dropdown__source .ibexa-input');
+
+        if (!sourceSelect) {
+            return;
+        }
+
+        sourceSelect.addEventListener('change', onSelectPrimaryMenuDropdown, false);
+    };
+    const bindSecondaryMenuEvents = () => {
+        const items = doc.querySelectorAll('.ibexa-navigation-menu .ibexa-navigation-menu__secondary-item-btn');
+
+        items.forEach((item) => item.addEventListener('click', onSelectSecondaryMenu, false));
+    };
+    const bindScrollContainerEvents = () => {
+        const allSections = [...doc.querySelectorAll('.ibexa-edit-content__secondary-section')];
+        const headerContainer = doc.querySelector('.ibexa-edit-header .ibexa-edit-header__container');
+        let previousFirstVisibleSection = null;
+
+        if (formContainerNode && allSections.length) {
+            formContainerNode.addEventListener('scroll', () => {
+                let firstVisibleSection = currentlyVisibleSections.find((section) => {
+                    const { top, height } = section.getBoundingClientRect();
+
+                    return top + height >= headerContainer.offsetHeight + SECTION_ADJUST_MARGIN_TOP;
+                });
+
+                if (!firstVisibleSection) {
+                    firstVisibleSection = currentlyVisibleSections.at(-1);
+                }
+
+                if (previousFirstVisibleSection === firstVisibleSection) {
+                    return;
+                }
+
+                previousFirstVisibleSection = firstVisibleSection;
+
+                const targetId = firstVisibleSection.dataset.id;
+
+                const secondaryMenuNode = doc.querySelector(
+                    `.ibexa-navigation-menu__secondary--active .ibexa-navigation-menu__secondary-item-btn[data-target-id="${targetId}"]`,
+                );
+
+                setActiveSecondaryMenu(secondaryMenuNode);
+            });
+        }
+    };
+
+    bindPrimaryMenuListEvents();
+    bindPrimaryMenuDropdownEvents();
+    bindSecondaryMenuEvents();
+    bindScrollContainerEvents();
+    fitSecondarySections();
+})(window, window.document);

src/bundle/Resources/public/js/scripts/admin.content.edit.js

@@ -130,22 +130,6 @@
     const isAutosaveEnabled = () => {
         return ibexa.adminUiConfig.autosave.enabled && form.querySelector('[name="ezplatform_content_forms_content_edit[autosave]"]');
     };
-    const fitSections = () => {
-        const lastSection = doc.querySelector('.ibexa-anchor-navigation-sections .ibexa-anchor-navigation-sections__section:last-child');
-
-        if (lastSection && lastSection.offsetHeight) {
-            const contentColumn = doc.querySelector('.ibexa-main-container__content-column');
-            const contentContainer = contentColumn.querySelector('.ibexa-edit-content__container');
-            const headerContainer = doc.querySelector('.ibexa-edit-header .ibexa-edit-header__container');
-            const heightFromLastSection = contentContainer.offsetHeight - lastSection.offsetTop;
-            const contentColumnBodyHeight = contentColumn.offsetHeight - headerContainer.offsetHeight;
-            const heightDiff = contentColumnBodyHeight - heightFromLastSection;
-
-            if (heightDiff > 0) {
-                contentContainer.style.paddingBottom = `${heightDiff}px`;
-            }
-        }
-    };
 
     if (isAutosaveEnabled()) {
         const AUTOSAVE_SUBMIT_BUTTON_NAME = 'ezplatform_content_forms_content_edit[autosave]';
@@ -232,8 +216,6 @@
         btn.addEventListener('click', clickHandler, false);
     });
 
-    fitSections();
-
     menuButtonsToValidate.forEach((btn) => {
         btn.addEventListener('click', validateHandler, false);
     });

src/bundle/Resources/public/scss/_content-edit.scss

@@ -8,4 +8,12 @@
             max-width: calculateRem(1600px);
         }
     }
+
+    &__primary-section {
+        display: none;
+
+        &--active {
+            display: block;
+        }
+    }
 }