From 1f34c0a514a6387bdd49335efe076ce068b3ed0e Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Tue, 22 Aug 2023 15:47:01 +0200 Subject: [PATCH] Edit embede items --- .../js/scripts/embedded.item.actions.js | 140 +++++++----------- .../field_type/edit/relation_base.html.twig | 46 +++--- 2 files changed, 80 insertions(+), 106 deletions(-) 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 10e1ec9164..b457fac957 100644 --- a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js +++ b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js @@ -7,73 +7,6 @@ const channel = new BroadcastChannel('ibexa-emded-item-live-update'); const editEmbeddedItemForm = doc.querySelector('[name="embedded_item_edit"]'); const staticEmbeddedItemActionsContainer = doc.querySelectorAll('.ibexa-embedded-item-actions'); - const createMenuInstance = ({ container, triggerElement }) => { - const multilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({ - container, - triggerElement, - processItemOnInitAfter: processMenuNewItemElement, - }); - - multilevelPopupMenu.init(); - - return multilevelPopupMenu; - }; - const createMenuItems = ({ menuInstance, contentId, locationId, languagesCode }) => { - const mainBranch = menuInstance.generateBranch({ - triggerElement: menuInstance.triggerElement, - placement: 'bottom-end', - fallbackPlacements: ['bottom-start', 'top-end', 'top-start'], - }); - menuInstance.generateItem({ - label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'), - href: Routing.generate('ibexa.content.view', { contentId, locationId }), - branchElement: mainBranch, - }); - - if (languagesCode.length === 1) { - menuInstance.generateItem( - { - label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), - branchElement: mainBranch, - custom: { - contentId, - locationId, - languageCode: languagesCode[0], - }, - }, - processMenuNewItemElement, - ); - - return; - } - - const editMenuItem = menuInstance.generateItem({ - label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), - branchElement: mainBranch, - }); - const editMenuBranch = menuInstance.generateBranch({ - triggerElement: editMenuItem, - placement: 'left-end', - fallbackPlacements: ['bottom-start', 'top-end', 'top-start'], - }); - - languagesCode.forEach((languageCode) => { - const label = `${availableLanguages[languageCode].name} (${languageCode})`; - - menuInstance.generateItem( - { - label, - branchElement: editMenuBranch, - custom: { - contentId, - locationId, - languageCode, - }, - }, - processMenuNewItemElement, - ); - }); - }; const updateNodes = (contentData) => { const { mainLanguageCode } = contentData.Content; @@ -123,18 +56,7 @@ .then(updateNodes) .catch((error) => console.log(error)); }; - const processMenuNewItemElement = (newItemElement, data) => { - const { contentId, locationId, languageCode } = data.custom; - const actionBtn = newItemElement.querySelector('.ibexa-multilevel-popup-menu__item-content'); - - actionBtn.dataset.contentId = contentId; - actionBtn.dataset.locationId = locationId; - actionBtn.dataset.languageCode = languageCode; - actionBtn.addEventListener('click', editContent, false); - }; - const editContent = ({ currentTarget }) => { - const { contentId, locationId, languageCode } = currentTarget.dataset; - + const editContent = ({ contentId, locationId, languageCode }) => { if (!contentId || !locationId || !languageCode) { return; } @@ -149,22 +71,74 @@ editEmbeddedItemForm.submit(); }; + const processStaticMenuNewItemElement = (newItemElement) => { + const { contentId, locationId, languageCode } = newItemElement.dataset; + + newItemElement.addEventListener('click', () => editContent({ contentId, locationId, languageCode }), false); + }; + const generateMenuTree = ({ menuInstance, contentId, locationId, languagesCode }) => { + const goToItem = { + label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'), + href: Routing.generate('ibexa.content.view', { contentId, locationId }), + }; + const editItem = + languagesCode.length === 1 + ? { + label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), + onClick: () => editContent({ contentId, locationId, languageCode: languagesCode[0] }), + } + : { + label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), + branch: { + groups: [ + { + id: 'edit-group', + items: languagesCode.map((languageCode) => ({ + label: availableLanguages[languageCode].name, + onClick: () => editContent({ contentId, locationId, languageCode }), + })), + }, + ], + }, + }; + + return { + triggerElement: menuInstance.triggerElement, + placement: 'bottom-end', + fallbackPlacements: ['bottom-start', 'top-end', 'top-start'], + groups: [ + { + id: 'default', + items: [goToItem, editItem], + }, + ], + }; + }; staticEmbeddedItemActionsContainer.forEach((embeddedItemActionsContainer) => { const actionsMenuTrigger = embeddedItemActionsContainer.querySelector('.ibexa-embedded-item-actions__menu-trigger-btn'); const actionsMenuContainer = embeddedItemActionsContainer.querySelector('.ibexa-embedded-item-actions__menu'); - - createMenuInstance({ + const staticMultilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({ container: actionsMenuContainer, triggerElement: actionsMenuTrigger, + processItemOnInitAfter: processStaticMenuNewItemElement, }); + + staticMultilevelPopupMenu.init(); }); doc.body.addEventListener('ibexa-embedded-item:create-dynamic-menu', (event) => { const { contentId, locationId, languagesCode, multilevelPopupMenuConfig } = event.detail; - const menuInstance = createMenuInstance(multilevelPopupMenuConfig); + const multilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({ + container: multilevelPopupMenuConfig.container, + triggerElement: multilevelPopupMenuConfig.triggerElement, + }); + + multilevelPopupMenu.init(); + + const menuTree = generateMenuTree({ menuInstance: multilevelPopupMenu, contentId, locationId, languagesCode }); - createMenuItems({ menuInstance, contentId, locationId, languagesCode }); + multilevelPopupMenu.generateMenu(menuTree); }); channel.addEventListener('message', (event) => { diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig index fe44b086e7..bb893d1b25 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig @@ -148,21 +148,24 @@ } %} {% set editItme = { label: 'ezobjectrelationlist.embede_item.go_to_conent'|trans|desc('Edit'), - item_attr: { - class: 'ibexa-embedded-item-edit-action' - } } %} - {% if relation.languageCodes|length > 1 %} + {% if relation.languageCodes|length == 1 %} + {% set editItme = editItme|merge({ + item_attr: { + 'x': 'x', + 'data-content-id': relation.contentId, + 'data-location-id': relation.contentInfo.mainLocationId, + 'data-language-code': relation.languageCodes|first + } + }) %} + {% else %} {% set editSubItems = [] %} {% for languageCode in relation.languageCodes %} {% set editSubItems = editSubItems|merge([{ label: languageCode, item_attr: { - class: 'ibexa-embedded-item-edit-action' - }, - action_attr: { 'data-content-id': relation.contentId, 'data-location-id': relation.contentInfo.mainLocationId, 'data-language-code': languageCode @@ -171,27 +174,24 @@ {% endfor %} {% set editItme = editItme|merge({ - subitems: editSubItems - }) %} - {% else %} - {% set editItme = editItme|merge({ - item_attr: { - class: 'ibexa-embedded-item-edit-action' - }, - action_attr: { - 'data-content-id': relation.contentId, - 'data-location-id': relation.contentInfo.mainLocationId, - 'data-language-code': relation.languageCodes|first - } + branch: { + groups: [{ + id: 'edit-subitems', + items: editSubItems + }] + } }) %} {% endif %} {{ include('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig', embedded_item_menu_attrs|merge({ - items: [ - goToItem, - editItme - ] + groups: [{ + id: 'default', + items: [ + goToItem, + editItme + ] + }] }) ) }}