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} text_align (left|right) alignment for the text caption default left.
   9  * @cfg {String} caption the text to appear below  (and in the alt tag)
  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
  32     align: 'left',
  33     caption : '',
  34     text_align: 'left',
  35
  36     width : '45%',
  37     margin: '2%',
  38
  39     // used by context menu
  40     friendly_name : 'Image with caption',
  41
  42     context : { // ?? static really
  43         width : {
  44             title: "Width",
  45             width: 40
  46             // ?? number
  47         },
  48         margin : {
  49             title: "Margin",
  50             width: 40
  51             // ?? number
  52         },
  53         align: {
  54             title: "Align",
  55             opts : [[ "left"],[ "right"]],
  56             width : 80
  57
  58         },
  59         text_align: {
  60             title: "Caption Align",
  61             opts : [ [ "left"],[ "right"],[ "center"]],
  62             width : 80
  63         },
  64
  65
  66         image_src : {
  67             title: "Src",
  68             width: 220
  69         }
  70     },
  71     /**
  72      * create a DomHelper friendly object - for use with
  73      * Roo.DomHelper.markup / overwrite / etc..
  74      */
  75     toObject : function()
  76     {
  77         var d = document.createElement('div');
  78         d.innerHTML = this.caption;
  79
  80         return {
  81             tag: 'figure',
  82             'data-block' : 'Figure',
  83             contenteditable : 'false',
  84             style : {
  85                 display: 'table',
  86                 float :  this.align ,
  87                 width :  this.width,
  88                 margin:  this.margin
  89             },
  90             cn : [
  91                 {
  92                     tag : 'img',
  93                     src : this.image_src,
  94                     alt : d.innerText.replace(/\n/g, " "), // removeHTML..
  95                     style: {
  96                         width: '100%'
  97                     }
  98                 },
  99                 {
 100                     tag: 'figcaption',
 101                     contenteditable : true,
 102                     style : {
 103                         'text-align': this.text_align
 104                     },
 105                     html : this.caption
 106
 107                 }
 108             ]
 109         };
 110     },
 111
 112     readElement : function(node)
 113     {
 114         this.image_src = this.getVal(node, 'img', 'src');
 115         this.align = this.getVal(node, 'figure', 'style', 'float');
 116         this.caption = this.getVal(node, 'figcaption', 'html');
 117         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 118         this.width = this.getVal(node, 'figure', 'style', 'width');
 119         this.margin = this.getVal(node, 'figure', 'style', 'margin');
 120
 121     }
 122
 123
 124
 125
 126
 127
 128
 129
 130 })
 131