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',
36 // margin: '2%', not used
38 text_align: 'left', // (left|right) alignment for the text caption default left. - not used at present
41 // used by context menu
42 friendly_name : 'Image with caption',
43 deleteTitle : "Delete Image and Caption",
45 contextMenu : function(toolbar)
48 var block = function() {
49 return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
53 var rooui = typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
55 var syncValue = toolbar.editorcore.syncValue;
63 xns : rooui.Toolbar //Boostrap?
71 keyup : function (combo, e)
73 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
75 b.image_src = this.getValue();
78 toolbar.editorcore.onEditorEvent();
87 xns : rooui.Toolbar //Boostrap?
95 triggerAction : 'all',
101 select : function (combo, r, index)
103 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
105 b.width = r.get('val');
108 toolbar.editorcore.onEditorEvent();
113 xtype : 'SimpleStore',
126 xns : rooui.Toolbar //Boostrap?
131 displayField : 'val',
134 triggerAction : 'all',
140 select : function (combo, r, index)
142 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
144 b.align = r.get('val');
147 toolbar.editorcore.onEditorEvent();
152 xtype : 'SimpleStore',
166 text: 'Hide Caption',
167 name : 'caption_display',
170 setValue : function(v) {
171 this.toggle(v == 'block' ? false : true);
174 toggle: function (btn, state)
177 b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
178 this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
181 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
182 toolbar.editorcore.onEditorEvent();
191 * create a DomHelper friendly object - for use with
192 * Roo.DomHelper.markup / overwrite / etc..
194 toObject : function()
196 var d = document.createElement('div');
197 d.innerHTML = this.caption;
199 var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0;
203 'data-block' : 'Figure',
204 contenteditable : 'false',
208 'max-width': this.width,
218 src : this.image_src,
219 alt : d.innerText.replace(/\n/g, " "), // removeHTML..
230 contenteditable : true,
232 'text-align': 'left',
233 'margin-top' : '16px',
234 'font-size' : '16px',
235 'line-height' : '24px',
236 'font-style': 'italic',
237 display : this.caption_display
247 readElement : function(node)
249 this.image_src = this.getVal(node, 'img', 'src');
250 this.align = this.getVal(node, 'figure', 'align');
251 this.caption = this.getVal(node, 'figcaption', 'html');
252 //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
253 this.width = this.getVal(node, 'figure', 'style', 'max-width');
254 //this.margin = this.getVal(node, 'figure', 'style', 'margin');
257 removeNode : function()