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     // used by context menu
  46
  47     context : { // ?? static really
  48         image_width : {
  49             title: "Width",
  50             width: 40
  51         },
  52         image_height:  {
  53             title: "Height",
  54             width: 40
  55         },
  56         align: {
  57             title: "Align",
  58             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  59             width : 80
  60
  61         },
  62         text_align: {
  63             title: "Caption Align",
  64             opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
  65             width : 80
  66         },
  67
  68
  69         src : {
  70             title: "Src",
  71             width: 220
  72         }
  73     },
  74     /**
  75      * create a DomHelper friendly object - for use with
  76      * Roo.DomHelper.markup / overwrite / etc..
  77      */
  78     toObject : function()
  79     {
  80
  81         var img = {
  82             tag : 'img',
  83             src : this.src,
  84             alt : this.caption
  85         };
  86         if ((''+this.width).length) {
  87             img.width = this.width;
  88         }
  89         if ((''+ this.height).length) {
  90             img.height = this.height;
  91         }
  92         return {
  93             tag: 'figure',
  94             'data-block' : 'BlockFigure',
  95             contenteditable : 'false',
  96             style : 'text-align:' + this.align,
  97             cn : [
  98                 img,
  99                 {
 100                     tag: 'figcaption',
 101                     contenteditable : true,
 102                     style : 'text-align:left',
 103                     html : this.caption
 104                 }
 105             ]
 106         };
 107     },
 108
 109     readElement : function(node)
 110     {
 111         this.image_src = this.getVal(node, 'img', 'src');
 112         this.align = this.getVal(node, 'figure', 'style', 'text-align');
 113         this.caption = this.getVal(node, 'figcaption', 'html');
 114         this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
 115     },
 116
 117     updateElement : function(node)
 118     {
 119         Roo.DomHelper.overwrite(node, this.toObject());
 120     },
 121     /**
 122      * convert to plain HTML for calling insertAtCursor..
 123      */
 124     toHTML : function()
 125     {
 126         return Roo.DomHelper.markup(this.toObject());
 127     },
 128
 129     getVal : function(node, tag, attr, style)
 130     {
 131         var n = node;
 132         if (n.tagName != tag.toUpperCase()) {
 133             // in theory we could do figure[3] << 3rd figure? or some more complex search..?
 134             // but kiss for now.
 135             n = node.getElementsByTagName(tag).item(0);
 136         }
 137         if (attr == 'html') {
 138             return n.innerHTML;
 139         }
 140         if (attr == 'style') {
 141             return Roo.get(n).getStyle(style);
 142         }
 143
 144         return Roo.get(n).attr(attr);
 145
 146     }
 147
 148
 149
 150
 151
 152
 153 }
 154