[BUGFIX] Handle colspan and rowspan in backend layout wizard 97/47897/6
authorFrank Naegler <frank.naegler@typo3.org>
Mon, 25 Apr 2016 12:01:18 +0000 (14:01 +0200)
committerSusanne Moog <typo3@susannemoog.de>
Fri, 29 Apr 2016 18:26:38 +0000 (20:26 +0200)
This patch fix the handling of colspan and rowspan in backend layout wizard.

Resolves: #75910
Releases: master
Change-Id: Ib863d5a5f207c99f00d72f701579b40d255a1f70
Reviewed-on: https://review.typo3.org/47897
Reviewed-by: Markus Sommer <markussom@posteo.de>
Tested-by: Markus Sommer <markussom@posteo.de>
Reviewed-by: Susanne Moog <typo3@susannemoog.de>
Tested-by: Susanne Moog <typo3@susannemoog.de>
Build/Resources/Public/Less/TYPO3/_main_backend_layout_wizard.less
typo3/sysext/backend/Classes/View/Wizard/Element/BackendLayoutWizardElement.php
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/backend/Resources/Public/JavaScript/GridEditor.js

index 7761bf2..1516f78 100644 (file)
@@ -8,13 +8,15 @@
        }
 
        table.editor {
-               border-right: 1px gray dashed;
-               border-bottom: 1px gray dashed;
+               border: 0;
+               border-left: 1px @gray-light solid;
+               border-top: 1px @gray-light solid;
 
                td {
                        vertical-align: middle;
-                       border-top: 1px gray dashed;
-                       border-left: 1px gray dashed;
+                       border: 0;
+                       border-bottom: 1px @gray-light solid;
+                       border-right: 1px @gray-light solid;
                        text-align: center;
                        background-color: white;
                        min-height: 100px;
@@ -30,6 +32,7 @@
                height: 80px;
                position: relative;
                left: 50%;
+               margin-top: 30px;
                margin-left: -30px;
                opacity: 0.3;
        }
index fe395fb..f17b347 100644 (file)
@@ -119,7 +119,7 @@ class BackendLayoutWizardElement extends AbstractFormElement
     protected function init()
     {
         if (empty($this->data['databaseRow']['config'])) {
-            $rows = [[['colspan' => 1, 'rowspan' => 1, 'spanned' => false, 'name' => '']]];
+            $rows = [[['colspan' => 1, 'rowspan' => 1, 'spanned' => 0, 'name' => '0x0']]];
             $colCount = 1;
             $rowCount = 1;
         } else {
index 7583f5c..75160de 100644 (file)
@@ -11697,13 +11697,15 @@ span.warningboxheader {
   height: 100%;
 }
 .grideditor table.editor {
-  border-right: 1px gray dashed;
-  border-bottom: 1px gray dashed;
+  border: 0;
+  border-left: 1px #d7d7d7 solid;
+  border-top: 1px #d7d7d7 solid;
 }
 .grideditor table.editor td {
   vertical-align: middle;
-  border-top: 1px gray dashed;
-  border-left: 1px gray dashed;
+  border: 0;
+  border-bottom: 1px #d7d7d7 solid;
+  border-right: 1px #d7d7d7 solid;
   text-align: center;
   background-color: white;
   min-height: 100px;
@@ -11716,6 +11718,7 @@ span.warningboxheader {
   height: 80px;
   position: relative;
   left: 50%;
+  margin-top: 30px;
   margin-left: -30px;
   opacity: 0.3;
 }
index 619a426..669ad97 100644 (file)
@@ -44,7 +44,8 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                data: [],
                nameLabel: 'name',
                columnLabel: 'columen label',
-               targetElement: null
+               targetElement: null,
+               defaultCell: {spanned: 0, rowspan: 1, colspan: 1, name: '', colpos: ''}
        };
 
        /**
@@ -151,6 +152,14 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
        };
 
        /**
+        * Create a new cell from defaultCell
+        * @returns {Object}
+        */
+       GridEditor.getNewCell = function() {
+               return $.extend({}, GridEditor.defaultCell);
+       };
+
+       /**
         * write data back to hidden field
         *
         * @param data
@@ -183,7 +192,9 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
        GridEditor.addRow = function() {
                var newRow = [];
                for (var i = 0; i < GridEditor.colCount; i++) {
-                       newRow[i] = {spanned: false, rowspan: 1, colspan: 1};
+                       var newCell = GridEditor.getNewCell();
+                       newCell.name = i + 'x' + GridEditor.data.length;
+                       newRow[i] = newCell;
                }
                GridEditor.data.push(newRow);
                GridEditor.rowCount++;
@@ -204,7 +215,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
 
                // fix rowspan in former last row
                for (var colIndex = 0; colIndex < GridEditor.colCount; colIndex++) {
-                       if (GridEditor.data[GridEditor.rowCount - 1][colIndex].spanned === true) {
+                       if (GridEditor.data[GridEditor.rowCount - 1][colIndex].spanned === 1) {
                                GridEditor.findUpperCellWidthRowspanAndDecreaseByOne(colIndex, GridEditor.rowCount - 1);
                        }
                }
@@ -227,7 +238,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                        return false;
                }
 
-               if (upperCell.spanned === true) {
+               if (upperCell.spanned === 1) {
                        GridEditor.findUpperCellWidthRowspanAndDecreaseByOne(col, row - 1);
                } else {
                        if (upperCell.rowspan > 1) {
@@ -250,7 +261,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                        for (var colIndex = 0; colIndex < GridEditor.colCount - 1; colIndex++) {
                                newRow.push(GridEditor.data[rowIndex][colIndex]);
                        }
-                       if (GridEditor.data[rowIndex][GridEditor.colCount - 1].spanned === true) {
+                       if (GridEditor.data[rowIndex][GridEditor.colCount - 1].spanned === 1) {
                                GridEditor.findLeftCellWidthColspanAndDecreaseByOne(GridEditor.colCount - 1, rowIndex);
                        }
                        newData.push(newRow);
@@ -273,7 +284,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                        return false;
                }
 
-               if (leftCell.spanned === true) {
+               if (leftCell.spanned === 1) {
                        GridEditor.findLeftCellWidthColspanAndDecreaseByOne(col - 1, row);
                } else {
                        if (leftCell.colspan > 1) {
@@ -287,12 +298,9 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
         */
        GridEditor.addColumn = function() {
                for (var rowIndex = 0; rowIndex < GridEditor.rowCount; rowIndex++) {
-                       GridEditor.data[rowIndex].push({
-                               spanned: false,
-                               rowspan: 1,
-                               colspan: 1,
-                               name: GridEditor.colCount + 'x' + rowIndex
-                       });
+                       var newCell = GridEditor.getNewCell();
+                       newCell.name = GridEditor.colCount + 'x' + rowIndex;
+                       GridEditor.data[rowIndex].push(newCell);
                }
                GridEditor.colCount++;
        };
@@ -322,7 +330,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
 
                        for (col = 0; col < GridEditor.colCount; col++) {
                                var cell = GridEditor.data[row][col];
-                               if (cell.spanned === true) {
+                               if (cell.spanned === 1) {
                                        continue;
                                }
                                var $cell = $('<td>').css({
@@ -533,7 +541,10 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                if (row > GridEditor.rowCount - 1) {
                        return false;
                }
-               return GridEditor.data[row][col];
+               if (GridEditor.data.length > row-1 && GridEditor.data[row].length > col-1) {
+                       return GridEditor.data[row][col];
+               }
+               return false;
        };
 
        /**
@@ -555,13 +566,13 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                if (cell.rowspan > 1) {
                        for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
                                checkCell = GridEditor.getCell(col + cell.colspan, rowIndex);
-                               if (!checkCell || checkCell.spanned === true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
+                               if (!checkCell || checkCell.spanned === 1 || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                        return false;
                                }
                        }
                } else {
                        checkCell = GridEditor.getCell(col + cell.colspan, row);
-                       if (!checkCell || cell.spanned === true || checkCell.spanned === true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
+                       if (!checkCell || cell.spanned === 1 || checkCell.spanned === 1 || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                return false;
                        }
                }
@@ -587,13 +598,13 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                        // we have to check all cells on the right side for the complete colspan
                        for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
                                checkCell = GridEditor.getCell(colIndex, row + cell.rowspan);
-                               if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
+                               if (!checkCell || checkCell.spanned === 1 || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                        return false;
                                }
                        }
                } else {
                        checkCell = GridEditor.getCell(col, row + cell.rowspan);
-                       if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
+                       if (!checkCell || cell.spanned === 1 || checkCell.spanned === 1 || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                return false;
                        }
                }
@@ -639,7 +650,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                }
 
                for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
-                       GridEditor.data[rowIndex][col + cell.colspan].spanned = true;
+                       GridEditor.data[rowIndex][col + cell.colspan].spanned = 1;
                }
                cell.colspan += 1;
        };
@@ -658,7 +669,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                }
 
                for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
-                       GridEditor.data[row + cell.rowspan][colIndex].spanned = true;
+                       GridEditor.data[row + cell.rowspan][colIndex].spanned = 1;
                }
                cell.rowspan += 1;
        };
@@ -677,8 +688,9 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
                }
 
                cell.colspan -= 1;
+
                for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
-                       GridEditor.data[rowIndex][col + cell.colspan].spanned = false;
+                       GridEditor.data[rowIndex][col + cell.colspan].spanned = 0;
                }
        };
 
@@ -697,7 +709,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Modal', 'TYPO3/CMS/Backend/Severity', 'boot
 
                cell.rowspan -= 1;
                for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
-                       GridEditor.data[row + cell.rowspan][colIndex].spanned = false;
+                       GridEditor.data[row + cell.rowspan][colIndex].spanned = 0;
                }
        };