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"]],
  75             width : 80
  76
  77         },
  78         text_align: {
  79             title: "Caption Align",
  80             opts : [ [ "left"],[ "right"],[ "center"]],
  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         var d = document.createElement('div');
  97         d.innerHTML = this.caption;
  98
  99         var img = {
 100             tag : 'img',
 101             src : this.image_src,
 102             alt : d.innerText.replace(/\n/g, " ") // removeHTML..
 103         };
 104         if ((''+this.image_width).length > 0) {
 105             img.width = this.image_width;
 106         }
 107         if ((''+ this.image_height).length > 0) {
 108             img.height = this.image_height;
 109         }
 110         return {
 111             tag: 'figure',
 112             'data-block' : 'Figure',
 113             contenteditable : 'false',
 114             style : 'display:table; float:' + this.align,
 115             cn : [
 116                 img,
 117                 {
 118                     tag: 'figcaption',
 119                     contenteditable : true,
 120                     style : 'text-align:' + this.text_align,
 121                     html : this.caption
 122                 }
 123             ]
 124         };
 125     },
 126
 127     readElement : function(node)
 128     {
 129         this.image_src = this.getVal(node, 'img', 'src');
 130         this.align = this.getVal(node, 'figure', 'style', 'float');
 131         this.caption = this.getVal(node, 'figcaption', 'html');
 132         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 133     }
 134
 135
 136
 137
 138
 139
 140
 141
 142 })
 143