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.fromElement(cfg.node);
  28     }
  29     Roo.apply(this, cfg);
  30 }
  31
  32 Roo.htmleditor.BlockFigure.prototype = {
  33
  34     // setable values.
  35     image_src: '',
  36
  37     align: 'left',
  38     caption : '',
  39     text_align: 'left',
  40
  41     image_width : '',
  42     image_height : '',
  43
  44     context : { // ?? static really
  45         image_width : {
  46             title: "Width",
  47             width: 40,
  48         },
  49         image_height:  {
  50             title: "Height",
  51             width: 40
  52         },
  53         align: {
  54             title: "Align",
  55             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  56             width : 80
  57
  58         },
  59         text_align: {
  60             title: "Caption Align",
  61             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  62             width : 80
  63         },
  64
  65         alt: {
  66             title: "Alt",
  67             width: 120
  68         },
  69         src : {
  70             title: "Src",
  71             width: 220
  72         }
  73     },
  74
  75     toHtml : function(doc)
  76     {
  77
  78         var img = {
  79             tag : 'img',
  80             src : this.src,
  81             alt : this.alt,
  82         };
  83         if ((''+this.width).length) {
  84             img.width = this.width;
  85         }
  86         if ((''+ this.height).length) {
  87             img.height = this.height;
  88         }
  89         return Roo.DomHelper.markup({
  90             tag: 'figure',
  91             'data-block' : 'BlockFigure',
  92             contenteditable : 'false',
  93             style : 'text-align:' + this.align,
  94             cn : [
  95                 img,
  96                 {
  97                     tag: 'figcaption',
  98                     'data-name' : 'caption',
  99                     contenteditable : true,
 100                     style : 'text-align:left',
 101                     html : this.caption
 102                 }
 103             ]
 104         });
 105     },
 106     fromElement : function(node)
 107     {
 108         this.image_src = this.getVal(node, 'img', 'src');
 109         this.align = this.getVal(node, 'figure', 'style', 'text-align');
 110         this.caption = this.getVal(node, 'figcaption', 'html');
 111         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 112     },
 113
 114     getVal : function(node, tag, attr, style)
 115     {
 116         var n = node;
 117         if (n.tagName != tag.toUpperCase()) {
 118             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
 119             // but kiss for now.
 120             n = node.getElementsByTagName(tag).item(0);
 121         }
 122         if (attr == 'html') {
 123             return n.innerHTML;
 124         }
 125         if (attr == 'style') {
 126             return Roo.get(n).getStyle(style);
 127         }
 128
 129         return Roo.get(n).attr(attr);
 130
 131     }
 132
 133
 134
 135
 136
 137
 138 }
 139