FEATURE: TYPO3 V12 support with column collapse

Classes/EventListener/ModifyPageLayoutContentEventListener.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace B13\Collapse\EventListener;
+
+use TYPO3\CMS\Backend\Controller\Event\ModifyPageLayoutContentEvent;
+use TYPO3\CMS\Core\Page\PageRenderer;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+
+final class ModifyPageLayoutContentEventListener
+{
+    public function __invoke(ModifyPageLayoutContentEvent $event): void
+    {
+        GeneralUtility::makeInstance(PageRenderer::class)
+            ->loadRequireJsModule('TYPO3/CMS/Collapse/PageModuleCollapse');
+    }
+}

Classes/ViewHelpers/Collapse/CollapsibleViewHelper.php

@@ -0,0 +1,26 @@
+<?php
+declare(strict_types=1);
+namespace B13\Collapse\ViewHelpers\Collapse;
+
+use B13\Container\Backend\Grid\ContainerGridColumnItem;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\AbstractGridObject;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+abstract class CollapsibleViewHelper extends AbstractViewHelper
+{
+
+    protected $escapeOutput = false;
+
+    public function getCollapsedItems(): array
+    {
+        $result = $GLOBALS['BE_USER']->uc['B13']['Collapse'] ?? '';
+        $collapsedItems = GeneralUtility::trimExplode(',', $result);
+
+        return array_filter($collapsedItems);
+    }
+}

Classes/ViewHelpers/Collapse/ColumnViewHelper.php

@@ -0,0 +1,54 @@
+<?php
+declare(strict_types=1);
+namespace B13\Collapse\ViewHelpers\Collapse;
+
+use B13\Container\Backend\Grid\ContainerGridColumnItem;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\AbstractGridObject;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumn;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Utility\DebuggerUtility;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+class ColumnViewHelper extends CollapsibleViewHelper
+{
+
+    protected $escapeOutput = false;
+
+    public function initializeArguments(): void
+    {
+        parent::initializeArguments();
+        $this->registerArgument('page', 'array', 'Page record array', true);
+        $this->registerArgument('column', GridColumn::class, '', true);
+    }
+
+    public function render(): string
+    {
+        $page = $this->arguments['page'];
+        /** @var GridColumn $column */
+        $column = $this->arguments['column'];
+
+        $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
+
+        if ($column instanceof GridColumn) {
+            $identifier = sprintf('column_%s_%s', $column->getColumnNumber(), $page['uid']);
+            $isCollapsed = in_array($identifier, $this->getCollapsedItems(), true);
+
+            return '<button type="button" 
+            aria-expanded="' . ($isCollapsed ? 'false' : 'true') . '" 
+            data-bs-toggle="collapse" 
+            data-bs-target=".t3-page-column-' . $column->getColumnNumber() .' > .t3-page-ce-wrapper" 
+            class="btn btn-default btn-borderless" 
+            data-b13-collapse="' . $identifier . '">'
+                . $iconFactory->getIcon('actions-chevron-up', Icon::SIZE_SMALL)->render()
+                . $iconFactory->getIcon('actions-chevron-down', Icon::SIZE_SMALL)->render()
+                . '</button>';
+        }
+
+        return '';
+    }
+
+}

Classes/ViewHelpers/Collapse/ContentViewHelper.php

@@ -0,0 +1,78 @@
+<?php
+declare(strict_types=1);
+namespace B13\Collapse\ViewHelpers\Collapse;
+
+use B13\Container\Backend\Grid\ContainerGridColumnItem;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\AbstractGridObject;
+use TYPO3\CMS\Backend\View\BackendLayout\Grid\GridColumnItem;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Utility\DebuggerUtility;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+class ContentViewHelper extends CollapsibleViewHelper
+{
+
+    protected $escapeOutput = false;
+
+    public function initializeArguments(): void
+    {
+        parent::initializeArguments();
+        $this->registerArgument('row', 'array', 'Content record array', true);
+        $this->registerArgument('type', AbstractGridObject::class, '', true);
+    }
+
+    public function render(): string
+    {
+        $type = $this->arguments['type'];
+        $row = $this->arguments['row'];
+        $contentElementId = $row['uid'];
+        $identifier = 'tt_content_' . $contentElementId;
+
+        $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
+
+        if ($type instanceof GridColumnItem && !$type instanceof ContainerGridColumnItem) {
+            $recordTitle = BackendUtility::getRecordTitle('tt_content', $row);
+            $typeLabel = $this->getTypeLabel($row);
+
+            $isCollapsed = in_array($identifier, $this->getCollapsedItems(), true);
+
+            return '<button type="button" 
+            aria-expanded="' . ($isCollapsed ? 'false' : 'true') . '" 
+            data-bs-toggle="collapse" 
+            data-bs-target="#element-tt_content-' . $contentElementId . ' > .t3-page-ce-dragitem > .t3-page-ce-body > .element-preview" 
+            class="btn btn-default btn-borderless" 
+            data-b13-collapse="' . $identifier . '">'
+                . $iconFactory->getIcon('actions-chevron-up', Icon::SIZE_SMALL)->render()
+                . $iconFactory->getIcon('actions-chevron-down', Icon::SIZE_SMALL)->render()
+                . '</button>';
+        }
+
+        return '';
+    }
+
+    public function getCollapsedItems(): array
+    {
+        $collapsedItems = parent::getCollapsedItems();
+        return array_map(fn(int|string $item) => str_starts_with((string) $item, 'tt_content_') ? (string) $item : 'tt_content_' . $item, $collapsedItems);
+    }
+
+    protected function getTypeLabel(array $row): string
+    {
+        $typeValue = BackendUtility::getTCAtypeValue('tt_content', $row);
+        $label = '';
+        foreach ($GLOBALS['TCA']['tt_content']['columns']['CType']['config']['items'] as $itm) {
+            if ($itm['value'] == $typeValue) {
+                $label = $itm['label'];
+                break;
+            }
+        }
+        if ($label !== '') {
+            return $GLOBALS['LANG']->sL($label);
+        }
+
+        return '';
+    }
+}

Configuration/JavaScriptModules.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'dependencies' => ['backend'],
+    'imports' => [
+        'b13/collapse' => 'EXT:collapse/Resources/Public/JavaScript/',
+    ],
+];

Configuration/Services.yaml

@@ -9,3 +9,8 @@ services:
 
   B13\Collapse\PageModuleModifier:
     public: true
+
+  B13\Collapse\EventListener\ModifyPageLayoutContentEventListener:
+    tags:
+      - name: event.listener
+        identifier: 'paste-reference/backend/modify-page-layout-content'

Configuration/page.tsconfig

@@ -0,0 +1,3 @@
+templates.typo3/cms-backend {
+    1691683586 = b13/collapse:Resources/Private/TemplateOverrides
+}

Resources/Private/TemplateOverrides/Partials/PageLayout/Grid/ColumnHeader.html

@@ -0,0 +1,44 @@
+<html
+        xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+        xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+        xmlns:c="http://typo3.org/ns/B13/Collapse/ViewHelpers"
+        data-namespace-typo3-fluid="true"
+>
+
+<div class="t3-page-column-header">
+    <f:if condition="{column.active}">
+        <f:then>
+            <div class="t3-page-column-header-icons">
+                <f:if condition="{allowEditContent} && {column.editUrl}">
+                    <a href="{column.editUrl}" title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:editColumn')}">
+                        <core:icon identifier="actions-document-open" />
+                    </a>
+                </f:if>
+                <c:collapse.column column="{column}" page="{context.pageRecord}" />
+
+            </div>
+            {column.title}
+        </f:then>
+        <f:else if="{column.unused}">
+            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/>
+        </f:else>
+        <f:else if="{column.unassigned}">
+            {column.titleUnassigned}
+        </f:else>
+        <f:else>
+            {column.titleInaccessible}
+        </f:else>
+    </f:if>
+</div>
+<f:format.raw>{column.beforeSectionMarkup}</f:format.raw>
+<f:if condition="{allowEditContent} && {column.contentEditable} && {column.context.allowNewContent} && {column.active}">
+    <div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}" id="{column.uniqueId}">
+        <div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{column.columnNumber}-page-{column.context.pageId}-{column.uniqueId}">
+            <typo3-backend-new-content-element-wizard-button class="btn btn-default btn-sm" url="{column.newContentUrl}" subject="{newContentTitle}">
+                <core:icon identifier="actions-plus" />
+                {newContentTitleShort}
+            </typo3-backend-new-content-element-wizard-button>
+        </div>
+        <div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
+    </div>
+</f:if>

Resources/Private/TemplateOverrides/Partials/PageLayout/RecordDefault/Header.html

@@ -0,0 +1,57 @@
+<html
+        xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+        xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+        xmlns:c="http://typo3.org/ns/B13/Collapse/ViewHelpers"
+        data-namespace-typo3-fluid="true"
+>
+
+<div class="t3-page-ce-header {f:if(condition: '{allowEditContent} && {item.dragAndDropAllowed}', then: 't3-page-ce-header-draggable t3js-page-ce-draghandle')}">
+    <div class="t3-page-ce-header-left">
+        {item.icons -> f:format.raw()}
+        <f:if condition="{item.siteLanguage.flagIdentifier}">
+			<span class="t3-page-ce-header-icon-flag t3js-flag" title="{item.siteLanguage.title}">
+				<core:icon identifier="{item.siteLanguage.flagIdentifier}" />
+			</span>
+        </f:if>
+    </div>
+    <div class="t3-page-ce-header-title">
+        {item.contentTypeLabel}
+    </div>
+    <div class="t3-page-ce-header-right">
+        <f:if condition="{item.editable} && {allowEditContent}">
+            <div class="btn-toolbar">
+                <div class="btn-group btn-group-sm">
+                    <a href="{item.editUrl}" class="btn btn-default btn-borderless" title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:edit')}">
+                        <core:icon identifier="actions-open" />
+                    </a>
+                    <f:if condition="{item.visibilityToggling}">
+                        <a class="btn btn-default btn-borderless" href="{item.visibilityToggleUrl}" title="{item.visibilityToggleTitle}">
+                            <core:icon identifier="actions-edit-{item.visibilityToggleIconName}" />
+                        </a>
+                    </f:if>
+                    <f:if condition="{item.delible}">
+                        <a class="btn btn-default btn-borderless t3js-modal-trigger"
+                           href="{item.deleteUrl}"
+                           data-severity="warning"
+                           data-title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf:label.confirm.delete_record.title')}"
+                           data-bs-content="{item.deleteMessage}"
+                           data-button-close-text="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_common.xlf:cancel')}"
+                           data-button-ok-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_mod_web_list.xlf:delete')}"
+                           title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:deleteItem')}">
+                            <core:icon identifier="actions-edit-delete" size="small" />
+                        </a>
+                    </f:if>
+                    <button aria-haspopup="true"
+                            aria-controls="contentMenu0" aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:advancedFunctions')}"
+                            class="btn btn-default btn-borderless btn-sm"
+                            data-contextmenu-trigger="click"
+                            data-contextmenu-table="tt_content"
+                            data-contextmenu-uid="{item.record.uid}">
+                        <core:icon identifier="actions-menu-alternative" />
+                    </button>
+                </div>
+                <c:collapse.content row="{item.record}" type="{item}" />
+            </div>
+        </f:if>
+    </div>
+</div>