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     align: 'left',
  37     caption : '',
  38     text_align: 'left',
  39
  40     toHtml : function(doc)
  41     {
  42         return Roo.DomHelper.markup({
  43             tag: 'figure',
  44             'data-block' : 'BlockFigure',
  45             contenteditable : 'false',
  46             style : 'text-align:' + this.align,
  47             cn : [
  48                 {
  49                     tag : 'img',
  50                     src : this.src
  51                 },
  52                 {
  53                     tag: 'figcaption',
  54                     'data-name' : 'caption',
  55                     contenteditable : true,
  56                     style : 'text-align:left',
  57                     html : this.caption
  58                 }
  59             ]
  60         });
  61     },
  62     fromElement : function(node)
  63     {
  64         this.image_src = this.getVal(node, 'img', 'src');
  65         this.align = this.getVal(node, 'figure', 'style', 'text-align');
  66         this.caption = this.getVal(node, 'figcaption', 'html');
  67         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
  68     },
  69
  70     getVal : function(node, tag, attr, style)
  71     {
  72         var n = node;
  73         if (n.tagName != tag.toUpperCase()) {
  74             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
  75             // but kiss for now.
  76             n = node.getElementsByTagName(tag).item(0);
  77         }
  78         if (attr == 'html') {
  79             return n.innerHTML;
  80         }
  81         if (attr == 'style') {
  82             return Roo.get(n).getStyle(style);
  83         }
  84
  85         return Roo.get(n).attr(attr);
  86
  87     }
  88
  89
  90
  91
  92
  93
  94 }
  95