git.roojs.org Git - roojs1/blob - Roo/htmleditor/BlockFigure.js

   1
   2
   3 /**
   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} text_align (left|right) alignment for the text caption default left.
   9  * @cfg {String} caption the text to appear below  (and in the alt tag)
  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 %?
  12  *
  13  * @constructor
  14  * Create a new Filter.
  15  * @param {Object} config Configuration options
  16  */
  17
  18 Roo.htmleditor.BlockFigure = function(cfg)
  19 {
  20     if (cfg.node) {
  21         this.readElement(cfg.node);
  22         this.updateElement(cfg.node);
  23     }
  24     Roo.apply(this, cfg);
  25 }
  26 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
  27
  28
  29     // setable values.
  30     image_src: '',
  31
  32     align: 'center',
  33     caption : '',
  34     text_align: 'left',
  35
  36     width : '100%',
  37     margin: '2%',
  38
  39     // used by context menu
  40     friendly_name : 'Image with caption',
  41     deleteTitle : "Delete Image and Caption",
  42
  43
  44     contextMenu : function(toolbar)
  45     {
  46
  47         var block = function() {
  48             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
  49         };
  50
  51
  52         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
  53
  54         var syncValue = toolbar.editorcore.syncValue;
  55
  56         var fields = {};
  57
  58         return [
  59              {
  60                 xtype : 'TextItem',
  61                 text : "Width: ",
  62                 xns : rooui.Toolbar  //Boostrap?
  63             },
  64             {
  65                 xtype : 'ComboBox',
  66                 allowBlank : false,
  67                 displayField : 'val',
  68                 editable : true,
  69                 listWidth : 100,
  70                 triggerAction : 'all',
  71                 typeAhead : true,
  72                 valueField : 'val',
  73                 width : 100,
  74                 name : 'width',
  75                 listeners : {
  76                     select : function (combo, r, index)
  77                     {
  78                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
  79                         var b = block();
  80                         b.width = r.get('val');
  81                         b.updateElement();
  82                         syncValue();
  83                         toolbar.editorcore.onEditorEvent();
  84                     }
  85                 },
  86                 xns : rooui.form,
  87                 store : {
  88                     xtype : 'SimpleStore',
  89                     data : [
  90                         ['auto'],
  91                         ['50%'],
  92                         ['100%']
  93                     ],
  94                     fields : [ 'val'],
  95                     xns : Roo.data
  96                 }
  97             },
  98             {
  99                 xtype : 'TextItem',
 100                 text : "Align: ",
 101                 xns : rooui.Toolbar  //Boostrap?
 102             },
 103             {
 104                 xtype : 'ComboBox',
 105                 allowBlank : false,
 106                 displayField : 'val',
 107                 editable : true,
 108                 listWidth : 100,
 109                 triggerAction : 'all',
 110                 typeAhead : true,
 111                 valueField : 'val',
 112                 width : 100,
 113                 name : 'width',
 114                 listeners : {
 115                     select : function (combo, r, index)
 116                     {
 117                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
 118                         var b = block();
 119                         b.align = r.get('val');
 120                         b.updateElement();
 121                         syncValue();
 122                         toolbar.editorcore.onEditorEvent();
 123                     }
 124                 },
 125                 xns : rooui.form,
 126                 store : {
 127                     xtype : 'SimpleStore',
 128                     data : [
 129                         ['left'],
 130                         ['right'],
 131                         ['center']
 132                     ],
 133                     fields : [ 'val'],
 134                     xns : Roo.data
 135                 }
 136             },
 137             {
 138                 xtype : 'TextItem',
 139                 text : "Image Source: ",
 140                 xns : rooui.Toolbar  //Boostrap?
 141             },
 142             {
 143                 xtype : 'TextField',
 144                 allowBlank : false,
 145                 width : 100,
 146                 name : 'width',
 147                 listeners : {
 148                     change : function (combo, r, index)
 149                     {
 150                         return;
 151                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
 152                         var b = block();
 153                         b.align = r.get('val');
 154                         b.updateElement();
 155                         syncValue();
 156                         toolbar.editorcore.onEditorEvent();
 157                     }
 158                 },
 159                 xns : rooui.form
 160
 161             }
 162         ];
 163
 164     },
 165     /**
 166      * create a DomHelper friendly object - for use with
 167      * Roo.DomHelper.markup / overwrite / etc..
 168      */
 169     toObject : function()
 170     {
 171         var d = document.createElement('div');
 172         d.innerHTML = this.caption;
 173
 174         return {
 175             tag: 'figure',
 176             'data-block' : 'Figure',
 177             contenteditable : 'false',
 178             style : {
 179                 display: 'table',
 180                 float :  this.align ,
 181                 width :  this.width,
 182                 margin:  this.margin
 183             },
 184             cn : [
 185                 {
 186                     tag : 'img',
 187                     src : this.image_src,
 188                     alt : d.innerText.replace(/\n/g, " "), // removeHTML..
 189                     style: {
 190                         width: '100%'
 191                     }
 192                 },
 193                 {
 194                     tag: 'figcaption',
 195                     contenteditable : true,
 196                     style : {
 197                         'text-align': this.text_align
 198                     },
 199                     html : this.caption
 200
 201                 }
 202             ]
 203         };
 204     },
 205
 206     readElement : function(node)
 207     {
 208         this.image_src = this.getVal(node, 'img', 'src');
 209         this.align = this.getVal(node, 'figure', 'style', 'float');
 210         this.caption = this.getVal(node, 'figcaption', 'html');
 211         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 212         this.width = this.getVal(node, 'figure', 'style', 'width');
 213         this.margin = this.getVal(node, 'figure', 'style', 'margin');
 214
 215     }
 216
 217
 218
 219
 220
 221
 222
 223
 224 })
 225