Skip to content

Commit

Permalink
(fix): fix the limit-group-connections.js javascript
Browse files Browse the repository at this point in the history
  • Loading branch information
@YvetteNikolov
YvetteNikolov committed Aug 19, 2024
1 parent 755e864 commit ce01ba6
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 49 deletions.
94 changes: 45 additions & 49 deletions js/limit-group-connections.js
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,81 @@
document.addEventListener('DOMContentLoaded', () => {
const selectors = {
groupSubcategoryMetaboxWrapper: '#p2p-to-pdc-subcategory_to_pdc-group',
groupSubcategoryMetabox: 'div[data-p2p_type="pdc-subcategory_to_pdc-group"]',
groupSubCategoryConnectionTableRow: 'div[data-p2p_type="pdc-subcategory_to_pdc-group"] > table.p2p-connections > tbody > tr',
groupItemMetaboxWrapper: '#p2p-to-pdc-item_to_pdc-group',
groupItemMetabox: 'div[data-p2p_type="pdc-item_to_pdc-group"]',
groupItemConnectionTableRow: 'div[data-p2p_type="pdc-item_to_pdc-group"] > table.p2p-connections > tbody > tr',
groupCategoryMetaboxWrapper: '#p2p-to-pdc-category_to_pdc-group',
groupSubcategoryMetaboxWrapper: '#p2p-to-pdc-subcategory_to_pdc-group',

groupCategoryMetabox: 'div[data-p2p_type="pdc-category_to_pdc-group"]',
groupSubcategoryMetabox: 'div[data-p2p_type="pdc-subcategory_to_pdc-group"]',

groupCategoryConnectionTableRow: 'div[data-p2p_type="pdc-category_to_pdc-group"] > table.p2p-connections > tbody > tr',
groupSubcategoryConnectionTableRow: 'div[data-p2p_type="pdc-subcategory_to_pdc-group"] > table.p2p-connections > tbody > tr',

postPublishButton: 'div.edit-post-header__settings > button.editor-post-publish-button__button',
};

const {
groupSubcategoryMetabox,
const {
groupCategoryMetaboxWrapper,
groupSubcategoryMetaboxWrapper,
groupSubCategoryConnectionTableRow,
groupItemMetabox,
groupItemMetaboxWrapper,
groupItemConnectionTableRow,
groupCategoryMetabox,
groupCategoryMetaboxWrapper,
groupSubcategoryMetabox,
groupCategoryConnectionTableRow,
groupSubcategoryConnectionTableRow,
postPublishButton,
} = selectors;

const metaboxes = [
{ metabox: groupSubcategoryMetabox, metaboxWrapper: groupSubcategoryMetaboxWrapper, connectionRow: groupSubCategoryConnectionTableRow },
{ metabox: groupItemMetabox, metaboxWrapper: groupItemMetaboxWrapper, connectionRow: groupItemConnectionTableRow },
{ metabox: groupCategoryMetabox, metaboxWrapper: groupCategoryMetaboxWrapper, connectionRow: groupCategoryConnectionTableRow }
];
// Monitor changes to metaboxes
observeMetaboxChanges(groupCategoryMetabox, groupCategoryMetaboxWrapper, groupCategoryConnectionTableRow, groupSubcategoryConnectionTableRow, postPublishButton);
observeMetaboxChanges(groupSubcategoryMetabox, groupSubcategoryMetaboxWrapper, groupSubcategoryConnectionTableRow, groupCategoryConnectionTableRow, postPublishButton);

metaboxes.forEach(({ metabox, metaboxWrapper, connectionRow }) => {
observeMetaboxChanges(metabox, metaboxWrapper, connectionRow, postPublishButton);
// Validate connections on page load
validateConnectionsOnLoad({
groupCategoryMetaboxWrapper,
groupSubcategoryMetaboxWrapper,
groupCategoryConnectionTableRow,
groupSubcategoryConnectionTableRow,
postPublishButton,
});

validateConnectionsOnLoad(metaboxes, postPublishButton);
});

function observeMetaboxChanges(metabox, metaboxWrapper, connectionRow, postPublishButton) {
function observeMetaboxChanges(metabox, metaboxWrapper, mainConnectionTableRow, subConnectionTableRow, postPublishButton) {
const observer = new MutationObserver(() => {
validateConnections({ metabox, metaboxWrapper, connectionRow, postPublishButton });
validateConnectionState({ metaboxWrapper, mainConnectionTableRow, subConnectionTableRow, postPublishButton });
});

const config = { childList: true, subtree: true };
const targetNode = document.querySelector(metabox);
if (targetNode) {
observer.observe(targetNode, config);
observer.observe(targetNode, { childList: true, subtree: true });
}
}

function validateConnections({ metabox, metaboxWrapper, connectionRow, postPublishButton }) {
const connectionExists = document.querySelectorAll(connectionRow).length > 0;
toggleMetaboxState(metaboxWrapper, connectionExists);
togglePublishButton(postPublishButton);
function validateConnectionsOnLoad({ groupCategoryMetaboxWrapper, groupSubcategoryMetaboxWrapper, groupCategoryConnectionTableRow, groupSubcategoryConnectionTableRow, postPublishButton }) {
setTimeout(() => {
validateConnectionState({ metaboxWrapper: groupCategoryMetaboxWrapper, mainConnectionTableRow: groupCategoryConnectionTableRow });
validateConnectionState({ metaboxWrapper: groupSubcategoryMetaboxWrapper, mainConnectionTableRow: groupSubcategoryConnectionTableRow });
validatePublishButtonState({ groupCategoryConnectionTableRow, groupSubcategoryConnectionTableRow, postPublishButton });
}, 1000);
}

function toggleMetaboxState(metaboxWrapper, connectionExists) {
function validateConnectionState({ metaboxWrapper, mainConnectionTableRow, subConnectionTableRow, postPublishButton }) {
const mainConnectionExists = document.querySelectorAll(mainConnectionTableRow).length >= 1;
const subConnectionExists = subConnectionTableRow ? document.querySelectorAll(subConnectionTableRow).length >= 1 : true;

toggleMetaboxBorder(metaboxWrapper, mainConnectionExists);
validatePublishButtonState({ groupCategoryConnectionTableRow: mainConnectionTableRow, groupSubcategoryConnectionTableRow: subConnectionTableRow, postPublishButton });
}

function toggleMetaboxBorder(metaboxWrapper, connectionExists) {
const wrapper = document.querySelector(metaboxWrapper);
if (!wrapper) return;

if (connectionExists) {
wrapper.style.border = '';
wrapper.querySelector('.p2p-create-connections')?.classList.add('hidden');
} else {
wrapper.style.border = '1px solid red';
wrapper.querySelector('.p2p-create-connections')?.classList.remove('hidden');
}
wrapper.style.border = connectionExists ? '' : '1px solid red';
}

function togglePublishButton(postPublishButton) {
const disable = [...document.querySelectorAll('[data-p2p_type] > table.p2p-connections > tbody > tr')]
.every(tr => tr.length === 0);
function validatePublishButtonState({ groupCategoryConnectionTableRow, groupSubcategoryConnectionTableRow, postPublishButton }) {
const categoryConnectionExists = document.querySelectorAll(groupCategoryConnectionTableRow).length >= 1;
const subcategoryConnectionExists = groupSubcategoryConnectionTableRow ? document.querySelectorAll(groupSubcategoryConnectionTableRow).length >= 1 : true;

document.querySelector(postPublishButton).disabled = disable;
}
const button = document.querySelector(postPublishButton);
if (!button) return;

function validateConnectionsOnLoad(metaboxes, postPublishButton) {
setTimeout(() => {
metaboxes.forEach(({ metabox, metaboxWrapper, connectionRow }) => {
validateConnections({ metabox, metaboxWrapper, connectionRow, postPublishButton });
});
}, 1000);
button.disabled = !(categoryConnectionExists && subcategoryConnectionExists);
}
3 changes: 3 additions & 0 deletions js/limit-item-connections.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ document.addEventListener('DOMContentLoaded', () => {
itemCategoryMetaboxWrapper: '#p2p-from-pdc-item_to_pdc-category',
itemSubcategoryMetaboxWrapper: '#p2p-from-pdc-item_to_pdc-subcategory',
itemGroupMetaboxWrapper: '#p2p-from-pdc-item_to_pdc-group',

itemCategoryMetabox: 'div[data-p2p_type="pdc-item_to_pdc-category"]',
itemSubcategoryMetabox: 'div[data-p2p_type="pdc-item_to_pdc-subcategory"]',
itemGroupMetabox: 'div[data-p2p_type="pdc-item_to_pdc-group"]',

itemCategoryConnectionTableRow: 'div[data-p2p_type="pdc-item_to_pdc-category"] > table.p2p-connections > tbody > tr',
itemSubcategoryConnectionTableRow: 'div[data-p2p_type="pdc-item_to_pdc-subcategory"] > table.p2p-connections > tbody > tr',
itemGroupConnectionTableRow: 'div[data-p2p_type="pdc-item_to_pdc-group"] > table.p2p-connections > tbody > tr',

postPublishButton: 'div.edit-post-header__settings > button.editor-post-publish-button__button',
};

Expand Down

0 comments on commit ce01ba6

Please sign in to comment.