@qooxdoo/framework
Version:
The JS Framework for Coders
197 lines (166 loc) • 5.03 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://qooxdoo.org/docs/#desktop/widget/html.md' 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(html) {
super();
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() {
return this.getContentElement();
},
/*
---------------------------------------------------------------------------
APPLY ROUTINES
---------------------------------------------------------------------------
*/
// property apply
_applyHtml(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(value, old) {
this.getContentElement().removeClass(old);
this.getContentElement().addClass(value);
},
// overridden
_applySelectable(value) {
super._applySelectable(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(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(value, old) {
if (value) {
this.getContentElement().setStyle(
"color",
qx.theme.manager.Color.getInstance().resolve(value)
);
} else {
this.getContentElement().removeStyle("color");
}
}
}
});