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