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?
70 text: 'Change Image URL',
73 click: function (btn, state)
78 title : "Image Source URL",
79 msg : "Enter the url for the image",
80 buttons: Roo.MessageBox.OKCANCEL,
81 fn: function(btn, val){
88 toolbar.editorcore.onEditorEvent();
92 //multiline: multiline,
103 text: 'Change Link URL',
106 click: function (btn, state)
110 Roo.MessageBox.show({
112 msg : "Enter the url for the link - leave blank to have no link",
113 buttons: Roo.MessageBox.OKCANCEL,
114 fn: function(btn, val){
121 toolbar.editorcore.onEditorEvent();
125 //multiline: multiline,
135 text: 'Show Video URL',
138 click: function (btn, state)
140 Roo.MessageBox.alert("Video URL",
141 block().video_url == '' ? 'This image is not linked ot a video' :
142 'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
152 xns : rooui.Toolbar //Boostrap?
157 displayField : 'val',
160 triggerAction : 'all',
166 select : function (combo, r, index)
168 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
170 b.width = r.get('val');
173 toolbar.editorcore.onEditorEvent();
178 xtype : 'SimpleStore',
193 xns : rooui.Toolbar //Boostrap?
198 displayField : 'val',
201 triggerAction : 'all',
207 select : function (combo, r, index)
209 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
211 b.align = r.get('val');
214 toolbar.editorcore.onEditorEvent();
219 xtype : 'SimpleStore',
233 text: 'Hide Caption',
234 name : 'caption_display',
237 setValue : function(v) {
238 // this trigger toggle.
240 this.setText(v ? "Hide Caption" : "Show Caption");
241 this.setPressed(v != 'block');
244 toggle: function (btn, state)
247 b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
248 this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
251 toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
252 toolbar.editorcore.onEditorEvent();
261 * create a DomHelper friendly object - for use with
262 * Roo.DomHelper.markup / overwrite / etc..
264 toObject : function()
266 var d = document.createElement('div');
267 d.innerHTML = this.caption;
269 var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0;
271 var iw = this.align == 'center' ? this.width : '100%';
274 contenteditable : 'false',
275 src : this.image_src,
276 alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
279 maxWidth : iw + ' !important', // this is not getting rendered?
283 width: this.align == 'center' ? this.width : '100%'
288 '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
290 '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
295 if (this.href.length > 0) {
299 contenteditable : 'true',
307 if (this.video_url.length > 0) {
312 allowfullscreen : true,
313 width : 420, // these are for video tricks - that we replace the outer
315 src : this.video_url,
326 'data-block' : 'Figure',
327 'data-width' : this.width,
328 'data-caption' : this.caption,
329 'data-caption-display' : this.caption_display,
330 contenteditable : 'false',
335 maxWidth : this.align == 'center' ? '100% !important' : (this.width + ' !important'),
336 width : this.align == 'center' ? '100%' : this.width,
338 padding: this.align == 'center' ? '0' : '0 10px' ,
339 textAlign : this.align // seems to work for email..
349 // show figcaption only if caption_display is 'block'
350 if(this.caption_display == 'block') {
357 display : this.caption_display,
358 maxWidth : (this.align == 'center' ? this.width : '100%' ) + ' !important',
360 width: this.align == 'center' ? this.width : '100%'
364 cls : this.cls.length > 0 ? (this.cls + '-thumbnail' ) : '',
375 // we can not rely on yahoo syndication to use CSS elements - so have to use '<i>' to encase stuff.
377 contenteditable : Roo.htmleditor.BlockFigure.caption_edit,
378 html : this.caption.length ? this.caption : "Caption" // fake caption
392 readElement : function(node)
394 // this should not really come from the link...
395 this.video_url = this.getVal(node, 'div', 'src');
396 this.cls = this.getVal(node, 'div', 'class');
397 this.href = this.getVal(node, 'a', 'href');
400 this.image_src = this.getVal(node, 'img', 'src');
402 this.align = this.getVal(node, 'figure', 'align');
404 // caption display is stored in figure
405 this.caption_display = this.getVal(node, true, 'data-caption-display');
407 // backward compatible
408 // it was stored in figcaption
409 if(this.caption_display == '') {
410 this.caption_display = this.getVal(node, 'figcaption', 'data-display');
413 // read caption from figcaption
414 var figcaption = this.getVal(node, 'figcaption', false);
416 if (figcaption !== '') {
417 this.caption = this.getVal(figcaption, 'i', 'html');
421 // read caption from data-caption in figure if no caption from figcaption
422 var dc = this.getVal(node, true, 'data-caption');
424 if(this.caption_display == 'none' && dc && dc.length){
428 //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
429 this.width = this.getVal(node, true, 'data-width');
430 //this.margin = this.getVal(node, 'figure', 'style', 'margin');
433 removeNode : function()
447 Roo.apply(Roo.htmleditor.BlockFigure, {