Commit c8155922 authored by Oliver Hader's avatar Oliver Hader Committed by Oliver Bartsch
Browse files

[BUGFIX] Apply AJAX scriptItems to FormEngine FlexFormSectionContainer

When resolving inline JavaScript invocations in issue #95954 it looked
like AJAX-aware elements in FormEngine would share a common abstract
implementation in the client-side handling. Actually AJAX response
handling is independent for each of those elements...

This change now applies changes, that previously have been made to
`TYPO3/CMS/Backend/FormEngine/InlineRelation/AjaxDispatcher`, to
`TYPO3/CMS/Backend/FormEngine/Container/FlexFormSectionContainer`.

Resolves: #96027
Releases: master, 11.5
Change-Id: Icf507a32399f72182597e9c8d650fb2d9a35e480
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/72231


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: default avatarJörg Bösche <typo3@joergboesche.de>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: default avatarJörg Bösche <typo3@joergboesche.de>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
parent d1d2b3c6
......@@ -19,6 +19,7 @@ import DocumentService = require('TYPO3/CMS/Core/DocumentService');
import FlexFormContainerContainer from './FlexFormContainerContainer';
import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
import RegularEvent from 'TYPO3/CMS/Core/Event/RegularEvent';
import javaScriptHandler = require('TYPO3/CMS/Core/JavaScriptHandler');
enum Selectors {
toggleAllSelector = '.t3-form-flexsection-toggle',
......@@ -151,6 +152,10 @@ class FlexFormSectionContainer {
const sectionContainer = document.querySelector(dataset.target);
sectionContainer.insertAdjacentElement('beforeend', createdContainer);
if (data.scriptItems instanceof Array && data.scriptItems.length > 0) {
javaScriptHandler.processItems(data.scriptItems, true);
}
// @todo deprecate or remove with TYPO3 v12.0
if (data.scriptCall && data.scriptCall.length > 0) {
$.each(data.scriptCall, function (index: number, value: string): void {
......
......@@ -186,7 +186,7 @@ class FormFlexAjaxController extends AbstractFormEngineAjaxController
}
$this->addRegisteredRequireJsModulesToJavaScriptItems($newContainerResult, $scriptItems);
// @todo deprecate modules with arbitrary JavaScript callback function in TYPO3 v12.0
$jsonResult['requireJsModules'] = $this->createExecutableStringRepresentationOfRegisteredRequireJsModules($newContainerResult);
$jsonResult['scriptCall'] = $this->createExecutableStringRepresentationOfRegisteredRequireJsModules($newContainerResult, true);
return new JsonResponse($jsonResult);
}
......
......@@ -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","sortablejs","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Core/DocumentService","./FlexFormContainerContainer","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Event/RegularEvent"],(function(require,exports,bootstrap_1,sortablejs_1,AjaxRequest_1,DocumentService,FlexFormContainerContainer_1,FormEngine,RegularEvent_1){"use strict";var Selectors;sortablejs_1=__importDefault(sortablejs_1),AjaxRequest_1=__importDefault(AjaxRequest_1),FlexFormContainerContainer_1=__importDefault(FlexFormContainerContainer_1),RegularEvent_1=__importDefault(RegularEvent_1),function(e){e.toggleAllSelector=".t3-form-flexsection-toggle",e.addContainerSelector=".t3js-flex-container-add",e.actionFieldSelector=".t3js-flex-control-action",e.sectionContainerSelector=".t3js-flex-section",e.sectionContentContainerSelector=".t3js-flex-section-content",e.sortContainerButtonSelector=".t3js-sortable-handle"}(Selectors||(Selectors={}));class FlexFormSectionContainer{constructor(e){this.allowRestructure=!1,this.flexformContainerContainers=[],this.updateSorting=e=>{this.container.querySelectorAll(Selectors.actionFieldSelector).forEach((e,t)=>{e.value=t.toString()}),this.updateToggleAllState(),this.flexformContainerContainers.splice(e.newIndex,0,this.flexformContainerContainers.splice(e.oldIndex,1)[0]),document.dispatchEvent(new Event("formengine:flexform:sorting-changed"))},this.sectionContainerId=e,DocumentService.ready().then(t=>{this.container=t.getElementById(e),this.sectionContainer=this.container.querySelector(this.container.dataset.section),this.allowRestructure="1"===this.sectionContainer.dataset.t3FlexAllowRestructure,this.registerEvents(),this.registerContainers()})}static getCollapseInstance(e){var t;return null!==(t=bootstrap_1.Collapse.getInstance(e))&&void 0!==t?t:new bootstrap_1.Collapse(e,{toggle:!1})}getContainer(){return this.container}isRestructuringAllowed(){return this.allowRestructure}registerEvents(){this.allowRestructure&&(this.registerSortable(),this.registerContainerDeleted()),this.registerToggleAll(),this.registerCreateNewContainer(),this.registerPanelToggle()}registerContainers(){const e=this.container.querySelectorAll(Selectors.sectionContainerSelector);for(let t of e)this.flexformContainerContainers.push(new FlexFormContainerContainer_1.default(this,t));this.updateToggleAllState()}getToggleAllButton(){return this.container.querySelector(Selectors.toggleAllSelector)}registerSortable(){new sortablejs_1.default(this.sectionContainer,{group:this.sectionContainer.id,handle:Selectors.sortContainerButtonSelector,onSort:this.updateSorting})}registerToggleAll(){new RegularEvent_1.default("click",e=>{const t="true"===e.target.dataset.expandAll,n=this.container.querySelectorAll(Selectors.sectionContentContainerSelector);for(let e of n)t?FlexFormSectionContainer.getCollapseInstance(e).show():FlexFormSectionContainer.getCollapseInstance(e).hide()}).bindTo(this.getToggleAllButton())}registerCreateNewContainer(){new RegularEvent_1.default("click",(e,t)=>{e.preventDefault(),this.createNewContainer(t.dataset)}).delegateTo(this.container,Selectors.addContainerSelector)}createNewContainer(dataset){new AjaxRequest_1.default(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:dataset.vanillauid,databaseRowUid:dataset.databaserowuid,command:dataset.command,tableName:dataset.tablename,fieldName:dataset.fieldname,recordTypeValue:dataset.recordtypevalue,dataStructureIdentifier:JSON.parse(dataset.datastructureidentifier),flexFormSheetName:dataset.flexformsheetname,flexFormFieldName:dataset.flexformfieldname,flexFormContainerName:dataset.flexformcontainername}).then(async response=>{const data=await response.resolve(),createdContainer=(new DOMParser).parseFromString(data.html,"text/html").body.firstElementChild;this.flexformContainerContainers.push(new FlexFormContainerContainer_1.default(this,createdContainer));const sectionContainer=document.querySelector(dataset.target);sectionContainer.insertAdjacentElement("beforeend",createdContainer),data.scriptCall&&data.scriptCall.length>0&&$.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&$.each(data.stylesheetFiles,(function(e,t){let n=document.createElement("link");n.rel="stylesheet",n.type="text/css",n.href=t,document.head.appendChild(n)})),this.updateToggleAllState(),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(sectionContainer)})}registerContainerDeleted(){new RegularEvent_1.default("formengine:flexform:container-deleted",e=>{const t=e.detail.containerId;this.flexformContainerContainers=this.flexformContainerContainers.filter(e=>e.getStatus().id!==t),FormEngine.Validation.validate(this.container),this.updateToggleAllState()}).bindTo(this.container)}registerPanelToggle(){["hide.bs.collapse","show.bs.collapse"].forEach(e=>{new RegularEvent_1.default(e,()=>{this.updateToggleAllState()}).delegateTo(this.container,Selectors.sectionContentContainerSelector)})}updateToggleAllState(){if(this.flexformContainerContainers.length>0){const e=this.flexformContainerContainers.find(Boolean);this.getToggleAllButton().dataset.expandAll=!0===e.getStatus().collapsed?"true":"false"}}}return FlexFormSectionContainer}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","bootstrap","sortablejs","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Core/DocumentService","./FlexFormContainerContainer","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Core/Event/RegularEvent","TYPO3/CMS/Core/JavaScriptHandler"],(function(require,exports,bootstrap_1,sortablejs_1,AjaxRequest_1,DocumentService,FlexFormContainerContainer_1,FormEngine,RegularEvent_1,javaScriptHandler){"use strict";var Selectors;sortablejs_1=__importDefault(sortablejs_1),AjaxRequest_1=__importDefault(AjaxRequest_1),FlexFormContainerContainer_1=__importDefault(FlexFormContainerContainer_1),RegularEvent_1=__importDefault(RegularEvent_1),function(e){e.toggleAllSelector=".t3-form-flexsection-toggle",e.addContainerSelector=".t3js-flex-container-add",e.actionFieldSelector=".t3js-flex-control-action",e.sectionContainerSelector=".t3js-flex-section",e.sectionContentContainerSelector=".t3js-flex-section-content",e.sortContainerButtonSelector=".t3js-sortable-handle"}(Selectors||(Selectors={}));class FlexFormSectionContainer{constructor(e){this.allowRestructure=!1,this.flexformContainerContainers=[],this.updateSorting=e=>{this.container.querySelectorAll(Selectors.actionFieldSelector).forEach((e,t)=>{e.value=t.toString()}),this.updateToggleAllState(),this.flexformContainerContainers.splice(e.newIndex,0,this.flexformContainerContainers.splice(e.oldIndex,1)[0]),document.dispatchEvent(new Event("formengine:flexform:sorting-changed"))},this.sectionContainerId=e,DocumentService.ready().then(t=>{this.container=t.getElementById(e),this.sectionContainer=this.container.querySelector(this.container.dataset.section),this.allowRestructure="1"===this.sectionContainer.dataset.t3FlexAllowRestructure,this.registerEvents(),this.registerContainers()})}static getCollapseInstance(e){var t;return null!==(t=bootstrap_1.Collapse.getInstance(e))&&void 0!==t?t:new bootstrap_1.Collapse(e,{toggle:!1})}getContainer(){return this.container}isRestructuringAllowed(){return this.allowRestructure}registerEvents(){this.allowRestructure&&(this.registerSortable(),this.registerContainerDeleted()),this.registerToggleAll(),this.registerCreateNewContainer(),this.registerPanelToggle()}registerContainers(){const e=this.container.querySelectorAll(Selectors.sectionContainerSelector);for(let t of e)this.flexformContainerContainers.push(new FlexFormContainerContainer_1.default(this,t));this.updateToggleAllState()}getToggleAllButton(){return this.container.querySelector(Selectors.toggleAllSelector)}registerSortable(){new sortablejs_1.default(this.sectionContainer,{group:this.sectionContainer.id,handle:Selectors.sortContainerButtonSelector,onSort:this.updateSorting})}registerToggleAll(){new RegularEvent_1.default("click",e=>{const t="true"===e.target.dataset.expandAll,n=this.container.querySelectorAll(Selectors.sectionContentContainerSelector);for(let e of n)t?FlexFormSectionContainer.getCollapseInstance(e).show():FlexFormSectionContainer.getCollapseInstance(e).hide()}).bindTo(this.getToggleAllButton())}registerCreateNewContainer(){new RegularEvent_1.default("click",(e,t)=>{e.preventDefault(),this.createNewContainer(t.dataset)}).delegateTo(this.container,Selectors.addContainerSelector)}createNewContainer(dataset){new AjaxRequest_1.default(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:dataset.vanillauid,databaseRowUid:dataset.databaserowuid,command:dataset.command,tableName:dataset.tablename,fieldName:dataset.fieldname,recordTypeValue:dataset.recordtypevalue,dataStructureIdentifier:JSON.parse(dataset.datastructureidentifier),flexFormSheetName:dataset.flexformsheetname,flexFormFieldName:dataset.flexformfieldname,flexFormContainerName:dataset.flexformcontainername}).then(async response=>{const data=await response.resolve(),createdContainer=(new DOMParser).parseFromString(data.html,"text/html").body.firstElementChild;this.flexformContainerContainers.push(new FlexFormContainerContainer_1.default(this,createdContainer));const sectionContainer=document.querySelector(dataset.target);sectionContainer.insertAdjacentElement("beforeend",createdContainer),data.scriptItems instanceof Array&&data.scriptItems.length>0&&javaScriptHandler.processItems(data.scriptItems,!0),data.scriptCall&&data.scriptCall.length>0&&$.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&$.each(data.stylesheetFiles,(function(e,t){let n=document.createElement("link");n.rel="stylesheet",n.type="text/css",n.href=t,document.head.appendChild(n)})),this.updateToggleAllState(),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(sectionContainer)})}registerContainerDeleted(){new RegularEvent_1.default("formengine:flexform:container-deleted",e=>{const t=e.detail.containerId;this.flexformContainerContainers=this.flexformContainerContainers.filter(e=>e.getStatus().id!==t),FormEngine.Validation.validate(this.container),this.updateToggleAllState()}).bindTo(this.container)}registerPanelToggle(){["hide.bs.collapse","show.bs.collapse"].forEach(e=>{new RegularEvent_1.default(e,()=>{this.updateToggleAllState()}).delegateTo(this.container,Selectors.sectionContentContainerSelector)})}updateToggleAllState(){if(this.flexformContainerContainers.length>0){const e=this.flexformContainerContainers.find(Boolean);this.getToggleAllButton().dataset.expandAll=!0===e.getStatus().collapsed?"true":"false"}}}return FlexFormSectionContainer}));
\ 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