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     </span><span class="jsdoc-var">deleteTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Delete Image and Caption&quot;</span><span class="jsdoc-syntax">,
  42
  43     </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// ?? static really
  44         </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {
  45             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width&quot;</span><span class="jsdoc-syntax">,
  46             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  47             </span><span class="jsdoc-comment">// ?? number
  48         </span><span class="jsdoc-syntax">},
  49         </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: {
  50             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Margin&quot;</span><span class="jsdoc-syntax">,
  51             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  52             </span><span class="jsdoc-comment">// ?? number
  53         </span><span class="jsdoc-syntax">},
  54         </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: {
  55             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align&quot;</span><span class="jsdoc-syntax">,
  56             </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">]],
  57             </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
  58
  59         },
  60         </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: {
  61             </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">,
  62             </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">]],
  63             </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
  64         },
  65
  66
  67         </span><span class="jsdoc-var">image_src </span><span class="jsdoc-syntax">: {
  68             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Src&quot;</span><span class="jsdoc-syntax">,
  69             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
  70         }
  71     },
  72     </span><span class="jsdoc-comment">/**
  73      * create a DomHelper friendly object - for use with
  74      * Roo.DomHelper.markup / overwrite / etc..
  75      */
  76     </span><span class="jsdoc-var">toObject </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  77     {
  78         </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">);
  79         </span><span class="jsdoc-var">d.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption</span><span class="jsdoc-syntax">;
  80
  81         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
  82             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">,
  83             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Figure'</span><span class="jsdoc-syntax">,
  84             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
  85             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
  86                 </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-var">float </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">,
  88                 </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
  89                 </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.margin
  90             </span><span class="jsdoc-syntax">},
  91             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
  92                 {
  93                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
  94                     </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.image_src</span><span class="jsdoc-syntax">,
  95                     </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..
  96                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: {
  97                         </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'
  98                     </span><span class="jsdoc-syntax">}
  99                 },
 100                 {
 101                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">,
 102                     </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 103                     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
 104                         </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.text_align
 105                     </span><span class="jsdoc-syntax">},
 106                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption
 107
 108                 </span><span class="jsdoc-syntax">}
 109             ]
 110         };
 111     },
 112
 113     </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">)
 114     {
 115         </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">);
 116         </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">);
 117         </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">);
 118         </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">);
 119         </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">);
 120         </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">);
 121
 122     }
 123
 124
 125
 126
 127
 128
 129
 130
 131 })
 132
 133 </span></code></body></html>