From: Alan <alan@roojs.com>
Date: Wed, 23 Feb 2022 04:25:33 +0000 (+0800)
Subject: more styling
X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=a78f2c41d7e308fabb67ced13c90e84647514cac

more styling
---

diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js
index f27d64a1e7..118457f360 100644
--- a/Roo/htmleditor/BlockFigure.js
+++ b/Roo/htmleditor/BlockFigure.js
@@ -310,8 +310,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 ]
             };
         }
-        
-        var captionhtml = this.caption_display == 'hidden' ? this.caption : (this.caption.length ? this.caption : "Caption");
+        // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        var captionhtml = this.caption_display == 'hidden' ? '' : (this.caption.length ? this.caption : "Caption");
         
         return  {
             tag: 'figure',
diff --git a/docs/src/Roo_htmleditor_BlockFigure.js.html b/docs/src/Roo_htmleditor_BlockFigure.js.html
index cccd3dd34e..9833ab4186 100644
--- a/docs/src/Roo_htmleditor_BlockFigure.js.html
+++ b/docs/src/Roo_htmleditor_BlockFigure.js.html
@@ -317,6 +317,7 @@
             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
+
             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
                 </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">float </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">,
@@ -365,6 +366,7 @@
         </span><span class="jsdoc-var">this.cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'class'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">this.href </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'href'</span><span class="jsdoc-syntax">);
 
+
         </span><span class="jsdoc-var">this.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">);
 
         </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'align'</span><span class="jsdoc-syntax">);
@@ -373,6 +375,7 @@
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.caption.trim</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.match</span><span class="jsdoc-syntax">(/^&lt;i[^&gt;]*&gt;/i)) {
             </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption.trim</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/^&lt;i[^&gt;]*&gt;/i, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/^&lt;\/i&gt;$/i, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
         }
+        </span><span class="jsdoc-var">this.caption_display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-comment">//this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
         </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-comment">//this.margin = this.getVal(node, 'figure', 'style', 'margin');
diff --git a/roojs-all.js b/roojs-all.js
index f0de76676b..39827689f6 100644
--- a/roojs-all.js
+++ b/roojs-all.js
@@ -1993,7 +1993,7 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.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(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode);A.editorcore.onEditorEvent();
 }},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width=='50%'&&this.align=='center'?'0 auto':0;var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:'auto','max-width':'100%',margin:'0px'}
-};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='hidden'?this.caption:(this.caption.length?this.caption:"Caption");
+};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='hidden'?'':(this.caption.length?this.caption:"Caption");
 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:[A,{tag:'figcaption',style:{'text-align':'left','margin-top':'16px','font-size':'16px','line-height':'24px',display:this.caption_display}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'i',contenteditable:true,html:B}]}]};},readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');
 this.align=this.getVal(A,'figure','align');this.caption=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^<i[^>]*>/i)){this.caption=this.caption.trim().replace(/^<i[^>]*>/i,'').replace(/^<\/i>$/i,'');}this.caption_display=this.getVal(A,'figcaption','style','display');
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 2d53d54761..6671154f93 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -27287,6 +27287,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
             tag: 'figure',
             'data-block' : 'Figure',
             contenteditable : 'false',
+            
             style : {
                 display: 'block',
                 float :  this.align ,
@@ -27335,6 +27336,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         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');
@@ -27343,6 +27345,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         if (this.caption.trim().match(/^<i[^>]*>/i)) {
             this.caption = this.caption.trim().replace(/^<i[^>]*>/i, '').replace(/^<\/i>$/i, '');
         }
+        this.caption_display = this.getVal(node, 'figcaption', 'style', 'display');
         //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');
diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 15d5c60b57..ad887704fd 100644
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -1186,8 +1186,8 @@ var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 };if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='hidden'?this.caption:(this.caption.length?this.caption:"Caption");
 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:[A,{tag:'figcaption',style:{'text-align':'left','margin-top':'16px','font-size':'16px','line-height':'24px',display:this.caption_display}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'i',contenteditable:true,html:B}]}]};},readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');
-this.align=this.getVal(A,'figure','align');this.caption=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^<i[^>]*>/i)){this.caption=this.caption.trim().replace(/^<i[^>]*>/i,'').replace(/^<\/i>$/i,'');}this.width=this.getVal(A,'figure','style','max-width');
-},removeNode:function(){return this.node;}})
+this.align=this.getVal(A,'figure','align');this.caption=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^<i[^>]*>/i)){this.caption=this.caption.trim().replace(/^<i[^>]*>/i,'').replace(/^<\/i>$/i,'');}this.caption_display=this.getVal(A,'figcaption','style','display');
+this.width=this.getVal(A,'figure','style','max-width');},removeNode:function(){return this.node;}})
 // Roo/htmleditor/BlockTable.js
 Roo.htmleditor.BlockTable=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);if(!A.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%',friendly_name:'Table',deleteTitle:'Delete Table',contextMenu:function(A){var B=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode);};var C=typeof(Roo.bootstrap)=='undefined'?Roo:Roo.bootstrap;
diff --git a/roojs-debug.js b/roojs-debug.js
index abcccc5a03..0a2ec46caf 100644
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -48117,8 +48117,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 ]
             };
         }
-        
-        var captionhtml = this.caption_display == 'hidden' ? this.caption : (this.caption.length ? this.caption : "Caption");
+        // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        var captionhtml = this.caption_display == 'hidden' ? '' : (this.caption.length ? this.caption : "Caption");
         
         return  {
             tag: 'figure',
diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 8d28b32d36..fd1545fe82 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -23648,8 +23648,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 ]
             };
         }
-        
-        var captionhtml = this.caption_display == 'hidden' ? this.caption : (this.caption.length ? this.caption : "Caption");
+        // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        var captionhtml = this.caption_display == 'hidden' ? '' : (this.caption.length ? this.caption : "Caption");
         
         return  {
             tag: 'figure',
diff --git a/roojs-ui.js b/roojs-ui.js
index 3da9155559..e7e9fd588b 100644
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -1048,7 +1048,7 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.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(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode);A.editorcore.onEditorEvent();
 }},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width=='50%'&&this.align=='center'?'0 auto':0;var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:'auto','max-width':'100%',margin:'0px'}
-};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='hidden'?this.caption:(this.caption.length?this.caption:"Caption");
+};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B=this.caption_display=='hidden'?'':(this.caption.length?this.caption:"Caption");
 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:[A,{tag:'figcaption',style:{'text-align':'left','margin-top':'16px','font-size':'16px','line-height':'24px',display:this.caption_display}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'i',contenteditable:true,html:B}]}]};},readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');
 this.align=this.getVal(A,'figure','align');this.caption=this.getVal(A,'figcaption','html');if(this.caption.trim().match(/^<i[^>]*>/i)){this.caption=this.caption.trim().replace(/^<i[^>]*>/i,'').replace(/^<\/i>$/i,'');}this.caption_display=this.getVal(A,'figcaption','style','display');