From 165f392adb37c0cf750e2287b4b15c8251d7ebd9 Mon Sep 17 00:00:00 2001
From: Georg Ringer <georg.ringer@gmail.com>
Date: Mon, 27 Feb 2017 08:37:21 +0100
Subject: [PATCH] [TASK] Add addTop/removeTop row in backend layout wizard
Improve the backend layout wizard by providing additional buttons to
add and remove rows at the top.
Resolves: #80009
Releases: master
Change-Id: I85b2361cc63431e59f64265091323b2c6f2cf2b9
Reviewed-on: https://review.typo3.org/51870
Reviewed-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: Josef Glatz <josef.glatz@typo3.org>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
---
.../Element/BackendLayoutWizardElement.php | 18 ++++-
.../Resources/Public/JavaScript/GridEditor.js | 72 ++++++++++++++++---
2 files changed, 78 insertions(+), 12 deletions(-)
diff --git a/typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php b/typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php
index 716a3bd2855a..f1e0cfea082a 100644
--- a/typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php
+++ b/typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php
@@ -69,6 +69,20 @@ class BackendLayoutWizardElement extends AbstractFormElement
$html[] = '/>';
$html[] = '<table class="grideditor table table-bordered">';
$html[] = '<tr>';
+ $html[] = '<td colspan="2" align="center">';
+ $html[] = '<div class="btn-group">';
+ $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-removerow-top" href="#"';
+ $html[] = ' title="' . htmlspecialchars($lang->getLL('grid_removeRow')) . '">';
+ $html[] = '<i class="fa fa-fw fa-arrow-down"></i>';
+ $html[] = '</a>';
+ $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-addrow-top" href="#"';
+ $html[] = ' title="' . htmlspecialchars($lang->getLL('grid_addRow')) . '">';
+ $html[] = '<i class="fa fa-fw fa-arrow-up"></i>';
+ $html[] = '</a>';
+ $html[] = '</div>';
+ $html[] = '</td>';
+ $html[] = '</tr>';
+ $html[] = '<tr>';
$html[] = '<td class="editor_cell">';
$html[] = '<div';
$html[] = ' id="editor"';
@@ -96,11 +110,11 @@ class BackendLayoutWizardElement extends AbstractFormElement
$html[] = '<tr>';
$html[] = '<td colspan="2" align="center">';
$html[] = '<div class="btn-group">';
- $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-addrow" href="#"';
+ $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-addrow-bottom" href="#"';
$html[] = ' title="' . htmlspecialchars($lang->getLL('grid_addRow')) . '">';
$html[] = '<i class="fa fa-fw fa-arrow-down"></i>';
$html[] = '</a>';
- $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-removerow" href="#"';
+ $html[] = '<a class="btn btn-default btn-sm t3js-grideditor-removerow-bottom" href="#"';
$html[] = ' title="' . htmlspecialchars($lang->getLL('grid_removeRow')) . '">';
$html[] = '<i class="fa fa-fw fa-arrow-up"></i>';
$html[] = '</a>';
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js b/typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js
index 669ad971193d..31e2c44d1116 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js
@@ -20,15 +20,17 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
/**
* The main ContextHelp object
*
- * @type {{selectorEditor: string, selectorAddColumn: string, selectorRemoveColumn: string, selectorAddRow: string, selectorRemoveRow: string, selectorLinkEditor: string, selectorLinkExpandRight: string, selectorLinkShrinkLeft: string, selectorLinkExpandDown: string, selectorLinkShrinkUp: string, selectorDocHeaderSave: string, selectorDocHeaderSaveClose: string, selectorConfigPreview: string, selectorConfigPreviewButton: string, colCount: number, rowCount: number, field: string, data: Array, nameLabel: string, columnLabel: string, targetElement: null}}
+ * @type {{selectorEditor: string, selectorAddColumn: string, selectorRemoveColumn: string, selectorAddRowTop: string, selectorRemoveRowTop: string, selectorAddRowBottom: string, selectorRemoveRowBottom: string, selectorLinkEditor: string, selectorLinkExpandRight: string, selectorLinkShrinkLeft: string, selectorLinkExpandDown: string, selectorLinkShrinkUp: string, selectorDocHeaderSave: string, selectorDocHeaderSaveClose: string, selectorConfigPreview: string, selectorConfigPreviewButton: string, colCount: number, rowCount: number, field: string, data: Array, nameLabel: string, columnLabel: string, targetElement: null}}
* @exports TYPO3/CMS/Backend/GridEditor
*/
var GridEditor = {
selectorEditor: '.t3js-grideditor',
selectorAddColumn: '.t3js-grideditor-addcolumn',
selectorRemoveColumn: '.t3js-grideditor-removecolumn',
- selectorAddRow: '.t3js-grideditor-addrow',
- selectorRemoveRow: '.t3js-grideditor-removerow',
+ selectorAddRowTop: '.t3js-grideditor-addrow-top',
+ selectorRemoveRowTop: '.t3js-grideditor-removerow-top',
+ selectorAddRowBottom: '.t3js-grideditor-addrow-bottom',
+ selectorRemoveRowBottom: '.t3js-grideditor-removerow-bottom',
selectorLinkEditor: '.t3js-grideditor-link-editor',
selectorLinkExpandRight: '.t3js-grideditor-link-expand-right',
selectorLinkShrinkLeft: '.t3js-grideditor-link-shrink-left',
@@ -76,15 +78,27 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
GridEditor.drawTable();
GridEditor.writeConfig(GridEditor.export2LayoutRecord());
});
- $(document).on('click', GridEditor.selectorAddRow, function(e) {
+ $(document).on('click', GridEditor.selectorAddRowTop, function (e) {
e.preventDefault();
- GridEditor.addRow();
+ GridEditor.addRowTop();
GridEditor.drawTable();
GridEditor.writeConfig(GridEditor.export2LayoutRecord());
});
- $(document).on('click', GridEditor.selectorRemoveRow, function(e) {
+ $(document).on('click', GridEditor.selectorAddRowBottom, function (e) {
e.preventDefault();
- GridEditor.removeRow();
+ GridEditor.addRowBottom();
+ GridEditor.drawTable();
+ GridEditor.writeConfig(GridEditor.export2LayoutRecord());
+ });
+ $(document).on('click', GridEditor.selectorRemoveRowTop, function (e) {
+ e.preventDefault();
+ GridEditor.removeRowTop();
+ GridEditor.drawTable();
+ GridEditor.writeConfig(GridEditor.export2LayoutRecord());
+ });
+ $(document).on('click', GridEditor.selectorRemoveRowBottom, function (e) {
+ e.preventDefault();
+ GridEditor.removeRowBottom();
GridEditor.drawTable();
GridEditor.writeConfig(GridEditor.export2LayoutRecord());
});
@@ -187,9 +201,23 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
};
/**
- * Add a new row
+ * Add a new row at the top
+ */
+ GridEditor.addRowTop = function () {
+ var newRow = [];
+ for (var i = 0; i < GridEditor.colCount; i++) {
+ var newCell = GridEditor.getNewCell();
+ newCell.name = i + 'x' + GridEditor.data.length;
+ newRow[i] = newCell;
+ }
+ GridEditor.data.unshift(newRow);
+ GridEditor.rowCount++;
+ };
+
+ /**
+ * Add a new row at the bottom
*/
- GridEditor.addRow = function() {
+ GridEditor.addRowBottom = function() {
var newRow = [];
for (var i = 0; i < GridEditor.colCount; i++) {
var newCell = GridEditor.getNewCell();
@@ -200,11 +228,35 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
GridEditor.rowCount++;
};
+ /**
+ * Removes the first row of the grid and adjusts all cells that might be effected
+ * by that change. (Removing colspans)
+ */
+ GridEditor.removeRowTop = function () {
+ if (GridEditor.rowCount <= 1) {
+ return false;
+ }
+ var newData = [];
+ for (var rowIndex = 1; rowIndex < GridEditor.rowCount; rowIndex++) {
+ newData.push(GridEditor.data[rowIndex]);
+ }
+
+ // fix rowspan in former last row
+ for (var colIndex = 0; colIndex < GridEditor.colCount; colIndex++) {
+ if (GridEditor.data[0][colIndex].spanned === 1) {
+ GridEditor.findUpperCellWidthRowspanAndDecreaseByOne(colIndex, 0);
+ }
+ }
+
+ GridEditor.data = newData;
+ GridEditor.rowCount--;
+ };
+
/**
* Removes the last row of the grid and adjusts all cells that might be effected
* by that change. (Removing colspans)
*/
- GridEditor.removeRow = function() {
+ GridEditor.removeRowBottom = function () {
if (GridEditor.rowCount <= 1) {
return false;
}
--
GitLab