Commit b66d495e authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Richard Haeser

[BUGFIX] Hide deleted flexform section in DOM

If a Flexform section gets deleted, the container must be hidden in DOM
and not deleted, as the underlying DataHandler code relies on getting
the field submitted.

This patch is less intrusive as possible to allow a backport to stable
releases. Flexforms needs a major refactoring and should act similar to
IRRE, but this can go into the master branch only.

Resolves: #93061
Releases: master, 10.4
Change-Id: I69dfdd6f2029547d600939f23e21b03abd45042d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67369Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: default avatarMartin Kutschker <mkutschker-typo3@yahoo.com>
Tested-by: default avatarRichard Haeser <richard@richardhaeser.com>
Reviewed-by: default avatarMartin Kutschker <mkutschker-typo3@yahoo.com>
Reviewed-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
Reviewed-by: default avatarRichard Haeser <richard@richardhaeser.com>
parent 6d742dc3
......@@ -127,7 +127,7 @@ class FlexFormElement {
$section.addClass('t3-flex-section--deleted');
$section.on('transitionend', (): void => {
$section.remove();
$section.hide();
});
FormEngine.Validation.validate(this.$el.get(0));
......
......@@ -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","jquery","Sortable","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Backend/Modal"],(function(require,exports,jquery_1,Sortable,AjaxRequest,FormEngine,Modal){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),jquery_1=__importDefault(jquery_1);class FlexFormElement{constructor(e,t){this.el=e;const o=this;this.el=e,this.$el=jquery_1.default(e);return void 0!==this.$el.data("TYPO3.FormEngine.FlexFormElement")&&this.$el.removeData("TYPO3.FormEngine.FlexFormElement"),this.$el.data("TYPO3.FormEngine.FlexFormElement",this),t||(t=FlexFormElement.defaults),t.allowRestructure=this.$el.data("t3-flex-allow-restructure"),t.flexformId=this.$el.attr("id"),this.opts=jquery_1.default.extend({},FlexFormElement.defaults,t),this.initializeEvents(),this.$el.find(this.opts.sectionSelector).each((function(){o.generateSectionPreview(jquery_1.default(this))})),this}initializeEvents(){return this.$el.prev(this.opts.flexFormToggleAllSectionsSelector).off("click").on("click",()=>{this.$el.find(this.opts.sectionToggleButtonSelector).trigger("click")}),this.opts.allowRestructure&&(this.createSortable(),this.$el.off("click").on("click",this.opts.deleteIconSelector,e=>{e.preventDefault();const t=TYPO3.lang["flexform.section.delete.title"]||"Are you sure?",o=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this section?",n=Modal.confirm(t,o);n.on("confirm.button.cancel",()=>{Modal.currentModal.trigger("modal-dismiss")}),n.on("confirm.button.ok",()=>{const t=jquery_1.default(e.target).closest(this.opts.sectionSelector);t.find(this.opts.sectionActionInputFieldSelector).detach().appendTo(t.parent()).val("DELETE"),t.addClass("t3-flex-section--deleted"),t.on("transitionend",()=>{t.remove()}),FormEngine.Validation.validate(this.$el.get(0)),Modal.currentModal.trigger("modal-dismiss")})}),this.$el.on("click",this.opts.sectionToggleButtonSelector,e=>{e.preventDefault();const t=jquery_1.default(e.currentTarget).closest(this.opts.sectionSelector);this.toggleSection(t)}).on("click",this.opts.sectionToggleButtonSelector+" .form-irre-header-control",(function(e){e.stopPropagation()}))),this}createSortable(){new Sortable(this.el,{group:this.el.id,handle:".t3js-sortable-handle",onSort:()=>{this.setActionStatus(),jquery_1.default(document).trigger("flexform:sorting-changed")}})}setActionStatus(){this.$el.find(this.opts.sectionSelector+" "+this.opts.sectionActionInputFieldSelector).each((function(e){this.value=String(e)}))}toggleSection(e){const t=e.find(this.opts.sectionContentSelector);t.toggle(),t.is(":visible")?(e.find(this.opts.sectionToggleIconOpenSelector).show(),e.find(this.opts.sectionToggleIconCloseSelector).hide(),e.find(this.opts.sectionToggleInputFieldSelector).val(0)):(e.find(this.opts.sectionToggleIconOpenSelector).hide(),e.find(this.opts.sectionToggleIconCloseSelector).show(),e.find(this.opts.sectionToggleInputFieldSelector).val(1)),this.generateSectionPreview(e)}generateSectionPreview(e){const t=e.find(this.opts.sectionContentSelector);let o="";t.is(":visible")||t.find("input[type=text], textarea").each((function(){let e=jquery_1.default(jquery_1.default.parseHTML(jquery_1.default(this).val())).text();e.length>50&&(e=e.substring(0,50)+"..."),o+=(o?" / ":"")+e})),0===e.find(this.opts.sectionHeaderPreviewSelector).length&&e.find(this.opts.sectionHeaderSelector).find(".t3js-record-title").parent().append('<span class="'+this.opts.sectionHeaderPreviewSelector.replace(/\./,"")+'"></span>'),e.find(this.opts.sectionHeaderPreviewSelector).text(o)}}FlexFormElement.defaults={deleteIconSelector:".t3js-delete",sectionSelector:".t3js-flex-section",sectionContentSelector:".t3js-flex-section-content",sectionHeaderSelector:".t3js-flex-section-header",sectionHeaderPreviewSelector:".t3js-flex-section-header-preview",sectionActionInputFieldSelector:".t3js-flex-control-action",sectionToggleInputFieldSelector:".t3js-flex-control-toggle",sectionToggleIconOpenSelector:".t3js-flex-control-toggle-icon-open",sectionToggleIconCloseSelector:".t3js-flex-control-toggle-icon-close",sectionToggleButtonSelector:'[data-toggle="formengine-flex"]',flexFormToggleAllSectionsSelector:".t3js-form-field-toggle-flexsection",sectionDeletedClass:"t3js-flex-section-deleted",allowRestructure:!1,flexformId:!1},jquery_1.default.fn.t3FormEngineFlexFormElement=function(e){return this.each((function(){new FlexFormElement(this,e)}))},jquery_1.default((function(){jquery_1.default(".t3-flex-container").t3FormEngineFlexFormElement(),jquery_1.default(document).on("click",".t3js-flex-container-add",(function(e){const me=jquery_1.default(this);e.preventDefault(),new AjaxRequest(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:me.data("vanillauid"),databaseRowUid:me.data("databaserowuid"),command:me.data("command"),tableName:me.data("tablename"),fieldName:me.data("fieldname"),recordTypeValue:me.data("recordtypevalue"),dataStructureIdentifier:me.data("datastructureidentifier"),flexFormSheetName:me.data("flexformsheetname"),flexFormFieldName:me.data("flexformfieldname"),flexFormContainerName:me.data("flexformcontainername")}).then(async response=>{const data=await response.resolve(),flexContainer=me.closest(".t3-form-field-container").find(".t3-flex-container");flexContainer.append(data.html),flexContainer.t3FormEngineFlexFormElement(),data.scriptCall&&data.scriptCall.length>0&&jquery_1.default.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&jquery_1.default.each(data.stylesheetFiles,(function(e,t){let o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href=t,document.head.appendChild(o)})),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(flexContainer.get(0))})}))}))}));
\ No newline at end of file
var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","Sortable","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Backend/FormEngine","TYPO3/CMS/Backend/Modal"],(function(require,exports,jquery_1,Sortable,AjaxRequest,FormEngine,Modal){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),jquery_1=__importDefault(jquery_1);class FlexFormElement{constructor(e,t){this.el=e;const o=this;this.el=e,this.$el=jquery_1.default(e);return void 0!==this.$el.data("TYPO3.FormEngine.FlexFormElement")&&this.$el.removeData("TYPO3.FormEngine.FlexFormElement"),this.$el.data("TYPO3.FormEngine.FlexFormElement",this),t||(t=FlexFormElement.defaults),t.allowRestructure=this.$el.data("t3-flex-allow-restructure"),t.flexformId=this.$el.attr("id"),this.opts=jquery_1.default.extend({},FlexFormElement.defaults,t),this.initializeEvents(),this.$el.find(this.opts.sectionSelector).each((function(){o.generateSectionPreview(jquery_1.default(this))})),this}initializeEvents(){return this.$el.prev(this.opts.flexFormToggleAllSectionsSelector).off("click").on("click",()=>{this.$el.find(this.opts.sectionToggleButtonSelector).trigger("click")}),this.opts.allowRestructure&&(this.createSortable(),this.$el.off("click").on("click",this.opts.deleteIconSelector,e=>{e.preventDefault();const t=TYPO3.lang["flexform.section.delete.title"]||"Are you sure?",o=TYPO3.lang["flexform.section.delete.message"]||"Are you sure you want to delete this section?",n=Modal.confirm(t,o);n.on("confirm.button.cancel",()=>{Modal.currentModal.trigger("modal-dismiss")}),n.on("confirm.button.ok",()=>{const t=jquery_1.default(e.target).closest(this.opts.sectionSelector);t.find(this.opts.sectionActionInputFieldSelector).detach().appendTo(t.parent()).val("DELETE"),t.addClass("t3-flex-section--deleted"),t.on("transitionend",()=>{t.hide()}),FormEngine.Validation.validate(this.$el.get(0)),Modal.currentModal.trigger("modal-dismiss")})}),this.$el.on("click",this.opts.sectionToggleButtonSelector,e=>{e.preventDefault();const t=jquery_1.default(e.currentTarget).closest(this.opts.sectionSelector);this.toggleSection(t)}).on("click",this.opts.sectionToggleButtonSelector+" .form-irre-header-control",(function(e){e.stopPropagation()}))),this}createSortable(){new Sortable(this.el,{group:this.el.id,handle:".t3js-sortable-handle",onSort:()=>{this.setActionStatus(),jquery_1.default(document).trigger("flexform:sorting-changed")}})}setActionStatus(){this.$el.find(this.opts.sectionSelector+" "+this.opts.sectionActionInputFieldSelector).each((function(e){this.value=String(e)}))}toggleSection(e){const t=e.find(this.opts.sectionContentSelector);t.toggle(),t.is(":visible")?(e.find(this.opts.sectionToggleIconOpenSelector).show(),e.find(this.opts.sectionToggleIconCloseSelector).hide(),e.find(this.opts.sectionToggleInputFieldSelector).val(0)):(e.find(this.opts.sectionToggleIconOpenSelector).hide(),e.find(this.opts.sectionToggleIconCloseSelector).show(),e.find(this.opts.sectionToggleInputFieldSelector).val(1)),this.generateSectionPreview(e)}generateSectionPreview(e){const t=e.find(this.opts.sectionContentSelector);let o="";t.is(":visible")||t.find("input[type=text], textarea").each((function(){let e=jquery_1.default(jquery_1.default.parseHTML(jquery_1.default(this).val())).text();e.length>50&&(e=e.substring(0,50)+"..."),o+=(o?" / ":"")+e})),0===e.find(this.opts.sectionHeaderPreviewSelector).length&&e.find(this.opts.sectionHeaderSelector).find(".t3js-record-title").parent().append('<span class="'+this.opts.sectionHeaderPreviewSelector.replace(/\./,"")+'"></span>'),e.find(this.opts.sectionHeaderPreviewSelector).text(o)}}FlexFormElement.defaults={deleteIconSelector:".t3js-delete",sectionSelector:".t3js-flex-section",sectionContentSelector:".t3js-flex-section-content",sectionHeaderSelector:".t3js-flex-section-header",sectionHeaderPreviewSelector:".t3js-flex-section-header-preview",sectionActionInputFieldSelector:".t3js-flex-control-action",sectionToggleInputFieldSelector:".t3js-flex-control-toggle",sectionToggleIconOpenSelector:".t3js-flex-control-toggle-icon-open",sectionToggleIconCloseSelector:".t3js-flex-control-toggle-icon-close",sectionToggleButtonSelector:'[data-toggle="formengine-flex"]',flexFormToggleAllSectionsSelector:".t3js-form-field-toggle-flexsection",sectionDeletedClass:"t3js-flex-section-deleted",allowRestructure:!1,flexformId:!1},jquery_1.default.fn.t3FormEngineFlexFormElement=function(e){return this.each((function(){new FlexFormElement(this,e)}))},jquery_1.default((function(){jquery_1.default(".t3-flex-container").t3FormEngineFlexFormElement(),jquery_1.default(document).on("click",".t3js-flex-container-add",(function(e){const me=jquery_1.default(this);e.preventDefault(),new AjaxRequest(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:me.data("vanillauid"),databaseRowUid:me.data("databaserowuid"),command:me.data("command"),tableName:me.data("tablename"),fieldName:me.data("fieldname"),recordTypeValue:me.data("recordtypevalue"),dataStructureIdentifier:me.data("datastructureidentifier"),flexFormSheetName:me.data("flexformsheetname"),flexFormFieldName:me.data("flexformfieldname"),flexFormContainerName:me.data("flexformcontainername")}).then(async response=>{const data=await response.resolve(),flexContainer=me.closest(".t3-form-field-container").find(".t3-flex-container");flexContainer.append(data.html),flexContainer.t3FormEngineFlexFormElement(),data.scriptCall&&data.scriptCall.length>0&&jquery_1.default.each(data.scriptCall,(function(index,value){eval(value)})),data.stylesheetFiles&&data.stylesheetFiles.length>0&&jquery_1.default.each(data.stylesheetFiles,(function(e,t){let o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href=t,document.head.appendChild(o)})),FormEngine.reinitialize(),FormEngine.Validation.initializeInputFields(),FormEngine.Validation.validate(flexContainer.get(0))})}))}))}));
\ No newline at end of file
Markdown is supported
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