- The three market Content Blocks preview as compact collapsible rows:
thumbnail of the actual image (hero background, intro image, insights cover), key copy in the summary line, full details expanded; card and intro-paragraph previews are wrapped in the same mechanism - New SubmarketPluginPreview for vitec_usecaselist / vitec_productfeature / vitec_productlist: instead of bare standard boxes they now list the selected story titles (flagging stories that still lack a quote), the featured product and the hand-picked products in order - Container-style collapse for whole page-module COLUMNS: a chevron at the right of every column header folds a section down to its title row, state kept per page and colPos in localStorage - the slot view of a sub-market page folds to six slim bands - Previews sit under the page module's pointer-events lock and its click-to-edit layer: pointer events are re-enabled inside the collapse markup and the toggle runs on pointerdown in the capture phase - Two more v14 removals fixed on the way, both latent in the OLDER preview classes too (Usecaseshow, Modelcard would have crashed the page module): GridColumnItem::getRecord() now returns a Domain\Record object, and StandaloneView is gone - previews normalize the record via a shared helper and render through the ViewFactory
This commit is contained in:
orasche committed
1 parent
67be9de316
commit
78af83d2e3
12 files changed
+465
-23
No files matched your search
@@ -0,0 +1,30 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
|
||||
<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
|
||||
<f:asset.script identifier="vitec-backend-collapse" src="EXT:vitec/Resources/Public/JavaScript/backend-preview-collapse.js"/>
|
||||
|
||||
<details class="vitec-collapse">
|
||||
<summary>
|
||||
<span class="vitec-collapse__label">{label}</span>
|
||||
<span class="vitec-collapse__hint">{hint}</span>
|
||||
</summary>
|
||||
<div class="vitec-collapse__body">
|
||||
<f:if condition="{header}">
|
||||
<p><strong>Überschrift:</strong> {header}</p>
|
||||
</f:if>
|
||||
<f:if condition="{items}">
|
||||
<f:then>
|
||||
<ol style="margin:0.25rem 0 0 1rem; padding:0;">
|
||||
<f:for each="{items}" as="entry">
|
||||
<li>{entry}</li>
|
||||
</f:for>
|
||||
</ol>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<p><em>Keine Einzelauswahl.</em></p>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</html>
|
||||
@@ -245,3 +245,86 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================
|
||||
Collapsible section previews (sub-market template, 2026-10-02)
|
||||
Same practical effect as the container collapse on Two Columns,
|
||||
built with <details> so it works for ANY element preview.
|
||||
============================================================= */
|
||||
details.vitec-collapse {
|
||||
border-left: 4px solid #26358C;
|
||||
background: var(--typo3-state-default-bg, #f8f9fa);
|
||||
border-radius: 4px;
|
||||
}
|
||||
details.vitec-collapse > summary {
|
||||
cursor: pointer;
|
||||
padding: 0.6rem 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
details.vitec-collapse > summary::-webkit-details-marker { display: none; }
|
||||
details.vitec-collapse > summary::before {
|
||||
content: '▸';
|
||||
color: #F47937;
|
||||
transition: transform 0.15s ease;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
details.vitec-collapse[open] > summary::before { transform: rotate(90deg); }
|
||||
.vitec-collapse__label {
|
||||
font-weight: 700;
|
||||
color: #26358C;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vitec-collapse__hint {
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.vitec-collapse__thumb {
|
||||
width: 72px;
|
||||
height: 44px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.vitec-collapse__body {
|
||||
padding: 0 0.75rem 0.75rem 2.1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.vitec-collapse__body p { margin: 0.25rem 0; }
|
||||
.vitec-collapse__body img { max-width: 280px; border-radius: 3px; margin-top: 0.4rem; }
|
||||
|
||||
/* The page module disables pointer events on preview content so clicks hit
|
||||
the element row - re-enable them inside our collapsible previews, or the
|
||||
summary can never be toggled (found 2026-10-02). */
|
||||
details.vitec-collapse,
|
||||
details.vitec-collapse * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
details.vitec-collapse > summary { user-select: none; }
|
||||
|
||||
/* =============================================================
|
||||
Collapsible page-module COLUMNS (sub-market sections etc.),
|
||||
container-style: chevron button at the right of the column
|
||||
header, state kept per page+column in localStorage.
|
||||
============================================================= */
|
||||
.t3-page-column-header { position: relative; }
|
||||
button.vitec-col-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.5rem;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
color: #F47937;
|
||||
padding: 0.25rem 0.4rem;
|
||||
}
|
||||
button.vitec-col-toggle:hover { color: #26358C; }
|
||||
td.t3-page-column.vitec-col-collapsed > :not(:first-child) { display: none; }
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Collapse toggle for .vitec-collapse previews in the page module.
|
||||
*
|
||||
* Two defenses against the page module's own interaction layer:
|
||||
* - pointerdown in the CAPTURE phase toggles (fires before any click
|
||||
* logic TYPO3 registered earlier),
|
||||
* - the subsequent click on a summary is swallowed so it cannot trigger
|
||||
* element editing.
|
||||
* Requires pointer-events: auto on the collapse markup (see CSS) - the
|
||||
* module disables pointer events on preview content by default.
|
||||
*/
|
||||
(function () {
|
||||
function summaryOf(event) {
|
||||
return event.target instanceof Element
|
||||
? event.target.closest('details.vitec-collapse > summary')
|
||||
: null;
|
||||
}
|
||||
document.addEventListener('pointerdown', function (event) {
|
||||
const summary = summaryOf(event);
|
||||
if (!summary) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
const details = summary.parentElement;
|
||||
details.open = !details.open;
|
||||
}, true);
|
||||
document.addEventListener('click', function (event) {
|
||||
if (summaryOf(event)) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}, true);
|
||||
})();
|
||||
|
||||
/**
|
||||
* Container-style collapse for whole page-module COLUMNS (the sub-market
|
||||
* section slots and any other backend layout): a chevron button at the
|
||||
* right of each column header folds the column down to its title row.
|
||||
* State is remembered per page + colPos in localStorage.
|
||||
*/
|
||||
(function () {
|
||||
function storageKey(colPos) {
|
||||
const pageId = new URLSearchParams(window.location.search).get('id') || '0';
|
||||
return 'vitecColCollapse_' + pageId + '_' + colPos;
|
||||
}
|
||||
function apply(column, collapsed, button) {
|
||||
column.classList.toggle('vitec-col-collapsed', collapsed);
|
||||
button.textContent = collapsed ? '▴' : '▾';
|
||||
button.title = collapsed ? 'Section ausklappen' : 'Section einklappen';
|
||||
}
|
||||
function init() {
|
||||
document.querySelectorAll('td.t3-page-column[data-colpos]').forEach(function (column) {
|
||||
const header = column.querySelector('.t3-page-column-header');
|
||||
if (!header || header.querySelector('.vitec-col-toggle')) {
|
||||
return;
|
||||
}
|
||||
const colPos = column.dataset.colpos;
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'vitec-col-toggle';
|
||||
let collapsed = false;
|
||||
try { collapsed = localStorage.getItem(storageKey(colPos)) === '1'; } catch (e) { /* egal */ }
|
||||
apply(column, collapsed, button);
|
||||
button.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const nowCollapsed = !column.classList.contains('vitec-col-collapsed');
|
||||
apply(column, nowCollapsed, button);
|
||||
try { localStorage.setItem(storageKey(colPos), nowCollapsed ? '1' : '0'); } catch (e) { /* egal */ }
|
||||
});
|
||||
header.appendChild(button);
|
||||
});
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in new issue
Block a user