[TASK] Get templates in line with EXT:container and EXT:backend

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

Hide file tree

Showing 5 changed files with 42 additions and 182 deletions.
diff --git a/Resources/Private/Partials/PageLayout/Grid/Column.html b/Resources/Private/Partials/PageLayout/Grid/Column.html
@@ -1,21 +1,16 @@
-<f:comment>
-    Styling requires the colpos to be set to the string 'unused'. To preserve type safety in the
-    controller, the string is only used in the template by setting the below "colpos" variable.
-</f:comment>
-<f:variable name="colpos" value="{f:if(condition: column.unused, then: 'unused', else: column.columnNumber)}"/>
-
+<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.dataColPos}" 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-{colpos}
-        {f:if(condition: column.unassigned, then: 't3-grid-cell-unassigned')}
+    data-colpos="{column.containerUid}-{column.columnNumber}" 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')}
         {f:if(condition: '!{column.active} && {hideRestrictedColumns} && !{column.unused}', then: 't3-grid-cell-hidden')}
         {f:if(condition: column.collapsed, then: 'collapsed')}
         t3-gridCell-width{column.colSpan}
-        t3-gridCell-height{column.rowSpan}">
+        t3-gridCell-height{column.rowSpan}" role="group" aria-labelledby="{columnIdentifier}">
     <f:render partial="PageLayout/Grid/ColumnHeader" arguments="{_all}" />
     <f:if condition="{column.active} || {column.unused}">
-        <div data-colpos="{column.dataColPos}" data-language-uid="{column.context.siteLanguage.languageId}"
+        <div data-colpos="{column.containerUid}-{column.columnNumber}" data-language-uid="{column.context.siteLanguage.languageId}"
              class="t3js-sortable t3js-sortable-lang t3js-sortable-lang-{column.context.siteLanguage.languageId} t3-page-ce-wrapper
             {f:if(condition: column.items, else: 't3-page-ce-empty')}">
             <f:for each="{column.items}" as="item">
@@ -25,3 +20,4 @@
     </f:if>
     <f:format.raw>{column.afterSectionMarkup}</f:format.raw>
 </td>
+</html>
diff --git a/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html b/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html
@@ -1,7 +1,11 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+<f:variable name="columnIdentifier" value="columnIdentifier_column-{column.columnNumber}"/>
 <div class="t3-page-column-header">
     <f:if condition="{column.active}">
         <f:then>
-            <div class="btn-group t3-page-column-header-icons">
+            <div class="t3-page-column-header-icons">
                 <f:if condition="{collapsable}">
                 <a href="#"
                    class="btn btn-sm btn-default btn-borderless t3js-toggle-container-column"
@@ -18,49 +22,51 @@
                     <core:icon identifier="actions-view-list-collapse" />
                 </a>
                 </f:if>
-                <f:if condition="{allowEditContent} && {column.editUrl}">
-                    <a href="{column.editUrl}" title="{column.editLinkTitle}" class="btn btn-sm btn-default btn-borderless"><core:icon identifier="actions-document-open" /></a>
+                <f:if condition="{allowEditContent} && {column.contentEditable} && {column.allowNewContent}">
+                    <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>
             </div>
-            {column.title}
+            <span id="{columnIdentifier}">{column.title}</span>
             <f:if condition="{column.showMinItemsWarning}"><span class="fw-bold link-danger">
-                    <f:if condition="{column.hiddenItemCount}">
-                        <f:then>
-                            <f:translate id="LLL:EXT:ew_collapsible_container/Resources/Private/Language/locallang.xlf:minimum-item-count-not-reached-with-hidden" arguments="{1: column.minitems, 2: column.hiddenItemCount}"/>
-                        </f:then>
-                        <f:else>
-                            <f:translate id="LLL:EXT:ew_collapsible_container/Resources/Private/Language/locallang.xlf:minimum-item-count-not-reached" arguments="{1: column.minitems}"/>
-                        </f:else>
-                    </f:if>
+                <f:if condition="{column.hiddenItemCount}">
+                    <f:then>
+                        <f:translate id="LLL:EXT:ew_collapsible_container/Resources/Private/Language/locallang.xlf:minimum-item-count-not-reached-with-hidden" arguments="{1: column.minitems, 2: column.hiddenItemCount}"/>
+                    </f:then>
+                    <f:else>
+                        <f:translate id="LLL:EXT:ew_collapsible_container/Resources/Private/Language/locallang.xlf:minimum-item-count-not-reached" arguments="{1: column.minitems}"/>
+                    </f:else>
+                </f:if>
             </span></f:if>
         </f:then>
         <f:else if="{column.unused}">
-            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/>
+            <span id="{columnIdentifier}"><f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/></span>
         </f:else>
         <f:else if="{column.unassigned}">
-            {column.titleUnassigned}
+            <span id="{columnIdentifier}">{column.titleUnassigned}</span>
         </f:else>
         <f:else>
-            {column.titleInaccessible}
+            <span id="{columnIdentifier}">{column.titleInaccessible}</span>
         </f:else>
     </f:if>
 </div>
 <f:format.raw>{column.beforeSectionMarkup}</f:format.raw>
 <f:if condition="{allowEditContent} && {column.contentEditable} && {column.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}">
+    <div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}">
+        <div class="t3-page-ce-actions t3js-page-new-ce">
             <f:if condition="{column.childAllowedTypesCount} == 1">
                 <f:then>
                     <a href="{column.newContentUrl}" title="{newContentTitle}" class="btn btn-default btn-sm">
                         <core:icon identifier="actions-add" />
-                        {newContentTitleShort}
+                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
                     </a>
                 </f:then>
                 <f:else>
                     <typo3-backend-new-content-element-wizard-button url="{column.newContentUrl}" title="{newContentTitle}">
                         <button type="button" class="btn btn-default btn-sm">
                             <core:icon identifier="actions-add" />
-                            {newContentTitleShort}
+                            <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
                         </button>
                     </typo3-backend-new-content-element-wizard-button>
                 </f:else>
@@ -77,3 +83,4 @@
     {f:translate(key: 'LLL:EXT:ew_collapsible_container/Resources/Private/Language/locallang.xlf:contentcollapsed')}
 </div>
 </f:if>
+</html>
diff --git a/Resources/Private/Partials/PageLayout/Record.html b/Resources/Private/Partials/PageLayout/Record.html
@@ -1,14 +1,15 @@
-{f:if(condition: '{item.disabled} && {item.context.drawingConfiguration.showHidden} == 0', then: 'height: 0; position: absolute;') -> f:variable(name: 'style')}
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
+      xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
+      data-namespace-typo3-fluid="true">
+{f:if(condition: '{item.disabled} && {item.context.drawingConfiguration.showHidden} == 0', then: 'display: none;') -> f:variable(name: 'style')}
 <div class="t3-page-ce {item.wrapperClassName} t3js-page-ce t3js-page-ce-sortable" id="element-tt_content-{item.record.uid}" data-table="tt_content" data-uid="{item.record.uid}" data-language-uid="{item.record.sys_language_uid}" style="{style}">
-    <div class="t3-page-ce-element t3-page-ce-dragitem">
+    <div class="t3-page-ce-element t3-page-ce-dragitem" id="{item.uniqueId}">
         <f:render partial="PageLayout/Record/{item.record.CType}/Header" arguments="{_all}" optional="1">
             <f:render partial="PageLayout/RecordDefault/Header" arguments="{_all}" />
         </f:render>
         <f:spaceless>
             <div class="t3-page-ce-body">
-                <div class="t3-page-ce-body-inner">
-                    <f:render partial="PageLayout/RecordDefault/Preview" arguments="{_all}" />
-                </div>
+                <f:render partial="PageLayout/RecordDefault/Preview" arguments="{_all}" />
             </div>
         </f:spaceless>
         <f:render partial="PageLayout/Record/{item.record.CType}/Footer" arguments="{_all}" optional="1">
@@ -26,17 +27,18 @@
                 <f:then>
                     <a href="{item.newContentAfterUrl}" title="{newContentTitle}" class="btn btn-default btn-sm">
                         <core:icon identifier="actions-add" />
-                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:content" />
+                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
                     </a>
                 </f:then>
                 <f:else>
                     <typo3-backend-new-content-element-wizard-button class="btn btn-default btn-sm" url="{item.newContentAfterUrl}" subject="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:newContentElement')}">
                         <core:icon identifier="actions-plus" />
-                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:content" />
+                        <f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
                     </typo3-backend-new-content-element-wizard-button>
                 </f:else>
             </f:if>
         </div>
     </f:if>
     <div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
 </div>
+</html>
diff --git a/Resources/Private/Templates/Container/Grid.html b/Resources/Private/Templates/Container/Grid.html
@@ -1,31 +1,11 @@
 <html
     xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
-    xmlns:container="http://typo3.org/ns/B13/Container/ViewHelpers"
     data-namespace-typo3-fluid="true"
 >
-
 <f:be.pageRenderer
     includeCssFiles="{0: 'EXT:ew_collapsible_container/Resources/Public/Css/container.css'}"
     includeJavaScriptModules="{0: '@evoweb/ew-collapsible-container/container.js'}" />
-
-<f:if condition="{grid}">
-    <f:comment>View\ContainerLayoutView</f:comment>
-    <table style="width: 100%; table-layout: fixed;">
-        <f:for each="{grid}" as="row">
-            <tr>
-                <f:for each="{row}" as="column">
-                    <td class="t3-grid-cell" valign="top"{f:if(condition: column.colspan, then: ' colspan=\"{column.colspan}\"')}{f:if(condition: column.rowspan , then: ' rowspan=\"{column.rowspan}\"')}>
-                        <container:drawChildren uid="{uid}" colPos="{column.colPos}" />
-                    </td>
-                </f:for>
-            </tr>
-        </f:for>
-    </table>
-</f:if>
-
 <f:if condition="{containerGrid}">
-    <f:comment>Backend\Preview\ContainerLayoutView (Fluid based page module)</f:comment>
     <f:render partial="PageLayout/Grid" arguments="{grid: containerGrid, hideRestrictedColumns: hideRestrictedColumns, newContentTitle: newContentTitle, newContentTitleShort: newContentTitleShort, allowEditContent: allowEditContent, collapsable: 1}" />
 </f:if>
-
 </html>
diff --git a/Resources/Public/JavaScript/ContainerPre12.js b/Resources/Public/JavaScript/ContainerPre12.js