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

   1 <html><head><title>Roo/bootstrap/form/HtmlEditorToolbar/Context.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.bootstrap.form.HtmlEditorToolbar.Context
   4  * @parent Roo.bootstrap.form.HtmlEditor
   5  * @extends Roo.bootstrap.nav.Simplebar
   6  * Basic Toolbar
   7  *
   8  * @example
   9  * Usage:
  10  *
  11  new Roo.bootstrap.form.HtmlEditor({
  12     ....
  13     toolbars : [
  14         {
  15             xtyle: 'Standard',
  16             disable : { fonts: 1 , format: 1, ..., ... , ...],
  17             btns : [ .... ]
  18         },
  19         {
  20             xtyle : 'Context',
  21             ....
  22         }
  23     }
  24
  25  *
  26  *
  27  */
  28
  29 </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditorToolbar.Context </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">)
  30 {
  31
  32     </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">config</span><span class="jsdoc-syntax">);
  33
  34
  35     </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditorToolbar.Context.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  36
  37     </span><span class="jsdoc-var">this.editor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.editor</span><span class="jsdoc-syntax">;
  38     </span><span class="jsdoc-var">this.editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">config.editor.editorcore</span><span class="jsdoc-syntax">;
  39
  40     </span><span class="jsdoc-var">this.buttons   </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.util.MixedCollection</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o.cmd</span><span class="jsdoc-syntax">; });
  41
  42 }
  43
  44 </span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditorToolbar.Context.types </span><span class="jsdoc-syntax">= {
  45     </span><span class="jsdoc-string">'IMG' </span><span class="jsdoc-syntax">: [
  46         {
  47             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">,
  48             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width&quot;</span><span class="jsdoc-syntax">,
  49             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  50         },
  51         {
  52             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'height'</span><span class="jsdoc-syntax">,
  53             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Height&quot;</span><span class="jsdoc-syntax">,
  54             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  55         },
  56         {
  57             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'align'</span><span class="jsdoc-syntax">,
  58             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align&quot;</span><span class="jsdoc-syntax">,
  59             </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">: [ [</span><span class="jsdoc-string">&quot;&quot;</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">],[ </span><span class="jsdoc-string">&quot;top&quot;</span><span class="jsdoc-syntax">]],
  60             </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
  61
  62         },
  63         {
  64             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'border'</span><span class="jsdoc-syntax">,
  65             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Border&quot;</span><span class="jsdoc-syntax">,
  66             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
  67         },
  68         {
  69             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'alt'</span><span class="jsdoc-syntax">,
  70             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Alt&quot;</span><span class="jsdoc-syntax">,
  71             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 120
  72         },
  73         {
  74             </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">,
  75             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Src&quot;</span><span class="jsdoc-syntax">,
  76             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
  77         }
  78
  79     ],
  80
  81     </span><span class="jsdoc-comment">/*
  82     'A' : [
  83         {
  84             name : 'name',
  85             title: &quot;Name&quot;,
  86             width: 50
  87         },
  88         {
  89             name : 'target',
  90             title: &quot;Target&quot;,
  91             width: 120
  92         },
  93         {
  94             name : 'href',
  95             title: &quot;Href&quot;,
  96             width: 220
  97         } // border?
  98
  99     ],
 100     */
 101     /*
 102     'INPUT' : [
 103         {
 104             name : 'name',
 105             title: &quot;name&quot;,
 106             width: 120
 107         },
 108         {
 109             name : 'value',
 110             title: &quot;Value&quot;,
 111             width: 120
 112         },
 113         {
 114             name : 'width',
 115             title: &quot;Width&quot;,
 116             width: 40
 117         }
 118     ],
 119     'LABEL' : [
 120          {
 121             name : 'for',
 122             title: &quot;For&quot;,
 123             width: 120
 124         }
 125     ],
 126     'TEXTAREA' : [
 127         {
 128             name : 'name',
 129             title: &quot;name&quot;,
 130             width: 120
 131         },
 132         {
 133             name : 'rows',
 134             title: &quot;Rows&quot;,
 135             width: 20
 136         },
 137         {
 138             name : 'cols',
 139             title: &quot;Cols&quot;,
 140             width: 20
 141         }
 142     ],
 143     'SELECT' : [
 144         {
 145             name : 'name',
 146             title: &quot;name&quot;,
 147             width: 120
 148         },
 149         {
 150             name : 'selectoptions',
 151             title: &quot;Options&quot;,
 152             width: 200
 153         }
 154     ],
 155
 156     // should we really allow this??
 157     // should this just be
 158     'BODY' : [
 159
 160         {
 161             name : 'title',
 162             title: &quot;Title&quot;,
 163             width: 200,
 164             disabled : true
 165         }
 166     ],
 167     */
 168     </span><span class="jsdoc-string">'*' </span><span class="jsdoc-syntax">: [
 169         </span><span class="jsdoc-comment">// empty.
 170     </span><span class="jsdoc-syntax">]
 171
 172 };
 173
 174 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.form.HtmlEditorToolbar.Context</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.nav.Simplebar</span><span class="jsdoc-syntax">,  {
 175
 176     </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 177     </span><span class="jsdoc-var">editorcore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 178     </span><span class="jsdoc-var">buttons </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 179
 180     </span><span class="jsdoc-var">button_groups </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// subtoolbars...  - buttson?
 181     </span><span class="jsdoc-var">active_group </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 182
 183     </span><span class="jsdoc-var">selectedNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 184
 185     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">)
 186     {
 187        </span><span class="jsdoc-comment">// Roo.log(&quot;Call onRender: &quot; + this.xtype);
 188
 189         </span><span class="jsdoc-var">this.constructor.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
 190
 191
 192
 193
 194
 195         </span><span class="jsdoc-comment">// disable everything...
 196         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constructor.types</span><span class="jsdoc-syntax">;
 197         </span><span class="jsdoc-var">this.button_groups </span><span class="jsdoc-syntax">= {};
 198         </span><span class="jsdoc-comment">// block toolbars are built in updateToolbar when needed.
 199         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-keyword">in  </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">) {
 200             </span><span class="jsdoc-var">this.button_groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.buildToolbarGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">],</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
 201         }
 202         </span><span class="jsdoc-var">this.buildToolbarDelete</span><span class="jsdoc-syntax">();
 203           </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 204         </span><span class="jsdoc-comment">// the all the btns;
 205         </span><span class="jsdoc-var">this.editor.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.updateToolbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 206
 207     },
 208     </span><span class="jsdoc-var">onFirstFocus</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
 209
 210     },
 211
 212
 213     </span><span class="jsdoc-var">buildToolbarGroup</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">)
 214     {
 215         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editor</span><span class="jsdoc-syntax">;
 216         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore</span><span class="jsdoc-syntax">;
 217         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 218
 219         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ret </span><span class="jsdoc-syntax">= [];
 220
 221         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">tlist.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 222
 223             </span><span class="jsdoc-comment">// newer versions will use xtype cfg to create menus.
 224             </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">tlist</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.xtype</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 225                 </span><span class="jsdoc-var">tb</span><span class="jsdoc-syntax">[</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">)== </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'add' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'addField'</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]));
 226                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 227             }
 228
 229             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">item </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
 230             </span><span class="jsdoc-var">ret.push</span><span class="jsdoc-syntax">(
 231                 </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">({
 232                     </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Element'</span><span class="jsdoc-syntax">,
 233                     </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 234                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-htmleditor-context-label-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.name</span><span class="jsdoc-syntax">,
 235                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.title
 236                 </span><span class="jsdoc-syntax">})
 237             );
 238
 239             </span><span class="jsdoc-comment">// add a text entry!?
 240             </span><span class="jsdoc-var">ret.push</span><span class="jsdoc-syntax">(
 241                 </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">({
 242                     </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Input'</span><span class="jsdoc-syntax">,
 243                     </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap.form</span><span class="jsdoc-syntax">,
 244                     </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-htmleditor-context-entry-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.name</span><span class="jsdoc-syntax">,
 245                     </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'-roo-edit-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">item.name</span><span class="jsdoc-syntax">,
 246                     </span><span class="jsdoc-var">attrname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.name</span><span class="jsdoc-syntax">,
 247                     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.width</span><span class="jsdoc-syntax">,
 248                     </span><span class="jsdoc-comment">//allowBlank:true,
 249                     </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
 250                     </span><span class="jsdoc-var">listeners</span><span class="jsdoc-syntax">: {
 251                         </span><span class="jsdoc-string">'change' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">) {
 252                             </span><span class="jsdoc-var">tb.selectedNode.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.attrname</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">);
 253                             </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
 254                         }
 255                     }
 256                 })
 257             );
 258
 259         }
 260         </span><span class="jsdoc-comment">// hide them all..
 261         </span><span class="jsdoc-var">ret.forEach</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">) {
 262             </span><span class="jsdoc-var">e.hide</span><span class="jsdoc-syntax">();
 263         });
 264         </span><span class="jsdoc-var">ret.name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">;
 265
 266         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">ret</span><span class="jsdoc-syntax">;
 267     },
 268     </span><span class="jsdoc-var">buildToolbarDelete </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 269     {
 270
 271         </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">({
 272             </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Element'</span><span class="jsdoc-syntax">,
 273             </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 274             </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'roo-htmleditor-fill'
 275         </span><span class="jsdoc-syntax">});
 276
 277         </span><span class="jsdoc-var">this.deleteBtn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.addxtypeChild</span><span class="jsdoc-syntax">({
 278             </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sm'</span><span class="jsdoc-syntax">,
 279             </span><span class="jsdoc-var">xtype</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
 280             </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">,
 281             </span><span class="jsdoc-var">fa</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'trash'</span><span class="jsdoc-syntax">,
 282             </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
 283                 </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.onDelete.createDelegate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">)
 284             }
 285         });
 286         </span><span class="jsdoc-var">this.deleteBtn.hide</span><span class="jsdoc-syntax">();
 287
 288     },
 289
 290
 291     </span><span class="jsdoc-var">onDelete </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 292     {
 293         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.createRange</span><span class="jsdoc-syntax">();
 294         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.getSelection</span><span class="jsdoc-syntax">();
 295         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selectedNode</span><span class="jsdoc-syntax">;
 296         </span><span class="jsdoc-var">range.setStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">,0);
 297         </span><span class="jsdoc-var">range.setEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">,0);
 298
 299
 300         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
 301             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">);
 302             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">) {
 303                 </span><span class="jsdoc-var">block.removeNode</span><span class="jsdoc-syntax">();
 304                 </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
 305                 </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
 306                 </span><span class="jsdoc-var">this.updateToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 307             }
 308
 309         }
 310         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">) {
 311             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// should not really happen..
 312         </span><span class="jsdoc-syntax">}
 313         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sn.tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">) {
 314             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 315         }
 316         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.childNodes</span><span class="jsdoc-syntax">[0] || </span><span class="jsdoc-var">sn.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.previousSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
 317
 318         </span><span class="jsdoc-comment">// remove and keep parents.
 319         </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.FilterKeepChildren</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">});
 320         </span><span class="jsdoc-var">a.replaceTag</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
 321
 322         </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
 323         </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
 324         </span><span class="jsdoc-var">this.editorcore.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 325
 326
 327     },
 328     </span><span class="jsdoc-comment">/**
 329      * Protected method that will not generally be called directly. It triggers
 330      * a toolbar update by reading the markup state of the current selection in the editor.
 331      *
 332      * Note you can force an update by calling on('editorevent', scope, false)
 333      */
 334     </span><span class="jsdoc-var">updateToolbar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">ev</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">)
 335     {
 336         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.constructor.types</span><span class="jsdoc-syntax">;
 337
 338
 339         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ev</span><span class="jsdoc-syntax">) {
 340             </span><span class="jsdoc-var">ev.stopEvent</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// se if we can stop this looping with mutiple events.
 341         </span><span class="jsdoc-syntax">}
 342
 343
 344         </span><span class="jsdoc-comment">// capture mouse up - this is handy for selecting images..
 345         // perhaps should go somewhere else...
 346         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.editorcore.activated</span><span class="jsdoc-syntax">){
 347             </span><span class="jsdoc-var">this.editor.onFirstFocus</span><span class="jsdoc-syntax">();
 348             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 349         }
 350         </span><span class="jsdoc-comment">//Roo.log(ev ? ev.target : 'NOTARGET');
 351
 352
 353         // http://developer.yahoo.com/yui/docs/simple-editor.js.html
 354         // selectNode - might want to handle IE?
 355
 356         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ev </span><span class="jsdoc-syntax">&amp;&amp;
 357             (</span><span class="jsdoc-var">ev.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'mouseup' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">ev.type </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'click' </span><span class="jsdoc-syntax">) &amp;&amp;
 358             </span><span class="jsdoc-var">ev.target </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ev.target.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'BODY' </span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// &amp;&amp; ev.target.tagName == 'IMG') {
 359             // they have click on an image...
 360             // let's see if we can change the selection...
 361             </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ev.target</span><span class="jsdoc-syntax">;
 362
 363
 364         }
 365
 366         </span><span class="jsdoc-comment">// this forces an id..
 367         </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editorcore.doc.body.querySelectorAll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-ed-selection'</span><span class="jsdoc-syntax">))</span><span class="jsdoc-var">.forEach</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">) {
 368             </span><span class="jsdoc-var">e.classList.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-ed-selection'</span><span class="jsdoc-syntax">);
 369         });
 370
 371         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ans </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.getAllAncestors</span><span class="jsdoc-syntax">();
 372
 373
 374         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">) {
 375             </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ans.length </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0] ?  </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0]  : </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[1]) : </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
 376             </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
 377             </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.tagName.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
 378
 379         }
 380
 381         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.tagName.toUpperCase</span><span class="jsdoc-syntax">();
 382         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selectedNode</span><span class="jsdoc-syntax">;
 383         </span><span class="jsdoc-var">this.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">;
 384         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">left_label </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">;
 385
 386         </span><span class="jsdoc-comment">// ok see if we are editing a block?
 387
 388         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 389         </span><span class="jsdoc-comment">// you are not actually selecting the block.
 390         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sel.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
 391             </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">;
 392         } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sel.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[data-block]'</span><span class="jsdoc-syntax">)) {
 393
 394             </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[data-block]'</span><span class="jsdoc-syntax">);
 395
 396         }
 397
 398
 399         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 400         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.editorcore.enableBlocks</span><span class="jsdoc-syntax">) {
 401             </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">);
 402
 403
 404             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">) {
 405                 </span><span class="jsdoc-var">db.className </span><span class="jsdoc-syntax">= (
 406                         </span><span class="jsdoc-var">db.classList.length </span><span class="jsdoc-syntax">&gt; 0  ? </span><span class="jsdoc-var">db.className </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''
 407                     </span><span class="jsdoc-syntax">)  + </span><span class="jsdoc-string">'roo-ed-selection'</span><span class="jsdoc-syntax">;
 408
 409                  </span><span class="jsdoc-comment">// since we removed it earlier... its not there..
 410                 </span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'BLOCK.' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">db.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">);
 411
 412                 </span><span class="jsdoc-comment">//this.editorcore.selectNode(db);
 413                 </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">this.button_groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 414                    </span><span class="jsdoc-var">this.button_groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.buildBlockToolbar</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">);
 415                 }
 416                 </span><span class="jsdoc-var">this.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">;
 417                 </span><span class="jsdoc-var">left_label </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block.friendly_name</span><span class="jsdoc-syntax">;
 418
 419             }
 420
 421
 422         }
 423
 424
 425         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">this.active_group </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.active_group.name </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">this.selectedNode </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ev </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
 426             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// no change?
 427         </span><span class="jsdoc-syntax">}
 428
 429         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">) {
 430             </span><span class="jsdoc-var">this.deleteBtn.hide</span><span class="jsdoc-syntax">();
 431             </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 432             </span><span class="jsdoc-var">this.hideActiveGroup</span><span class="jsdoc-syntax">();
 433             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 434
 435         }
 436
 437
 438         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active_group</span><span class="jsdoc-syntax">) {
 439             </span><span class="jsdoc-var">this.hideActiveGroup</span><span class="jsdoc-syntax">();
 440         }
 441         </span><span class="jsdoc-var">this.showActiveGroup</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">);
 442         </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
 443         </span><span class="jsdoc-var">this.deleteBtn.show</span><span class="jsdoc-syntax">();
 444
 445     },
 446     </span><span class="jsdoc-var">hideActiveGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 447     {
 448         </span><span class="jsdoc-var">this.hide</span><span class="jsdoc-syntax">();
 449         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.active_group </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
 450             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 451         }
 452         </span><span class="jsdoc-var">this.active_group.forEach</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">) {
 453             </span><span class="jsdoc-var">e.hide</span><span class="jsdoc-syntax">();
 454         });
 455         </span><span class="jsdoc-var">this.active_group </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 456     },
 457     </span><span class="jsdoc-var">showActiveGroup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">)
 458     {
 459
 460         </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">this.button_groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 461
 462             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 463         }
 464
 465         </span><span class="jsdoc-var">this.active_group </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.button_groups</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">];
 466
 467         </span><span class="jsdoc-var">this.active_group.forEach</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">) {
 468             </span><span class="jsdoc-var">e.show</span><span class="jsdoc-syntax">();
 469         });
 470
 471         </span><span class="jsdoc-comment">// update attributes
 472         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectedNode.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">) ) {
 473             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectedNode</span><span class="jsdoc-syntax">);
 474             </span><span class="jsdoc-var">this.active_group.forEach</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">) {
 475                 </span><span class="jsdoc-var">e.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectedNode.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e.name</span><span class="jsdoc-syntax">]));
 476             }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 477
 478             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 479
 480         }
 481         </span><span class="jsdoc-comment">// based on attributes...
 482         </span><span class="jsdoc-var">this.active_group.forEach</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">) {
 483             </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">e.attrname</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 484                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 485             }
 486              </span><span class="jsdoc-var">e.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selectedNode.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.attrname</span><span class="jsdoc-syntax">));
 487         }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 488
 489
 490     }
 491
 492 });</span></code></body></html>