Skip to content

Commit

Permalink
Edit embede items
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasOsti
lucasOsti committed Aug 22, 2023
1 parent e5e6027 commit 1f34c0a
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 106 deletions.
140 changes: 57 additions & 83 deletions src/bundle/Resources/public/js/scripts/embedded.item.actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;
}
Expand All @@ -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) => {
Expand Down
46 changes: 23 additions & 23 deletions src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
]
}]
})
) }}
</div>
Expand Down

0 comments on commit 1f34c0a

Please sign in to comment.