Skip to content

Commit 60c8e10

Browse files
OstafinLOstafinL
committed
Edit/Preview embedded items
1 parent e319193 commit 60c8e10

File tree

2 files changed

+113
-75
lines changed

2 files changed

+113
-75
lines changed

‎src/bundle/Resources/public/js/scripts/embedded.item.actions.js‎

Lines changed: 112 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,31 @@
77
};
88
const token = document.querySelector('meta[name="CSRF-Token"]').content;
99
const siteaccess = document.querySelector('meta[name="SiteAccess"]').content;
10+
const metaLanguageCode = document.querySelector('meta[name="LanguageCode"]')?.content;
11+
const previewLanguageCode = metaLanguageCode ?? ibexa.adminUiConfig.languages.priority[0];
1012
const adminUiLanguages = ibexa.adminUiConfig.languages.mappings;
1113
const channel = new BroadcastChannel('ibexa-emded-item-live-update');
1214
const editEmbeddedItemForm = doc.querySelector('[name="embedded_item_edit"]');
1315
const actionsMenuTriggerBtns = doc.querySelectorAll('.ibexa-embedded-item-actions__menu-trigger-btn');
16+
const updateNode = ({ node, value, isMiddleEllipsis }) => {
17+
if (!isMiddleEllipsis) {
18+
node.innerHTML = value;
19+
20+
return;
21+
}
22+
23+
const middleEllipsisNode = node.querySelector('.ibexa-middle-ellipsis');
24+
const middleEllipsisNameStartNode = node.querySelector(
25+
'.ibexa-middle-ellipsis__name--start .ibexa-middle-ellipsis__name-ellipsized',
26+
);
27+
const middleEllipsisNameEndNode = node.querySelector('.ibexa-middle-ellipsis__name--end .ibexa-middle-ellipsis__name-ellipsized');
28+
29+
middleEllipsisNode.title = value;
30+
middleEllipsisNameStartNode.innerHTML = value;
31+
middleEllipsisNameEndNode.innerHTML = value;
32+
33+
ibexa.helpers.ellipsis.middle.parse(node);
34+
};
1435
const updateNodes = (contentData) => {
1536
const { mainLanguageCode } = contentData.Content;
1637

@@ -39,7 +60,13 @@
3960
}
4061

4162
if (sourceValue) {
42-
nodeToUpdate.innerHTML = sourceValue;
63+
const { ibexaUpdateMiddleEllipsis } = nodeToUpdate.dataset;
64+
65+
updateNode({
66+
node: nodeToUpdate,
67+
value: sourceValue,
68+
isMiddleEllipsis: ibexaUpdateMiddleEllipsis,
69+
});
4370
}
4471
});
4572
};
@@ -77,87 +104,89 @@
77104

78105
editEmbeddedItemForm.submit();
79106
};
80-
const generateMultiLanguagesMenuTreeItems = ({ contentId, locationId, languages }) => {
107+
const generateGoToActionItem = ({ contentId, locationId, productCode }) => {
108+
const href = productCode
109+
? Routing.generate('ibexa.product_catalog.product.view', {
110+
productCode,
111+
languageCode: previewLanguageCode,
112+
})
113+
: Routing.generate('ibexa.content.translation.view', {
114+
contentId,
115+
locationId,
116+
languageCode: previewLanguageCode,
117+
});
118+
81119
return {
82-
groups: [
83-
{
84-
id: 'default',
85-
items: [
86-
{
87-
label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'),
88-
branch: {
89-
groups: [
90-
{
91-
id: 'edit-group',
92-
items: languages.map(({ languageCode, name }) => ({
93-
label: name,
94-
href: Routing.generate('ibexa.content.translation.view', {
95-
contentId,
96-
locationId,
97-
languageCode,
98-
}),
99-
})),
100-
},
101-
],
102-
},
103-
},
120+
label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'),
121+
href,
122+
};
123+
};
124+
const generateEditActionItem = ({ contentId, locationId, productCode, languages }) => {
125+
if (languages.length > 1) {
126+
return {
127+
label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'),
128+
branch: {
129+
groups: [
104130
{
105-
label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'),
106-
branch: {
107-
groups: [
108-
{
109-
id: 'edit-group',
110-
items: languages.map(({ languageCode, name }) => ({
111-
label: name,
112-
onClick: () => editContent({ contentId, locationId, languageCode }),
113-
})),
114-
},
115-
],
116-
},
131+
id: 'edit-group',
132+
items: languages.map(({ languageCode, name }) => {
133+
const languageEditAction = productCode
134+
? {
135+
href: Routing.generate('ibexa.product_catalog.product.edit', {
136+
productCode,
137+
languageCode,
138+
}),
139+
}
140+
: {
141+
onClick: () => editContent({ contentId, locationId, languageCode }),
142+
};
143+
144+
return {
145+
label: name,
146+
...languageEditAction,
147+
};
148+
}),
117149
},
118150
],
119151
},
120-
],
152+
};
153+
}
154+
155+
const editAction = productCode
156+
? {
157+
href: Routing.generate('ibexa.product_catalog.product.edit', {
158+
productCode,
159+
languageCode: languages.languageCode,
160+
}),
161+
}
162+
: { onClick: () => editContent({ contentId, locationId, languageCode: languages.languageCode }) };
163+
164+
return {
165+
label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'),
166+
...editAction,
121167
};
122168
};
123-
const generateSingleLanguageMenuTreeItems = ({ contentId, locationId, language }) => {
169+
const generateMenuTreeItems = ({ contentId, locationId, productCode, languages }) => {
170+
const goToItem = generateGoToActionItem({ contentId, locationId, productCode });
171+
const editItem = generateEditActionItem({ contentId, locationId, productCode, languages });
172+
124173
return {
125174
groups: [
126175
{
127176
id: 'default',
128-
items: [
129-
{
130-
label: Translator.trans(/*@Desc("Go to content")*/ 'embedded_items.action.go_to_label', {}, 'content'),
131-
href: Routing.generate('ibexa.content.view', { contentId, locationId }),
132-
},
133-
{
134-
label: Translator.trans(/*@Desc("Edit")*/ 'embedded_items.action.edit', {}, 'content'),
135-
onClick: () => editContent({ contentId, locationId, languageCode: language.languageCode }),
136-
},
137-
],
177+
items: [goToItem, editItem],
138178
},
139179
],
140180
};
141181
};
142-
const generateMenuTreeItems = ({ contentId, locationId, languages }) => {
143-
if (languages.length > 1) {
144-
return generateMultiLanguagesMenuTreeItems({ contentId, locationId, languages });
145-
}
146-
147-
return generateSingleLanguageMenuTreeItems({
148-
contentId,
149-
locationId,
150-
language: languages[0],
151-
});
152-
};
153-
const getLanguagesData = async ({ contentId, locationId, versionNo, initialFunc = () => {}, callbackFunc = () => {} }) => {
182+
const getLanguagesData = async ({ contentId, locationId, initialFunc = () => {}, callbackFunc = () => {} }) => {
154183
try {
155184
initialFunc();
156185

157186
const url = window.Routing.generate('ibexa.permission.limitation.language', {
158187
contentId,
159188
locationId,
160-
versionNo,
189+
versionNo: 0,
161190
});
162191
const request = new Request(url, {
163192
method: 'GET',
@@ -176,7 +205,7 @@
176205
}
177206
};
178207
const getMenuData = ({ container, event }) => {
179-
const { contentId, locationId, versionNo, languageCodes } = container ? container.dataset : event.detail;
208+
const { contentId, locationId, productCode, languageCodes } = container ? container.dataset : event.detail;
180209
const parsedLanguageCodes = typeof languageCodes === 'string' ? JSON.parse(languageCodes) : languageCodes;
181210
const languages = parsedLanguageCodes
182211
? parsedLanguageCodes.map((languageCode) => ({
@@ -188,11 +217,11 @@
188217
return {
189218
contentId: parseInt(contentId, 10),
190219
locationId: parseInt(locationId, 10),
191-
versionNo: parseInt(versionNo, 10),
220+
productCode,
192221
languages,
193222
};
194223
};
195-
const createMenu = async ({ triggerElement, container, contentId, locationId, versionNo, languages, preventAutoClick }) => {
224+
const createMenu = async ({ triggerElement, container, contentId, locationId, productCode, languages }) => {
196225
triggerElement.dataset.isMenuAttached = 1;
197226

198227
const mainContainer = container.closest('.ibexa-embedded-item-actions');
@@ -202,12 +231,11 @@
202231
? await getLanguagesData({
203232
contentId,
204233
locationId,
205-
versionNo,
206234
initialFunc: showLoader.bind(null, { triggerElement, menuLoader }),
207235
callbackFunc: hideLoader.bind(null, { menuLoader }),
208236
})
209237
: languages;
210-
const menuItems = generateMenuTreeItems({ contentId, locationId, languages: languagesData });
238+
const menuItems = generateMenuTreeItems({ contentId, locationId, productCode, languages: languagesData });
211239
const menuInstance = new ibexa.core.MultilevelPopupMenu({
212240
container,
213241
triggerElement,
@@ -219,9 +247,7 @@
219247
...menuItems,
220248
});
221249

222-
if (!preventAutoClick) {
223-
triggerElement.click();
224-
}
250+
triggerElement.click();
225251
};
226252
const showLoader = ({ triggerElement, menuLoader }) => {
227253
Popper.createPopper(triggerElement, menuLoader, {
@@ -271,12 +297,23 @@
271297
const menuData = getMenuData({ event });
272298
const { menuTriggerElement, menuContainer } = event.detail;
273299

274-
createMenu({
275-
triggerElement: menuTriggerElement,
276-
container: menuContainer,
277-
preventAutoClick: true,
278-
...menuData,
279-
});
300+
menuTriggerElement.addEventListener(
301+
'click',
302+
() => {
303+
const isMenuAttached = !!parseInt(menuTriggerElement.dataset.isMenuAttached, 10);
304+
305+
if (!isMenuAttached) {
306+
event.preventDefault();
307+
308+
createMenu({
309+
triggerElement: menuTriggerElement,
310+
container: menuContainer,
311+
...menuData,
312+
});
313+
}
314+
},
315+
false,
316+
);
280317
});
281318

282319
channel.addEventListener('message', async (event) => {

‎src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
'data-content-id': content_id|default(''),
2929
'data-location-id': location_id|default(''),
3030
'data-version-no': version_no|default(''),
31+
'data-product-code': product_code|default(''),
3132
'data-language-codes': language_codes|default([])|json_encode,
3233
class: attr.class|default('ibexa-embedded-item-actions__menu')
3334
},

0 commit comments

Comments
 (0)