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