@qooxdoo/framework
Version:
The JS Framework for Coders
153 lines (134 loc) • 4.59 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:
* Fabian Jakobs (fjakobs)
************************************************************************ */
/**
* This mixin defines the <code>contentPadding</code> property, which is used
* by widgets like the window or group box, which must have a property, which
* defines the padding of an inner pane.
*
* The including class must implement the method
* <code>_getContentPaddingTarget</code>, which must return the widget on which
* the padding should be applied.
*/
qx.Mixin.define("qx.ui.core.MContentPadding", {
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties: {
/** Top padding of the content pane */
contentPaddingTop: {
check: "Integer",
init: 0,
apply: "_applyContentPadding",
themeable: true
},
/** Right padding of the content pane */
contentPaddingRight: {
check: "Integer",
init: 0,
apply: "_applyContentPadding",
themeable: true
},
/** Bottom padding of the content pane */
contentPaddingBottom: {
check: "Integer",
init: 0,
apply: "_applyContentPadding",
themeable: true
},
/** Left padding of the content pane */
contentPaddingLeft: {
check: "Integer",
init: 0,
apply: "_applyContentPadding",
themeable: true
},
/**
* The 'contentPadding' property is a shorthand property for setting 'contentPaddingTop',
* 'contentPaddingRight', 'contentPaddingBottom' and 'contentPaddingLeft'
* at the same time.
*
* If four values are specified they apply to top, right, bottom and left respectively.
* If there is only one value, it applies to all sides, if there are two or three,
* the missing values are taken from the opposite side.
*/
contentPadding: {
group: [
"contentPaddingTop",
"contentPaddingRight",
"contentPaddingBottom",
"contentPaddingLeft"
],
mode: "shorthand",
themeable: true
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
/* eslint-disable @qooxdoo/qx/no-refs-in-members */
members: {
/**
* @type {Map} Maps property names of content padding to the setter of the padding
*
* @lint ignoreReferenceField(__contentPaddingSetter)
*/
__contentPaddingSetter: {
contentPaddingTop: "setPaddingTop",
contentPaddingRight: "setPaddingRight",
contentPaddingBottom: "setPaddingBottom",
contentPaddingLeft: "setPaddingLeft"
},
/**
* @type {Map} Maps property names of content padding to the themed setter of the padding
*
* @lint ignoreReferenceField(__contentPaddingThemedSetter)
*/
__contentPaddingThemedSetter: {
contentPaddingTop: "setThemedPaddingTop",
contentPaddingRight: "setThemedPaddingRight",
contentPaddingBottom: "setThemedPaddingBottom",
contentPaddingLeft: "setThemedPaddingLeft"
},
/**
* @type {Map} Maps property names of content padding to the resetter of the padding
*
* @lint ignoreReferenceField(__contentPaddingResetter)
*/
__contentPaddingResetter: {
contentPaddingTop: "resetPaddingTop",
contentPaddingRight: "resetPaddingRight",
contentPaddingBottom: "resetPaddingBottom",
contentPaddingLeft: "resetPaddingLeft"
},
// property apply
_applyContentPadding(value, old, name, variant) {
var target = this._getContentPaddingTarget();
if (value == null) {
var resetter = this.__contentPaddingResetter[name];
target[resetter]();
} else {
// forward the themed sates if case the apply was invoked by a theme
if (variant == "setThemed" || variant == "resetThemed") {
var setter = this.__contentPaddingThemedSetter[name];
target[setter](value);
} else {
var setter = this.__contentPaddingSetter[name];
target[setter](value);
}
}
}
}
});