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