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     edit : { // ?? 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
  66         alt: {
  67             title: "Alt",
  68             width: 120
  69         },
  70         src : {
  71             title: "Src",
  72             width: 220
  73         }
  74     },
  75
  76     toHtml : function(doc)
  77     {
  78
  79         var img = {
  80             tag : 'img',
  81             src : this.src,
  82             alt : this.alt,
  83         };
  84         if ((''+this.width).length) {
  85             img.width = this.width;
  86         }
  87         if ((''+ this.height).length) {
  88             img.height = this.height;
  89         }
  90         return Roo.DomHelper.markup({
  91             tag: 'figure',
  92             'data-block' : 'BlockFigure',
  93             contenteditable : 'false',
  94             style : 'text-align:' + this.align,
  95             cn : [
  96                 img,
  97                 {
  98                     tag: 'figcaption',
  99                     'data-name' : 'caption',
 100                     contenteditable : true,
 101                     style : 'text-align:left',
 102                     html : this.caption
 103                 }
 104             ]
 105         });
 106     },
 107     fromElement : function(node)
 108     {
 109         this.image_src = this.getVal(node, 'img', 'src');
 110         this.align = this.getVal(node, 'figure', 'style', 'text-align');
 111         this.caption = this.getVal(node, 'figcaption', 'html');
 112         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 113     },
 114
 115     getVal : function(node, tag, attr, style)
 116     {
 117         var n = node;
 118         if (n.tagName != tag.toUpperCase()) {
 119             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
 120             // but kiss for now.
 121             n = node.getElementsByTagName(tag).item(0);
 122         }
 123         if (attr == 'html') {
 124             return n.innerHTML;
 125         }
 126         if (attr == 'style') {
 127             return Roo.get(n).getStyle(style);
 128         }
 129
 130         return Roo.get(n).attr(attr);
 131
 132     }
 133
 134
 135
 136
 137
 138
 139 }
 140