Skip to content

Commit

Permalink
Remove collapse state
Browse files Browse the repository at this point in the history
  • Loading branch information
@bozatko
bozatko committed Dec 12, 2024
1 parent 09a2273 commit c43983f
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 73 deletions.
86 changes: 16 additions & 70 deletions src/bundle/Resources/public/js/scripts/core/collapse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,6 @@
const toggleAllBtns = [...doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`)];
const multiCollapsBodies = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)];

const initializeClickedStateArray = () => {
const initToggleState = [];

toggleAllBtns.forEach((collapseBtn) => {
const tagValue = collapseBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG);
let existingEntry = initToggleState.find((obj) => obj.btnName === tagValue);

if (!existingEntry) {
existingEntry = { btnName: tagValue, collapsedElements: [] };
initToggleState.push(existingEntry);
}
});

return initToggleState;
};
const clickedElementsState = initializeClickedStateArray();
const toggleMultiCollapseButton = (btn, changeToCollapseAll) => {
if (changeToCollapseAll && btn.classList.contains('label-expand-all')) {
btn.innerHTML = Translator.trans(
Expand All @@ -41,37 +25,6 @@
btn.classList.add('label-expand-all');
}
};
const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tableLength) => {
const allElements = multiCollapseNode.querySelectorAll('.ibexa-multi-collapse--item');

if (tableLength === allElements.length || tableLength === 0) {
toggleMultiCollapseButton(toggleBtn, tableLength === 0);
}
};
const handleCollapseAction = (multiCollapseNode, expandAction) => {
const index = clickedElementsState.findIndex(
(element) => element.btnName === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG),
);

if (expandAction) {
clickedElementsState[index].collapsedElements = [];
}

multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed');
const needToBeToggled = expandAction === isElementCollapsed;

if (needToBeToggled) {
const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse--item'));
expandAction ? element.show() : element.hide();

if (!expandAction) {
const uniqueName = collapseNode.querySelector('.ibexa-collapse__toggle-btn').getAttribute('data-bs-target');
clickedElementsState[index].collapsedElements.push(uniqueName);
}
}
});
};

doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
const toggleButton = collapseNode.querySelector('.ibexa-collapse__toggle-btn');
Expand All @@ -84,42 +37,24 @@
const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`);

if (!!multiCollapseNode) {
const uniqueName = toggleButton.getAttribute('data-bs-target');
const currentToggleAllButton = toggleAllBtns.find(
(button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG),
);

collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => {
event.stopPropagation();

const collapseSectionIndex = clickedElementsState.findIndex(
(collapseSection) => collapseSection.btnName === currentToggleAllButton.getAttribute(MULTI_COLLAPSE_BTN_TAG),
);
const toggleIndex = clickedElementsState[collapseSectionIndex].collapsedElements.findIndex(
(element) => element === uniqueName,
);
const myToggleButtons = [...multiCollapseNode.querySelectorAll('.ibexa-collapse__toggle-btn--status')];

window.clearTimeout(toggleAllTimeout);

toggleAllTimeout = window.setTimeout(() => {
if (toggleIndex !== -1) {
clickedElementsState[collapseSectionIndex].collapsedElements.splice(toggleIndex, 1);
const countCollapsed = myToggleButtons.filter((button) => button.classList.contains('collapsed')).length;
const needToBeToggled = countCollapsed === myToggleButtons.length || countCollapsed === 0;

toggleMultiCollapseIfNeeded(
multiCollapseNode,
currentToggleAllButton,
clickedElementsState[collapseSectionIndex].collapsedElements.length,
);

return;
if (needToBeToggled) {
toggleMultiCollapseButton(currentToggleAllButton, countCollapsed === 0);
}
clickedElementsState[collapseSectionIndex].collapsedElements.push(uniqueName);

toggleMultiCollapseIfNeeded(
multiCollapseNode,
currentToggleAllButton,
clickedElementsState[collapseSectionIndex].collapsedElements.length,
);
}, 200);
});
}
Expand All @@ -138,6 +73,17 @@
});
});

const handleCollapseAction = (multiCollapseNode, expandAction) => {
multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed');
const needToBeToggled = expandAction === isElementCollapsed;

if (needToBeToggled) {
const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse-single-item'));
expandAction ? element.show() : element.hide();
}
});
};
const attachAllElementsToggler = (btn) =>
btn.addEventListener('click', () => {
const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG);
Expand Down
3 changes: 0 additions & 3 deletions src/bundle/Resources/public/scss/_multi-collapse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,4 @@
}
}
}
&--item {
pointer-events: none;
}
}

0 comments on commit c43983f

Please sign in to comment.