[TASK] Add addTop/removeTop row in backend layout wizard 70/51870/4
authorGeorg Ringer <georg.ringer@gmail.com>
Mon, 27 Feb 2017 07:37:21 +0000 (08:37 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Mon, 27 Feb 2017 17:30:09 +0000 (18:30 +0100)
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>
typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php
typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js

index 716a3bd..f1e0cfe 100644 (file)
@@ -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>';
index 669ad97..31e2c44 100644 (file)
@@ -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();
@@ -201,10 +229,34 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
        };
 
        /**
+        * 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;
                }