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