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     width : '100',
  58
  59     // used by context menu
  60     friendly_name : 'Image with caption',
  61
  62     context : { // ?? static really
  63         width : {
  64             title: "Width %",
  65             width: 40
  66             // ?? number
  67         },
  68
  69         align: {
  70             title: "Align",
  71             opts : [[ "left"],[ "right"]],
  72             width : 80
  73
  74         },
  75         text_align: {
  76             title: "Caption Align",
  77             opts : [ [ "left"],[ "right"],[ "center"]],
  78             width : 80
  79         },
  80
  81
  82         image_src : {
  83             title: "Src",
  84             width: 220
  85         }
  86     },
  87     /**
  88      * create a DomHelper friendly object - for use with
  89      * Roo.DomHelper.markup / overwrite / etc..
  90      */
  91     toObject : function()
  92     {
  93         var d = document.createElement('div');
  94         d.innerHTML = this.caption;
  95
  96         return {
  97             tag: 'figure',
  98             'data-block' : 'Figure',
  99             contenteditable : 'false',
 100             style : {
 101                 display: 'table',
 102                 float :  this.align ,
 103                 width :  this.width + '%'
 104             },
 105             cn : [
 106                 {
 107                     tag : 'img',
 108                     src : this.image_src,
 109                     alt : d.innerText.replace(/\n/g, " "), // removeHTML..
 110                     style: {
 111                         width: '100%'
 112                     }
 113                 },
 114                 {
 115                     tag: 'figcaption',
 116                     contenteditable : true,
 117                     style : {
 118                         'text-align': this.text_align
 119                     },
 120                     html : this.caption
 121
 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         this.image_width = this.getVal(node, 'img', 'width');
 134         this.image_height = this.getVal(node, 'img', 'height');
 135
 136     }
 137
 138
 139
 140
 141
 142
 143
 144
 145 })
 146