[TASK] Fix collapse due to changed collapseId

evoWeb · Aug 10, 2024 · 69f8610 · 69f8610
1 parent 6f67d17
commit 69f8610
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/Classes/Xclass/ContainerPreviewRenderer.php b/Classes/Xclass/ContainerPreviewRenderer.php
@@ -120,7 +120,7 @@ public function renderPageModulePreviewContent(GridColumnItem $item): string
 
     protected function setColumnCollapsedState(int $recordUid, BaseContainerGridColumn $columnObject, array $col): void
     {
-        $collapseId = $recordUid . $columnObject->getColumnNumber();
+        $collapseId = $recordUid . ContainerGridColumn::CONTAINER_COL_POS_DELIMITER . $columnObject->getColumnNumber();
         if (isset($this->getBackendUser()->uc['moduleData']['list']['containerExpanded'][$collapseId])) {
             $collapsed = $this->getBackendUser()->uc['moduleData']['list']['containerExpanded'][$collapseId] > 0;
         } else {

diff --git a/Resources/Private/Partials/PageLayout/Grid/Column.html b/Resources/Private/Partials/PageLayout/Grid/Column.html
@@ -1,6 +1,6 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 <td valign="top" colspan="{column.colSpan}" rowspan="{column.rowSpan}"
-    data-colpos="{column.containerUid}-{column.columnNumber}" data-language-uid="{column.context.siteLanguage.languageId}"
+    data-colpos="{column.columnNumber}" data-tx-container-parent="{column.containerUid}" data-language-uid="{column.context.siteLanguage.languageId}"
     class="t3js-page-lang-column-{column.context.siteLanguage.languageId} t3js-page-column t3-grid-cell t3-page-column t3-page-column-{column.columnNumber}
         {f:if(condition: column.active, else: 't3-grid-cell-unassigned')}
         {f:if(condition: '!{column.active} && !{column.unused}', then: 't3-grid-cell-restricted')}

diff --git a/Resources/Public/JavaScript/container.js b/Resources/Public/JavaScript/container.js
@@ -22,7 +22,7 @@ class ContainerToggle {
 
   storageKey = 'moduleData.list.containerExpanded';
 
-  constructor(PersistentStorage) {
+  constructor() {
     this.persistentStorage = PersistentStorage;
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
@@ -58,9 +58,9 @@ class ContainerToggle {
   toggleClicked(event) {
     event.preventDefault();
 
-    let column = event.currentTarget,
+    const column = event.currentTarget,
       containerCell = column.closest('td'),
-      colPos = parseInt(containerCell.dataset['colpos']),
+      colPos = this.getColPos(column),
       isExpanded = column.dataset['collapseState'] === 'expanded',
       storedModuleDataList = this.getCurrentModuleDataList(colPos, isExpanded);
 
@@ -77,9 +77,9 @@ class ContainerToggle {
   expandClicked(event) {
     event.preventDefault();
 
-    let expander = event.currentTarget,
+    const expander = event.currentTarget,
       containerCell = expander.closest('td'),
-      colPos = parseInt(containerCell.dataset['colpos']),
+      colPos = this.getColPos(expander),
       isExpanded = false,
       storedModuleDataList = this.getCurrentModuleDataList(colPos, isExpanded);
 
@@ -89,8 +89,15 @@ class ContainerToggle {
     });
   }
 
+  getColPos(column) {
+    const columnContainer = column.closest('[data-colpos]'),
+      containerId = parseInt(columnContainer.dataset.txContainerParent),
+      columnId = parseInt(columnContainer.dataset.colpos);
+    return containerId + '-' + columnId;
+  }
+
   /**
-   * @param {number} colPos
+   * @param {string} colPos
    * @param {boolean} isExpanded
    *
    * @returns {object}