+ {
+ data : data, // array of key=>value data like JsonReader
+ total : data.length,
+ success : true
+
+ }
+
+ }.-
*
- r : Roo.data.Record[] @@ -25977,7 +25987,9 @@ Roo.extend(Roo.bootstrap.form.SecurePass, Roo.bootstrap.form.Input, { return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0); } -})Roo.htmleditor = {}; +}); +Roo.htmleditor = {}; + /** * @class Roo.htmleditor.Filter * Base Class for filtering htmleditor stuff. - do not use this directly - extend it. @@ -26053,6 +26065,8 @@ Roo.htmleditor.FilterAttributes = function(cfg) { Roo.apply(this, cfg); this.attrib_black = this.attrib_black || []; + this.attrib_white = this.attrib_white || []; + this.attrib_clean = this.attrib_clean || []; this.style_white = this.style_white || []; this.style_black = this.style_black || []; @@ -26065,6 +26079,8 @@ Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter, attrib_black : false, // array attrib_clean : false, + attrib_white : false, + style_white : false, style_black : false, @@ -26078,6 +26094,12 @@ Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter, for (var i = node.attributes.length-1; i > -1 ; i--) { var a = node.attributes[i]; //console.log(a); + if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) { + node.removeAttribute(a.name); + continue; + } + + if (a.name.toLowerCase().substr(0,2)=='on') { node.removeAttribute(a.name); @@ -26126,7 +26148,11 @@ Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter, if (v.match(/^\./) || v.match(/^\//)) { return; } - if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) { + if (v.match(/^(http|https):\/\//) + || v.match(/^mailto:/) + || v.match(/^ftp:/) + || v.match(/^data:/) + ) { return; } if (v.match(/^#/)) { @@ -26234,6 +26260,9 @@ Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter, Roo.htmleditor.FilterKeepChildren = function(cfg) { Roo.apply(this, cfg); + if (this.tag === false) { + return; // dont walk.. (you can use this to use this just to do a child removal on a single tag ) + } this.walk(cfg.node); } @@ -26244,12 +26273,31 @@ Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack, replaceTag : function(node) { // walk children... + //Roo.log(node); var ar = Array.from(node.childNodes); + //remove first.. for (var i = 0; i < ar.length; i++) { + if (ar[i].nodeType == 1) { + if ( + (typeof(this.tag) == 'object' && this.tag.indexOf(ar[i].tagName) > -1) + || // array and it matches + (typeof(this.tag) == 'string' && this.tag == ar[i].tagName) + ) { + this.replaceTag(ar[i]); // child is blacklisted as well... + continue; + } + } + } + ar = Array.from(node.childNodes); + for (var i = 0; i < ar.length; i++) { + node.removeChild(ar[i]); // what if we need to walk these??? node.parentNode.insertBefore(ar[i], node); - this.walk(ar[i]); + if (this.tag !== false) { + this.walk(ar[i]); + + } } node.parentNode.removeChild(node); return false; // don't walk children @@ -26300,6 +26348,7 @@ Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter, // double BR. node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node); + node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node); node.parentNode.removeChild(node); return false; @@ -26512,6 +26561,185 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter, } +}); +/** + * @class Roo.htmleditor.FilterStyleToTag + * part of the word stuff... - certain 'styles' should be converted to tags. + * eg. + * font-weight: bold -> bold + * ?? super / subscrit etc.. + * + * @constructor +* Run a new style to tag filter. +* @param {Object} config Configuration options + */ +Roo.htmleditor.FilterStyleToTag = function(cfg) +{ + + this.tags = { + B : [ 'fontWeight' , 'bold'], + I : [ 'fontStyle' , 'italic'], + //pre : [ 'font-style' , 'italic'], + // h1.. h6 ?? font-size? + SUP : [ 'verticalAlign' , 'super' ], + SUB : [ 'verticalAlign' , 'sub' ] + + + }; + + Roo.apply(this, cfg); + + + this.walk(cfg.node); + + + +} + + +Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter, +{ + tag: true, // all tags + + tags : false, + + + replaceTag : function(node) + { + + + if (node.getAttribute("style") === null) { + return true; + } + var inject = []; + for (var k in this.tags) { + if (node.style[this.tags[k][0]] == this.tags[k][1]) { + inject.push(k); + node.style.removeProperty(this.tags[k][0]); + } + } + if (!inject.length) { + return true; + } + var cn = Array.from(node.childNodes); + var nn = node; + Roo.each(inject, function(t) { + var nc = node.ownerDocument.createElement(t); + nn.appendChild(nc); + nn = nc; + }); + for(var i = 0;i < cn.length;cn++) { + node.removeChild(cn[i]); + nn.appendChild(cn[i]); + } + return true /// iterate thru + } + +})/** + * @class Roo.htmleditor.FilterLongBr + * BR/BR/BR - keep a maximum of 2... + * @constructor + * Run a new Long BR Filter + * @param {Object} config Configuration options + */ + +Roo.htmleditor.FilterLongBr = function(cfg) +{ + // no need to apply config. + this.walk(cfg.node); +} + +Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter, +{ + + + tag : 'BR', + + + replaceTag : function(node) + { + + var ps = node.nextSibling; + while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) { + ps = ps.nextSibling; + } + + if (!ps && [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { + node.parentNode.removeChild(node); // remove last BR inside one fo these tags + return false; + } + + if (!ps || ps.nodeType != 1) { + return false; + } + + if (!ps || ps.tagName != 'BR') { + + return false; + } + + + + + + if (!node.previousSibling) { + return false; + } + var ps = node.previousSibling; + + while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) { + ps = ps.previousSibling; + } + if (!ps || ps.nodeType != 1) { + return false; + } + // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these.. + if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) { + return false; + } + + node.parentNode.removeChild(node); // remove me... + + return false; // no need to do children + + } + +}); + +/** + * @class Roo.htmleditor.FilterBlock + * removes id / data-block and contenteditable that are associated with blocks + * usage should be done on a cloned copy of the dom + * @constructor +* Run a new Attribute Filter { node : xxxx }} +* @param {Object} config Configuration options + */ +Roo.htmleditor.FilterBlock = function(cfg) +{ + Roo.apply(this, cfg); + var qa = cfg.node.querySelectorAll; + this.removeAttributes('data-block'); + this.removeAttributes('contenteditable'); + this.removeAttributes('id'); + +} + +Roo.apply(Roo.htmleditor.FilterBlock.prototype, +{ + node: true, // all tags + + + removeAttributes : function(attr) + { + var ar = this.node.querySelectorAll('*[' + attr + ']'); + for (var i =0;i
- - usage: - -- add to document.. - new Roo.htmleditor.BlockFigure{ - image_src : 'http://www.google.com', - caption : 'test', - } - -- load document, and search for elements of this... - Roo.DomQuery.select('*[data-block]) - // loop each and call ctor ({node : xxx}) - -- html editor click - ** see if parent has Element.findParent(*[data-block]); - use ?? to - + +/** + * @class Roo.htmleditor.Block + * Base class for html editor blocks - do not use it directly .. extend it.. + * @cfg {DomElement} node The node to apply stuff to. + * @cfg {String} friendly_name the name that appears in the context bar about this block + * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext + + * @constructor + * Create a new Filter. + * @param {Object} config Configuration options */ -Roo.htmleditor.BlockFigure = function(cfg) +Roo.htmleditor.Block = function(cfg) { - if (cfg.node) { - this.readElement(cfg.node); - this.updateElement(cfg.node); - } - Roo.apply(this, cfg); + // do nothing .. should not be called really. } +/** + * factory method to get the block from an element (using cache if necessary) + * @static + * @param {HtmlElement} the dom element + */ +Roo.htmleditor.Block.factory = function(node) +{ + var cc = Roo.htmleditor.Block.cache; + var id = Roo.get(node).id; + if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) { + Roo.htmleditor.Block.cache[id].readElement(node); + return Roo.htmleditor.Block.cache[id]; + } + var db = node.getAttribute('data-block'); + if (!db) { + db = node.nodeName.toLowerCase().toUpperCaseFirst(); + } + var cls = Roo.htmleditor['Block' + db]; + if (typeof(cls) == 'undefined') { + //Roo.log(node.getAttribute('data-block')); + Roo.log("OOps missing block : " + 'Block' + db); + return false; + } + Roo.htmleditor.Block.cache[id] = new cls({ node: node }); + return Roo.htmleditor.Block.cache[id]; /// should trigger update element +}; -Roo.htmleditor.BlockFigure.prototype = { - - // setable values. - image_src: '', +/** + * initalize all Elements from content that are 'blockable' + * @static + * @param the body element + */ +Roo.htmleditor.Block.initAll = function(body, type) +{ + if (typeof(type) == 'undefined') { + var ia = Roo.htmleditor.Block.initAll; + ia(body,'table'); + ia(body,'td'); + ia(body,'figure'); + return; + } + Roo.each(Roo.get(body).query(type), function(e) { + Roo.htmleditor.Block.factory(e); + },this); +}; +// question goes here... do we need to clear out this cache sometimes? +// or show we make it relivant to the htmleditor. +Roo.htmleditor.Block.cache = {}; + +Roo.htmleditor.Block.prototype = { - align: 'left', - caption : '', - text_align: 'left', + node : false, - image_width : '', - image_height : '', + // used by context menu + friendly_name : 'Based Block', - // used by context menu + // text for button to delete this element + deleteTitle : false, - context : { // ?? static really - image_width : { - title: "Width", - width: 40 - }, - image_height: { - title: "Height", - width: 40 - }, - align: { - title: "Align", - opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]], - width : 80 - - }, - text_align: { - title: "Caption Align", - opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]], - width : 80 - }, - - - src : { - title: "Src", - width: 220 - } - }, + context : false, /** - * create a DomHelper friendly object - for use with - * Roo.DomHelper.markup / overwrite / etc.. + * Update a node with values from this object + * @param {DomElement} node */ - toObject : function() - { - - var img = { - tag : 'img', - src : this.src, - alt : this.caption - }; - if ((''+this.width).length) { - img.width = this.width; - } - if ((''+ this.height).length) { - img.height = this.height; - } - return { - tag: 'figure', - 'data-block' : 'BlockFigure', - contenteditable : 'false', - style : 'text-align:' + this.align, - cn : [ - img, - { - tag: 'figcaption', - contenteditable : true, - style : 'text-align:left', - html : this.caption - } - ] - }; - }, - - readElement : function(node) - { - this.image_src = this.getVal(node, 'img', 'src'); - this.align = this.getVal(node, 'figure', 'style', 'text-align'); - this.caption = this.getVal(node, 'figcaption', 'html'); - this.text_align = this.getVal(node, 'figcaption', 'style','text-align'); - }, - updateElement : function(node) { - Roo.DomHelper.overwrite(node, this.toObject()); + Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject()); }, - /** + /** * convert to plain HTML for calling insertAtCursor.. */ toHTML : function() { return Roo.DomHelper.markup(this.toObject()); }, - + /** + * used by readEleemnt to extract data from a node + * may need improving as it's pretty basic + + * @param {DomElement} node + * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ? + * @param {String} attribute (use html - for contents, or style for using next param as style) + * @param {String} style the style property - eg. text-align + */ getVal : function(node, tag, attr, style) { var n = node; - if (n.tagName != tag.toUpperCase()) { + if (tag !== true && n.tagName != tag.toUpperCase()) { // in theory we could do figure[3] << 3rd figure? or some more complex search..? // but kiss for now. n = node.getElementsByTagName(tag).item(0); } + if (!n) { + return ''; + } if (attr == 'html') { return n.innerHTML; } if (attr == 'style') { - return Roo.get(n).getStyle(style); + return n.style[style]; } - return Roo.get(n).attr(attr); + return n.hasAttribute(attr) ? n.getAttribute(attr) : ''; - } + }, + /** + * create a DomHelper friendly object - for use with + * Roo.DomHelper.markup / overwrite / etc.. + * (override this) + */ + toObject : function() + { + return {}; + }, + /** + * Read a node that has a 'data-block' property - and extract the values from it. + * @param {DomElement} node - the node + */ + readElement : function(node) + { + + } +}; + + + +/** + * @class Roo.htmleditor.BlockFigure + * Block that has an image and a figcaption + * @cfg {String} image_src the url for the image + * @cfg {String} align (left|right) alignment for the block default left + * @cfg {String} caption the text to appear below (and in the alt tag) + * @cfg {String} caption_display (block|none) display or not the caption + * @cfg {String|number} image_width the width of the image number or %? + * @cfg {String|number} image_height the height of the image number or %? + * + * @constructor + * Create a new Filter. + * @param {Object} config Configuration options + */ + +Roo.htmleditor.BlockFigure = function(cfg) +{ + if (cfg.node) { + this.readElement(cfg.node); + this.updateElement(cfg.node); + } + Roo.apply(this, cfg); +} +Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, { + + + // setable values. + image_src: '', + align: 'center', + caption : '', + caption_display : 'block', + width : '100%', + cls : '', + href: '', + video_url : '', + + // margin: '2%', not used + + text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present + + + // used by context menu + friendly_name : 'Image with caption', + deleteTitle : "Delete Image and Caption", + + contextMenu : function(toolbar) + { + + var block = function() { + return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode); + }; + + + var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap; + + var syncValue = toolbar.editorcore.syncValue; + + var fields = {}; + + return [ + { + xtype : 'TextItem', + text : "Source: ", + xns : rooui.Toolbar //Boostrap? + }, + { + xtype : 'TextField', + allowBlank : false, + width : 150, + name : 'image_src', + listeners : { + keyup : function (combo, e) + { + toolbar.editorcore.selectNode(toolbar.tb.selectedNode); + var b = block(); + b.image_src = this.getValue(); + b.updateElement(); + syncValue(); + toolbar.editorcore.onEditorEvent(); + } + }, + xns : rooui.form + + }, + { + xtype : 'TextItem', + text : "Width: ", + xns : rooui.Toolbar //Boostrap? + }, + { + xtype : 'ComboBox', + allowBlank : false, + displayField : 'val', + editable : true, + listWidth : 100, + triggerAction : 'all', + typeAhead : true, + valueField : 'val', + width : 70, + name : 'width', + listeners : { + select : function (combo, r, index) + { + toolbar.editorcore.selectNode(toolbar.tb.selectedNode); + var b = block(); + b.width = r.get('val'); + b.updateElement(); + syncValue(); + toolbar.editorcore.onEditorEvent(); + } + }, + xns : rooui.form, + store : { + xtype : 'SimpleStore', + data : [ + ['auto'], + ['50%'], + ['100%'] + ], + fields : [ 'val'], + xns : Roo.data + } + }, + { + xtype : 'TextItem', + text : "Align: ", + xns : rooui.Toolbar //Boostrap? + }, + { + xtype : 'ComboBox', + allowBlank : false, + displayField : 'val', + editable : true, + listWidth : 100, + triggerAction : 'all', + typeAhead : true, + valueField : 'val', + width : 70, + name : 'align', + listeners : { + select : function (combo, r, index) + { + toolbar.editorcore.selectNode(toolbar.tb.selectedNode); + var b = block(); + b.align = r.get('val'); + b.updateElement(); + syncValue(); + toolbar.editorcore.onEditorEvent(); + } + }, + xns : rooui.form, + store : { + xtype : 'SimpleStore', + data : [ + ['left'], + ['right'], + ['center'] + ], + fields : [ 'val'], + xns : Roo.data + } + }, + + + { + xtype : 'Button', + text: 'Hide Caption', + name : 'caption_display', + pressed : false, + enableToggle : true, + setValue : function(v) { + this.toggle(v == 'block' ? false : true); + }, + listeners : { + toggle: function (btn, state) + { + var b = block(); + b.caption_display = b.caption_display == 'block' ? 'none' : 'block'; + this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption"); + b.updateElement(); + syncValue(); + toolbar.editorcore.selectNode(toolbar.tb.selectedNode); + toolbar.editorcore.onEditorEvent(); + } + }, + xns : rooui.Toolbar + } + ]; + + }, + /** + * create a DomHelper friendly object - for use with + * Roo.DomHelper.markup / overwrite / etc.. + */ + toObject : function() + { + var d = document.createElement('div'); + d.innerHTML = this.caption; + + var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0; + + var img = { + tag : 'img', + contenteditable : 'false', + src : this.image_src, + alt : d.innerText.replace(/\n/g, " "), // removeHTML.. + style: { + width : 'auto', + 'max-width': '100%', + margin : '0px' + + + } + }; + /* + '
' +
+ '' +
+ '
' +
+ '' +
+ '
',
+ */
+
+ if (this.href.length > 0) {
+ img = {
+ tag : 'a',
+ href: this.href,
+ contenteditable : 'true',
+ cn : [
+ img
+ ]
+ };
+ }
+
+
+ if (this.video_url.length > 0) {
+ img = {
+ tag : 'div',
+ cls : this.cls,
+ frameborder : 0,
+ allowfullscreen : true,
+ width : 420, // these are for video tricks - that we replace the outer
+ height : 315,
+ src : this.video_url,
+ cn : [
+ img
+ ]
+ };
+ }
+
+ return {
+ tag: 'figure',
+ 'data-block' : 'Figure',
+ contenteditable : 'false',
+ style : {
+ display: 'block',
+ float : this.align ,
+ 'max-width': this.width,
+ width : 'auto',
+ margin: m,
+ padding: '10px'
+
+ },
+
+
+ align : this.align,
+ cn : [
+ img,
+
+ {
+ tag: 'figcaption',
+ contenteditable : true,
+ style : {
+ 'text-align': 'left',
+ 'margin-top' : '16px',
+ 'font-size' : '16px',
+ 'line-height' : '24px',
+ 'font-style': 'italic',
+ display : this.caption_display
+ },
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ html : this.caption
+
+ }
+ ]
+ };
+
+ },
+
+ readElement : function(node)
+ {
+ // this should not really come from the link...
+ this.video_url = this.getVal(node, 'div', 'src');
+ this.cls = this.getVal(node, 'div', 'class');
+ this.href = this.getVal(node, 'a', 'href');
+
+ this.image_src = this.getVal(node, 'img', 'src');
+
+ this.align = this.getVal(node, 'figure', 'align');
+ this.caption = this.getVal(node, 'figcaption', 'html');
+ //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+ this.width = this.getVal(node, 'figure', 'style', 'max-width');
+ //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+
+ },
+ removeNode : function()
+ {
+ return this.node;
+ }
+
+
+
+
+
+
+
+
+})
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+ if (!cfg.node) {
+ this.rows = [];
+ for(var r = 0; r < this.no_row; r++) {
+ this.rows[r] = [];
+ for(var c = 0; c < this.no_col; c++) {
+ this.rows[r][c] = this.emptyCell();
+ }
+ }
+ }
+
+
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+
+ rows : false,
+ no_col : 1,
+ no_row : 1,
+
+
+ width: '100%',
+
+ // used by context menu
+ friendly_name : 'Table',
+ deleteTitle : 'Delete Table',
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
+ {
+
+ var block = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'width',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = block();
+ b.width = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['100%'],
+ ['auto']
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+ // -------- Cols
+
+ {
+ xtype : 'TextItem',
+ text : "Columns: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().addColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'TextItem',
+ text : "Rows: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ block().removeRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ block().addRow();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ // -------- ROWS
+ {
+ xtype : 'Button',
+ text: 'Reset Column Widths',
+ listeners : {
+
+ click : function (_self, e)
+ {
+ block().resetWidths();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ }
+
+
+
+ ];
+
+ },
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+
+ var ret = {
+ tag : 'table',
+ contenteditable : 'false', // this stops cell selection from picking the table.
+ 'data-block' : 'Table',
+ style : {
+ width: this.width,
+ border : 'solid 1px #000', // ??? hard coded?
+ 'border-collapse' : 'collapse'
+ },
+ cn : [
+ { tag : 'tbody' , cn : [] }
+ ]
+ };
+
+ // do we have a head = not really
+ var ncols = 0;
+ Roo.each(this.rows, function( row ) {
+ var tr = {
+ tag: 'tr',
+ style : {
+ margin: '6px',
+ border : 'solid 1px #000',
+ textAlign : 'left'
+ },
+ cn : [ ]
+ };
+
+ ret.cn[0].cn.push(tr);
+ // does the row have any properties? ?? height?
+ var nc = 0;
+ Roo.each(row, function( cell ) {
+
+ var td = {
+ tag : 'td',
+ contenteditable : 'true',
+ 'data-block' : 'Td',
+ html : cell.html,
+ style : cell.style
+ };
+ if (cell.colspan > 1) {
+ td.colspan = cell.colspan ;
+ nc += cell.colspan;
+ } else {
+ nc++;
+ }
+ if (cell.rowspan > 1) {
+ td.rowspan = cell.rowspan ;
+ }
+
+
+ // widths ?
+ tr.cn.push(td);
+
+
+ }, this);
+ ncols = Math.max(nc, ncols);
+
+
+ }, this);
+ // add the header row..
+
+ ncols++;
+
+
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = this.getVal(node, true, 'style', 'width') || '100%';
+
+ this.rows = [];
+ this.no_row = 0;
+ var trs = Array.from(node.rows);
+ trs.forEach(function(tr) {
+ var row = [];
+ this.rows.push(row);
+
+ this.no_row++;
+ var no_column = 0;
+ Array.from(tr.cells).forEach(function(td) {
+
+ var add = {
+ colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+ rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+ style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+ html : td.innerHTML
+ };
+ no_column += add.colspan;
+
+
+ row.push(add);
+
+
+ },this);
+ this.no_col = Math.max(this.no_col, no_column);
+
+
+ },this);
+
+
+ },
+ normalizeRows: function()
+ {
+ var ret= [];
+ var rid = -1;
+ this.rows.forEach(function(row) {
+ rid++;
+ ret[rid] = [];
+ row = this.normalizeRow(row);
+ var cid = 0;
+ row.forEach(function(c) {
+ while (typeof(ret[rid][cid]) != 'undefined') {
+ cid++;
+ }
+ if (typeof(ret[rid]) == 'undefined') {
+ ret[rid] = [];
+ }
+ ret[rid][cid] = c;
+ c.row = rid;
+ c.col = cid;
+ if (c.rowspan < 2) {
+ return;
+ }
+
+ for(var i = 1 ;i < c.rowspan; i++) {
+ if (typeof(ret[rid+i]) == 'undefined') {
+ ret[rid+i] = [];
+ }
+ ret[rid+i][cid] = c;
+ }
+ });
+ }, this);
+ return ret;
+
+ },
+
+ normalizeRow: function(row)
+ {
+ var ret= [];
+ row.forEach(function(c) {
+ if (c.colspan < 2) {
+ ret.push(c);
+ return;
+ }
+ for(var i =0 ;i < c.colspan; i++) {
+ ret.push(c);
+ }
+ });
+ return ret;
+
+ },
+
+ deleteColumn : function(sel)
+ {
+ if (!sel || sel.type != 'col') {
+ return;
+ }
+ if (this.no_col < 2) {
+ return;
+ }
+
+ this.rows.forEach(function(row) {
+ var cols = this.normalizeRow(row);
+ var col = cols[sel.col];
+ if (col.colspan > 1) {
+ col.colspan --;
+ } else {
+ row.remove(col);
+ }
+
+ }, this);
+ this.no_col--;
+
+ },
+ removeColumn : function()
+ {
+ this.deleteColumn({
+ type: 'col',
+ col : this.no_col-1
+ });
+ this.updateElement();
+ },
+
+
+ addColumn : function()
+ {
+
+ this.rows.forEach(function(row) {
+ row.push(this.emptyCell());
+
+ }, this);
+ this.updateElement();
+ },
+
+ deleteRow : function(sel)
+ {
+ if (!sel || sel.type != 'row') {
+ return;
+ }
+
+ if (this.no_row < 2) {
+ return;
+ }
+
+ var rows = this.normalizeRows();
+
+
+ rows[sel.row].forEach(function(col) {
+ if (col.rowspan > 1) {
+ col.rowspan--;
+ } else {
+ col.remove = 1; // flage it as removed.
+ }
+
+ }, this);
+ var newrows = [];
+ this.rows.forEach(function(row) {
+ newrow = [];
+ row.forEach(function(c) {
+ if (typeof(c.remove) == 'undefined') {
+ newrow.push(c);
+ }
+
+ });
+ if (newrow.length > 0) {
+ newrows.push(row);
+ }
+ });
+ this.rows = newrows;
+
+
+
+ this.no_row--;
+ this.updateElement();
+
+ },
+ removeRow : function()
+ {
+ this.deleteRow({
+ type: 'row',
+ row : this.no_row-1
+ });
+
+ },
+
+
+ addRow : function()
+ {
+
+ var row = [];
+ for (var i = 0; i < this.no_col; i++ ) {
+
+ row.push(this.emptyCell());
+
+ }
+ this.rows.push(row);
+ this.updateElement();
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return (new Roo.htmleditor.BlockTd({})).toObject();
+
+
+ },
+
+ removeNode : function()
+ {
+ return this.node;
+ },
+
+
+
+ resetWidths : function()
+ {
+ Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+ var nn = Roo.htmleditor.Block.factory(n);
+ nn.width = '';
+ nn.updateElement(n);
+ });
+ }
+
+
+
+
+})
+
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ * add/remove cols
+ * adjust the width +/-
+ * reset the width...
+ *
+ *
+ */
+
+
+
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ *
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTd = function(cfg)
+{
+ if (cfg.node) {
+ this.readElement(cfg.node);
+ this.updateElement(cfg.node);
+ }
+ Roo.apply(this, cfg);
+
+
+
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+
+ node : false,
+
+ width: '',
+ textAlign : 'left',
+ valign : 'top',
+
+ colspan : 1,
+ rowspan : 1,
+
+
+ // used by context menu
+ friendly_name : 'Table Cell',
+ deleteTitle : false, // use our customer delete
+
+ // context menu is drawn once..
+
+ contextMenu : function(toolbar)
+ {
+
+ var cell = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+ };
+
+ var table = function() {
+ return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+ };
+
+ var lr = false;
+ var saveSel = function()
+ {
+ lr = toolbar.editorcore.getSelection().getRangeAt(0);
+ }
+ var restoreSel = function()
+ {
+ if (lr) {
+ (function() {
+ toolbar.editorcore.focus();
+ var cr = toolbar.editorcore.getSelection();
+ cr.removeAllRanges();
+ cr.addRange(lr);
+ toolbar.editorcore.onEditorEvent();
+ }).defer(10, this);
+
+
+ }
+ }
+
+ var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+
+ var syncValue = toolbar.editorcore.syncValue;
+
+ var fields = {};
+
+ return [
+ {
+ xtype : 'Button',
+ text : 'Edit Table',
+ listeners : {
+ click : function() {
+ var t = toolbar.tb.selectedNode.closest('table');
+ toolbar.editorcore.selectNode(t);
+ toolbar.editorcore.onEditorEvent();
+ }
+ }
+
+ },
+
+
+
+ {
+ xtype : 'TextItem',
+ text : "Column Width: ",
+ xns : rooui.Toolbar
+
+ },
+ {
+ xtype : 'Button',
+ text: '-',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().shrinkColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: '+',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Vertical Align: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'ComboBox',
+ allowBlank : false,
+ displayField : 'val',
+ editable : true,
+ listWidth : 100,
+ triggerAction : 'all',
+ typeAhead : true,
+ valueField : 'val',
+ width : 100,
+ name : 'valign',
+ listeners : {
+ select : function (combo, r, index)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ var b = cell();
+ b.valign = r.get('val');
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.form,
+ store : {
+ xtype : 'SimpleStore',
+ data : [
+ ['top'],
+ ['middle'],
+ ['bottom'] // there are afew more...
+ ],
+ fields : [ 'val'],
+ xns : Roo.data
+ }
+ },
+
+ {
+ xtype : 'TextItem',
+ text : "Merge Cells: ",
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Right',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeRight();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Below',
+ listeners : {
+ click : function (_self, e)
+ {
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().mergeBelow();
+ //block().growColumn();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'TextItem',
+ text : "| ",
+ xns : rooui.Toolbar
+
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Split',
+ listeners : {
+ click : function (_self, e)
+ {
+ //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ cell().split();
+ syncValue();
+ toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Fill',
+ xns : rooui.Toolbar
+
+ },
+
+
+ {
+ xtype : 'Button',
+ text: 'Delete',
+
+ xns : rooui.Toolbar,
+ menu : {
+ xtype : 'Menu',
+ xns : rooui.menu,
+ items : [
+ {
+ xtype : 'Item',
+ html: 'Column',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+
+ cell().deleteColumn();
+ syncValue();
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Row',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ cell().deleteRow();
+ syncValue();
+
+ toolbar.editorcore.selectNode(t.node);
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Separator',
+ xns : rooui.menu
+ },
+ {
+ xtype : 'Item',
+ html: 'Table',
+ listeners : {
+ click : function (_self, e)
+ {
+ var t = table();
+ var nn = t.node.nextSibling || t.node.previousSibling;
+ t.node.parentNode.removeChild(t.node);
+ if (nn) {
+ toolbar.editorcore.selectNode(nn, true);
+ }
+ toolbar.editorcore.onEditorEvent();
+
+ }
+ },
+ xns : rooui.menu
+ }
+ ]
+ }
+ }
+
+ // align... << fixme
+
+ ];
+
+ },
+
+
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ /**
+ * create a DomHelper friendly object - for use with
+ * Roo.DomHelper.markup / overwrite / etc..
+ * ?? should it be called with option to hide all editing features?
+ */
+ toObject : function()
+ {
+
+ var ret = {
+ tag : 'td',
+ contenteditable : 'true', // this stops cell selection from picking the table.
+ 'data-block' : 'Td',
+ valign : this.valign,
+ style : {
+ 'text-align' : this.textAlign,
+ border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+ 'border-collapse' : 'collapse',
+ padding : '6px', // 8 for desktop / 4 for mobile
+ 'vertical-align': this.valign
+ },
+ html : this.html
+ };
+ if (this.width != '') {
+ ret.width = this.width;
+ ret.style.width = this.width;
+ }
+
+
+ if (this.colspan > 1) {
+ ret.colspan = this.colspan ;
+ }
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
+ }
+
+
+
+ return ret;
+
+ },
+
+ readElement : function(node)
+ {
+ node = node ? node : this.node ;
+ this.width = node.style.width;
+ this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+ this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+ this.html = node.innerHTML;
+
+
+ },
+
+ // the default cell object... at present...
+ emptyCell : function() {
+ return {
+ colspan : 1,
+ rowspan : 1,
+ textAlign : 'left',
+ html : " " // is this going to be editable now?
+ };
+
+ },
+
+ removeNode : function()
+ {
+ return this.node.closest('table');
+
+ },
+
+ cellData : false,
+
+ colWidths : false,
+
+ toTableArray : function()
+ {
+ var ret = [];
+ var tab = this.node.closest('tr').closest('table');
+ Array.from(tab.rows).forEach(function(r, ri){
+ ret[ri] = [];
+ });
+ var rn = 0;
+ this.colWidths = [];
+ var all_auto = true;
+ Array.from(tab.rows).forEach(function(r, ri){
+
+ var cn = 0;
+ Array.from(r.cells).forEach(function(ce, ci){
+ var c = {
+ cell : ce,
+ row : rn,
+ col: cn,
+ colspan : ce.colSpan,
+ rowspan : ce.rowSpan
+ };
+ if (ce.isEqualNode(this.node)) {
+ this.cellData = c;
+ }
+ // if we have been filled up by a row?
+ if (typeof(ret[rn][cn]) != 'undefined') {
+ while(typeof(ret[rn][cn]) != 'undefined') {
+ cn++;
+ }
+ c.col = cn;
+ }
+
+ if (typeof(this.colWidths[cn]) == 'undefined') {
+ this.colWidths[cn] = ce.style.width;
+ if (this.colWidths[cn] != '') {
+ all_auto = false;
+ }
+ }
+
+
+ if (c.colspan < 2 && c.rowspan < 2 ) {
+ ret[rn][cn] = c;
+ cn++;
+ return;
+ }
+ for(var j = 0; j < c.rowspan; j++) {
+ if (typeof(ret[rn+j]) == 'undefined') {
+ continue; // we have a problem..
+ }
+ ret[rn+j][cn] = c;
+ for(var i = 0; i < c.colspan; i++) {
+ ret[rn+j][cn+i] = c;
+ }
+ }
+
+ cn += c.colspan;
+ }, this);
+ rn++;
+ }, this);
+
+ // initalize widths.?
+ // either all widths or no widths..
+ if (all_auto) {
+ this.colWidths[0] = false; // no widths flag.
+ }
+
+
+ return ret;
+
+ },
+
+
+
+
+ mergeRight: function()
+ {
+
+ // get the contents of the next cell along..
+ var tr = this.node.closest('tr');
+ var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+ if (i >= tr.childNodes.length - 1) {
+ return; // no cells on right to merge with.
+ }
+ var table = this.toTableArray();
+
+ if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+ // right cell - must be same rowspan and on the same row.
+ if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+ return; // right hand side is not same rowspan.
+ }
+
+
+
+ this.node.innerHTML += ' ' + rc.cell.innerHTML;
+ tr.removeChild(rc.cell);
+ this.colspan += rc.colspan;
+ this.node.setAttribute('colspan', this.colspan);
+
+ },
+
+
+ mergeBelow : function()
+ {
+ var table = this.toTableArray();
+ if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+ return; // no row below
+ }
+ if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+ return; // nothing right?
+ }
+ var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
+
+ if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+ return; // right hand side is not same rowspan.
+ }
+ this.node.innerHTML = this.node.innerHTML + rc.cell.innerHTML ;
+ rc.cell.parentNode.removeChild(rc.cell);
+ this.rowspan += rc.rowspan;
+ this.node.setAttribute('rowspan', this.rowspan);
+ },
+
+ split: function()
+ {
+ if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+ return;
+ }
+ var table = this.toTableArray();
+ var cd = this.cellData;
+ this.rowspan = 1;
+ this.colspan = 1;
+
+ for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+
+
+
+ for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+ if (r == cd.row && c == cd.col) {
+ this.node.removeAttribute('rowspan');
+ this.node.removeAttribute('colspan');
+ continue;
+ }
+
+ var ntd = this.node.cloneNode(); // which col/row should be 0..
+ ntd.removeAttribute('id'); //
+ //ntd.style.width = '';
+ ntd.innerHTML = '';
+ table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1 };
+ }
+
+ }
+ this.redrawAllCells(table);
+
+
+
+ },
+
+
+
+ redrawAllCells: function(table)
+ {
+
+
+ var tab = this.node.closest('tr').closest('table');
+ var ctr = tab.rows[0].parentNode;
+ Array.from(tab.rows).forEach(function(r, ri){
+
+ Array.from(r.cells).forEach(function(ce, ci){
+ ce.parentNode.removeChild(ce);
+ });
+ r.parentNode.removeChild(r);
+ });
+ for(var r = 0 ; r < table.length; r++) {
+ var re = tab.rows[r];
+
+ var re = tab.ownerDocument.createElement('tr');
+ ctr.appendChild(re);
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ re.appendChild(table[r][c].cell);
+
+ table[r][c].cell = false;
+ }
+ }
+
+ },
+ updateWidths : function(table)
+ {
+ for(var r = 0 ; r < table.length; r++) {
+
+ for(var c = 0 ; c < table[r].length; c++) {
+ if (table[r][c].cell === false) {
+ continue;
+ }
+
+ if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+ var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+ el.width = Math.floor(this.colWidths[c]) +'%';
+ el.updateElement(el.node);
+ }
+ table[r][c].cell = false; // done
+ }
+ }
+ },
+ normalizeWidths : function(table)
+ {
+ if (this.colWidths[0] === false) {
+ var nw = 100.0 / this.colWidths.length;
+ this.colWidths.forEach(function(w,i) {
+ this.colWidths[i] = nw;
+ },this);
+ return;
+ }
+ var t = 0, missing = [];
+
+ this.colWidths.forEach(function(w,i) {
+ //if you mix % and
+ this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+ var add = this.colWidths[i];
+ if (add > 0) {
+ t+=add;
+ return;
+ }
+ missing.push(i);
+
+
+ },this);
+ var nc = this.colWidths.length;
+ if (missing.length) {
+ var mult = (nc - missing.length) / (1.0 * nc);
+ var t = mult * t;
+ var ew = (100 -t) / (1.0 * missing.length);
+ this.colWidths.forEach(function(w,i) {
+ if (w > 0) {
+ this.colWidths[i] = w * mult;
+ return;
+ }
+
+ this.colWidths[i] = ew;
+ }, this);
+ // have to make up numbers..
+
+ }
+ // now we should have all the widths..
+
+ },
-}
+ shrinkColumn : function()
+ {
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 0.8;
+ if (nw < 5) {
+ return;
+ }
+ var otherAdd = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] += otherAdd
+ }, this);
+ this.updateWidths(table);
+
+ },
+ growColumn : function()
+ {
+ var table = this.toTableArray();
+ this.normalizeWidths(table);
+ var col = this.cellData.col;
+ var nw = this.colWidths[col] * 1.2;
+ if (nw > 90) {
+ return;
+ }
+ var otherSub = (this.colWidths[col] * 0.2) / (this.colWidths.length -1);
+ this.colWidths.forEach(function(w,i) {
+ if (i == col) {
+ this.colWidths[i] = nw;
+ return;
+ }
+ this.colWidths[i] -= otherSub
+ }, this);
+ this.updateWidths(table);
+
+ },
+ deleteRow : function()
+ {
+ // delete this rows 'tr'
+ // if any of the cells in this row have a rowspan > 1 && row!= this row..
+ // then reduce the rowspan.
+ var table = this.toTableArray();
+ // this.cellData.row;
+ for (var i =0;i< table[this.cellData.row].length ; i++) {
+ var c = table[this.cellData.row][i];
+ if (c.row != this.cellData.row) {
+
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ continue;
+ }
+ if (c.rowspan > 1) {
+ c.rowspan--;
+ c.cell.setAttribute('rowspan', c.rowspan);
+ }
+ }
+ table.splice(this.cellData.row,1);
+ this.redrawAllCells(table);
+
+ },
+ deleteColumn : function()
+ {
+ var table = this.toTableArray();
+
+ for (var i =0;i< table.length ; i++) {
+ var c = table[i][this.cellData.col];
+ if (c.col != this.cellData.col) {
+ table[i][this.cellData.col].colspan--;
+ } else if (c.colspan > 1) {
+ c.colspan--;
+ c.cell.setAttribute('colspan', c.colspan);
+ }
+ table[i].splice(this.cellData.col,1);
+ }
+
+ this.redrawAllCells(table);
+ }
+
+
+
+
+})
//' +
+ '' +
+ '