@qooxdoo/framework
Version:
The JS Framework for Coders
252 lines (223 loc) • 7.1 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2006 STZ-IDA, Germany, http://www.stz-ida.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Til Schneider (til132)
* Fabian Jakobs (fjakobs)
************************************************************************ */
/**
* An abstract data cell renderer that does the basic coloring
* (borders, selected look, ...).
*
* @require(qx.bom.Stylesheet)
*/
qx.Class.define("qx.ui.table.cellrenderer.Abstract", {
type: "abstract",
implement: qx.ui.table.ICellRenderer,
extend: qx.core.Object,
construct() {
super();
var cr = qx.ui.table.cellrenderer.Abstract;
if (!cr.__clazz) {
cr.__clazz = this.self(arguments);
this._createStyleSheet();
// add dynamic theme listener
if (qx.core.Environment.get("qx.dyntheme")) {
this.__changeThemeCellRendererListenerId = qx.theme.manager.Meta.getInstance().addListener(
"changeTheme",
this._onChangeTheme,
this
);
}
}
},
properties: {
/**
* The default cell style. The value of this property will be provided
* to the cell renderer as cellInfo.style.
*/
defaultCellStyle: {
init: null,
check: "String",
nullable: true
}
},
members: {
/**
* Handler for the theme change.
* @signature function()
*/
_onChangeTheme: qx.core.Environment.select("qx.dyntheme", {
true() {
qx.bom.Stylesheet.removeAllRules(
qx.ui.table.cellrenderer.Abstract.__clazz.stylesheet
);
this._createStyleSheet();
},
false: null
}),
/**
* the sum of the horizontal insets. This is needed to compute the box model
* independent size
*/
_insetX: 6 + 6 + 1, // paddingLeft + paddingRight + borderRight
/**
* the sum of the vertical insets. This is needed to compute the box model
* independent size
*/
_insetY: 0,
/**
* Creates the style sheet used for the table cells.
*/
_createStyleSheet() {
var colorMgr = qx.theme.manager.Color.getInstance();
var stylesheet =
".qooxdoo-table-cell {" +
qx.bom.element.Style.compile({
position: "absolute",
top: "0px",
overflow: "hidden",
whiteSpace: "nowrap",
borderRight: "1px solid " + colorMgr.resolve("table-column-line"),
padding: "0px 6px",
cursor: "default",
textOverflow: "ellipsis",
userSelect: "none"
}) +
"} " +
".qooxdoo-table-cell-right { text-align:right } " +
".qooxdoo-table-cell-italic { font-style:italic} " +
".qooxdoo-table-cell-bold { font-weight:bold } ";
if (qx.core.Environment.get("css.boxsizing")) {
stylesheet +=
".qooxdoo-table-cell {" +
qx.bom.element.BoxSizing.compile("content-box") +
"}";
}
qx.ui.table.cellrenderer.Abstract.__clazz.stylesheet =
qx.bom.Stylesheet.createElement(stylesheet);
},
/**
* Get a string of the cell element's HTML classes.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} cellInfo of the cell
* @return {String} The table cell HTML classes as string.
*/
_getCellClass(cellInfo) {
return "qooxdoo-table-cell";
},
/**
* Returns the CSS styles that should be applied to the main div of this
* cell.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} The information about the cell.
* See {@link qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
* @return {var} the CSS styles of the main div.
*/
_getCellStyle(cellInfo) {
return cellInfo.style || "";
},
/**
* Retrieve any extra attributes the cell renderer wants applied to this
* cell.
*
* @param cellInfo {Map} The information about the cell.
* See {@link qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
*
* @return {String}
* The extra attributes to be applied to this cell.
*/
_getCellAttributes(cellInfo) {
const cellId =
"qooxdoo-table-cell-" +
cellInfo.table.toHashCode() +
"-" +
cellInfo.row +
"-" +
cellInfo.col;
const readOnly =
cellInfo.editable !== null && cellInfo.editable !== undefined
? !cellInfo.editable
: true;
return "id=" + cellId + " role=gridcell aria-readonly=" + readOnly;
},
/**
* Returns the HTML that should be used inside the main div of this cell.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} The information about the cell.
* See {@link qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
* @return {String} the inner HTML of the cell.
*/
_getContentHtml(cellInfo) {
return cellInfo.value || "";
},
/**
* Get the cell size taking the box model into account
*
* @param width {Integer} The cell's (border-box) width in pixel
* @param height {Integer} The cell's (border-box) height in pixel
* @param insetX {Integer} The cell's horizontal insets, i.e. the sum of
* horizontal paddings and borders
* @param insetY {Integer} The cell's vertical insets, i.e. the sum of
* vertical paddings and borders
* @return {String} The CSS style string for the cell size
*/
_getCellSizeStyle(width, height, insetX, insetY) {
var style = "";
if (qx.core.Environment.get("css.boxmodel") == "content") {
width -= insetX;
height -= insetY;
}
style += "width:" + Math.max(width, 0) + "px;";
style += "height:" + Math.max(height, 0) + "px;";
return style;
},
// interface implementation
createDataCellHtml(cellInfo, htmlArr) {
htmlArr.push(
'<div class="',
this._getCellClass(cellInfo),
'" style="',
"left:",
cellInfo.styleLeft,
"px;",
this._getCellSizeStyle(
cellInfo.styleWidth,
cellInfo.styleHeight,
this._insetX,
this._insetY
),
this._getCellStyle(cellInfo),
'" ',
'data-qx-table-cell-row="',
cellInfo.row,
'" ',
'data-qx-table-cell-col="',
cellInfo.col,
'" ',
this._getCellAttributes(cellInfo),
">" + this._getContentHtml(cellInfo),
"</div>"
);
}
},
destruct() {
// remove dynamic theme listener
if (qx.core.Environment.get("qx.dyntheme") && this.__changeThemeCellRendererListenerId) {
qx.theme.manager.Meta.getInstance().removeListenerById(
this.__changeThemeCellRendererListenerId
);
}
}
});