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 Roo.htmleditor.BlockFigure = function(cfg)
  25 {
  26     if (cfg.node) {
  27         this.readElement(cfg.node);
  28         this.updateElement(cfg.node);
  29     }
  30     Roo.apply(this, cfg);
  31 }
  32 Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
  33
  34
  35     // setable values.
  36     image_src: '',
  37
  38     align: 'left',
  39     caption : '',
  40     text_align: 'left',
  41
  42     image_width : '',
  43     image_height : '',
  44
  45     // used by context menu
  46     friendly_name : 'Image with caption',
  47
  48     context : { // ?? static really
  49         image_width : {
  50             title: "Width",
  51             width: 40
  52         },
  53         image_height:  {
  54             title: "Height",
  55             width: 40
  56         },
  57         align: {
  58             title: "Align",
  59             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  60             width : 80
  61
  62         },
  63         text_align: {
  64             title: "Caption Align",
  65             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  66             width : 80
  67         },
  68
  69
  70         image_src : {
  71             title: "Src",
  72             width: 220
  73         }
  74     },
  75     /**
  76      * create a DomHelper friendly object - for use with
  77      * Roo.DomHelper.markup / overwrite / etc..
  78      */
  79     toObject : function()
  80     {
  81
  82         var img = {
  83             tag : 'img',
  84             src : this.image_src,
  85             alt : this.caption
  86         };
  87         if ((''+this.image_width).length) {
  88             img.width = this.image_width;
  89         }
  90         if ((''+ this.height).length) {
  91             img.height = this.image_height;
  92         }
  93         return {
  94             tag: 'figure',
  95             'data-block' : 'Figure',
  96             contenteditable : 'false',
  97             style : 'text-align:' + this.align,
  98             cn : [
  99                 img,
 100                 {
 101                     tag: 'figcaption',
 102                     contenteditable : true,
 103                     style : 'text-align:left',
 104                     html : this.caption
 105                 }
 106             ]
 107         };
 108     },
 109
 110     readElement : function(node)
 111     {
 112         this.image_src = this.getVal(node, 'img', 'src');
 113         this.align = this.getVal(node, 'figure', 'style', 'text-align');
 114         this.caption = this.getVal(node, 'figcaption', 'html');
 115         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 116     }
 117
 118
 119
 120
 121
 122
 123
 124
 125 })
 126