git.roojs.org Git - roojs1/blob - docs/src/Roo_htmleditor_BlockFigure.js.html

   1 <html><head><title>Roo/htmleditor/BlockFigure.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
   2
   3 <span class="jsdoc-comment">/**
   4  * @class Roo.htmleditor.BlockFigure
   5  * Block that has an image and a figcaption
   6  * @cfg {String} image_src the url for the image
   7  * @cfg {String} align (left|right) alignment for the block default left
   8  * @cfg {String} text_align (left|right) alignment for the text caption default left.
   9  * @cfg {String} caption the text to appear below  (and in the alt tag)
  10  * @cfg {String|number} image_width the width of the image number or %?
  11  * @cfg {String|number} image_height the height of the image number or %?
  12  *
  13  * @constructor
  14  * Create a new Filter.
  15  * @param {Object} config Configuration options
  16  */
  17
  18 </span><span class="jsdoc-var">Roo.htmleditor.BlockFigure </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
  19 {
  20     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.node</span><span class="jsdoc-syntax">) {
  21         </span><span class="jsdoc-var">this.readElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.node</span><span class="jsdoc-syntax">);
  22         </span><span class="jsdoc-var">this.updateElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.node</span><span class="jsdoc-syntax">);
  23     }
  24     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
  25 }
  26 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.htmleditor.BlockFigure</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.htmleditor.Block</span><span class="jsdoc-syntax">, {
  27
  28
  29     </span><span class="jsdoc-comment">// setable values.
  30     </span><span class="jsdoc-var">image_src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  31
  32     </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
  33     </span><span class="jsdoc-var">caption </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  34     </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
  35
  36     </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'46%'</span><span class="jsdoc-syntax">,
  37     </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'2%'</span><span class="jsdoc-syntax">,
  38
  39     </span><span class="jsdoc-comment">// used by context menu
  40     </span><span class="jsdoc-var">friendly_name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Image with caption'</span><span class="jsdoc-syntax">,
  41
  42     </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// ?? static really
  43         </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {
  44             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width&quot;</span><span class="jsdoc-syntax">,
  45             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  46             </span><span class="jsdoc-comment">// ?? number
  47         </span><span class="jsdoc-syntax">},
  48         </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: {
  49             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Margin&quot;</span><span class="jsdoc-syntax">,
  50             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  51             </span><span class="jsdoc-comment">// ?? number
  52         </span><span class="jsdoc-syntax">},
  53         </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: {
  54             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align&quot;</span><span class="jsdoc-syntax">,
  55             </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">: [[ </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">]],
  56             </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
  57
  58         },
  59         </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: {
  60             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Caption Align&quot;</span><span class="jsdoc-syntax">,
  61             </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">: [ [ </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">]],
  62             </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
  63         },
  64
  65
  66         </span><span class="jsdoc-var">image_src </span><span class="jsdoc-syntax">: {
  67             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Src&quot;</span><span class="jsdoc-syntax">,
  68             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
  69         }
  70     },
  71     </span><span class="jsdoc-comment">/**
  72      * create a DomHelper friendly object - for use with
  73      * Roo.DomHelper.markup / overwrite / etc..
  74      */
  75     </span><span class="jsdoc-var">toObject </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  76     {
  77         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
  78         </span><span class="jsdoc-var">d.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption</span><span class="jsdoc-syntax">;
  79
  80         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
  81             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">,
  82             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Figure'</span><span class="jsdoc-syntax">,
  83             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
  84             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
  85                 </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">,
  86                 </span><span class="jsdoc-var">float </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
  88                 </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.margin
  89             </span><span class="jsdoc-syntax">},
  90             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  91                 {
  92                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
  93                     </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.image_src</span><span class="jsdoc-syntax">,
  94                     </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.innerText.replace</span><span class="jsdoc-syntax">(/\n/g, </span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">), </span><span class="jsdoc-comment">// removeHTML..
  95                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: {
  96                         </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'
  97                     </span><span class="jsdoc-syntax">}
  98                 },
  99                 {
 100                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">,
 101                     </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 102                     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
 103                         </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.text_align
 104                     </span><span class="jsdoc-syntax">},
 105                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption
 106
 107                 </span><span class="jsdoc-syntax">}
 108             ]
 109         };
 110     },
 111
 112     </span><span class="jsdoc-var">readElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)
 113     {
 114         </span><span class="jsdoc-var">this.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">);
 115         </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'float'</span><span class="jsdoc-syntax">);
 116         </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">);
 117         </span><span class="jsdoc-var">this.text_align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">);
 118         </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">);
 119         </span><span class="jsdoc-var">this.margin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'margin'</span><span class="jsdoc-syntax">);
 120
 121     }
 122
 123
 124
 125
 126
 127
 128
 129
 130 })
 131
 132 </span></code></body></html>