Skip to content

Closes #80 - bindable width and height for Containers #215

Closed
wants to merge 1 commit into from
View
25 src/aria/widgets/CfgBeans.js
@@ -104,6 +104,17 @@ Aria.beanDefinitions({
$type : "WidgetCfg",
$description : "Base config for any widget that can be resized in width and height (by default widgets only support width)",
$properties : {
+ "bind" : {
+ $type : "WidgetCfg.bind",
+ $properties : {
+ "width" : {
+ $type : "common:BindingRef"
+ },
+ "height" : {
+ $type : "common:BindingRef"
+ }
+ }
+ },
"height" : {
$type : "json:Integer",
$description : "Widget height in pixel - note: some widgets may ignore this property. If negative, the height will be considered as unset and the widget will use the most appropriate height when possible",
@@ -1124,7 +1135,7 @@ Aria.beanDefinitions({
$description : "Configuration for the ErrorList widget",
$properties : {
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"messages" : {
$type : "common:BindingRef"
@@ -1173,7 +1184,7 @@ Aria.beanDefinitions({
$description : "Configuration for the Calendar widget",
$properties : {
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"value" : {
$type : "common:BindingRef"
@@ -1378,7 +1389,7 @@ Aria.beanDefinitions({
$description : "Function to be called when the user moves the mouse over an item in the list."
},
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"selectedValues" : {
$type : "common:BindingRef"
@@ -1424,7 +1435,7 @@ Aria.beanDefinitions({
$description : "The base configuration for the Dialog widget",
$properties : {
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "DivCfg.bind",
$properties : {
"visible" : {
$type : "common:BindingRef"
@@ -1552,7 +1563,7 @@ Aria.beanDefinitions({
$description : "The base configuration for the Tab widget",
$properties : {
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"selectedTab" : {
$type : "common:BindingRef"
@@ -1580,7 +1591,7 @@ Aria.beanDefinitions({
$description : "The base configuration for the Tab widget",
$properties : {
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"selectedTab" : {
$type : "common:BindingRef"
@@ -1706,7 +1717,7 @@ Aria.beanDefinitions({
$default : true
},
"bind" : {
- $type : "WidgetCfg.bind",
+ $type : "ResizableWidgetCfg.bind",
$properties : {
"size1" : {
$type : "common:BindingRef"
View
49 src/aria/widgets/container/Container.js
@@ -32,6 +32,9 @@ Aria.classDefinition({
this._cssClassNames = aria.core.TplClassLoader.addPrintOptions(this._cssClassNames, cfg.printOptions);
+ //Init this if your class needs a border.
+ this._frame = null;
+
/**
* Specifies if size constraints are specified in the config (and so if it is useful to call
* aria.utils.Size.setContrains for this container).
@@ -78,8 +81,10 @@ Aria.classDefinition({
// PROFILING // this.$logTimestamp("updateContainerSize");
var cfg = this._cfg, domElt = this.getDom(), widthConf, heightConf, changed;
- if (domElt && this._sizeConstraints) {
+ if (!domElt)
+ return;
+ if (this._sizeConstraints) {//If we are bound to min and max size
if (cfg.width == -1) {
widthConf = {
min : cfg.minWidth,
@@ -94,14 +99,6 @@ Aria.classDefinition({
};
}
- if (this._changedContainerSize) {
- domElt.style.width = cfg.width > -1 ? cfg.width + "px" : "";
- domElt.style.height = cfg.height > -1 ? cfg.height + "px" : "";
- if (this._frame) {
- this._frame.resize(cfg.width, cfg.height);
- }
- }
-
changed = aria.utils.Size.setContrains(domElt, widthConf, heightConf);
if (changed && this._frame) {
this._frame.resize(changed.width, changed.height);
@@ -112,7 +109,14 @@ Aria.classDefinition({
}
this._changedContainerSize = changed;
+ } else if (this._changedContainerSize) { //If we are not bound,resize freely
+ domElt.style.width = cfg.width > -1 ? cfg.width + "px" : "";
+ domElt.style.height = cfg.height > -1 ? cfg.height + "px" : "";
+ if (this._frame) {
+ this._frame.resize(cfg.width, cfg.height);
+ }
}
+
},
/**
@@ -129,7 +133,32 @@ Aria.classDefinition({
* @param {aria.templates.MarkupWriter} out the writer Object to use to output markup
* @protected
*/
- _widgetMarkupEnd : function (out) {}
+ _widgetMarkupEnd : function (out) {},
+
+ /**
+ * Updates the size of the dom object accordingly to the new values of this._cfg.
+ */
+ _updateSize : function () {
+ this._changedContainerSize = true;
+ this._updateContainerSize();
+ },
+ /**
+ * Internal method called when one of the model property that the widget is bound to has changed Must be
+ * overridden by sub-classes defining bindable properties
+ * @param {String} propertyName the property name
+ * @param {Object} newValue the new value
+ * @param {Object} oldValue the old property value
+ * @protected
+ * @override
+ */
+ _onBoundPropertyChange : function (propertyName, newValue, oldValue) {
+ if (propertyName === "height" || propertyName === "width") {
+ this._updateSize();
+ } else {
+ // delegate to parent class
+ this.$Widget._onBoundPropertyChange.apply(this, arguments);
+ }
+ }
}
});
View
8 src/aria/widgets/container/Dialog.js
@@ -332,6 +332,14 @@ Aria.classDefinition({
} else if (propertyName === "center") {
this._cfg.center = newValue;
this.updatePosition();
+ } else if (propertyName === "height") {
+ // Resize ourself and then the contained div
+ this.$Container._onBoundPropertyChange.apply(this, arguments);
+ this._div.updateSize(this._cfg);
+ } else if (propertyName === "width") {
+ // Resize ourself and then the contained div
+ this.$Container._onBoundPropertyChange.apply(this, arguments);
+ this._div.updateSize(this._cfg);
} else {
// delegate to parent class
this.$Container._onBoundPropertyChange.apply(this, arguments);
View
10 src/aria/widgets/container/Div.js
@@ -118,14 +118,8 @@ Aria.classDefinition({
hasChanged = true;
}
if (hasChanged) {
- /*
- * // Change width and height if it's too large compared to the viewport var viewport =
- * aria.utils.Dom._getViewportSize(); if (viewport.width < this._cfg.width) { this._cfg.width =
- * viewport.width; } if (viewport.height < this._cfg.height) { this._cfg.height = viewport.height; }
- */
- this.$Container._updateContainerSize.call(this);
+ this.$Container._updateSize.call(this);
}
-
}
}
-});
+});
Something went wrong with that request. Please try again.