X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=f8ab6a0624d0068f5c899c9faef5a4d27fb3518f;hb=f2689269a2a28287e338dbca978ed7bbeaf2c060;hp=fb5ef4cf07167c18ed65dbb1804f0626ea20fed6;hpb=513ca81dcb9d6027846e6806a90e5e04b49ff829;p=roojs1
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index fb5ef4cf07..f8ab6a0624 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -26025,7 +26025,7 @@ Roo.htmleditor.Filter.prototype = {
Roo.each( Array.from(dom.childNodes), function( e ) {
switch(true) {
- case e.nodeType == 8 && typeof(this.replaceComment) != 'undefined': // comment
+ case e.nodeType == 8 && this.replaceComment !== false: // comment
this.replaceComment(e);
return;
@@ -26225,7 +26225,7 @@ Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
{
tag : true, // all elements.
- replace : function(n)
+ replaceTag : function(n)
{
n.parentNode.removeChild(n);
}
@@ -26624,7 +26624,7 @@ Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
var cn = Array.from(node.childNodes);
var nn = node;
Roo.each(inject, function(t) {
- var nc = node.ownerDocument.createelement(t);
+ var nc = node.ownerDocument.createElement(t);
nn.appendChild(nc);
nn = nc;
});
@@ -26852,7 +26852,7 @@ 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();
+ Roo.htmleditor.Block.cache[id].readElement(node);
return Roo.htmleditor.Block.cache[id];
}
var db = node.getAttribute('data-block');
@@ -26934,14 +26934,17 @@ Roo.htmleditor.Block.prototype = {
// but kiss for now.
n = node.getElementsByTagName(tag).item(0);
}
+ if (!n) {
+ return '';
+ }
if (attr == 'html') {
return n.innerHTML;
}
if (attr == 'style') {
- return n.style[style]
+ return n.style[style];
}
- return Roo.get(n).attr(attr);
+ return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
},
/**
@@ -26972,8 +26975,8 @@ Roo.htmleditor.Block.prototype = {
* 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} text_align (left|right) alignment for the text caption 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 %?
*
@@ -26995,19 +26998,23 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
// setable values.
image_src: '',
-
align: 'center',
caption : '',
- text_align: 'left',
-
+ caption_display : 'block',
width : '100%',
- margin: '2%',
+ 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)
{
@@ -27024,6 +27031,92 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
return [
{
+ xtype : 'TextItem',
+ text : "Source: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
+ {
+ xtype : 'Button',
+ text: 'Change Image URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Image Source URL",
+ msg : "Enter the url for the image",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.image_src = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.image_src
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+ {
+ xtype : 'Button',
+ text: 'Change Link URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ var b = block();
+
+ Roo.MessageBox.show({
+ title : "Link URL",
+ msg : "Enter the url for the link - leave blank to have no link",
+ buttons: Roo.MessageBox.OKCANCEL,
+ fn: function(btn, val){
+ if (btn != 'ok') {
+ return;
+ }
+ b.href = val;
+ b.updateElement();
+ syncValue();
+ toolbar.editorcore.onEditorEvent();
+ },
+ minWidth:250,
+ prompt:true,
+ //multiline: multiline,
+ modal : true,
+ value : b.href
+ });
+ }
+ },
+ xns : rooui.Toolbar
+ },
+ {
+ xtype : 'Button',
+ text: 'Show Video URL',
+
+ listeners : {
+ click: function (btn, state)
+ {
+ Roo.MessageBox.alert("Video URL",
+ block().video_url == '' ? 'This image is not linked ot a video' :
+ 'The image is linked to: ' + block().video_url + '');
+ }
+ },
+ xns : rooui.Toolbar
+ },
+
+
+ {
xtype : 'TextItem',
text : "Width: ",
xns : rooui.Toolbar //Boostrap?
@@ -27037,7 +27130,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
triggerAction : 'all',
typeAhead : true,
valueField : 'val',
- width : 100,
+ width : 70,
name : 'width',
listeners : {
select : function (combo, r, index)
@@ -27076,7 +27169,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
triggerAction : 'all',
typeAhead : true,
valueField : 'val',
- width : 100,
+ width : 70,
name : 'align',
listeners : {
select : function (combo, r, index)
@@ -27101,30 +27194,30 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
xns : Roo.data
}
},
+
+
{
- xtype : 'TextItem',
- text : "Image Source: ",
- xns : rooui.Toolbar //Boostrap?
- },
- {
- xtype : 'TextField',
- allowBlank : false,
- width : 150,
- name : 'src',
+ xtype : 'Button',
+ text: 'Hide Caption',
+ name : 'caption_display',
+ pressed : false,
+ enableToggle : true,
+ setValue : function(v) {
+ this.toggle(v == 'block' ? false : true);
+ },
listeners : {
- change : function (combo, r, index)
+ toggle: function (btn, state)
{
- return;
- toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
- var b = block();
- b.align = r.get('val');
+ 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.form
-
+ xns : rooui.Toolbar
}
];
@@ -27138,48 +27231,125 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
var d = document.createElement('div');
d.innerHTML = this.caption;
- return {
+ 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, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+ 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: 'table',
+ display: 'block',
float : this.align ,
- width : this.width,
- margin: this.margin
+ 'max-width': this.width,
+ width : 'auto',
+ margin: m,
+ padding: '10px'
+
},
+
+
+ align : this.align,
cn : [
- {
- tag : 'img',
- src : this.image_src,
- alt : d.innerText.replace(/\n/g, " "), // removeHTML..
- style: {
- width: '100%'
- }
- },
+ img,
+
{
tag: 'figcaption',
- contenteditable : true,
+
style : {
- 'text-align': this.text_align
+ 'text-align': 'left',
+ 'margin-top' : '16px',
+ 'font-size' : '16px',
+ 'line-height' : '24px',
+ display : this.caption_display
},
- html : this.caption
+ cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
+ cn : [
+ {
+ // we can not rely on yahoo syndication to use CSS elements - so have to use '' to encase stuff.
+ tag : 'i',
+ contenteditable : true,
+ 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', 'style', 'float');
+
+ 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', 'width');
- this.margin = this.getVal(node, 'figure', 'style', 'margin');
+ // remove '
+ if (this.caption.trim().match(/^]*>/i)) {
+ this.caption = this.caption.trim().replace(/^]*>/i, '').replace(/^<\/i>$/i, '');
+ }
+ //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;
+ }
@@ -27249,6 +27419,11 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
var fields = {};
return [
+ {
+ xtype : 'TextItem',
+ text : "Width: ",
+ xns : rooui.Toolbar //Boostrap?
+ },
{
xtype : 'ComboBox',
allowBlank : false,
@@ -27458,22 +27633,18 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
this.rows = [];
this.no_row = 0;
- var trs = Array.from(node.getElementsByTagName('tr'));
+ var trs = Array.from(node.rows);
trs.forEach(function(tr) {
var row = [];
this.rows.push(row);
- if (Roo.get(tr).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
- return;
- }
+
this.no_row++;
var no_column = 0;
- Array.from(tr.getElementsByTagName('td')).forEach(function(td) {
- if (Roo.get(td).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
- return;
- }
+ Array.from(tr.cells).forEach(function(td) {
+
var add = {
- colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan') : 1,
- rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan') : 1,
+ 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
};
@@ -27639,7 +27810,7 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
addRow : function()
{
- row = [];
+ var row = [];
for (var i = 0; i < this.no_col; i++ ) {
row.push(this.emptyCell());
@@ -27723,6 +27894,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
width: '',
textAlign : 'left',
+ valign : 'top',
colspan : 1,
rowspan : 1,
@@ -27730,7 +27902,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
// used by context menu
friendly_name : 'Table Cell',
- deleteTitle : 'Delete Table',
+ deleteTitle : false, // use our customer delete
// context menu is drawn once..
@@ -27821,6 +27993,47 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
},
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: ",
@@ -27882,7 +28095,82 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
}
},
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
];
@@ -27907,22 +28195,27 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
tag : 'td',
contenteditable : 'true', // this stops cell selection from picking the table.
'data-block' : 'Td',
- width: this.width,
+ valign : this.valign,
style : {
- width: this.width,
'text-align' : this.textAlign,
border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
'border-collapse' : 'collapse',
- padding : '6px' // 8 for desktop / 4 for mobile
+ 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 = cell.colspan ;
+ ret.colspan = this.colspan ;
}
- if (ret.rowspan > 1) {
- this.rowspan = cell.rowspan ;
+ if (this.rowspan > 1) {
+ ret.rowspan = this.rowspan ;
}
@@ -27935,7 +28228,8 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
{
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;
@@ -27955,8 +28249,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
removeNode : function()
{
return this.node.closest('table');
-
-
+
},
cellData : false,
@@ -28129,13 +28422,19 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
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;
@@ -28251,9 +28550,52 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
}, 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);
}
+
+
})
//