@qooxdoo/framework
Version:
The JS Framework for Coders
221 lines (170 loc) • 5.13 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Sebastian Werner (wpbasti)
* Andreas Ecker (ecker)
* Martin Wittemann (martinwittemann)
************************************************************************ */
/**
* The Html widget embeds plain HTML code into the application
*
* *Example*
*
* Here is a little example of how to use the canvas widget.
*
* <pre class='javascript'>
* var html = new qx.ui.embed.Html();
* html.setHtml("<h1>Hello World</h1>");
* </pre>
*
* *External Documentation*
*
* <a href='http://manual.qooxdoo.org/${qxversion}/pages/widget/html.html' target='_blank'>
* Documentation of this widget in the qooxdoo manual.</a>
*/
qx.Class.define("qx.ui.embed.Html",
{
extend : qx.ui.core.Widget,
include : [qx.ui.core.MNativeOverflow],
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
/**
* @param html {String} Initial HTML content
*/
construct : function(html)
{
this.base(arguments);
if (html != null) {
this.setHtml(html);
}
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties :
{
/** Any text string which can contain HTML, too */
html :
{
check : "String",
apply : "_applyHtml",
event : "changeHtml",
nullable : true
},
/**
* The css classname for the html embed.
* <b>IMPORTANT</b> Paddings and borders does not work
* in the css class. These styles cause conflicts with
* the layout engine.
*/
cssClass :
{
check : "String",
init : "",
apply : "_applyCssClass"
},
// overridden
selectable :
{
refine : true,
init : true
},
// overridden
focusable :
{
refine : true,
init : true
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
/*
---------------------------------------------------------------------------
WIDGET API
---------------------------------------------------------------------------
*/
getFocusElement : function() {
return this.getContentElement();
},
/*
---------------------------------------------------------------------------
APPLY ROUTINES
---------------------------------------------------------------------------
*/
// property apply
_applyHtml : function(value, old)
{
var elem = this.getContentElement();
// Workaround for http://bugzilla.qooxdoo.org/show_bug.cgi?id=7679
if (qx.core.Environment.get("engine.name") == "mshtml" &&
qx.core.Environment.get("browser.documentmode") == 9)
{
elem.setStyle("position", "relative");
}
// Insert HTML content
elem.setAttribute("html", value||"");
},
// property apply
_applyCssClass : function (value, old) {
this.getContentElement().removeClass(old);
this.getContentElement().addClass(value);
},
// overridden
_applySelectable : function(value)
{
this.base(arguments, value);
/*
* We have to set the value to "text" in Webkit for the content element
*/
if ((qx.core.Environment.get("engine.name") == "webkit"))
{
this.getContentElement().setStyle("userSelect", value ? "text" : "none");
}
},
/*
---------------------------------------------------------------------------
FONT SUPPORT
---------------------------------------------------------------------------
*/
// overridden
_applyFont : function(value, old)
{
var styles = value ? qx.theme.manager.Font.getInstance().resolve(value).getStyles() : qx.bom.Font.getDefaultStyles();
// check if text color already set - if so this local value has higher priority
if (this.getTextColor() != null) {
delete styles["color"];
}
this.getContentElement().setStyles(styles);
},
/*
---------------------------------------------------------------------------
TEXT COLOR SUPPORT
---------------------------------------------------------------------------
*/
// overridden
_applyTextColor : function(value, old)
{
if (value) {
this.getContentElement().setStyle("color", qx.theme.manager.Color.getInstance().resolve(value));
} else {
this.getContentElement().removeStyle("color");
}
}
}
});