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..1971224abb 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,26 +71,78 @@ 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) => { - nodesToUpdate = doc.querySelectorAll(`[data-ibexa-update-node][data-ibexa-update-content-id="${event.data.contentId}"]`); + nodesToUpdate = doc.querySelectorAll(`[data-ibexa-update-content-id="${event.data.contentId}"]`); if (nodesToUpdate) { loadContentData(event.data.contentId); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js b/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js index 33b3df84a5..850aa91800 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezobjectrelationlist.js @@ -77,17 +77,21 @@ const { escapeHTML } = ibexa.helpers.text; const itemNodes = relationsContainer.querySelectorAll('.ibexa-relations__item'); const itemNode = itemNodes[itemNodes.length - 1]; - const contentId = item.ContentInfo.Content._id; + const contentId = escapeHTML(item.ContentInfo.Content._id); const locationId = item.id; const languagesCode = item.ContentInfo.Content.CurrentVersion.Version.VersionInfo.VersionTranslationInfo.Language.map( (language) => language.languageCode, ); const itemActionsMenuContainer = relationsContainer.querySelector('.ibexa-embedded-item-actions__menu'); const itemActionsTriggerElement = relationsContainer.querySelector('.ibexa-embedded-item-actions__menu-trigger-btn'); + const itemNodeNameCell = itemNode.querySelector('.ibexa-relations__item-name'); - itemNode.setAttribute('data-content-id', escapeHTML(item.ContentInfo.Content._id)); + itemNode.dataset.contentId = contentId; itemNode.querySelector('.ibexa-relations__table-action--remove-item').addEventListener('click', removeItem, false); + itemNodeNameCell.dataset.ibexaUpdateContentId = contentId; + itemNodeNameCell.dataset.ibexaUpdateSourceDataPath = 'Content.Name'; + doc.body.dispatchEvent( new CustomEvent('ibexa-embedded-item:create-dynamic-menu', { detail: { @@ -164,11 +168,12 @@ const { formatShortDateTime } = ibexa.helpers.timezone; const contentTypeName = ibexa.helpers.contentType.getContentTypeName(item.ContentInfo.Content.ContentTypeInfo.identifier); const contentName = escapeHTML(item.ContentInfo.Content.TranslatedName); - const contentId = item.ContentInfo.Content._id; + const contentId = escapeHTML(item.ContentInfo.Content._id); const { rowTemplate } = relationsWrapper.dataset; return rowTemplate .replace('{{ content_id }}', contentId) + .replace('{{ update_content_id }}', contentId) .replace('{{ content_name }}', contentName) .replace('{{ content_type_name }}', contentTypeName) .replace('{{ published_date }}', formatShortDateTime(item.ContentInfo.Content.publishedDate)) 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..0ade9416a2 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 @@ -94,7 +94,7 @@ {% set body_row_cols_template = body_row_cols_template|merge([ { content: '{{ content_name }}', - attr: { class: 'ibexa-relations__item-name' }, + class: 'ibexa-relations__item-name', }, { content: '{{ content_type_name }}' }, { content: '{{ published_date }}' }, @@ -148,21 +148,23 @@ } %} {% 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: { + '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 +173,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 + ] + }] }) ) }} @@ -229,7 +228,11 @@ {% set body_row_cols = body_row_cols|merge([ { content: ibexa_content_name(relation.contentInfo), - attr: { class: 'ibexa-relations__item-name' }, + attr: { + 'data-ibexa-update-content-id': relation.contentId, + 'data-ibexa-update-source-data-path': 'Content.Name', + }, + class: 'ibexa-relations__item-name', }, { content: relation.contentType.name }, { content: relation.contentInfo.publishedDate|ibexa_short_datetime },