Skip to content

Commit cc95a4e

Browse files
OstafinLOstafinL
committed
IBX-10416: Wrong styling in sub-items edit translation selector
1 parent f6de641 commit cc95a4e

26 files changed

+654
-328
lines changed

‎src/bundle/Resources/public/js/scripts/admin.location.view.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
const locationId = location._id;
1414
const languageCode = content.mainLanguageCode;
1515
const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
16-
const submitVersionEditForm = () => {
16+
const updateForm = () => {
1717
doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
1818
doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
19-
doc.querySelector('#form_subitems_content_edit_create').click();
2019
};
2120
const addDraft = () => {
22-
submitVersionEditForm();
21+
updateForm();
22+
doc.querySelector('#form_subitems_content_edit_create').click();
2323
bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
2424
};
2525
const attachModalListeners = (wrapper) => {
@@ -37,6 +37,9 @@
3737
if (conflictModal) {
3838
bootstrap.Modal.getOrCreateInstance(conflictModal).show();
3939
conflictModal.addEventListener('shown.bs.modal', () => ibexa.helpers.tooltips.parse());
40+
conflictModal.addEventListener('hide.bs.modal', () => {
41+
doc.body.dispatchEvent(new CustomEvent('ibexa:edit-content-reset-language-selector'));
42+
});
4043
}
4144
};
4245
const showModal = (modalHtml) => {
@@ -71,7 +74,7 @@
7174
if (response.status === 409) {
7275
response.text().then(showModal);
7376
} else if (response.status === 200) {
74-
submitVersionEditForm();
77+
updateForm();
7578
}
7679
})
7780
.catch(ibexa.helpers.notification.showErrorNotification);
@@ -194,6 +197,14 @@
194197
);
195198
});
196199

200+
doc.body.addEventListener(
201+
'ibexa-sub-items:submit-version-edit-form',
202+
() => {
203+
doc.querySelector('#form_subitems_content_edit_create').click();
204+
},
205+
false,
206+
);
207+
197208
if (publishedContentId) {
198209
emdedItemsUpdateChannel.postMessage({ contentId: publishedContentId });
199210
}

‎src/bundle/Resources/public/js/scripts/button.content.edit.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const editVersion = (event) => {
55
const versionEditForm = doc.querySelector(FORM_EDIT);
66
const versionEditFormName = versionEditForm.name;
7-
const { contentId, versionNo, languageCode } = event.currentTarget.dataset;
7+
const { contentId, versionNo, languageCode, withConfirm } = event.currentTarget.dataset;
88
const contentInfoInput = versionEditForm.querySelector(`input[name="${versionEditFormName}[content_info]"]`);
99
const versionInfoContentInfoInput = versionEditForm.querySelector(
1010
`input[name="${versionEditFormName}[version_info][content_info]"]`,
@@ -34,6 +34,7 @@
3434

3535
wrapper.innerHTML = modalHtml;
3636

37+
const conflictModal = doc.querySelector('#version-draft-conflict-modal');
3738
const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft');
3839

3940
if (addDraftButton) {
@@ -43,7 +44,11 @@
4344
wrapper
4445
.querySelectorAll('.ibexa-btn--prevented')
4546
.forEach((btn) => btn.addEventListener('click', (wrapperBtnEvent) => wrapperBtnEvent.preventDefault(), false));
46-
bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).show();
47+
48+
bootstrap.Modal.getOrCreateInstance(conflictModal).show();
49+
conflictModal.addEventListener('hide.bs.modal', () => {
50+
doc.body.dispatchEvent(new CustomEvent('ibexa:edit-content-reset-language-selector'));
51+
});
4752
};
4853
const handleCanEditCheck = (response) => {
4954
if (response.canEdit) {
@@ -60,7 +65,9 @@
6065
} else if (response.status === 403) {
6166
response.text().then(showErrorNotification);
6267
} else if (response.status === 200) {
63-
submitVersionEditForm();
68+
if (!withConfirm) {
69+
submitVersionEditForm();
70+
}
6471
}
6572
};
6673

‎src/bundle/Resources/public/js/scripts/button.translation.edit.js

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,46 @@
33
constructor(config) {
44
this.container = config.container;
55
this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler');
6-
this.translationsList = config.container.querySelector('.ibexa-translation-selector__list-wrapper');
6+
this.extraActionsContainer = config.container.querySelector('.ibexa-extra-actions');
7+
this.closeBtn = config.container.querySelector('.ibexa-extra-actions__close-btn');
8+
this.confirmBtn = config.container.querySelector('.ibexa-extra-actions__confirm-btn');
9+
this.languagesBtns = config.container.querySelectorAll('.ibexa-btn--select-language');
710
this.backdrop = config.backdrop;
811

912
this.tableNode = null;
1013

11-
this.hideTranslationsList = this.hideTranslationsList.bind(this);
12-
this.showTranslationsList = this.showTranslationsList.bind(this);
14+
this.hideExtraActionPanel = this.hideExtraActionPanel.bind(this);
15+
this.showExtraActionPanel = this.showExtraActionPanel.bind(this);
16+
this.setActiveLanguage = this.setActiveLanguage.bind(this);
17+
this.resetLanguageSelector = this.resetLanguageSelector.bind(this);
18+
1319
this.setPosition = this.setPosition.bind(this);
1420
}
1521

1622
setPosition() {
17-
const topOffset = parseInt(this.translationsList.dataset.topOffset, 10);
23+
const topOffset = parseInt(this.extraActionsContainer.dataset.topOffset, 10);
1824
const topPosition = window.scrollY > topOffset ? 0 : topOffset - window.scrollY;
1925
const height = window.scrollY > topOffset ? window.innerHeight : window.innerHeight + window.scrollY - topOffset;
2026

21-
this.translationsList.style.top = `${topPosition}px`;
22-
this.translationsList.style.height = `${height}px`;
27+
this.extraActionsContainer.style.top = `${topPosition}px`;
28+
this.extraActionsContainer.style.height = `${height}px`;
2329
}
2430

25-
hideTranslationsList(event) {
26-
const closestTranslationSelector = event.target.closest('.ibexa-translation-selector');
27-
const clickedOnTranslationsList = closestTranslationSelector && closestTranslationSelector.isSameNode(this.container);
28-
const clickedOnDraftConflictModal = event.target.closest('.ibexa-modal--version-draft-conflict');
29-
30-
if (clickedOnTranslationsList || clickedOnDraftConflictModal) {
31-
return;
32-
}
33-
31+
hideExtraActionPanel() {
3432
if (this.tableNode) {
3533
this.tableNode.classList.add('ibexa-table--last-column-sticky');
3634

3735
this.tableNode = null;
3836
}
3937

4038
this.backdrop.hide();
41-
this.translationsList.classList.add('ibexa-translation-selector__list-wrapper--hidden');
42-
doc.removeEventListener('click', this.hideTranslationsList, false);
39+
this.extraActionsContainer.classList.add('ibexa-extra-actions--hidden');
40+
41+
this.closeBtn.removeEventListener('click', this.hideExtraActionPanel, false);
4342
}
4443

45-
showTranslationsList({ currentTarget }) {
46-
this.translationsList.classList.remove('ibexa-translation-selector__list-wrapper--hidden');
44+
showExtraActionPanel({ currentTarget }) {
45+
this.extraActionsContainer.classList.remove('ibexa-extra-actions--hidden');
4746

4847
this.tableNode = currentTarget.closest('.ibexa-table--last-column-sticky');
4948

@@ -52,14 +51,38 @@
5251
}
5352

5453
this.setPosition();
55-
5654
this.backdrop.show();
57-
doc.addEventListener('click', this.hideTranslationsList, false);
55+
this.closeBtn.addEventListener('click', this.hideExtraActionPanel, false);
56+
5857
ibexa.helpers.tooltips.hideAll();
5958
}
6059

60+
setActiveLanguage(event) {
61+
const { contentId, languageCode } = event.currentTarget.dataset;
62+
63+
this.confirmBtn.dataset.contentId = contentId;
64+
this.confirmBtn.dataset.languageCode = languageCode;
65+
this.confirmBtn.disabled = false;
66+
67+
this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
68+
event.currentTarget.classList.add('ibexa-btn--active');
69+
}
70+
71+
resetLanguageSelector() {
72+
this.confirmBtn.dataset.contentId = null;
73+
this.confirmBtn.dataset.languageCode = null;
74+
this.confirmBtn.disabled = true;
75+
76+
this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active'));
77+
}
78+
6179
init() {
62-
this.toggler.addEventListener('click', this.showTranslationsList, false);
80+
this.toggler.addEventListener('click', this.showExtraActionPanel, false);
81+
this.languagesBtns.forEach((btn) => {
82+
btn.addEventListener('click', this.setActiveLanguage, false);
83+
});
84+
85+
document.body.addEventListener('ibexa:edit-content-reset-language-selector', this.resetLanguageSelector, false);
6386
}
6487
}
6588

‎src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,32 @@
5353
const checkedBtn = event.currentTarget;
5454
const languageCode = checkedBtn.value;
5555
const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
56+
const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item').querySelector('.ibexa-label');
57+
const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ibexa-label');
58+
const submitBtn = form.querySelector('.ibexa-extra-actions__confirm-btn');
59+
60+
allLanguageItems.forEach((item) => {
61+
item.classList.remove('ibexa-label--active');
62+
});
5663

5764
fetch(checkVersionDraftLink, {
5865
credentials: 'same-origin',
5966
}).then((response) => {
6067
if (response.status === 409) {
6168
response.text().then(showModal.bind(null, form, btns));
69+
submitBtn.disabled = true;
70+
71+
return;
6272
} else if (response.status === 200) {
6373
if (form.querySelector('#user_edit_version_info')) {
6474
redirectToUserEdit(languageCode, contentId, form);
6575

6676
return;
6777
}
68-
69-
form.submit();
7078
}
79+
80+
submitBtn.disabled = false;
81+
activeLanguageItem.classList.add('ibexa-label--active');
7182
});
7283
};
7384
const attachEventsToEditActionsWidget = (container) => {

‎src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ import { getInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scri
143143
initExtraActionsWidget(dataset);
144144
});
145145
doc.body.addEventListener('ibexa-extra-actions:toggle-widget', (event) => toggleExtraActionsWidget(event.detail), false);
146+
146147
closeBtns.forEach((closeBtn) =>
147148
closeBtn.addEventListener(
148149
'click',

0 commit comments

Comments
 (0)