git.roojs.org Git - roojs1/blob - Roo/htmleditor/BlockFigure.js

   1 /**
   2  *
   3  * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' +
   4         <img data-name="image" src="{SRC}">' +
   5         <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
   6     </figure>
   7     <br/>
   8
   9     usage:
  10      -- add to document..
  11     new Roo.htmleditor.BlockFigure{
  12         image_src : 'http://www.google.com',
  13         caption : 'test',
  14     }
  15      -- load document, and search for elements of this...
  16     Roo.DomQuery.select('*[data-block])
  17     // loop each and call ctor ({node : xxx})
  18     -- html editor click
  19     ** see if parent has Element.findParent(*[data-block]);
  20     use ?? to
  21
  22  */
  23
  24 /**
  25  * @class Roo.htmleditor.BlockFigure
  26  * Block that has an image and a figcaption
  27  * @cfg {String} image_src the url for the image
  28  * @cfg {String} align (left|right) alignment for the block default left
  29  * @cfg {String} text_align (left|right) alignment for the text caption default left.
  30  * @cfg {String} caption the text to appear below  (and in the alt tag)
  31  * @cfg {String|number} image_width the width of the image number or %?
  32  * @cfg {String|number} image_height the height of the image number or %?
  33  *
  34  * @constructor
  35  * Create a new Filter.
  36  * @param {Object} config Configuration options
  37  */
  38
  39 Roo.htmleditor.BlockFigure = function(cfg)
  40 {
  41     if (cfg.node) {
  42         this.readElement(cfg.node);
  43         this.updateElement(cfg.node);
  44     }
  45     Roo.apply(this, cfg);
  46 }
  47 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
  48
  49
  50     // setable values.
  51     image_src: '',
  52
  53     align: 'left',
  54     caption : '',
  55     text_align: 'left',
  56
  57     image_width : '',
  58     image_height : '',
  59
  60     // used by context menu
  61     friendly_name : 'Image with caption',
  62
  63     context : { // ?? static really
  64         image_width : {
  65             title: "Width",
  66             width: 40
  67         },
  68         image_height:  {
  69             title: "Height",
  70             width: 40
  71         },
  72         align: {
  73             title: "Align",
  74             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  75             width : 80
  76
  77         },
  78         text_align: {
  79             title: "Caption Align",
  80             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  81             width : 80
  82         },
  83
  84
  85         image_src : {
  86             title: "Src",
  87             width: 220
  88         }
  89     },
  90     /**
  91      * create a DomHelper friendly object - for use with
  92      * Roo.DomHelper.markup / overwrite / etc..
  93      */
  94     toObject : function()
  95     {
  96
  97         var img = {
  98             tag : 'img',
  99             src : this.image_src,
 100             alt : this.caption
 101         };
 102         if ((''+this.image_width).length) {
 103             img.width = this.image_width;
 104         }
 105         if ((''+ this.height).length) {
 106             img.height = this.image_height;
 107         }
 108         return {
 109             tag: 'figure',
 110             'data-block' : 'Figure',
 111             contenteditable : 'false',
 112             style : 'text-align:' + this.align,
 113             cn : [
 114                 img,
 115                 {
 116                     tag: 'figcaption',
 117                     contenteditable : true,
 118                     style : 'text-align:left',
 119                     html : this.caption
 120                 }
 121             ]
 122         };
 123     },
 124
 125     readElement : function(node)
 126     {
 127         this.image_src = this.getVal(node, 'img', 'src');
 128         this.align = this.getVal(node, 'figure', 'style', 'text-align');
 129         this.caption = this.getVal(node, 'figcaption', 'html');
 130         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 131     }
 132
 133
 134
 135
 136
 137
 138
 139
 140 })
 141