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.readElement(cfg.node);
  28         this.updateElement(cfg.node);
  29     }
  30     Roo.apply(this, cfg);
  31 }
  32
  33 Roo.htmleditor.BlockFigure.prototype = {
  34
  35     // setable values.
  36     image_src: '',
  37
  38     align: 'left',
  39     caption : '',
  40     text_align: 'left',
  41
  42     image_width : '',
  43     image_height : '',
  44
  45     context : { // ?? static really
  46         image_width : {
  47             title: "Width",
  48             width: 40,
  49         },
  50         image_height:  {
  51             title: "Height",
  52             width: 40
  53         },
  54         align: {
  55             title: "Align",
  56             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  57             width : 80
  58
  59         },
  60         text_align: {
  61             title: "Caption Align",
  62             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  63             width : 80
  64         },
  65
  66         alt: {
  67             title: "Alt",
  68             width: 120
  69         },
  70         src : {
  71             title: "Src",
  72             width: 220
  73         }
  74     },
  75
  76     toObject : function()
  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 {
  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     readElement : 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     updateElement : function(node)
 116     {
 117         Roo.DomHelper.overwrite(node, this.toObject());
 118
 119     },
 120
 121     getVal : function(node, tag, attr, style)
 122     {
 123         var n = node;
 124         if (n.tagName != tag.toUpperCase()) {
 125             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
 126             // but kiss for now.
 127             n = node.getElementsByTagName(tag).item(0);
 128         }
 129         if (attr == 'html') {
 130             return n.innerHTML;
 131         }
 132         if (attr == 'style') {
 133             return Roo.get(n).getStyle(style);
 134         }
 135
 136         return Roo.get(n).attr(attr);
 137
 138     }
 139
 140
 141
 142
 143
 144
 145 }
 146