Commit a1f5d0f7 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Benni Mack
Browse files

[BUGFIX] Revert CSS changes regarding panel collapse state

The changes done in #93453 introduced a CSS change that broke all
regular collapsible panels as their carets don't rotate anymore.

This bugfix reverts the CSS change and adopts the Flexform code to set
the `collapsed` class on a more appropriate element.

Resolves: #93537
Related: #93453
Releases: master
Change-Id: Iff87fd49a7bf9d3b155674578be7cfd887ad1408
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67960


Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 3eee476f
......@@ -74,7 +74,7 @@ $panel-lg-padding: 35px;
@include transition(all 0.25s ease-in-out);
}
&.collapsed {
.collapsed {
.caret {
transform: rotate(-90deg);
}
......
......@@ -134,7 +134,7 @@ class FlexFormContainerContainer {
this.toggleField.value = collapseTriggered ? '1' : '0';
this.panelButton.setAttribute('aria-expanded', collapseTriggered ? 'false' : 'true');
this.panelHeading.classList.toggle('collapsed', collapseTriggered);
this.panelButton.parentElement.classList.toggle('collapsed', collapseTriggered);
}).bindTo(this.containerContent);
});
}
......
......@@ -87,7 +87,7 @@ class FlexFormContainerContainer extends AbstractContainer
];
$panelHeaderAttributes = [
'class' => 'panel-heading' . ($flexFormContainerElementCollapsed ? ' collapsed' : ''),
'class' => 'panel-heading',
'data-bs-toggle' => 'flexform-inline',
'data-bs-target' => '#' . $flexFormDomContainerId,
];
......@@ -103,7 +103,7 @@ class FlexFormContainerContainer extends AbstractContainer
$html[] = '<div ' . GeneralUtility::implodeAttributes($containerAttributes, true) . '>';
$html[] = '<input class="t3js-flex-control-action" type="hidden" name="' . htmlspecialchars($actionFieldName) . '" value="" />';
$html[] = '<div ' . GeneralUtility::implodeAttributes($panelHeaderAttributes, true) . '>';
$html[] = '<div class="form-irre-header">';
$html[] = '<div class="form-irre-header ' . ($flexFormContainerElementCollapsed ? ' collapsed' : '') . '">';
$html[] = '<div class="form-irre-header-cell form-irre-header-icon">';
$html[] = '<span class="caret"></span>';
$html[] = '</div>';
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","bootstrap","TYPO3/CMS/Core/SecurityUtility","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Core/Event/RegularEvent","TYPO3/CMS/Backend/Severity"],(function(e,t,n,i,o,r,l){"use strict";var a;i=__importDefault(i),r=__importDefault(r),function(e){e.toggleSelector='[data-bs-toggle="flexform-inline"]',e.actionFieldSelector=".t3js-flex-control-action",e.toggleFieldSelector=".t3js-flex-control-toggle",e.controlSectionSelector=".t3js-formengine-irre-control",e.sectionContentContainerSelector=".t3js-flex-section-content",e.deleteContainerButtonSelector=".t3js-delete",e.contentPreviewSelector=".content-preview"}(a||(a={}));class s{constructor(e,t){this.securityUtility=new i.default,this.parentContainer=e,this.container=t,this.containerContent=t.querySelector(a.sectionContentContainerSelector),this.containerId=t.dataset.flexformContainerId,this.panelHeading=t.querySelector('[data-bs-target="#flexform-container-'+this.containerId+'"]'),this.panelButton=this.panelHeading.querySelector('[aria-controls="flexform-container-'+this.containerId+'"]'),this.toggleField=t.querySelector(a.toggleFieldSelector),this.registerEvents(),this.generatePreview()}static getCollapseInstance(e){var t;return null!==(t=n.Collapse.getInstance(e))&&void 0!==t?t:new n.Collapse(e,{toggle:!1})}getStatus(){return{id:this.containerId,collapsed:"false"===this.panelButton.getAttribute("aria-expanded")}}registerEvents(){this.parentContainer.isRestructuringAllowed()&&this.registerDelete(),this.registerToggle(),this.registerPanelToggle()}registerDelete(){new r.default("click",()=>{const e=TYPO3.lang["flexform.section.delete.title"]||"Delete this container?",t=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this container?";o.confirm(e,t,l.warning,[{text:TYPO3.lang["buttons.confirm.delete_record.no"]||"Cancel",active:!0,btnClass:"btn-default",name:"no"},{text:TYPO3.lang["buttons.confirm.delete_record.yes"]||"Yes, delete this container",btnClass:"btn-warning",name:"yes"}]).on("button.clicked",e=>{if("yes"===e.target.name){const e=this.container.querySelector(a.actionFieldSelector);e.value="DELETE",this.container.appendChild(e),this.container.classList.add("t3-flex-section--deleted"),new r.default("transitionend",()=>{this.container.classList.add("hidden");const e=new CustomEvent("formengine:flexform:container-deleted",{detail:{containerId:this.containerId}});this.parentContainer.getContainer().dispatchEvent(e)}).bindTo(this.container)}o.dismiss()})}).bindTo(this.container.querySelector(a.deleteContainerButtonSelector))}registerToggle(){new r.default("click",()=>{s.getCollapseInstance(this.containerContent).toggle(),this.generatePreview()}).delegateTo(this.container,`${a.toggleSelector} .form-irre-header-cell:not(${a.controlSectionSelector}`)}registerPanelToggle(){["hide.bs.collapse","show.bs.collapse"].forEach(e=>{new r.default(e,e=>{const t="hide.bs.collapse"===e.type;this.toggleField.value=t?"1":"0",this.panelButton.setAttribute("aria-expanded",t?"false":"true"),this.panelHeading.classList.toggle("collapsed",t)}).bindTo(this.containerContent)})}generatePreview(){let e="";if(this.getStatus().collapsed){const t=this.containerContent.querySelectorAll('input[type="text"], textarea');for(let n of t){let t=this.securityUtility.stripHtml(n.value);t.length>50&&(t=t.substring(0,50)+"..."),e+=(e?" / ":"")+t}}this.panelHeading.querySelector(a.contentPreviewSelector).textContent=e}}return s}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","bootstrap","TYPO3/CMS/Core/SecurityUtility","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Core/Event/RegularEvent","TYPO3/CMS/Backend/Severity"],(function(e,t,n,o,i,r,l){"use strict";var a;o=__importDefault(o),r=__importDefault(r),function(e){e.toggleSelector='[data-bs-toggle="flexform-inline"]',e.actionFieldSelector=".t3js-flex-control-action",e.toggleFieldSelector=".t3js-flex-control-toggle",e.controlSectionSelector=".t3js-formengine-irre-control",e.sectionContentContainerSelector=".t3js-flex-section-content",e.deleteContainerButtonSelector=".t3js-delete",e.contentPreviewSelector=".content-preview"}(a||(a={}));class s{constructor(e,t){this.securityUtility=new o.default,this.parentContainer=e,this.container=t,this.containerContent=t.querySelector(a.sectionContentContainerSelector),this.containerId=t.dataset.flexformContainerId,this.panelHeading=t.querySelector('[data-bs-target="#flexform-container-'+this.containerId+'"]'),this.panelButton=this.panelHeading.querySelector('[aria-controls="flexform-container-'+this.containerId+'"]'),this.toggleField=t.querySelector(a.toggleFieldSelector),this.registerEvents(),this.generatePreview()}static getCollapseInstance(e){var t;return null!==(t=n.Collapse.getInstance(e))&&void 0!==t?t:new n.Collapse(e,{toggle:!1})}getStatus(){return{id:this.containerId,collapsed:"false"===this.panelButton.getAttribute("aria-expanded")}}registerEvents(){this.parentContainer.isRestructuringAllowed()&&this.registerDelete(),this.registerToggle(),this.registerPanelToggle()}registerDelete(){new r.default("click",()=>{const e=TYPO3.lang["flexform.section.delete.title"]||"Delete this container?",t=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this container?";i.confirm(e,t,l.warning,[{text:TYPO3.lang["buttons.confirm.delete_record.no"]||"Cancel",active:!0,btnClass:"btn-default",name:"no"},{text:TYPO3.lang["buttons.confirm.delete_record.yes"]||"Yes, delete this container",btnClass:"btn-warning",name:"yes"}]).on("button.clicked",e=>{if("yes"===e.target.name){const e=this.container.querySelector(a.actionFieldSelector);e.value="DELETE",this.container.appendChild(e),this.container.classList.add("t3-flex-section--deleted"),new r.default("transitionend",()=>{this.container.classList.add("hidden");const e=new CustomEvent("formengine:flexform:container-deleted",{detail:{containerId:this.containerId}});this.parentContainer.getContainer().dispatchEvent(e)}).bindTo(this.container)}i.dismiss()})}).bindTo(this.container.querySelector(a.deleteContainerButtonSelector))}registerToggle(){new r.default("click",()=>{s.getCollapseInstance(this.containerContent).toggle(),this.generatePreview()}).delegateTo(this.container,`${a.toggleSelector} .form-irre-header-cell:not(${a.controlSectionSelector}`)}registerPanelToggle(){["hide.bs.collapse","show.bs.collapse"].forEach(e=>{new r.default(e,e=>{const t="hide.bs.collapse"===e.type;this.toggleField.value=t?"1":"0",this.panelButton.setAttribute("aria-expanded",t?"false":"true"),this.panelButton.parentElement.classList.toggle("collapsed",t)}).bindTo(this.containerContent)})}generatePreview(){let e="";if(this.getStatus().collapsed){const t=this.containerContent.querySelectorAll('input[type="text"], textarea');for(let n of t){let t=this.securityUtility.stripHtml(n.value);t.length>50&&(t=t.substring(0,50)+"..."),e+=(e?" / ":"")+t}}this.panelHeading.querySelector(a.contentPreviewSelector).textContent=e}}return s}));
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment