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