From a9107bbdf6f06bf7846f721d6b6fef9b35054250 Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 17 Oct 2023 11:43:52 +0200 Subject: [PATCH] After CR --- .../js/scripts/core/multilevel.popup.menu.js | 20 +++++++++++++------ .../js/scripts/embedded.item.actions.js | 14 ++++++------- .../ibexa_multilevel_popup_menu.en.xliff | 16 +++++++++++++++ .../multilevel_popup_menu_branch.html.twig | 4 ++-- .../multilevel_popup_menu_item.html.twig | 2 +- 5 files changed, 39 insertions(+), 17 deletions(-) create mode 100644 src/bundle/Resources/translations/ibexa_multilevel_popup_menu.en.xliff 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 index 44ee62f767..12ba1e7537 100644 --- a/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js +++ b/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js @@ -137,6 +137,14 @@ }, false, ); + branchElement.addEventListener( + 'ibexa-multilevel-popup-menu:close-branch', + () => { + this.hoveredBranches.delete(branchElement); + this.updateBranchAndParentBranchesOpenState(branchElement); + }, + false, + ); processBranchAfter(branchElement); branchItems.forEach((itemElement) => processBranchItemAfter(itemElement)); @@ -394,14 +402,14 @@ return; } - const branchsSearchInput = doc.querySelectorAll('.ibexa-multilevel-popup-menu__search-input'); + const branchesSearchInput = doc.querySelectorAll('.ibexa-multilevel-popup-menu__search-input'); - branchsSearchInput.forEach((searchInput) => { + branchesSearchInput.forEach((searchInput) => { if (searchInput.value !== '') { const searchInputBranch = searchInput.closest('.ibexa-multilevel-popup-menu__branch'); searchInput.value = ''; - searchInputBranch.dispatchEvent(new Event('mouseleave')); + searchInputBranch.dispatchEvent(new CustomEvent('ibexa-multilevel-popup-menu:close-branch')); searchInput.dispatchEvent(new Event('input')); } }); @@ -416,9 +424,9 @@ const phraseLowerCase = searchInput.value.toLowerCase(); branchItems.forEach((item) => { - const { label } = item.dataset; - const labelLowerCase = label.toLowerCase(); - const hideItem = !labelLowerCase.includes(phraseLowerCase); + const { searchLabel } = item.dataset; + const searchLabelLowerCase = searchLabel.toLowerCase(); + const hideItem = !searchLabelLowerCase.includes(phraseLowerCase); item.classList.toggle('ibexa-popup-menu__item--hidden', hideItem); }); diff --git a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js index 8fbb9a1195..655962c696 100644 --- a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js +++ b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js @@ -2,7 +2,7 @@ const MIN_ITEMS_NUMBER_TO_SHOW_SEARCH = 10; const MENU_PROPS = { placement: 'bottom-start', - fallbackPlacements: ['bottom-start', 'top-end', 'top-start'], + fallbackPlacements: ['top-end', 'top-start'], }; const token = document.querySelector('meta[name="CSRF-Token"]').content; const siteaccess = document.querySelector('meta[name="SiteAccess"]').content; @@ -201,14 +201,12 @@ } }; const getMenuData = ({ container, event }) => { - const { contentId, locationId, productCode, languageCodes } = container ? container.dataset : event.detail; + const { contentId, locationId, productCode, languageCodes = [] } = container ? container.dataset : event.detail; const parsedLanguageCodes = typeof languageCodes === 'string' ? JSON.parse(languageCodes) : languageCodes; - const languages = parsedLanguageCodes - ? parsedLanguageCodes.map((languageCode) => ({ - languageCode, - name: adminUiLanguages[languageCode].name, - })) - : []; + const languages = parsedLanguageCodes.map((languageCode) => ({ + languageCode, + name: adminUiLanguages[languageCode].name, + })); return { contentId: parseInt(contentId, 10), diff --git a/src/bundle/Resources/translations/ibexa_multilevel_popup_menu.en.xliff b/src/bundle/Resources/translations/ibexa_multilevel_popup_menu.en.xliff new file mode 100644 index 0000000000..f428cffcf6 --- /dev/null +++ b/src/bundle/Resources/translations/ibexa_multilevel_popup_menu.en.xliff @@ -0,0 +1,16 @@ + + + +
+ + The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message. +
+ + + Search... + Search... + key: search.placeholder + + + + diff --git a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig index 7dfaa63291..0580c759a2 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig @@ -8,13 +8,13 @@ }) -%} {%- block branch -%} - {% trans_default_domain 'ibexa_dropdown' %} + {% trans_default_domain 'ibexa_multilevel_popup_menu' %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig index dcf0aa6ebd..2abad5f78b 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig @@ -6,7 +6,7 @@ class: ('ibexa-popup-menu__item ibexa-multilevel-popup-menu__item ' ~ (branch|default(null) ? 'ibexa-popup-menu__item--has-subitems ') ~ item_attr.class|default(''))|trim, - 'data-label': label, + 'data-search-label': label, }) -%} {%- set action_attr = action_attr|default({})|merge({