extend multilevel popup menu

ibexa · Sep 2, 2024 · 9b0af4e · 9b0af4e
1 parent f173948
commit 9b0af4e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 16 deletions.
diff --git a/src/bundle/Resources/public/img/ibexa-icons.svg b/src/bundle/Resources/public/img/ibexa-icons.svg
diff --git a/src/bundle/Resources/public/img/icons/circle-minus.svg b/src/bundle/Resources/public/img/icons/circle-minus.svg
diff --git a/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js b/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js
@@ -101,6 +101,9 @@
             if (isTopBranch) {
                 triggerElement.addEventListener('click', this.handleItemWithSubitemsClick, false);
 
+                processBranchAfter(branchElement);
+                branchItems.forEach((itemElement) => processBranchItemAfter(itemElement));
+
                 return;
             }
 

diff --git a/...ces/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig b/...ces/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig
@@ -1,5 +1,9 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set branch_template_path = branch_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig') -%}
+{%- set group_template_path = group_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig') -%}
+{%- set item_template_path = item_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set branch_template_params = branch_template_params|default({})|merge({
@@ -26,28 +30,28 @@
         ~ attr.class|default(''))|trim,
     'data-branch-template': items_container_attr['data-branch-template']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig',
+            branch_template_path,
             branch_template_params,
             with_context = false
         )
     ),
     'data-group-template': items_container_attr['data-group-template']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig',
+            group_template_path,
             group_template_params,
             with_context = false
         )
     ),
     'data-item-template-btn': items_container_attr['data-item-template-btn']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig',
+            item_template_path,
             item_template_params,
             with_context = false
         )
     ),
     'data-item-template-link': items_container_attr['data-item-template-link']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig',
+            item_template_path,
             item_template_params|merge({ is_button: false }),
             with_context = false
         )
@@ -58,7 +62,7 @@
     <div {{ html.attributes(attr, is_template) }}>
         {%- block branch -%}
             {%- if groups is defined and groups is not null -%}
-                {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig' with {
+                {%- include branch_template_path with {
                     groups,
                 } -%}
             {%- endif -%}

diff --git a/...ws/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig b/...ws/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig
@@ -1,5 +1,7 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set group_template_path = group_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set branch_attr = branch_attr|default({})|merge({
@@ -17,11 +19,17 @@
 
     <div {{ html.attributes(branch_attr, is_template) }}>
         <div class="ibexa-multilevel-popup-menu__search {{ not hasSearch|default(false) ? 'ibexa-multilevel-popup-menu__search--hidden' }}">
-            <input
-                type="text"
-                placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
-                class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input"
-            />
+            {% block search %}
+                {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
+                    {% block content %}
+                        <input
+                            type="text"
+                            placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
+                            class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input"
+                        />
+                    {% endblock %}
+                {%- endembed -%}
+            {% endblock %}
         </div>
 
         {%- block branch_groups -%}
@@ -32,10 +40,12 @@
                         group_attr: group.group_attr|default({}),
                     }) -%}
 
-                    {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig'
-                        with group_params -%}
+                    {%- include group_template_path with group_params -%}
                 {%- endfor -%}
             </div>
         {%- endblock -%}
+
+        {% block footer %}
+        {% endblock %}
     </div>
 {%- endblock -%}
diff --git a/...ews/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig b/...ews/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig
@@ -1,5 +1,7 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set item_template_path = item_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set group_attr = group_attr|default({})|merge({
@@ -20,8 +22,7 @@
                     action_attr: item.action_attr|default({}),
                 }) -%}
 
-                {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig'
-                    with item_params -%}
+                {%- include item_template_path with item_params -%}
             {%- endfor -%}
         {%- endblock %}
     </div>

diff --git a/...iews/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig b/...iews/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig
@@ -1,5 +1,7 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set branch_template_path = branch_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set item_attr = item_attr|default({})|merge({
@@ -62,8 +64,7 @@
                         branch_attr: subitems.branch_attr|default({}),
                     }) -%}
 
-                    {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig'
-                        with branch_params -%}
+                    {%- include branch_template_path with branch_params -%}
                 {%- endif -%}
             {%- endblock -%}
         {%- endblock -%}