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         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
 215                     '<a href="{2}">' +
 216                         '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' +
 217                     '</a>' +
 218                 '</div>',
 219
 220
 221         if (this.href) {
 222             img = {
 223                 tag : 'a',
 224                 href: this.href,
 225                 cn : [
 226                     img
 227                 ]
 228             };
 229         }
 230
 231         return  {
 232             tag: 'figure',
 233             'data-block' : 'Figure',
 234             contenteditable : 'false',
 235             style : {
 236                 display: 'block',
 237                 float :  this.align ,
 238                 'max-width':  this.width,
 239                 width : 'auto',
 240                 margin:  m,
 241                 padding: '10px'
 242
 243             },
 244             frameborder : 0,
 245             allowfullscreen : true,
 246             src : this.video_src,
 247             cls : this.cls,
 248             align : this.align,
 249             cn : [
 250                 img,
 251
 252                 {
 253                     tag: 'figcaption',
 254                     contenteditable : true,
 255                     style : {
 256                         'text-align': 'left',
 257                         'margin-top' : '16px',
 258                         'font-size' : '16px',
 259                         'line-height' : '24px',
 260                         'font-style': 'italic',
 261                         display : this.caption_display
 262                     },
 263                     html : this.caption
 264
 265                 }
 266             ]
 267         };
 268
 269     },
 270
 271     readElement : function(node)
 272     {
 273         // this should not really come from the link...
 274         this.video_src = this.getVal(node, false, 'src');
 275         this.cls = this.getVal(node, false, 'class');
 276         this.href = this.getVal(node, 'a', 'href');
 277
 278         this.image_src = this.getVal(node, 'img', 'src');
 279
 280         this.align = this.getVal(node, 'figure', 'align');
 281         this.caption = this.getVal(node, 'figcaption', 'html');
 282         //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 283         this.width = this.getVal(node, 'figure', 'style', 'max-width');
 284         //this.margin = this.getVal(node, 'figure', 'style', 'margin');
 285
 286     },
 287     removeNode : function()
 288     {
 289         return this.node;
 290     }
 291
 292
 293
 294
 295
 296
 297
 298
 299 })
 300