sync
[roojs1] / docs / src / Roo_htmleditor_BlockFigure.js.html
index f4f3f27..eaf6609 100644 (file)
@@ -5,8 +5,8 @@
  * Block that has an image and a figcaption
  * @cfg {String} image_src the url for the image
  * @cfg {String} align (left|right) alignment for the block default left
- * @cfg {String} text_align (left|right) alignment for the text caption default left.
  * @cfg {String} caption the text to appear below  (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
  * @cfg {String|number} image_width the width of the image number or %?
  * @cfg {String|number} image_height the height of the image number or %?
  * 
 
     </span><span class="jsdoc-comment">// setable values.
     </span><span class="jsdoc-var">image_src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
-
-    </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">caption </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
-    </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">caption_display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">video_url </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+
+    </span><span class="jsdoc-comment">// margin: '2%', not used
+
+    </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">//   (left|right) alignment for the text caption default left. - not used at present
 
-    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'46%'</span><span class="jsdoc-syntax">,
-    </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'2%'</span><span class="jsdoc-syntax">,
 
-    </span><span class="jsdoc-comment">// used by context menu
+    // used by context menu
     </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">,
     </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">,
 
-    </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// ?? static really
-        </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
-            </span><span class="jsdoc-comment">// ?? number
-        </span><span class="jsdoc-syntax">},
-        </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Margin&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
-            </span><span class="jsdoc-comment">// ?? number
-        </span><span class="jsdoc-syntax">},
-        </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align&quot;</span><span class="jsdoc-syntax">,
-            </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-var">width </span><span class="jsdoc-syntax">: 80
-
-        },
-        </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: {
-            </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">,
-            </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">]],
-            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
-        },
-
-
-        </span><span class="jsdoc-var">image_src </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Src&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
-        }
+    </span><span class="jsdoc-var">contextMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar</span><span class="jsdoc-syntax">)
+    {
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+        };
+
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rooui </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">syncValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">toolbar.editorcore.syncValue</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">= {};
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[
+             {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Source: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextField'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 150,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'image_src'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">keyup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form
+
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listWidth </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">triggerAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">typeAhead </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 70,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'SimpleStore'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [
+                        [</span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'50%'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">]
+                    ],
+                    </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.data
+                </span><span class="jsdoc-syntax">}
+            },
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listWidth </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">triggerAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">typeAhead </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 70,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'align'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'SimpleStore'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [
+                        [</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">]
+                    ],
+                    </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.data
+                </span><span class="jsdoc-syntax">}
+            },
+
+
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Hide Caption'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'caption_display'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">enableToggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">this.toggle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                },
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">toggle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-var">this.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;Hide Caption&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Show Caption&quot;</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
+            </span><span class="jsdoc-syntax">}
+        ];
+
     },
     </span><span class="jsdoc-comment">/**
      * create a DomHelper friendly object - for use with
         </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">);
         </span><span class="jsdoc-var">d.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption</span><span class="jsdoc-syntax">;
 
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'50%' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'0 auto' </span><span class="jsdoc-syntax">: 0;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">=   {
+            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.image_src</span><span class="jsdoc-syntax">,
+            </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-var">.replace</span><span class="jsdoc-syntax">(/\s+/g, </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.trim</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-comment">// removeHTML and reduce spaces..
+            </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: {
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0px'
+
+
+            </span><span class="jsdoc-syntax">}
+        };
+        </span><span class="jsdoc-comment">/*
+        '&lt;div class=&quot;{0}&quot; width=&quot;420&quot; height=&quot;315&quot; src=&quot;{1}&quot; frameborder=&quot;0&quot; allowfullscreen&gt;' +
+                    '&lt;a href=&quot;{2}&quot;&gt;' + 
+                        '&lt;img class=&quot;{0}-thumbnail&quot; src=&quot;{3}/Images/{4}/{5}#image-{4}&quot; /&gt;' + 
+                    '&lt;/a&gt;' + 
+                '&lt;/div&gt;',
+        */
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.href.length </span><span class="jsdoc-syntax">&gt; 0) {
+            </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.href</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'true'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    </span><span class="jsdoc-var">img
+                </span><span class="jsdoc-syntax">]
+            };
+        }
+
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.video_url.length </span><span class="jsdoc-syntax">&gt; 0) {
+            </span><span class="jsdoc-var">img </span><span class="jsdoc-syntax">= {
+                </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.cls</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">frameborder </span><span class="jsdoc-syntax">: 0,
+                </span><span class="jsdoc-var">allowfullscreen </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 420,  </span><span class="jsdoc-comment">// these are for video tricks - that we replace the outer
+                </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: 315,
+                </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.video_url</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
+                    </span><span class="jsdoc-var">img
+                </span><span class="jsdoc-syntax">]
+            };
+        }
+
+        </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-syntax">{
             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
-                </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">float </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.margin
+                </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">padding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'10px'
+
             </span><span class="jsdoc-syntax">},
+
+
+            </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.align</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
-                {
-                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
-                    </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.image_src</span><span class="jsdoc-syntax">,
-                    </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..
-                    </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: {
-                        </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'
-                    </span><span class="jsdoc-syntax">}
-                },
+                </span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">,
+
                 {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
-                        </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.text_align
+                        </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'margin-top' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'16px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'font-size' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'16px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'line-height' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'24px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'font-style'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'italic'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption_display
                     </span><span class="jsdoc-syntax">},
+                    </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.cls.length </span><span class="jsdoc-syntax">&gt; 0 ? (</span><span class="jsdoc-var">this.cls  </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-thumbnail' </span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption
 
                 </span><span class="jsdoc-syntax">}
             ]
         };
+
     },
 
     </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">)
     {
+        </span><span class="jsdoc-comment">// this should not really come from the link...
+        </span><span class="jsdoc-var">this.video_url </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">'div'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.cls </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">'div'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'class'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.href </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">'a'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'href'</span><span class="jsdoc-syntax">);
+
         </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">);
-        </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">);
+
+        </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">'align'</span><span class="jsdoc-syntax">);
         </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">);
-        </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">);
-        </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">);
-        </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">);
+        </span><span class="jsdoc-comment">//this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        </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">'max-width'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//this.margin = this.getVal(node, 'figure', 'style', 'margin');
 
+    </span><span class="jsdoc-syntax">},
+    </span><span class="jsdoc-var">removeNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.node</span><span class="jsdoc-syntax">;
     }