4 * @class Roo.htmleditor.BlockFigure
5 * Block that has an image and a figcaption
6 * @cfg {String} image_src the url for the image
7 * @cfg {String} align (left|right) alignment for the block default left
8 * @cfg {String} caption the text to appear below (and in the alt tag)
9 * @cfg {String} caption_display (block|none) display or not the caption
10 * @cfg {String|number} image_width the width of the image number or %?
11 * @cfg {String|number} image_height the height of the image number or %?
14 * Create a new Filter.
15 * @param {Object} config Configuration options
18 Roo.htmleditor.BlockFigure = function(cfg)
21 this.readElement(cfg.node);
22 this.updateElement(cfg.node);
26 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
33 caption_display : 'block',
39 // margin: '2%', not used
41 text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
44 // used by context menu
45 friendly_name : 'Image with caption',
46 deleteTitle : "Delete Image and Caption",
48 contextMenu : function(toolbar)
51 var block = function() {
52 return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
56 var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
58 var syncValue = toolbar.editorcore.syncValue;
66 xns : rooui.Toolbar //Boostrap?
73 click: function (btn, state)
78 title : "Image Source URL",
79 msg : "Enter the url for the image",
80 buttons: this.OKCANCEL,
82 block().image_src = val;
83 block().updateElement();
85 toolbar.editorcore.onEditorEvent();
89 //multiline: multiline,
91 value : block().image_src
104 keyup : function (combo, e)
106 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
108 b.image_src = this.getValue();
111 toolbar.editorcore.onEditorEvent();
120 xns : rooui.Toolbar //Boostrap?
125 displayField : 'val',
128 triggerAction : 'all',
134 select : function (combo, r, index)
136 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
138 b.width = r.get('val');
141 toolbar.editorcore.onEditorEvent();
146 xtype : 'SimpleStore',
159 xns : rooui.Toolbar //Boostrap?
164 displayField : 'val',
167 triggerAction : 'all',
173 select : function (combo, r, index)
175 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
177 b.align = r.get('val');
180 toolbar.editorcore.onEditorEvent();
185 xtype : 'SimpleStore',
199 text: 'Hide Caption',
200 name : 'caption_display',
203 setValue : function(v) {
204 this.toggle(v == 'block' ? false : true);
207 toggle: function (btn, state)
210 b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
211 this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
214 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
215 toolbar.editorcore.onEditorEvent();
224 * create a DomHelper friendly object - for use with
225 * Roo.DomHelper.markup / overwrite / etc..
227 toObject : function()
229 var d = document.createElement('div');
230 d.innerHTML = this.caption;
232 var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0;
236 contenteditable : 'false',
237 src : this.image_src,
238 alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
248 '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
250 '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
255 if (this.href.length > 0) {
259 contenteditable : 'true',
267 if (this.video_url.length > 0) {
272 allowfullscreen : true,
273 width : 420, // these are for video tricks - that we replace the outer
275 src : this.video_url,
284 'data-block' : 'Figure',
285 contenteditable : 'false',
289 'max-width': this.width,
303 contenteditable : true,
305 'text-align': 'left',
306 'margin-top' : '16px',
307 'font-size' : '16px',
308 'line-height' : '24px',
309 'font-style': 'italic',
310 display : this.caption_display
312 cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
321 readElement : function(node)
323 // this should not really come from the link...
324 this.video_url = this.getVal(node, 'div', 'src');
325 this.cls = this.getVal(node, 'div', 'class');
326 this.href = this.getVal(node, 'a', 'href');
328 this.image_src = this.getVal(node, 'img', 'src');
330 this.align = this.getVal(node, 'figure', 'align');
331 this.caption = this.getVal(node, 'figcaption', 'html');
332 //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
333 this.width = this.getVal(node, 'figure', 'style', 'max-width');
334 //this.margin = this.getVal(node, 'figure', 'style', 'margin');
337 removeNode : function()