4 * @class Roo.htmleditor.BlockTable
5 * Block that manages a table
9 * @param {Object} config Configuration options
12 Roo.htmleditor.BlockTable = function(cfg)
15 this.readElement(cfg.node);
16 this.updateElement(cfg.node);
21 for(var r = 0; r < this.no_row; r++) {
23 for(var c = 0; c < this.no_col; c++) {
24 this.rows[r][c] = this.emptyCell();
31 Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
40 // used by context menu
41 friendly_name : 'Table',
42 deleteTitle : 'Delete Table',
43 // context menu is drawn once..
45 contextMenu : function(toolbar)
48 var block = function() {
49 return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
53 var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
55 var syncValue = toolbar.editorcore.syncValue;
63 xns : rooui.Toolbar //Boostrap?
71 triggerAction : 'all',
77 select : function (combo, r, index)
79 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
81 b.width = r.get('val');
84 toolbar.editorcore.onEditorEvent();
89 xtype : 'SimpleStore',
103 xns : rooui.Toolbar //Boostrap?
110 click : function (_self, e)
112 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
113 block().removeColumn();
115 toolbar.editorcore.onEditorEvent();
124 click : function (_self, e)
126 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
129 toolbar.editorcore.onEditorEvent();
138 xns : rooui.Toolbar //Boostrap?
145 click : function (_self, e)
147 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
150 toolbar.editorcore.onEditorEvent();
159 click : function (_self, e)
163 toolbar.editorcore.onEditorEvent();
171 text: 'Reset Column Widths',
174 click : function (_self, e)
176 block().resetWidths();
178 toolbar.editorcore.onEditorEvent();
192 * create a DomHelper friendly object - for use with
193 * Roo.DomHelper.markup / overwrite / etc..
194 * ?? should it be called with option to hide all editing features?
196 toObject : function()
201 contenteditable : 'false', // this stops cell selection from picking the table.
202 'data-block' : 'Table',
205 border : 'solid 1px #000', // ??? hard coded?
206 'border-collapse' : 'collapse'
209 { tag : 'tbody' , cn : [] }
213 // do we have a head = not really
215 Roo.each(this.rows, function( row ) {
220 border : 'solid 1px #000',
226 ret.cn[0].cn.push(tr);
227 // does the row have any properties? ?? height?
229 Roo.each(row, function( cell ) {
233 contenteditable : 'true',
238 if (cell.colspan > 1) {
239 td.colspan = cell.colspan ;
244 if (cell.rowspan > 1) {
245 td.rowspan = cell.rowspan ;
254 ncols = Math.max(nc, ncols);
258 // add the header row..
267 readElement : function(node)
269 node = node ? node : this.node ;
270 this.width = this.getVal(node, true, 'style', 'width') || '100%';
274 var trs = Array.from(node.rows);
275 trs.forEach(function(tr) {
281 Array.from(tr.cells).forEach(function(td) {
284 colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
285 rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
286 style : td.hasAttribute('style') ? td.getAttribute('style') : '',
289 no_column += add.colspan;
296 this.no_col = Math.max(this.no_col, no_column);
303 normalizeRows: function()
307 this.rows.forEach(function(row) {
310 row = this.normalizeRow(row);
312 row.forEach(function(c) {
313 while (typeof(ret[rid][cid]) != 'undefined') {
316 if (typeof(ret[rid]) == 'undefined') {
326 for(var i = 1 ;i < c.rowspan; i++) {
327 if (typeof(ret[rid+i]) == 'undefined') {
338 normalizeRow: function(row)
341 row.forEach(function(c) {
346 for(var i =0 ;i < c.colspan; i++) {
354 deleteColumn : function(sel)
356 if (!sel || sel.type != 'col') {
359 if (this.no_col < 2) {
363 this.rows.forEach(function(row) {
364 var cols = this.normalizeRow(row);
365 var col = cols[sel.col];
366 if (col.colspan > 1) {
376 removeColumn : function()
382 this.updateElement();
386 addColumn : function()
389 this.rows.forEach(function(row) {
390 row.push(this.emptyCell());
393 this.updateElement();
396 deleteRow : function(sel)
398 if (!sel || sel.type != 'row') {
402 if (this.no_row < 2) {
406 var rows = this.normalizeRows();
409 rows[sel.row].forEach(function(col) {
410 if (col.rowspan > 1) {
413 col.remove = 1; // flage it as removed.
418 this.rows.forEach(function(row) {
420 row.forEach(function(c) {
421 if (typeof(c.remove) == 'undefined') {
426 if (newrow.length > 0) {
435 this.updateElement();
438 removeRow : function()
452 for (var i = 0; i < this.no_col; i++ ) {
454 row.push(this.emptyCell());
458 this.updateElement();
462 // the default cell object... at present...
463 emptyCell : function() {
464 return (new Roo.htmleditor.BlockTd({})).toObject();
469 removeNode : function()
476 resetWidths : function()
478 Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
479 var nn = Roo.htmleditor.Block.factory(n);