Fixed issue #16986: Grid wizard miss tooltips and localization
authorSteffen Kamper <info@sk-typo3.de>
Wed, 12 Jan 2011 17:02:32 +0000 (17:02 +0000)
committerSteffen Kamper <info@sk-typo3.de>
Wed, 12 Jan 2011 17:02:32 +0000 (17:02 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@10043 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/cms/layout/res/grideditor.js
typo3/sysext/cms/layout/res/t3grid-editor-down.png
typo3/sysext/cms/layout/res/t3grid-editor-left.png
typo3/sysext/cms/layout/res/t3grid-editor-right.png
typo3/sysext/cms/layout/res/t3grid-editor-up.png
typo3/sysext/cms/layout/wizard_be_layout.php
typo3/sysext/lang/locallang_wizards.xml

index ff79cf8..0f3075e 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2011-01-12  Steffen Kamper  <steffen@typo3.org>
+
+       * Fixed issue #16986: Grid wizard miss tooltips and localization
+
 2011-01-12  Ingo Renner  <ingo@typo3.org>
 
        * Fixed issue #16985: Rename Sysfolder to Folder
index 2cf60be..679db0a 100644 (file)
@@ -8,13 +8,7 @@
 Ext.namespace('TYPO3.Backend.t3Grid');
 
 TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
-       /*
-       colCount: 0,
-       rowCount: 0,
-       data: [],
-       nameLabel: '',
-       columnLabel: '',
-       */
+
        constructor: function(config) {
 
                config = Ext.apply({
@@ -35,7 +29,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
        addRow: function() {
                var newRow = [];
                for (var i = 0; i < this.colCount; i++) {
-                       newRow[i] =  {spanned:false,rowspan:1,colspan:1};
+                       newRow[i] = {spanned:false,rowspan:1,colspan:1};
                }
                this.data.push(newRow);
                this.rowCount++;
@@ -50,14 +44,14 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
        removeRow: function() {
                if (this.rowCount <= 1) return false;
                var newData = [];
-               for (var rowIndex = 0; rowIndex < this.rowCount-1; rowIndex++) {
+               for (var rowIndex = 0; rowIndex < this.rowCount - 1; rowIndex++) {
                        newData.push(this.data[rowIndex]);
                }
 
-                       // fix rowspan in former last row
+               // fix rowspan in former last row
                for (var colIndex = 0; colIndex < this.colCount; colIndex++) {
-                       if (this.data[this.rowCount-1][colIndex].spanned == true) {
-                               this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex,this.rowCount-1);
+                       if (this.data[this.rowCount - 1][colIndex].spanned == true) {
+                               this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex, this.rowCount - 1);
                        }
                }
 
@@ -74,15 +68,15 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * @param row integer
         * @return void
         */
-       findUpperCellWidthRowspanAndDecreaseByOne: function(col,row) {
-               var upperCell = this.getCell(col, row-1);
+       findUpperCellWidthRowspanAndDecreaseByOne: function(col, row) {
+               var upperCell = this.getCell(col, row - 1);
                if (!upperCell) return false;
 
                if (upperCell.spanned == true) {
-                       this.findUpperCellWidthRowspanAndDecreaseByOne(col, row-1);
+                       this.findUpperCellWidthRowspanAndDecreaseByOne(col, row - 1);
                } else {
                        if (upperCell.rowspan > 1) {
-                               this.removeRowspan(col, row-1);
+                               this.removeRowspan(col, row - 1);
                        }
                }
        },
@@ -98,11 +92,11 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
 
                for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) {
                        var newRow = [];
-                       for (colIndex = 0; colIndex < this.colCount-1; colIndex++) {
+                       for (colIndex = 0; colIndex < this.colCount - 1; colIndex++) {
                                newRow.push(this.data[rowIndex][colIndex]);
                        }
-                       if (this.data[rowIndex][this.colCount-1].spanned == true) {
-                               this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount-1, rowIndex);
+                       if (this.data[rowIndex][this.colCount - 1].spanned == true) {
+                               this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount - 1, rowIndex);
                        }
                        newData.push(newRow);
                }
@@ -119,15 +113,15 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * @param row integer
         * @return void
         */
-       findLeftCellWidthColspanAndDecreaseByOne: function(col,row) {
-               var leftCell = this.getCell(col-1, row);
+       findLeftCellWidthColspanAndDecreaseByOne: function(col, row) {
+               var leftCell = this.getCell(col - 1, row);
                if (!leftCell) return false;
 
                if (leftCell.spanned == true) {
-                       this.findLeftCellWidthColspanAndDecreaseByOne(col-1, row);
+                       this.findLeftCellWidthColspanAndDecreaseByOne(col - 1, row);
                } else {
                        if (leftCell.colspan > 1) {
-                               this.removeColspan(col-1, row);
+                               this.removeColspan(col - 1, row);
                        }
                }
        },
@@ -139,7 +133,12 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         */
        addColumn: function() {
                for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) {
-                       this.data[rowIndex].push({spanned:false,rowspan:1,colspan:1,name:this.colCount+'x'+rowIndex});
+                       this.data[rowIndex].push({
+                               spanned: false,
+                               rowspan: 1,
+                               colspan: 1,
+                               name: this.colCount + 'x' + rowIndex
+                       });
                }
                this.colCount++;
        },
@@ -152,11 +151,27 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         */
        drawTable: function() {
                var domHelper = Ext.DomHelper;
-               var newTable = {tag:'table',children:[],id:'base',border:'0',width:'100%',height:'100%','class':'editor',cellspacing:'0',cellpadding:'0'};
-
-               var colgroups = {tag:'colgroup',children:[]};
+               var newTable = {
+                       tag: 'table',
+                       children: [],
+                       id: 'base',
+                       border: '0',
+                       width: '100%',
+                       height: '100%',
+                       class: 'editor',
+                       cellspacing: '0',
+                       cellpadding: '0'
+               };
+
+               var colgroups = {
+                       tag: 'colgroup',
+                       children: []
+               };
                for (var col = 0; col < this.colCount; col++) {
-                       colgroups.children.push({tag:'col',style:'width:'+parseInt(100/this.colCount)+'%'});
+                       colgroups.children.push({
+                               tag: 'col',
+                               style: 'width:' + parseInt(100 / this.colCount, 10) + '%'
+                       });
                }
                newTable.children.push(colgroups);
 
@@ -173,588 +188,35 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                                }
 
 
-                               var cellHtml = '<div class="cell_container"><a class="link_editor" id="e_'+col+'_'+row+'" href="#"><!-- --></a>';
-                               if (this.cellCanSpanRight(col, row)) cellHtml += '<a href="#" id="r_'+col+'_'+row+'" class="link_expand_right"><!-- --></a>';
-                               if (this.cellCanShrinkLeft(col, row)) cellHtml += '<a href="#" id="l_'+col+'_'+row+'" class="link_shrink_left"><!-- --></a>';
-                               if (this.cellCanSpanDown(col, row)) cellHtml += '<a href="#" id="d_'+col+'_'+row+'" class="link_expand_down"><!-- --></a>';
-                               if (this.cellCanShrinkUp(col, row)) cellHtml += '<a href="#" id="u_'+col+'_'+row+'" class="link_shrink_up"><!-- --></a>';
-                               cellHtml += '</div>';
-
-                               cellHtml += '<div class="cell_data">Name: '+(cell.name ? cell.name : 'not set')+'<br />Column: '+((parseInt(cell.column) === false) ? 'not set' : cell.column)+'</div>';
-
-                                       // create cells
-                               var child = {
-                                       tag: 'td',
-                                       height: parseInt(100/this.rowCount)*cell.rowspan+'%',
-                                       width: parseInt(100/this.colCount)*cell.colspan+'%',
-                                       html: cellHtml
-                               };
-                               if (cell.colspan > 1) {
-                                       child.colspan = cell.colspan;
-                               }
-                               if (cell.rowspan > 1) {
-                                       child.rowspan = cell.rowspan;
-                               }
-                               rowSpec.children.push(child);
-                       }
-
-                       newTable.children.push(rowSpec);
-
-               }
-
-               domHelper.overwrite(Ext.Element.get(this.targetElement), newTable);
-               this.bindLinks();
-       },
-
-       /**
-        * Sets the name of a certain grid element.
-        *
-        * @param newName string
-        * @param col integer
-        * @param row integer
-        *
-        * @return boolean
-        */
-       setName: function(newName, col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell) return false;
-               cell.name = newName;
-               return true;
-       },
-
-       /**
-        * Sets the column field for a certain grid element. This is NOT the column of the
-        * element itself.
-        *
-        * @param newColumn integer
-        * @param col integer
-        * @param row integer
-        *
-        * @return boolean
-        */
-       setColumn: function(newColumn, col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell) return false;
-               cell.column = newColumn;
-               return true;
-       },
-
-       /**
-        * Searches for all a tags with certain classes and binds some actions to them.
-        *
-        * @return void
-        */
-       bindLinks: function() {
-               for (var row = 0; row < this.rowCount; row++) {
-                       for (var col = 0; col < this.colCount; col++) {
-                               // span right
-                               var el = Ext.Element.get('r_'+col+'_'+row);
-                               if (el) {
-                                       el.addListener('click', function(e, sender, params) {
-                                               this.addColspan(params.colIndex, params.rowIndex);
-                                               this.drawTable();
-                                       }, this, {stopEvent:true, colIndex:col, rowIndex:row});
-                               }
-
-                               // reduce to left
-                               var el = Ext.Element.get('l_'+col+'_'+row);
-                               if (el) {
-                                       el.addListener('click', function(e, sender, params) {
-                                               this.removeColspan(params.colIndex, params.rowIndex);
-                                               this.drawTable();
-                                       }, this, {stopEvent:true, colIndex:col, rowIndex:row});
-                               }
-
-                               // span down
-                               var el = Ext.Element.get('d_'+col+'_'+row);
-                               if (el) {
-                                       el.addListener('click', function(e, sender, params) {
-                                               this.addRowspan(params.colIndex, params.rowIndex);
-                                               this.drawTable();
-                                       }, this, {stopEvent:true, colIndex:col, rowIndex:row});
-                               }
-
-                               // reduce up
-                               var el = Ext.Element.get('u_'+col+'_'+row);
-                               if (el) {
-                                       el.addListener('click', function(e, sender, params) {
-                                               this.removeRowspan(params.colIndex, params.rowIndex);
-                                               this.drawTable();
-                                       }, this, {stopEvent:true, colIndex:col, rowIndex:row});
+                               var cellHtml = '<div class="cell_container"><a class="link_editor" id="e_'
+                                               + col + '_' + row + '" title="' + TYPO3.lang.editCell + '" href="#"><!-- --></a>';
+                               if (this.cellCanSpanRight(col, row)) {
+                                       cellHtml += '<a href="#" id="r_'
+                                               + col + '_' + row + '" title="' + TYPO3.lang.mergeCell + '" class="link_expand_right"><!-- --></a>';
                                }
-
-                               // edit
-                               var el = Ext.Element.get('e_'+col+'_'+row);
-                               if (el) {
-                                       el.addListener('click', function(e, sender, params) {
-                                               this.showOptions(sender, params.colIndex, params.rowIndex);
-                                       }, this, {stopEvent:true, colIndex:col, rowIndex:row});
+                               if (this.cellCanShrinkLeft(col, row)) {
+                                       cellHtml += '<a href="#" id="l_'
+                                               + col + '_' + row + '" title="' + TYPO3.lang.splitCell + '" class="link_shrink_left"><!-- --></a>';
                                }
-                       }
-               }
-       },
-
-       /**
-        * Creates an ExtJs Window with two input fields and shows it. On save, the data
-        * is written into the grid element.
-        *
-        * @param sender DOM-object (the link)
-        * @param col integer
-        * @param row integer
-        */
-       showOptions: function(sender, col, row) {
-               var win;
-               sender = Ext.get('base');
-               var cell = this.getCell(col, row);
-               if (!cell) return false;
-
-               if(!win){
-                       var fieldName = new Ext.form.TextField({
-                               fieldLabel: TYPO3.lang.name,
-               name: 'name',
-               width: 200,
-               value: cell.name,
-                               tabIndex: 1
-                       });
-
-                       var fieldColumn = new Ext.form.NumberField({
-                               fieldLabel: TYPO3.lang.column,
-                       name: 'column',
-                       width: 50,
-                       value: cell.column,
-                               tabIndex: 2
-                       });
-
-
-                       win = new Ext.Window({
-                               layout: 'fit',
-                               title: TYPO3.lang.title,
-                               width: '50%',
-                               modal: true,
-                               closable: true,
-                               resizable: false,
-
-                               items: [{
-                                       xtype: 'fieldset',
-                                       autoHeight: true,
-                                       autoWidth: true,
-                                       labelWidth: 100,
-                                       border: false,
-
-                                       items: [fieldName, fieldColumn]
-                               }],
-
-                               buttons: [{
-                                       iconCls:'save',
-                                       text: TYPO3.lang.save,
-                                       handler: function(fieldName, fieldColumn, col, row) {
-                                               t3Grid.setName(fieldName.getValue(), col, row);
-                                               t3Grid.setColumn(fieldColumn.getValue(), col, row);
-                                               win.close();
-                                               t3Grid.drawTable();
-                                       }.createDelegate(this, [fieldName, fieldColumn, col, row])
-                               }]
-                       });
-               }
-               win.show(this);
-       },
-
-       /**
-        * Returns a cell element from the grid.
-        *
-        * @param col integer
-        * @param row integer
-        * return Object
-        */
-       getCell: function(col, row) {
-               if (col > this.colCount-1) return false;
-               if (row > this.rowCount-1) return false;
-               return this.data[row][col];
-       },
-
-       /**
-        * Checks wether a cell can span to the right or not. A cell can span to the right
-        * if it is not in the last column and if there is no cell beside it that is
-        * already overspanned by some other cell.
-        *
-        * @param col integer
-        * @param row integer
-        *
-        * @return boolean
-        */
-       cellCanSpanRight: function(col, row) {
-               if (col == this.colCount-1) {
-                       return false;
-               }
-
-               var cell = this.getCell(col, row);
-               if (cell.rowspan > 1) {
-                       for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                               var checkCell = this.getCell(col+cell.colspan, rowIndex);
-                               if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
-                                       return false;
-                               }
-                       }
-               } else {
-                       var checkCell = this.getCell(col+cell.colspan, row);
-                       if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
-                               return false;
-                       }
-               }
-
-               return true;
-       },
-
-       /**
-        * Checks wether a cell can span down or not.
-        *
-        * @param col integer
-        * @param row integer
-        *
-        * @return boolean
-        */
-       cellCanSpanDown: function(col, row) {
-               if (row == this.rowCount-1) {
-                       return false;
-               }
-
-               var cell = this.getCell(col, row);
-               if (cell.colspan > 1) {
-                       // we have to check all cells on the right side for the complete colspan
-                       for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                               var checkCell = this.getCell(colIndex, row+cell.rowspan);
-                               if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
-                                       return false;
-                               }
-                       }
-               } else {
-                       var checkCell = this.getCell(col, row+cell.rowspan);
-                       if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
-                               return false;
-                       }
-               }
-
-               return true;
-       },
-
-       /**
-        * Checks if a cell can shrink to the left. It can shrink if the colspan of the
-        * cell is bigger than 1.
-        *
-        * @param col integr
-        * @param row integer
-        *
-        * @return boolean
-        */
-       cellCanShrinkLeft: function(col, row) {
-               return (this.data[row][col].colspan > 1);
-       },
-
-       /**
-        * Returns if a cell can shrink up. This is the case if a cell has at least
-        * a rowspan of 2.
-        *
-        * @param col integr
-        * @param row integer
-        *
-        * @return boolean
-        */
-       cellCanShrinkUp: function(col, row) {
-               return (this.data[row][col].rowspan > 1);
-       },
-
-       /**
-        * Adds a colspan to a grid element.
-        *
-        * @param col integr
-        * @param row integer
-        */
-       addColspan: function(col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell || !this.cellCanSpanRight(col, row)) return false;
-
-               for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                       this.data[rowIndex][col+cell.colspan].spanned = true;
-               }
-               cell.colspan += 1;
-       },
-
-       /**
-        * Adds a rowspan to grid element.
-        *
-        * @param col integr
-        * @param row integer
-        *
-        * @return void
-        */
-       addRowspan: function(col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell || !this.cellCanSpanDown(col, row)) return false;
-
-               for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                       this.data[row+cell.rowspan][colIndex].spanned = true;
-               }
-               cell.rowspan += 1;
-       },
-
-       /**
-        * Removes a colspan from a grid element.
-        *
-        * @param col integr
-        * @param row integer
-        *
-        * @return void
-        */
-       removeColspan: function(col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell || !this.cellCanShrinkLeft(col, row)) return false;
-
-               cell.colspan -= 1;
-               for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                       this.data[rowIndex][col+cell.colspan].spanned = false;
-               }
-       },
-
-       /**
-        * Removes a rowspan from a grid element.
-        *
-        * @param col integr
-        * @param row integer
-        *
-        * @return void
-        */
-       removeRowspan: function(col, row) {
-               var cell = this.getCell(col, row);
-               if (!cell || !this.cellCanShrinkUp(col, row)) return false;
-
-               cell.rowspan -= 1;
-               for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                       this.data[row+cell.rowspan][colIndex].spanned = false;
-               }
-       },
-
-       /**
-        * Exports the current grid to a TypoScript notation that can be read by the
-        * page module and is human readable.
-        *
-        * @return string
-        */
-       export2LayoutRecord: function() {
-               var result = "be_layout {\n\tcolCount = "+this.colCount+"\n\trowCount = "+this.rowCount+ "\n\trows {\n";
-               for (var row = 0; row < this.rowCount; row++) {
-                       result += "\t\t"+(row+1)+" {\n";
-                       result += "\t\t\tcolumns {\n";
-                       colIndex = 0;
-                       for (var col = 0; col < this.colCount; col++) {
-                               var cell = this.getCell(col, row);
-                               if (cell && !cell.spanned) {
-                                       colIndex++;
-                                       result += "\t\t\t\t"+(colIndex)+" {\n";
-                                       result += "\t\t\t\t\tname = "+((!cell.name) ? col+"x"+row : cell.name)+"\n";
-                                       if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = "+cell.colspan+"\n";
-                                       if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = "+cell.rowspan+"\n";
-                                       if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = "+cell.column+"\n";
-                                       result += "\t\t\t\t}\n";
+                               if (this.cellCanSpanDown(col, row)) {
+                                       cellHtml += '<a href="#" id="d_'
+                                               + col + '_' + row + '" title="' + TYPO3.lang.mergeCell + '" class="link_expand_down"><!-- --></a>';
                                }
-
-                       }
-                       result += "\t\t\t}\n";
-                       result += "\t\t}\n";
-               }
-
-               result += "\t}\n}\n";
-               return result;
-       }
-});
-/**
- * A JavaScript object to handle, edit, draw and export a grid. The grid is basically
- * a table with some colspan and rowspan. Each cell can additionally hold a name and
- * column.
- *
- * @author Thomas Hempel <thomas@typo3.org>
- */
-Ext.namespace('TYPO3.Backend.t3Grid');
-
-TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
-       /*
-       colCount: 0,
-       rowCount: 0,
-       data: [],
-       nameLabel: '',
-       columnLabel: '',
-       */
-       constructor: function(config) {
-
-               config = Ext.apply({
-                       colCount: config.colCount,
-                       rowCount: config.rowCount,
-                       data: config.data,
-                       nameLabel: config.nameLabel,
-                       columnLabel: config.columnLabel,
-                       targetElement: config.targetElement
-               }, config);
-
-               TYPO3.Backend.t3Grid.superclass.constructor.call(this, config);
-       },
-
-       /**
-        * Adds a row below the grid
-        */
-       addRow: function() {
-               var newRow = [];
-               for (var i = 0; i < this.colCount; i++) {
-                       newRow[i] =  {spanned:false,rowspan:1,colspan:1};
-               }
-               this.data.push(newRow);
-               this.rowCount++;
-       },
-
-       /**
-        * Removes the last row of the grid and adjusts all cells that might be effected
-        * by that change. (Removing colspans)
-        *
-        * @returns void
-        */
-       removeRow: function() {
-               if (this.rowCount <= 1) return false;
-               var newData = [];
-               for (var rowIndex = 0; rowIndex < this.rowCount-1; rowIndex++) {
-                       newData.push(this.data[rowIndex]);
-               }
-
-                       // fix rowspan in former last row
-               for (var colIndex = 0; colIndex < this.colCount; colIndex++) {
-                       if (this.data[this.rowCount-1][colIndex].spanned == true) {
-                               this.findUpperCellWidthRowspanAndDecreaseByOne(colIndex,this.rowCount-1);
-                       }
-               }
-
-               this.data = newData;
-               this.rowCount--;
-       },
-
-       /**
-        * Takes a cell and looks above it if there are any cells that have colspans that
-        * spanns into the given cell. This is used when a row was removed from the grid
-        * to make sure that no cell with wrong colspans exists in the grid.
-        *
-        * @param col integer
-        * @param row integer
-        * @return void
-        */
-       findUpperCellWidthRowspanAndDecreaseByOne: function(col,row) {
-               var upperCell = this.getCell(col, row-1);
-               if (!upperCell) return false;
-
-               if (upperCell.spanned == true) {
-                       this.findUpperCellWidthRowspanAndDecreaseByOne(col, row-1);
-               } else {
-                       if (upperCell.rowspan > 1) {
-                               this.removeRowspan(col, row-1);
-                       }
-               }
-       },
-
-       /**
-        * Removes the outermost right column from the grid.
-        *
-        * @return void
-        */
-       removeColumn: function() {
-               if (this.colCount <= 1) return false;
-               var newData = [];
-
-               for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) {
-                       var newRow = [];
-                       for (colIndex = 0; colIndex < this.colCount-1; colIndex++) {
-                               newRow.push(this.data[rowIndex][colIndex]);
-                       }
-                       if (this.data[rowIndex][this.colCount-1].spanned == true) {
-                               this.findLeftCellWidthColspanAndDecreaseByOne(this.colCount-1, rowIndex);
-                       }
-                       newData.push(newRow);
-               }
-
-               this.data = newData;
-               this.colCount--;
-       },
-
-       /**
-        * Checks if there are any cells on the left side of a given cell with a
-        * rowspan that spans over the given cell.
-        *
-        * @param col integer
-        * @param row integer
-        * @return void
-        */
-       findLeftCellWidthColspanAndDecreaseByOne: function(col,row) {
-               var leftCell = this.getCell(col-1, row);
-               if (!leftCell) return false;
-
-               if (leftCell.spanned == true) {
-                       this.findLeftCellWidthColspanAndDecreaseByOne(col-1, row);
-               } else {
-                       if (leftCell.colspan > 1) {
-                               this.removeColspan(col-1, row);
-                       }
-               }
-       },
-
-       /**
-        * Adds a column at the right side of the grid.
-        *
-        * @return void
-        */
-       addColumn: function() {
-               for (var rowIndex = 0; rowIndex < this.rowCount; rowIndex++) {
-                       this.data[rowIndex].push({spanned:false,rowspan:1,colspan:1,name:this.colCount+'x'+rowIndex});
-               }
-               this.colCount++;
-       },
-
-       /**
-        * Draws the grid as table into a given container.
-        * It also adds all needed links and bindings to the cells to make it editable.
-        *
-        * @return void
-        */
-       drawTable: function() {
-               var domHelper = Ext.DomHelper;
-               var newTable = {tag:'table',children:[],id:'base',border:'0',width:'100%',height:'100%','class':'editor',cellspacing:'0',cellpadding:'0'};
-
-               var colgroups = {tag:'colgroup',children:[]};
-               for (var col = 0; col < this.colCount; col++) {
-                       colgroups.children.push({tag:'col',style:'width:'+parseInt(100/this.colCount)+'%'});
-               }
-               newTable.children.push(colgroups);
-
-               for (var row = 0; row < this.rowCount; row++) {
-                       var rowData = this.data[row];
-                       if (rowData.length == 0) continue;
-
-                       var rowSpec = {tag: 'tr', children:[]};
-
-                       for (var col = 0; col < this.colCount; col++) {
-                               var cell = this.data[row][col];
-                               if (cell.spanned == true) {
-                                       continue;
+                               if (this.cellCanShrinkUp(col, row)) {
+                                       cellHtml += '<a href="#" id="u_'
+                                               + col + '_' + row + '" title="' + TYPO3.lang.splitCell + '" class="link_shrink_up"><!-- --></a>';
                                }
-
-
-                               var cellHtml = '<div class="cell_container"><a class="link_editor" id="e_'+col+'_'+row+'" href="#"><!-- --></a>';
-                               if (this.cellCanSpanRight(col, row)) cellHtml += '<a href="#" id="r_'+col+'_'+row+'" class="link_expand_right"><!-- --></a>';
-                               if (this.cellCanShrinkLeft(col, row)) cellHtml += '<a href="#" id="l_'+col+'_'+row+'" class="link_shrink_left"><!-- --></a>';
-                               if (this.cellCanSpanDown(col, row)) cellHtml += '<a href="#" id="d_'+col+'_'+row+'" class="link_expand_down"><!-- --></a>';
-                               if (this.cellCanShrinkUp(col, row)) cellHtml += '<a href="#" id="u_'+col+'_'+row+'" class="link_shrink_up"><!-- --></a>';
                                cellHtml += '</div>';
 
-                               cellHtml += '<div class="cell_data">Name: '+(cell.name ? cell.name : 'not set')+'<br />Column: '+((parseInt(cell.column) === false) ? 'not set' : cell.column)+'</div>';
+                               cellHtml += '<div class="cell_data">' + TYPO3.lang.name + ': ' + (cell.name ? cell.name : TYPO3.lang.notSet)
+                                               + '<br />' + TYPO3.lang.column + ': '
+                                               + (cell.column === undefined ? TYPO3.lang.notSet : parseInt(cell.column, 10)) + '</div>';
 
-                                       // create cells
+                               // create cells
                                var child = {
                                        tag: 'td',
-                                       height: parseInt(100/this.rowCount)*cell.rowspan+'%',
-                                       width: parseInt(100/this.colCount)*cell.colspan+'%',
+                                       height: parseInt(100 / this.rowCount, 10) * cell.rowspan + '%',
+                                       width: parseInt(100 / this.colCount, 10) * cell.colspan + '%',
                                        html: cellHtml
                                };
                                if (cell.colspan > 1) {
@@ -816,7 +278,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                for (var row = 0; row < this.rowCount; row++) {
                        for (var col = 0; col < this.colCount; col++) {
                                // span right
-                               var el = Ext.Element.get('r_'+col+'_'+row);
+                               var el = Ext.Element.get('r_' + col + '_' + row);
                                if (el) {
                                        el.addListener('click', function(e, sender, params) {
                                                this.addColspan(params.colIndex, params.rowIndex);
@@ -825,7 +287,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                                }
 
                                // reduce to left
-                               var el = Ext.Element.get('l_'+col+'_'+row);
+                               var el = Ext.Element.get('l_' + col + '_' + row);
                                if (el) {
                                        el.addListener('click', function(e, sender, params) {
                                                this.removeColspan(params.colIndex, params.rowIndex);
@@ -834,7 +296,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                                }
 
                                // span down
-                               var el = Ext.Element.get('d_'+col+'_'+row);
+                               var el = Ext.Element.get('d_' + col + '_' + row);
                                if (el) {
                                        el.addListener('click', function(e, sender, params) {
                                                this.addRowspan(params.colIndex, params.rowIndex);
@@ -843,7 +305,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                                }
 
                                // reduce up
-                               var el = Ext.Element.get('u_'+col+'_'+row);
+                               var el = Ext.Element.get('u_' + col + '_' + row);
                                if (el) {
                                        el.addListener('click', function(e, sender, params) {
                                                this.removeRowspan(params.colIndex, params.rowIndex);
@@ -852,7 +314,7 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                                }
 
                                // edit
-                               var el = Ext.Element.get('e_'+col+'_'+row);
+                               var el = Ext.Element.get('e_' + col + '_' + row);
                                if (el) {
                                        el.addListener('click', function(e, sender, params) {
                                                this.showOptions(sender, params.colIndex, params.rowIndex);
@@ -876,52 +338,72 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                var cell = this.getCell(col, row);
                if (!cell) return false;
 
-               if(!win){
+               if (!win) {
                        var fieldName = new Ext.form.TextField({
                                fieldLabel: TYPO3.lang.name,
-               name: 'name',
-               width: 200,
-               value: cell.name,
-                               tabIndex: 1
+                               name: 'name',
+                               width: 270,
+                               value: cell.name,
+                               tabIndex: 1,
+                               listeners: {
+                                       render: function(c) {
+                                               Ext.QuickTips.register({
+                                                       target: c,
+                                                       text: TYPO3.lang.nameHelp
+                                               });
+                                       }
+                               }
                        });
 
                        var fieldColumn = new Ext.form.NumberField({
                                fieldLabel: TYPO3.lang.column,
-                       name: 'column',
-                       width: 50,
-                       value: cell.column,
-                               tabIndex: 2
+                               name: 'column',
+                               width: 50,
+                               value: cell.column,
+                               tabIndex: 2,
+                               listeners: {
+                                       render: function(c) {
+                                               Ext.QuickTips.register({
+                                                       target: c,
+                                                       text: TYPO3.lang.columnHelp
+                                               });
+                                       }
+                               }
                        });
 
 
                        win = new Ext.Window({
                                layout: 'fit',
                                title: TYPO3.lang.title,
-                               width: '50%',
+                               width: 400,
                                modal: true,
                                closable: true,
                                resizable: false,
 
-                               items: [{
-                                       xtype: 'fieldset',
-                                       autoHeight: true,
-                                       autoWidth: true,
-                                       labelWidth: 100,
-                                       border: false,
-
-                                       items: [fieldName, fieldColumn]
-                               }],
-
-                               buttons: [{
-                                       iconCls:'save',
-                                       text: TYPO3.lang.save,
-                                       handler: function(fieldName, fieldColumn, col, row) {
-                                               t3Grid.setName(fieldName.getValue(), col, row);
-                                               t3Grid.setColumn(fieldColumn.getValue(), col, row);
-                                               win.close();
-                                               t3Grid.drawTable();
-                                       }.createDelegate(this, [fieldName, fieldColumn, col, row])
-                               }]
+                               items: [
+                                       {
+                                               xtype: 'fieldset',
+                                               autoHeight: true,
+                                               autoWidth: true,
+                                               labelWidth: 100,
+                                               border: false,
+
+                                               items: [fieldName, fieldColumn]
+                                       }
+                               ],
+
+                               buttons: [
+                                       {
+                                               iconCls:'save',
+                                               text: TYPO3.lang.save,
+                                               handler: function(fieldName, fieldColumn, col, row) {
+                                                       t3Grid.setName(fieldName.getValue(), col, row);
+                                                       t3Grid.setColumn(fieldColumn.getValue(), col, row);
+                                                       win.close();
+                                                       t3Grid.drawTable();
+                                               }.createDelegate(this, [fieldName, fieldColumn, col, row])
+                                       }
+                               ]
                        });
                }
                win.show(this);
@@ -935,8 +417,8 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * return Object
         */
        getCell: function(col, row) {
-               if (col > this.colCount-1) return false;
-               if (row > this.rowCount-1) return false;
+               if (col > this.colCount - 1) return false;
+               if (row > this.rowCount - 1) return false;
                return this.data[row][col];
        },
 
@@ -951,20 +433,20 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * @return boolean
         */
        cellCanSpanRight: function(col, row) {
-               if (col == this.colCount-1) {
+               if (col == this.colCount - 1) {
                        return false;
                }
 
                var cell = this.getCell(col, row);
                if (cell.rowspan > 1) {
-                       for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                               var checkCell = this.getCell(col+cell.colspan, rowIndex);
+                       for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
+                               var checkCell = this.getCell(col + cell.colspan, rowIndex);
                                if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                        return false;
                                }
                        }
                } else {
-                       var checkCell = this.getCell(col+cell.colspan, row);
+                       var checkCell = this.getCell(col + cell.colspan, row);
                        if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                return false;
                        }
@@ -982,21 +464,21 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * @return boolean
         */
        cellCanSpanDown: function(col, row) {
-               if (row == this.rowCount-1) {
+               if (row == this.rowCount - 1) {
                        return false;
                }
 
                var cell = this.getCell(col, row);
                if (cell.colspan > 1) {
                        // we have to check all cells on the right side for the complete colspan
-                       for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                               var checkCell = this.getCell(colIndex, row+cell.rowspan);
+                       for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
+                               var checkCell = this.getCell(colIndex, row + cell.rowspan);
                                if (!checkCell || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                        return false;
                                }
                        }
                } else {
-                       var checkCell = this.getCell(col, row+cell.rowspan);
+                       var checkCell = this.getCell(col, row + cell.rowspan);
                        if (!checkCell || cell.spanned == true || checkCell.spanned == true || checkCell.colspan > 1 || checkCell.rowspan > 1) {
                                return false;
                        }
@@ -1041,8 +523,8 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                var cell = this.getCell(col, row);
                if (!cell || !this.cellCanSpanRight(col, row)) return false;
 
-               for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                       this.data[rowIndex][col+cell.colspan].spanned = true;
+               for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
+                       this.data[rowIndex][col + cell.colspan].spanned = true;
                }
                cell.colspan += 1;
        },
@@ -1059,8 +541,8 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                var cell = this.getCell(col, row);
                if (!cell || !this.cellCanSpanDown(col, row)) return false;
 
-               for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                       this.data[row+cell.rowspan][colIndex].spanned = true;
+               for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
+                       this.data[row + cell.rowspan][colIndex].spanned = true;
                }
                cell.rowspan += 1;
        },
@@ -1078,8 +560,8 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                if (!cell || !this.cellCanShrinkLeft(col, row)) return false;
 
                cell.colspan -= 1;
-               for (var rowIndex = row; rowIndex < row+cell.rowspan; rowIndex++) {
-                       this.data[rowIndex][col+cell.colspan].spanned = false;
+               for (var rowIndex = row; rowIndex < row + cell.rowspan; rowIndex++) {
+                       this.data[rowIndex][col + cell.colspan].spanned = false;
                }
        },
 
@@ -1096,8 +578,8 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
                if (!cell || !this.cellCanShrinkUp(col, row)) return false;
 
                cell.rowspan -= 1;
-               for (var colIndex = col; colIndex < col+cell.colspan; colIndex++) {
-                       this.data[row+cell.rowspan][colIndex].spanned = false;
+               for (var colIndex = col; colIndex < col + cell.colspan; colIndex++) {
+                       this.data[row + cell.rowspan][colIndex].spanned = false;
                }
        },
 
@@ -1108,20 +590,20 @@ TYPO3.Backend.t3Grid = Ext.extend(Ext.Component, {
         * @return string
         */
        export2LayoutRecord: function() {
-               var result = "be_layout {\n\tcolCount = "+this.colCount+"\n\trowCount = "+this.rowCount+ "\n\trows {\n";
+               var result = "be_layout {\n\tcolCount = " + this.colCount + "\n\trowCount = " + this.rowCount + "\n\trows {\n";
                for (var row = 0; row < this.rowCount; row++) {
-                       result += "\t\t"+(row+1)+" {\n";
+                       result += "\t\t" + (row + 1) + " {\n";
                        result += "\t\t\tcolumns {\n";
                        colIndex = 0;
                        for (var col = 0; col < this.colCount; col++) {
                                var cell = this.getCell(col, row);
                                if (cell && !cell.spanned) {
                                        colIndex++;
-                                       result += "\t\t\t\t"+(colIndex)+" {\n";
-                                       result += "\t\t\t\t\tname = "+((!cell.name) ? col+"x"+row : cell.name)+"\n";
-                                       if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = "+cell.colspan+"\n";
-                                       if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = "+cell.rowspan+"\n";
-                                       if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = "+cell.column+"\n";
+                                       result += "\t\t\t\t" + (colIndex) + " {\n";
+                                       result += "\t\t\t\t\tname = " + ((!cell.name) ? col + "x" + row : cell.name) + "\n";
+                                       if (cell.colspan > 1) result += "\t\t\t\t\tcolspan = " + cell.colspan + "\n";
+                                       if (cell.rowspan > 1) result += "\t\t\t\t\trowspan = " + cell.rowspan + "\n";
+                                       if (typeof(cell.column) === 'number') result += "\t\t\t\t\tcolPos = " + cell.column + "\n";
                                        result += "\t\t\t\t}\n";
                                }
 
index 04649fa..23cd501 100644 (file)
Binary files a/typo3/sysext/cms/layout/res/t3grid-editor-down.png and b/typo3/sysext/cms/layout/res/t3grid-editor-down.png differ
index eb6fef8..083c065 100644 (file)
Binary files a/typo3/sysext/cms/layout/res/t3grid-editor-left.png and b/typo3/sysext/cms/layout/res/t3grid-editor-left.png differ
index 4aaf56b..0b73a16 100644 (file)
Binary files a/typo3/sysext/cms/layout/res/t3grid-editor-right.png and b/typo3/sysext/cms/layout/res/t3grid-editor-right.png differ
index a835a6b..cb6b663 100644 (file)
Binary files a/typo3/sysext/cms/layout/res/t3grid-editor-up.png and b/typo3/sysext/cms/layout/res/t3grid-editor-up.png differ
index e0d2247..6adf752 100644 (file)
@@ -92,7 +92,15 @@ class SC_wizard_be_layout {
                        'save' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelSave', 1),
                        'title' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_windowTitle', 1),
                        'name' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelName', 1),
-                       'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelColumn', 1)
+                       'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_labelColumn', 1),
+                       'editCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_editCell', 1),
+                       'mergeCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_mergeCell', 1),
+                       'splitCell' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_splitCell', 1),
+                       'name' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_name', 1),
+                       'column' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_column', 1),
+                       'notSet' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_notSet', 1),
+                       'nameHelp' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_nameHelp', 1),
+                       'columnHelp' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_wizards.xml:grid_columnHelp', 1),
                );
                $pageRenderer->addInlineLanguageLabelArray($languageLabels);
 
@@ -182,20 +190,17 @@ class SC_wizard_be_layout {
 
                }
 
-               $this->doc->JScode .= '
-                       <script type="text/javascript">
-                       Ext.onReady(function() {
-                               t3Grid = new TYPO3.Backend.t3Grid({
-                                       data: ' . $t3GridData . ',
-                                       colCount: ' . $colCount . ',
-                                       rowCount: ' . $rowCount . ',
-                                       targetElement: \'editor\'
-                               });
-
-                               t3Grid.drawTable();
+               $pageRenderer->enableExtJSQuickTips();
+
+               $pageRenderer->addExtOnReadyCode('
+                       t3Grid = new TYPO3.Backend.t3Grid({
+                               data: ' . $t3GridData . ',
+                               colCount: ' . $colCount . ',
+                               rowCount: ' . $rowCount . ',
+                               targetElement: \'editor\'
                        });
-                       </script>
-               ';
+                       t3Grid.drawTable();
+                       ');
 
 
                $this->doc->styleSheetFile_post = TYPO3_MOD_PATH . 'res/grideditor.css';
@@ -232,20 +237,20 @@ class SC_wizard_be_layout {
                                        </div>
                                </td>
                                <td width="20" valign="center">
-                                       <a id="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_addColumn') . '" onclick="t3Grid.addColumn(); t3Grid.drawTable(\'editor\');">
+                                       <a class="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_addColumn') . '" onclick="t3Grid.addColumn(); t3Grid.drawTable(\'editor\');">
                                                <img src="res/t3grid-tableright.png" border="0" />
                                        </a><br />
-                                       <a id="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_removeColumn') . '" onclick="t3Grid.removeColumn(); t3Grid.drawTable(\'editor\');">
+                                       <a class="removeCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_removeColumn') . '" onclick="t3Grid.removeColumn(); t3Grid.drawTable(\'editor\');">
                                                <img src="res/t3grid-tableleft.png" border="0" />
                                        </a>
                                </td>
                        </tr>
                        <tr>
                                <td colspan="2" height="20" align="center">
-                                       <a id="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_addRow') . '" onclick="t3Grid.addRow(); t3Grid.drawTable(\'editor\');">
+                                       <a class="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_addRow') . '" onclick="t3Grid.addRow(); t3Grid.drawTable(\'editor\');">
                                                <img src="res/t3grid-tabledown.png" border="0" />
                                        </a>
-                                       <a id="addCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_removeRow') . '" onclick="t3Grid.removeRow(); t3Grid.drawTable(\'editor\');">
+                                       <a class="removeCol" href="#" title="' . $GLOBALS['LANG']->getLL('grid_removeRow') . '" onclick="t3Grid.removeRow(); t3Grid.drawTable(\'editor\');">
                                                <img src="res/t3grid-tableup.png" border="0" />
                                        </a>
                                </td>
index aa1f7c5..bf69cf3 100755 (executable)
                        <label index="grid_labelName">Name</label>
                        <label index="grid_labelColumn">Column Number</label>
                        <label index="grid_labelSave">Save to cell</label>
+                       <label index="grid_addColumn">Click to add a column</label>
+                       <label index="grid_removeColumn">Click to remove a column</label>
+                       <label index="grid_addRow">Click to add a row</label>
+                       <label index="grid_removeRow">Click to remove a row</label>
+                       <label index="grid_editCell">Click to edit this cell</label>
+                       <label index="grid_mergeCell">Combine with next cell</label>
+                       <label index="grid_splitCell">Split cell</label>
+                       <label index="grid_name">Name</label>
+                       <label index="grid_column">Column number</label>
+                       <label index="grid_notSet">not set</label>
+                       <label index="grid_nameHelp">Enter a name for the cell.</label>
+                       <label index="grid_columnHelp">The column position defines in which area the content is rendered in the frontend.</label>
                </languageKey>
        </data>
 </T3locallang>
\ No newline at end of file