diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Element/TableWizardElement.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Element/TableWizardElement.ts
index c6d4a18c34814356b5c93dea6b844e8180810310..11bf2fa016860e7c5a24330e6d56af79f7a5b717 100644
--- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Element/TableWizardElement.ts
+++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Element/TableWizardElement.ts
@@ -11,10 +11,13 @@
* The TYPO3 project - inspiring people to share!
*/
-import {html, LitElement, TemplateResult} from 'lit';
+import {html, LitElement, TemplateResult, render} from 'lit';
import {customElement, property} from 'lit/decorators';
import {lll} from 'TYPO3/CMS/Core/lit-helper';
import 'TYPO3/CMS/Backend/Element/IconElement';
+import Severity = require('TYPO3/CMS/Backend/Severity');
+import Modal = require('TYPO3/CMS/Backend/Modal');
+import {SeverityEnum} from 'TYPO3/CMS/Backend/Enum/Severity';
/**
* Module: TYPO3/CMS/Backend/Element/TableWizardElement
@@ -165,6 +168,10 @@ export class TableWizardElement extends LitElement {
@click="${(evt: Event) => this.toggleType(evt)}">
<typo3-backend-icon identifier="${this.type === 'input' ? 'actions-chevron-expand' : 'actions-chevron-contract'}" size="small"></typo3-backend-icon>
</button>
+ <button class="btn btn-default" type="button" title="${lll('table_setCount')}"
+ @click="${(evt: Event) => this.showTableConfigurationModal(evt)}">
+ <span class="t3-icon fa fa-fw fa-plus"></span>
+ </button>
</span>
`;
}
@@ -234,4 +241,97 @@ export class TableWizardElement extends LitElement {
</span>
`;
}
+
+ private showTableConfigurationModal(evt: Event): void {
+ const lastColIndex: number = this.firstRow.length;
+ const lastRowIndex: number = this.table.length;
+ const initRowValue: number = lastRowIndex || 1;
+ const initTableValue: number = lastColIndex || 1;
+
+ Modal.advanced({
+ content: '', // Callback is used to fill in content
+ title: lll('table_setCountHeadline'),
+ severity: SeverityEnum.notice,
+ size: Modal.sizes.small,
+ buttons: [
+ {
+ text: lll('button.close') || 'Close',
+ active: true,
+ btnClass: 'btn-default',
+ name: 'cancel',
+ trigger: (): void => Modal.dismiss(),
+ },
+ {
+ text: lll('table_buttonApply') || 'Apply',
+ btnClass: 'btn-' + Severity.getCssClass(SeverityEnum.info),
+ name: 'apply',
+ trigger: (): void => {
+ const rows: HTMLInputElement = Modal.currentModal[0].querySelector('#t3js-expand-rows');
+ const cols: HTMLInputElement = Modal.currentModal[0].querySelector('#t3js-expand-cols');
+
+ if (rows === null || cols === null) {
+ return;
+ }
+
+ if (rows.checkValidity() && cols.checkValidity()) {
+ const modifyRows: number = Number(rows.value) - lastRowIndex;
+ const modifyCols: number = Number(cols.value) - lastColIndex;
+ this.setColAndRowCount(evt, modifyCols, modifyRows);
+ Modal.dismiss();
+ } else {
+ rows.reportValidity();
+ cols.reportValidity();
+ }
+ }
+ }
+ ],
+ callback: (currentModal: HTMLCollection): void => {
+ render(
+ html`
+ <div class="form-group ">
+ <label>${lll('table_rowCount')}</label>
+ <input id="t3js-expand-rows" class="form-control" type="number" min="1" required value="${initRowValue}">
+ </div>
+ <div class="form-group ">
+ <label>${lll('table_colCount')}</label>
+ <input id="t3js-expand-cols" class="form-control" type="number" min="1" required value="${initTableValue}">
+ </div>
+ `,
+ currentModal[0].querySelector('.t3js-modal-body') as HTMLElement
+ );
+ }
+ });
+ }
+
+ /**
+ * Allow user to set a specific row/col count
+ *
+ * @param evt
+ * @param colCount
+ * @param rowCount
+ * @private
+ */
+ private setColAndRowCount(evt: Event, colCount: number, rowCount: number) {
+ const lastRowIndex: number = this.table.length;
+
+ if (rowCount > 0) {
+ for (let count = 0; count < rowCount; count++) {
+ this.appendRow(evt, lastRowIndex);
+ }
+ } else {
+ for (let count = 0; count < Math.abs(rowCount); count++) {
+ this.removeRow(evt, this.table.length - 1);
+ }
+ }
+
+ if (colCount > 0) {
+ for (let count = 0; count < colCount; count++) {
+ this.appendColumn(evt, colCount);
+ }
+ } else {
+ for (let count = 0; count < Math.abs(colCount); count++) {
+ this.removeColumn(evt, this.firstRow.length - 1);
+ }
+ }
+ }
}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Element/TableWizardElement.js b/typo3/sysext/backend/Resources/Public/JavaScript/Element/TableWizardElement.js
index 811dfb03189aa4a43f9524c917d6504464344593..0b7b9f8f446265c6932b837c9f731af527a93062 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Element/TableWizardElement.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Element/TableWizardElement.js
@@ -10,7 +10,7 @@
*
* The TYPO3 project - inspiring people to share!
*/
-var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,l):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,l,a);else for(var i=t.length-1;i>=0;i--)(s=t[i])&&(o=(n<3?s(o):n>3?s(e,l,o):s(e,l))||o);return n>3&&o&&Object.defineProperty(e,l,o),o};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper","TYPO3/CMS/Backend/Element/IconElement"],(function(t,e,l,a,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TableWizardElement=void 0;let n=class extends l.LitElement{constructor(){super(...arguments),this.type="textarea",this.table=[],this.appendRows=1,this.l10n={}}get firstRow(){return this.table[0]||[]}createRenderRoot(){return this}render(){return this.renderTemplate()}provideMinimalTable(){0!==this.table.length&&0!==this.firstRow.length||(this.table=[[""]])}modifyTable(t,e,l){const a=t.target;this.table[e][l]=a.value,this.requestUpdate()}toggleType(t){this.type="input"===this.type?"textarea":"input"}moveColumn(t,e,l){this.table=this.table.map(t=>{const a=t.splice(e,1);return t.splice(l,0,...a),t}),this.requestUpdate()}appendColumn(t,e){this.table=this.table.map(t=>(t.splice(e+1,0,""),t)),this.requestUpdate()}removeColumn(t,e){this.table=this.table.map(t=>(t.splice(e,1),t)),this.requestUpdate()}moveRow(t,e,l){const a=this.table.splice(e,1);this.table.splice(l,0,...a),this.requestUpdate()}appendRow(t,e){let l=this.firstRow.concat().fill(""),a=new Array(this.appendRows).fill(l);this.table.splice(e+1,0,...a),this.requestUpdate()}removeRow(t,e){this.table.splice(e,1),this.requestUpdate()}renderTemplate(){const t=Object.keys(this.firstRow).map(t=>parseInt(t,10)),e=t[t.length-1],a=this.table.length-1;return l.html`
+var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length,o=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,l):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,l,a);else for(var i=t.length-1;i>=0;i--)(s=t[i])&&(o=(n<3?s(o):n>3?s(e,l,o):s(e,l))||o);return n>3&&o&&Object.defineProperty(e,l,o),o};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/lit-helper","TYPO3/CMS/Backend/Severity","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Backend/Enum/Severity","TYPO3/CMS/Backend/Element/IconElement"],(function(t,e,l,a,s,n,o,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TableWizardElement=void 0;let r=class extends l.LitElement{constructor(){super(...arguments),this.type="textarea",this.table=[],this.appendRows=1,this.l10n={}}get firstRow(){return this.table[0]||[]}createRenderRoot(){return this}render(){return this.renderTemplate()}provideMinimalTable(){0!==this.table.length&&0!==this.firstRow.length||(this.table=[[""]])}modifyTable(t,e,l){const a=t.target;this.table[e][l]=a.value,this.requestUpdate()}toggleType(t){this.type="input"===this.type?"textarea":"input"}moveColumn(t,e,l){this.table=this.table.map(t=>{const a=t.splice(e,1);return t.splice(l,0,...a),t}),this.requestUpdate()}appendColumn(t,e){this.table=this.table.map(t=>(t.splice(e+1,0,""),t)),this.requestUpdate()}removeColumn(t,e){this.table=this.table.map(t=>(t.splice(e,1),t)),this.requestUpdate()}moveRow(t,e,l){const a=this.table.splice(e,1);this.table.splice(l,0,...a),this.requestUpdate()}appendRow(t,e){let l=this.firstRow.concat().fill(""),a=new Array(this.appendRows).fill(l);this.table.splice(e+1,0,...a),this.requestUpdate()}removeRow(t,e){this.table.splice(e,1),this.requestUpdate()}renderTemplate(){const t=Object.keys(this.firstRow).map(t=>parseInt(t,10)),e=t[t.length-1],a=this.table.length-1;return l.html`
<style>
:host, typo3-backend-table-wizard { display: inline-block; }
</style>
@@ -46,6 +46,10 @@ var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length
@click="${t=>this.toggleType(t)}">
<typo3-backend-icon identifier="${"input"===this.type?"actions-chevron-expand":"actions-chevron-contract"}" size="small"></typo3-backend-icon>
</button>
+ <button class="btn btn-default" type="button" title="${s.lll("table_setCount")}"
+ @click="${t=>this.showTableConfigurationModal(t)}">
+ <span class="t3-icon fa fa-fw fa-plus"></span>
+ </button>
</span>
`}renderColButtons(t,e){const a={title:0===t?s.lll("table_end"):s.lll("table_left"),class:0===t?"double-right":"left",target:0===t?e:t-1},n={title:t===e?s.lll("table_start"):s.lll("table_right"),class:t===e?"double-left":"right",target:t===e?0:t+1};return l.html`
<span class="btn-group">
@@ -85,4 +89,13 @@ var __decorate=this&&this.__decorate||function(t,e,l,a){var s,n=arguments.length
<span class="t3-icon fa fa-fw fa-plus"></span>
</button>
</span>
- `}};__decorate([a.property({type:String})],n.prototype,"type",void 0),__decorate([a.property({type:Array})],n.prototype,"table",void 0),__decorate([a.property({type:Number,attribute:"append-rows"})],n.prototype,"appendRows",void 0),__decorate([a.property({type:Object})],n.prototype,"l10n",void 0),n=__decorate([a.customElement("typo3-backend-table-wizard")],n),e.TableWizardElement=n}));
\ No newline at end of file
+ `}showTableConfigurationModal(t){const e=this.firstRow.length,a=this.table.length,r=a||1,c=e||1;o.advanced({content:"",title:s.lll("table_setCountHeadline"),severity:i.SeverityEnum.notice,size:o.sizes.small,buttons:[{text:s.lll("button.close")||"Close",active:!0,btnClass:"btn-default",name:"cancel",trigger:()=>o.dismiss()},{text:s.lll("table_buttonApply")||"Apply",btnClass:"btn-"+n.getCssClass(i.SeverityEnum.info),name:"apply",trigger:()=>{const l=o.currentModal[0].querySelector("#t3js-expand-rows"),s=o.currentModal[0].querySelector("#t3js-expand-cols");if(null!==l&&null!==s)if(l.checkValidity()&&s.checkValidity()){const n=Number(l.value)-a,i=Number(s.value)-e;this.setColAndRowCount(t,i,n),o.dismiss()}else l.reportValidity(),s.reportValidity()}}],callback:t=>{l.render(l.html`
+ <div class="form-group ">
+ <label>${s.lll("table_rowCount")}</label>
+ <input id="t3js-expand-rows" class="form-control" type="number" min="1" required value="${r}">
+ </div>
+ <div class="form-group ">
+ <label>${s.lll("table_colCount")}</label>
+ <input id="t3js-expand-cols" class="form-control" type="number" min="1" required value="${c}">
+ </div>
+ `,t[0].querySelector(".t3js-modal-body"))}})}setColAndRowCount(t,e,l){const a=this.table.length;if(l>0)for(let e=0;e<l;e++)this.appendRow(t,a);else for(let e=0;e<Math.abs(l);e++)this.removeRow(t,this.table.length-1);if(e>0)for(let l=0;l<e;l++)this.appendColumn(t,e);else for(let l=0;l<Math.abs(e);l++)this.removeColumn(t,this.firstRow.length-1)}};__decorate([a.property({type:String})],r.prototype,"type",void 0),__decorate([a.property({type:Array})],r.prototype,"table",void 0),__decorate([a.property({type:Number,attribute:"append-rows"})],r.prototype,"appendRows",void 0),__decorate([a.property({type:Object})],r.prototype,"l10n",void 0),r=__decorate([a.customElement("typo3-backend-table-wizard")],r),e.TableWizardElement=r}));
\ No newline at end of file
diff --git a/typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf b/typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf
index 893c5e24d6f79310a838928b1300999bed5e2014..9e4f171593c0438dbc979287231b066a819f0cf6 100644
--- a/typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf
+++ b/typo3/sysext/core/Resources/Private/Language/locallang_wizards.xlf
@@ -81,6 +81,21 @@
<trans-unit id="table_noData" resname="table_noData">
<source>No table,field or uid given</source>
</trans-unit>
+ <trans-unit id="table_setCount" resname="table_setCount">
+ <source>Set row and column count</source>
+ </trans-unit>
+ <trans-unit id="table_colCount" resname="table_colCount">
+ <source>Column count</source>
+ </trans-unit>
+ <trans-unit id="table_rowCount" resname="table_rowCount">
+ <source>Row count</source>
+ </trans-unit>
+ <trans-unit id="table_setCountHeadline" resname="table_setCountHeadline">
+ <source>Change table size</source>
+ </trans-unit>
+ <trans-unit id="table_buttonApply" resname="table_buttonApply">
+ <source>Apply</source>
+ </trans-unit>
<trans-unit id="forms_title" resname="forms_title">
<source>Forms wizard</source>
</trans-unit>