@qooxdoo/framework
Version:
The JS Framework for Coders
322 lines (275 loc) • 7.83 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2010 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:
* Martin Wittemann (martinwittemann)
************************************************************************ */
/**
* A basic decorator featuring simple borders based on CSS styles.
* This mixin is usually used by {@link qx.ui.decoration.Decorator}.
*/
qx.Mixin.define("qx.ui.decoration.MSingleBorder", {
properties: {
/*
---------------------------------------------------------------------------
PROPERTY: WIDTH
---------------------------------------------------------------------------
*/
/** top width of border */
widthTop: {
check: "Number",
init: 0,
apply: "_applyWidth"
},
/** right width of border */
widthRight: {
check: "Number",
init: 0,
apply: "_applyWidth"
},
/** bottom width of border */
widthBottom: {
check: "Number",
init: 0,
apply: "_applyWidth"
},
/** left width of border */
widthLeft: {
check: "Number",
init: 0,
apply: "_applyWidth"
},
/*
---------------------------------------------------------------------------
PROPERTY: STYLE
---------------------------------------------------------------------------
*/
/** top style of border */
styleTop: {
nullable: true,
check: [
"solid",
"dotted",
"dashed",
"double",
"inset",
"outset",
"ridge",
"groove"
],
init: "solid",
apply: "_applyStyle"
},
/** right style of border */
styleRight: {
nullable: true,
check: [
"solid",
"dotted",
"dashed",
"double",
"inset",
"outset",
"ridge",
"groove"
],
init: "solid",
apply: "_applyStyle"
},
/** bottom style of border */
styleBottom: {
nullable: true,
check: [
"solid",
"dotted",
"dashed",
"double",
"inset",
"outset",
"ridge",
"groove"
],
init: "solid",
apply: "_applyStyle"
},
/** left style of border */
styleLeft: {
nullable: true,
check: [
"solid",
"dotted",
"dashed",
"double",
"inset",
"outset",
"ridge",
"groove"
],
init: "solid",
apply: "_applyStyle"
},
/*
---------------------------------------------------------------------------
PROPERTY: COLOR
---------------------------------------------------------------------------
*/
/** top color of border */
colorTop: {
nullable: true,
check: "Color",
apply: "_applyStyle"
},
/** right color of border */
colorRight: {
nullable: true,
check: "Color",
apply: "_applyStyle"
},
/** bottom color of border */
colorBottom: {
nullable: true,
check: "Color",
apply: "_applyStyle"
},
/** left color of border */
colorLeft: {
nullable: true,
check: "Color",
apply: "_applyStyle"
},
/*
---------------------------------------------------------------------------
PROPERTY GROUP: EDGE
---------------------------------------------------------------------------
*/
/** Property group to configure the left border */
left: {
group: ["widthLeft", "styleLeft", "colorLeft"]
},
/** Property group to configure the right border */
right: {
group: ["widthRight", "styleRight", "colorRight"]
},
/** Property group to configure the top border */
top: {
group: ["widthTop", "styleTop", "colorTop"]
},
/** Property group to configure the bottom border */
bottom: {
group: ["widthBottom", "styleBottom", "colorBottom"]
},
/*
---------------------------------------------------------------------------
PROPERTY GROUP: TYPE
---------------------------------------------------------------------------
*/
/** Property group to set the border width of all sides */
width: {
group: ["widthTop", "widthRight", "widthBottom", "widthLeft"],
mode: "shorthand"
},
/** Property group to set the border style of all sides */
style: {
group: ["styleTop", "styleRight", "styleBottom", "styleLeft"],
mode: "shorthand"
},
/** Property group to set the border color of all sides */
color: {
group: ["colorTop", "colorRight", "colorBottom", "colorLeft"],
mode: "shorthand"
}
},
members: {
/**
* Takes a styles map and adds the border styles styles in place
* to the given map. This is the needed behavior for
* {@link qx.ui.decoration.Decorator}.
*
* @param styles {Map} A map to add the styles.
*/
_styleBorder(styles) {
if (qx.core.Environment.get("qx.theme")) {
var Color = qx.theme.manager.Color.getInstance();
var colorTop = Color.resolve(this.getColorTop());
var colorRight = Color.resolve(this.getColorRight());
var colorBottom = Color.resolve(this.getColorBottom());
var colorLeft = Color.resolve(this.getColorLeft());
} else {
var colorTop = this.getColorTop();
var colorRight = this.getColorRight();
var colorBottom = this.getColorBottom();
var colorLeft = this.getColorLeft();
}
// Add borders
var width = this.getWidthTop();
if (width > 0) {
styles["border-top"] =
width + "px " + this.getStyleTop() + " " + (colorTop || "");
}
var width = this.getWidthRight();
if (width > 0) {
styles["border-right"] =
width + "px " + this.getStyleRight() + " " + (colorRight || "");
}
var width = this.getWidthBottom();
if (width > 0) {
styles["border-bottom"] =
width + "px " + this.getStyleBottom() + " " + (colorBottom || "");
}
var width = this.getWidthLeft();
if (width > 0) {
styles["border-left"] =
width + "px " + this.getStyleLeft() + " " + (colorLeft || "");
}
// Check if valid
if (qx.core.Environment.get("qx.debug")) {
if (styles.length === 0) {
throw new Error(
"Invalid Single decorator (zero border width). Use qx.ui.decorator.Background instead!"
);
}
}
// Add basic styles
styles.position = "absolute";
},
/**
* Implementation of the interface for the single border.
*
* @return {Map} A map containing the default insets.
* (top, right, bottom, left)
*/
_getDefaultInsetsForBorder() {
return {
top: this.getWidthTop(),
right: this.getWidthRight(),
bottom: this.getWidthBottom(),
left: this.getWidthLeft()
};
},
/*
---------------------------------------------------------------------------
PROPERTY APPLY ROUTINES
---------------------------------------------------------------------------
*/
// property apply
_applyWidth() {
this._applyStyle();
this._resetInsets();
},
// property apply
_applyStyle() {
if (qx.core.Environment.get("qx.debug")) {
if (this._isInitialized()) {
throw new Error(
"This decorator is already in-use. Modification is not possible anymore!"
);
}
}
}
}
});