TYPO3 v15 dev-main snapshot ()

Resources/Public/JavaScript/form-engine/container/flex-form-container-container.js

@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+import{Collapse as d}from"bootstrap";import p from"@typo3/core/security-utility.js";import f from"@typo3/backend/modal.js";import s from"@typo3/core/event/regular-event.js";import u from"@typo3/backend/severity.js";import g from"@typo3/backend/storage/client.js";import m from"@typo3/backend/form-engine.js";import C from"~labels/core.core";import a from"~labels/backend.alt_doc";var n;(function(r){r.actionFieldSelector=".t3js-flex-control-action",r.sectionContentContainerSelector=".t3js-flex-section-content",r.sectionContainerLabelSelector=".t3js-formengine-label",r.deleteContainerButtonSelector=".t3js-delete",r.contentPreviewSelector=".content-preview"})(n||(n={}));class l{constructor(e,t){this.securityUtility=new p,this.parentContainer=e,this.container=t,this.containerContent=t.querySelector(n.sectionContentContainerSelector),this.containerId=t.dataset.flexformContainerId,this.toggleKeyInLocalStorage=`formengine-flex-${e.getSectionContainer().id}-${this.containerId}-collapse`,this.panelButton=t.querySelector(":scope > .panel-heading .panel-button"),this.panelHeading=this.panelButton.closest(".panel-heading"),this.registerEvents()}static getCollapseInstance(e,t){return d.getInstance(e)??new d(e,{toggle:t})}getCollapseContent(){return this.containerContent}getStatus(){return{id:this.containerId,collapsed:this.panelButton.getAttribute("aria-expanded")==="false"}}async registerEvents(){this.parentContainer.isRestructuringAllowed()&&this.registerDelete(),this.registerPanelToggle(),await this.registerToggle(),this.registerPreviewUpdate()}registerDelete(){new s("click",()=>{const e=a.get("flexform.section.delete.title"),t=a.get("flexform.section.delete.message"),i=f.confirm(e,t,u.warning,[{text:a.get("buttons.confirm.delete_record.no"),active:!0,btnClass:"btn-default",name:"no"},{text:a.get("buttons.confirm.delete_record.yes"),btnClass:"btn-warning",name:"yes"}]);i.addEventListener("button.clicked",o=>{if(o.target.name==="yes"){const c=this.container.querySelector(n.actionFieldSelector);c.value="DELETE",this.container.appendChild(c),this.container.classList.add("t3-flex-section--deleted"),this.container.closest(".t3-form-field-container.t3-form-flex")?.querySelector(n.sectionContainerLabelSelector)?.classList.add("has-change"),new s("transitionend",()=>{this.container.classList.add("hidden");const h=new CustomEvent("formengine:flexform:container-deleted",{detail:{containerId:this.containerId}});this.parentContainer.getContainer().dispatchEvent(h)}).bindTo(this.container)}i.hideModal()})}).bindTo(this.container.querySelector(n.deleteContainerButtonSelector))}async registerToggle(){const e=(g.get(this.toggleKeyInLocalStorage)??"1")==="1";l.getCollapseInstance(this.containerContent,!e),await m.ready(),this.generatePreview()}registerPanelToggle(){["hide.bs.collapse","show.bs.collapse"].forEach(e=>{new s(e,t=>{if(t.target!==this.containerContent)return;const i=t.type==="hide.bs.collapse";g.set(this.toggleKeyInLocalStorage,i?"1":"0")}).bindTo(this.containerContent)})}registerPreviewUpdate(){["input","change"].forEach(e=>{new s(e,()=>{this.generatePreview()}).delegateTo(this.containerContent,'input[type="text"], textarea')})}generatePreview(){let e="";const t=this.containerContent.querySelectorAll('input[type="text"], textarea');for(const i of t){let o=this.securityUtility.stripHtml(i.value);o.length>50&&(o=o.substring(0,50)+"..."),e+=(e?" / ":"")+o}e===""&&(e="["+C.get("labels.no_title")+"]"),this.panelHeading.querySelector(n.contentPreviewSelector).textContent=e}}export{l as default};

Resources/Public/JavaScript/form-engine/container/flex-form-section-container.js

@@ -0,0 +1,13 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+import{Collapse as h}from"bootstrap";import C from"sortablejs";import g from"@typo3/core/ajax/ajax-request.js";import u from"@typo3/core/document-service.js";import m from"@typo3/backend/form-engine/container/flex-form-container-container.js";import l from"@typo3/backend/form-engine.js";import f from"@typo3/core/event/regular-event.js";import{JavaScriptItemProcessor as p}from"@typo3/core/java-script-item-processor.js";var o;(function(r){r.toggleAllSelector=".t3-form-flexsection-toggle",r.addContainerSelector=".t3js-flex-container-add",r.actionFieldSelector=".t3js-flex-control-action",r.sectionContainerSelector=".t3js-flex-section",r.sectionContentContainerSelector=".t3js-flex-section-content",r.sectionContainerLabelSelector=".t3js-formengine-label",r.sortContainerButtonSelector=".t3js-sortable-handle"})(o||(o={}));class c{constructor(e){this.allowRestructure=!1,this.flexformContainerContainers=[],this.updateSorting=t=>{this.container.querySelectorAll(o.actionFieldSelector).forEach((i,s)=>{i.value=s.toString()}),this.flexformContainerContainers.splice(t.newIndex,0,this.flexformContainerContainers.splice(t.oldIndex,1)[0])},u.ready().then(t=>{this.container=t.getElementById(e),this.sectionContainer=this.container.querySelector(this.container.dataset.section),this.allowRestructure=this.sectionContainer.dataset.t3FlexAllowRestructure==="1",this.registerEvents(),this.registerContainers()})}static getCollapseInstance(e){return h.getInstance(e)??new h(e,{toggle:!1})}getContainer(){return this.container}getSectionContainer(){return this.sectionContainer}isRestructuringAllowed(){return this.allowRestructure}registerEvents(){this.allowRestructure&&(this.registerSortable(),this.registerContainerDeleted()),this.registerToggleAll(),this.registerCreateNewContainer()}registerContainers(){const e=this.container.querySelectorAll(o.sectionContainerSelector);for(const t of e)this.flexformContainerContainers.push(new m(this,t))}getToggleAllButton(){return this.container.querySelector(o.toggleAllSelector)}registerSortable(){new C(this.sectionContainer,{group:this.sectionContainer.id,handle:o.sortContainerButtonSelector,onSort:this.updateSorting})}registerToggleAll(){new f("click",()=>{const e=this.flexformContainerContainers.some(t=>t.getStatus().collapsed);for(const t of this.flexformContainerContainers){const n=t.getCollapseContent();n!==null&&(e?c.getCollapseInstance(n).show():c.getCollapseInstance(n).hide())}}).bindTo(this.getToggleAllButton())}registerCreateNewContainer(){new f("click",(e,t)=>{e.preventDefault(),this.createNewContainer(t.dataset)}).delegateTo(this.container,o.addContainerSelector)}createNewContainer(e){new g(TYPO3.settings.ajaxUrls.record_flex_container_add).post({vanillaUid:e.vanillauid,databaseRowUid:e.databaserowuid,command:e.command,tableName:e.tablename,fieldName:e.fieldname,recordTypeValue:e.recordtypevalue,flexFormSheetName:e.flexformsheetname,flexFormFieldName:e.flexformfieldname,flexFormContainerName:e.flexformcontainername}).then(async t=>{const n=await t.resolve(),i=new DOMParser().parseFromString(n.html,"text/html").body.firstElementChild;this.flexformContainerContainers.push(new m(this,i));const s=document.querySelector(e.target);if(s.insertAdjacentElement("beforeend",i),n.scriptItems instanceof Array&&n.scriptItems.length>0&&new p().processItems(n.scriptItems),n.stylesheetFiles&&n.stylesheetFiles.length>0)for(const d of n.stylesheetFiles){const a=document.createElement("link");a.rel="stylesheet",a.type="text/css",a.href=d,document.head.appendChild(a)}l.reinitialize(),l.Validation.initializeInputFields(),l.Validation.validate(s),this.container.querySelector(o.sectionContainerLabelSelector)?.classList.add("has-change")})}registerContainerDeleted(){new f("formengine:flexform:container-deleted",e=>{const t=e.detail.containerId;this.flexformContainerContainers=this.flexformContainerContainers.filter(n=>n.getStatus().id!==t),l.Validation.validate(this.container)}).bindTo(this.container)}}export{c as default};