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