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 3788debca4..2cf73df17d 100644 --- a/src/bundle/Resources/public/js/scripts/embedded.item.actions.js +++ b/src/bundle/Resources/public/js/scripts/embedded.item.actions.js @@ -7,10 +7,31 @@ }; const token = document.querySelector('meta[name="CSRF-Token"]').content; const siteaccess = document.querySelector('meta[name="SiteAccess"]').content; + const metaLanguageCode = document.querySelector('meta[name="LanguageCode"]')?.content; + const previewLanguageCode = metaLanguageCode ?? ibexa.adminUiConfig.languages.priority[0]; const adminUiLanguages = ibexa.adminUiConfig.languages.mappings; const channel = new BroadcastChannel('ibexa-emded-item-live-update'); const editEmbeddedItemForm = doc.querySelector('[name="embedded_item_edit"]'); const actionsMenuTriggerBtns = doc.querySelectorAll('.ibexa-embedded-item-actions__menu-trigger-btn'); + const updateNode = ({ node, value, isMiddleEllipsis }) => { + if (!isMiddleEllipsis) { + node.innerHTML = value; + + return; + } + + const middleEllipsisNode = node.querySelector('.ibexa-middle-ellipsis'); + const middleEllipsisNameStartNode = node.querySelector( + '.ibexa-middle-ellipsis__name--start .ibexa-middle-ellipsis__name-ellipsized', + ); + const middleEllipsisNameEndNode = node.querySelector('.ibexa-middle-ellipsis__name--end .ibexa-middle-ellipsis__name-ellipsized'); + + middleEllipsisNode.title = value; + middleEllipsisNameStartNode.innerHTML = value; + middleEllipsisNameEndNode.innerHTML = value; + + ibexa.helpers.ellipsis.middle.parse(node); + }; const updateNodes = (contentData) => { const { mainLanguageCode } = contentData.Content; @@ -39,7 +60,13 @@ } if (sourceValue) { - nodeToUpdate.innerHTML = sourceValue; + const { ibexaUpdateMiddleEllipsis } = nodeToUpdate.dataset; + + updateNode({ + node: nodeToUpdate, + value: sourceValue, + isMiddleEllipsis: ibexaUpdateMiddleEllipsis, + }); } }); }; @@ -77,87 +104,89 @@ editEmbeddedItemForm.submit(); }; - const generateMultiLanguagesMenuTreeItems = ({ contentId, locationId, languages }) => { + const generateGoToActionItem = ({ contentId, locationId, productCode }) => { + const href = productCode + ? Routing.generate('ibexa.product_catalog.product.view', { + productCode, + languageCode: previewLanguageCode, + }) + : Routing.generate('ibexa.content.translation.view', { + contentId, + locationId, + languageCode: previewLanguageCode, + }); + return { - groups: [ - { - id: 'default', - items: [ - { - label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'), - branch: { - groups: [ - { - id: 'edit-group', - items: languages.map(({ languageCode, name }) => ({ - label: name, - href: Routing.generate('ibexa.content.translation.view', { - contentId, - locationId, - languageCode, - }), - })), - }, - ], - }, - }, + label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'), + href, + }; + }; + const generateEditActionItem = ({ contentId, locationId, productCode, languages }) => { + if (languages.length > 1) { + return { + label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), + branch: { + groups: [ { - label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), - branch: { - groups: [ - { - id: 'edit-group', - items: languages.map(({ languageCode, name }) => ({ - label: name, - onClick: () => editContent({ contentId, locationId, languageCode }), - })), - }, - ], - }, + id: 'edit-group', + items: languages.map(({ languageCode, name }) => { + const languageEditAction = productCode + ? { + href: Routing.generate('ibexa.product_catalog.product.edit', { + productCode, + languageCode, + }), + } + : { + onClick: () => editContent({ contentId, locationId, languageCode }), + }; + + return { + label: name, + ...languageEditAction, + }; + }), }, ], }, - ], + }; + } + + const editAction = productCode + ? { + href: Routing.generate('ibexa.product_catalog.product.edit', { + productCode, + languageCode: languages.languageCode, + }), + } + : { onClick: () => editContent({ contentId, locationId, languageCode: languages.languageCode }) }; + + return { + label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), + ...editAction, }; }; - const generateSingleLanguageMenuTreeItems = ({ contentId, locationId, language }) => { + const generateMenuTreeItems = ({ contentId, locationId, productCode, languages }) => { + const goToItem = generateGoToActionItem({ contentId, locationId, productCode }); + const editItem = generateEditActionItem({ contentId, locationId, productCode, languages }); + return { groups: [ { id: 'default', - items: [ - { - label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'), - href: Routing.generate('ibexa.content.view', { contentId, locationId }), - }, - { - label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'), - onClick: () => editContent({ contentId, locationId, languageCode: language.languageCode }), - }, - ], + items: [goToItem, editItem], }, ], }; }; - const generateMenuTreeItems = ({ contentId, locationId, languages }) => { - if (languages.length > 1) { - return generateMultiLanguagesMenuTreeItems({ contentId, locationId, languages }); - } - - return generateSingleLanguageMenuTreeItems({ - contentId, - locationId, - language: languages[0], - }); - }; - const getLanguagesData = async ({ contentId, locationId, versionNo, initialFunc = () => {}, callbackFunc = () => {} }) => { + const getLanguagesData = async ({ contentId, locationId, initialFunc = () => {}, callbackFunc = () => {} }) => { try { initialFunc(); const url = window.Routing.generate('ibexa.permission.limitation.language', { contentId, locationId, - versionNo, + versionNo: 0, }); const request = new Request(url, { method: 'GET', @@ -176,7 +205,7 @@ } }; const getMenuData = ({ container, event }) => { - const { contentId, locationId, versionNo, 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) => ({ @@ -188,11 +217,11 @@ return { contentId: parseInt(contentId, 10), locationId: parseInt(locationId, 10), - versionNo: parseInt(versionNo, 10), + productCode, languages, }; }; - const createMenu = async ({ triggerElement, container, contentId, locationId, versionNo, languages, preventAutoClick }) => { + const createMenu = async ({ triggerElement, container, contentId, locationId, productCode, languages }) => { triggerElement.dataset.isMenuAttached = 1; const mainContainer = container.closest('.ibexa-embedded-item-actions'); @@ -202,12 +231,11 @@ ? await getLanguagesData({ contentId, locationId, - versionNo, initialFunc: showLoader.bind(null, { triggerElement, menuLoader }), callbackFunc: hideLoader.bind(null, { menuLoader }), }) : languages; - const menuItems = generateMenuTreeItems({ contentId, locationId, languages: languagesData }); + const menuItems = generateMenuTreeItems({ contentId, locationId, productCode, languages: languagesData }); const menuInstance = new ibexa.core.MultilevelPopupMenu({ container, triggerElement, @@ -219,9 +247,7 @@ ...menuItems, }); - if (!preventAutoClick) { - triggerElement.click(); - } + triggerElement.click(); }; const showLoader = ({ triggerElement, menuLoader }) => { Popper.createPopper(triggerElement, menuLoader, { @@ -271,12 +297,23 @@ const menuData = getMenuData({ event }); const { menuTriggerElement, menuContainer } = event.detail; - createMenu({ - triggerElement: menuTriggerElement, - container: menuContainer, - preventAutoClick: true, - ...menuData, - }); + menuTriggerElement.addEventListener( + 'click', + () => { + const isMenuAttached = !!parseInt(menuTriggerElement.dataset.isMenuAttached, 10); + + if (!isMenuAttached) { + event.preventDefault(); + + createMenu({ + triggerElement: menuTriggerElement, + container: menuContainer, + ...menuData, + }); + } + }, + false, + ); }); channel.addEventListener('message', async (event) => { diff --git a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig index 8d5e25f237..0a18aeab31 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig @@ -28,6 +28,7 @@ 'data-content-id': content_id|default(''), 'data-location-id': location_id|default(''), 'data-version-no': version_no|default(''), + 'data-product-code': product_code|default(''), 'data-language-codes': language_codes|default([])|json_encode, class: attr.class|default('ibexa-embedded-item-actions__menu') },