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

   1 <html><head><title>Roo/htmleditor/Block.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty">
   2 <span class="jsdoc-comment">/**
   3  * @class Roo.htmleditor.Block
   4  * Base class for html editor blocks - do not use it directly .. extend it..
   5  * @cfg {DomElement} node The node to apply stuff to.
   6  * @cfg {String} friendly_name the name that appears in the context bar about this block
   7  * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
   8
   9  * @constructor
  10  * Create a new Filter.
  11  * @param {Object} config Configuration options
  12  */
  13
  14 </span><span class="jsdoc-var">Roo.htmleditor.Block  </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">)
  15 {
  16     </span><span class="jsdoc-comment">// do nothing .. should not be called really.
  17 </span><span class="jsdoc-syntax">}
  18 </span><span class="jsdoc-comment">/**
  19  * factory method to get the block from an element (using cache if necessary)
  20  * @static
  21  * @param {HtmlElement} the dom element
  22  */
  23 </span><span class="jsdoc-var">Roo.htmleditor.Block.factory </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">)
  24 {
  25     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">;
  26     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">;
  27     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp; (!</span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.node </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.node.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'body'</span><span class="jsdoc-syntax">))) {
  28         </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.readElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
  29         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
  30     }
  31     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">db  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">);
  32     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">) {
  33         </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.nodeName.toLowerCase</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.toUpperCaseFirst</span><span class="jsdoc-syntax">();
  34     }
  35     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">'Block' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">];
  36     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
  37         </span><span class="jsdoc-comment">//Roo.log(node.getAttribute('data-block'));
  38         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;OOps missing block : &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'Block' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">);
  39         </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
  40     }
  41     </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">});
  42     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];  </span><span class="jsdoc-comment">/// should trigger update element
  43 </span><span class="jsdoc-syntax">};
  44
  45 </span><span class="jsdoc-comment">/**
  46  * initalize all Elements from content that are 'blockable'
  47  * @static
  48  * @param the body element
  49  */
  50 </span><span class="jsdoc-var">Roo.htmleditor.Block.initAll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">)
  51 {
  52     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
  53         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ia </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.initAll</span><span class="jsdoc-syntax">;
  54         </span><span class="jsdoc-var">ia</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">);
  55         </span><span class="jsdoc-var">ia</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">);
  56         </span><span class="jsdoc-var">ia</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">);
  57         </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  58     }
  59     </span><span class="jsdoc-var">Roo.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.query</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">), </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
  60         </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
  61     },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  62 };
  63 </span><span class="jsdoc-comment">// question goes here... do we need to clear out this cache sometimes?
  64 // or show we make it relivant to the htmleditor.
  65 </span><span class="jsdoc-var">Roo.htmleditor.Block.cache </span><span class="jsdoc-syntax">= {};
  66
  67 </span><span class="jsdoc-var">Roo.htmleditor.Block.prototype </span><span class="jsdoc-syntax">= {
  68
  69     </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  70
  71      </span><span class="jsdoc-comment">// used by context menu
  72     </span><span class="jsdoc-var">friendly_name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Based Block'</span><span class="jsdoc-syntax">,
  73
  74     </span><span class="jsdoc-comment">// text for button to delete this element
  75     </span><span class="jsdoc-var">deleteTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  76
  77     </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  78     </span><span class="jsdoc-comment">/**
  79      * Update a node with values from this object
  80      * @param {DomElement} node
  81      */
  82     </span><span class="jsdoc-var">updateElement </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">)
  83     {
  84         </span><span class="jsdoc-var">Roo.DomHelper.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.node </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.toObject</span><span class="jsdoc-syntax">());
  85     },
  86      </span><span class="jsdoc-comment">/**
  87      * convert to plain HTML for calling insertAtCursor..
  88      */
  89     </span><span class="jsdoc-var">toHTML </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
  90     {
  91         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.DomHelper.markup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toObject</span><span class="jsdoc-syntax">());
  92     },
  93     </span><span class="jsdoc-comment">/**
  94      * used by readEleemnt to extract data from a node
  95      * may need improving as it's pretty basic
  96
  97      * @param {DomElement} node
  98      * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
  99      * @param {String} attribute (use html - for contents, or style for using next param as style)
 100      * @param {String} style the style property - eg. text-align
 101      */
 102     </span><span class="jsdoc-var">getVal </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">, </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">)
 103     {
 104         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
 105         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">tag.toUpperCase</span><span class="jsdoc-syntax">()) {
 106             </span><span class="jsdoc-comment">// in theory we could do figure[3] &lt;&lt; 3rd figure? or some more complex search..?
 107             // but kiss for now.
 108             </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.item</span><span class="jsdoc-syntax">(0);
 109         }
 110         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">) {
 111             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 112         }
 113         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">) {
 114             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.innerHTML</span><span class="jsdoc-syntax">;
 115         }
 116         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">) {
 117             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">];
 118         }
 119
 120         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">n.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 121
 122     },
 123     </span><span class="jsdoc-comment">/**
 124      * create a DomHelper friendly object - for use with
 125      * Roo.DomHelper.markup / overwrite / etc..
 126      * (override this)
 127      */
 128     </span><span class="jsdoc-var">toObject </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 129     {
 130         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{};
 131     },
 132       </span><span class="jsdoc-comment">/**
 133      * Read a node that has a 'data-block' property - and extract the values from it.
 134      * @param {DomElement} node - the node
 135      */
 136     </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">)
 137     {
 138
 139     }
 140
 141
 142 };
 143
 144 </span></code></body></html>