fix image loading

[roojs1] / Roo / htmleditor / BlockFigure.js

diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js
index 16c5448..0cc0e7a 100644 (file)
--- a/Roo/htmleditor/BlockFigure.js
+++ b/Roo/htmleditor/BlockFigure.js
@@ -32,6 +32,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     caption : '',
     caption_display : 'block',
     width : '100%',
+    cls : '',
     href: '',
     video_url : '',
     
@@ -65,24 +66,86 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 xns : rooui.Toolbar  //Boostrap?
             },
             {
-                xtype : 'TextField',
-                allowBlank : false,
-                width : 150,
-                name : 'image_src',
+                xtype : 'Button',
+                text: 'Change Image URL',
+                 
                 listeners : {
-                    keyup : function (combo, e)
-                    { 
-                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                    click: function (btn, state)
+                    {
                         var b = block();
-                        b.image_src = this.getValue();
-                        b.updateElement();
-                        syncValue();
-                        toolbar.editorcore.onEditorEvent();
+                        
+                        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.form
-                
+                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: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            
+            
             {
                 xtype : 'TextItem',
                 text : "Width: ",
@@ -202,8 +265,9 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         
         var img =   {
             tag : 'img',
+            contenteditable : 'false',
             src : this.image_src,
-            alt : d.innerText.replace(/\n/g, " "), // removeHTML..
+            alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
             style: {
                 width : 'auto',
                 'max-width': '100%',
@@ -224,6 +288,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
             img = {
                 tag : 'a',
                 href: this.href,
+                contenteditable : 'true',
                 cn : [
                     img
                 ]
@@ -239,13 +304,15 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 allowfullscreen : true,
                 width : 420,  // these are for video tricks - that we replace the outer
                 height : 315,
-                src : this.video_src,
+                src : this.video_url,
                 cn : [
                     img
                 ]
             };
         }
         
+        var captionhtml = this.caption_display == 'hidden' ? this.caption : (this.caption.length ? this.caption : "Caption");
+        
         return  {
             tag: 'figure',
             'data-block' : 'Figure',
@@ -267,17 +334,23 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
               
                 {
                     tag: 'figcaption',
-                    contenteditable : true,
+                    
                     style : {
                         'text-align': 'left',
                         'margin-top' : '16px',
                         'font-size' : '16px',
                         'line-height' : '24px',
-                        'font-style': 'italic',
-                        display : this.caption_display
+                         display : this.caption_display
                     },
                     cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
-                    html : this.caption
+                    cn : [
+                        {
+                            // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
+                            tag : 'i',
+                            contenteditable : true,
+                            html : captionhtml
+                        }
+                    ]
                     
                 }
             ]
@@ -288,7 +361,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     readElement : function(node)
     {
         // this should not really come from the link...
-        this.video_src = this.getVal(node, 'div', 'src');
+        this.video_url = this.getVal(node, 'div', 'src');
         this.cls = this.getVal(node, 'div', 'class');
         this.href = this.getVal(node, 'a', 'href');
         
@@ -296,6 +369,10 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
          
         this.align = this.getVal(node, 'figure', 'align');
         this.caption = this.getVal(node, 'figcaption', 'html');
+        // remove '<i>
+        if (this.caption.trim().match(/^<i[^>]*>/i)) {
+            this.caption = this.caption.trim().replace(/^<i[^>]*>/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');