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} 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 %?
  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     align: 'center',
  32     caption : '',
  33     caption_display : 'block',
  34     width : '100%',
  35
  36     // margin: '2%', not used
  37
  38     text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
  39
  40
  41     // used by context menu
  42     friendly_name : 'Image with caption',
  43     deleteTitle : "Delete Image and Caption",
  44
  45     contextMenu : function(toolbar)
  46     {
  47
  48         var block = function() {
  49             return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
  50         };
  51
  52
  53         var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
  54
  55         var syncValue = toolbar.editorcore.syncValue;
  56
  57         var fields = {};
  58
  59         return [
  60              {
  61                 xtype : 'TextItem',
  62                 text : "Source: ",
  63                 xns : rooui.Toolbar  //Boostrap?
  64             },
  65             {
  66                 xtype : 'TextField',
  67                 allowBlank : false,
  68                 width : 150,
  69                 name : 'image_src',
  70                 listeners : {
  71                     keyup : function (combo, e)
  72                     {
  73                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
  74                         var b = block();
  75                         b.image_src = this.getValue();
  76                         b.updateElement();
  77                         syncValue();
  78                         toolbar.editorcore.onEditorEvent();
  79                     }
  80                 },
  81                 xns : rooui.form
  82
  83             },
  84             {
  85                 xtype : 'TextItem',
  86                 text : "Width: ",
  87                 xns : rooui.Toolbar  //Boostrap?
  88             },
  89             {
  90                 xtype : 'ComboBox',
  91                 allowBlank : false,
  92                 displayField : 'val',
  93                 editable : true,
  94                 listWidth : 100,
  95                 triggerAction : 'all',
  96                 typeAhead : true,
  97                 valueField : 'val',
  98                 width : 70,
  99                 name : 'width',
 100                 listeners : {
 101                     select : function (combo, r, index)
 102                     {
 103                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
 104                         var b = block();
 105                         b.width = r.get('val');
 106                         b.updateElement();
 107                         syncValue();
 108                         toolbar.editorcore.onEditorEvent();
 109                     }
 110                 },
 111                 xns : rooui.form,
 112                 store : {
 113                     xtype : 'SimpleStore',
 114                     data : [
 115                         ['auto'],
 116                         ['50%'],
 117                         ['100%']
 118                     ],
 119                     fields : [ 'val'],
 120                     xns : Roo.data
 121                 }
 122             },
 123             {
 124                 xtype : 'TextItem',
 125                 text : "Align: ",
 126                 xns : rooui.Toolbar  //Boostrap?
 127             },
 128             {
 129                 xtype : 'ComboBox',
 130                 allowBlank : false,
 131                 displayField : 'val',
 132                 editable : true,
 133                 listWidth : 100,
 134                 triggerAction : 'all',
 135                 typeAhead : true,
 136                 valueField : 'val',
 137                 width : 70,
 138                 name : 'align',
 139                 listeners : {
 140                     select : function (combo, r, index)
 141                     {
 142                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
 143                         var b = block();
 144                         b.align = r.get('val');
 145                         b.updateElement();
 146                         syncValue();
 147                         toolbar.editorcore.onEditorEvent();
 148                     }
 149                 },
 150                 xns : rooui.form,
 151                 store : {
 152                     xtype : 'SimpleStore',
 153                     data : [
 154                         ['left'],
 155                         ['right'],
 156                         ['center']
 157                     ],
 158                     fields : [ 'val'],
 159                     xns : Roo.data
 160                 }
 161             },
 162
 163
 164             {
 165                 xtype : 'Button',
 166                 text: 'Hide Caption',
 167                 name : 'caption_display',
 168                 pressed : false,
 169                 enableToggle : true,
 170                 setValue : function(v) {
 171                     this.toggle(v == 'block' ? false : true);
 172                 },
 173                 listeners : {
 174                     toggle: function (btn, state)
 175                     {
 176                         var b  = block();
 177                         b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
 178                         this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
 179                         b.updateElement();
 180                         syncValue();
 181                         toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
 182                         toolbar.editorcore.onEditorEvent();
 183                     }
 184                 },
 185                 xns : rooui.Toolbar
 186             }
 187         ];
 188
 189     },
 190     /**
 191      * create a DomHelper friendly object - for use with
 192      * Roo.DomHelper.markup / overwrite / etc..
 193      */
 194     toObject : function()
 195     {
 196         var d = document.createElement('div');
 197         d.innerHTML = this.caption;
 198
 199         var m = this.width == '50%' && this.align == 'center' ? '0 auto' : 0;
 200
 201         var img =   {
 202                     tag : 'img',
 203                     src : this.image_src,
 204                     alt : d.innerText.replace(/\n/g, " "), // removeHTML..
 205                     style: {
 206                         width : 'auto',
 207                         'max-width': '100%',
 208                         margin : '0px'
 209
 210
 211                     }
 212                 };
 213
 214         if (this.href) {
 215             img = {
 216                 tag : 'a',
 217                 href: this.href,
 218                 cn : [
 219                     img
 220                 ]
 221             };
 222         }
 223
 224         return  {
 225             tag: 'figure',
 226             'data-block' : 'Figure',
 227             contenteditable : 'false',
 228             style : {
 229                 display: 'block',
 230                 float :  this.align ,
 231                 'max-width':  this.width,
 232                 width : 'auto',
 233                 margin:  m,
 234                 padding: '10px'
 235
 236             },
 237             align : this.align,
 238             cn : [
 239                 img,
 240
 241                 {
 242                     tag: 'figcaption',
 243                     contenteditable : true,
 244                     style : {
 245                         'text-align': 'left',
 246                         'margin-top' : '16px',
 247                         'font-size' : '16px',
 248                         'line-height' : '24px',
 249                         'font-style': 'italic',
 250                         display : this.caption_display
 251                     },
 252                     html : this.caption
 253
 254                 }
 255             ]
 256         };
 257
 258     },
 259
 260     readElement : function(node)
 261     {
 262         // this should not really come from the link...
 263         this.href = this.getVal(node, 'a', 'href');
 264
 265         this.image_src = this.getVal(node, 'img', 'src');
 266         this.align = this.getVal(node, 'figure', 'align');
 267         this.caption = this.getVal(node, 'figcaption', 'html');
 268         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 269         this.width = this.getVal(node, 'figure', 'style', 'max-width');
 270         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
 271
 272     },
 273     removeNode : function()
 274     {
 275         return this.node;
 276     }
 277
 278
 279
 280
 281
 282
 283
 284
 285 })
 286