Well, it's also possible to create your own behaviors, and while the documentation on this is pretty much nonexistant, there are two great blog entries here and here on the subject.
So I thought, floatingBehavior is cool, but what if you could resize elements as well (like a little virtual window)? Thus was born my first Atlas Behavior, resizingBehavior!
... next you need to assign the resizeBehavior properties in the XML Config section of your Atlas page...
resizeControlId should be assigned to the element you want resized
resizeObjectId should be assigned to the element that controls the resize
minWidth, minHeight control the minimum resize size
arrowThreshold allows you to control the sensitivity of resizeObjectId
Type.registerNamespace('SpriteHand.UI');
SpriteHand.UI.ResizeBehavior = function() {
SpriteHand.UI.ResizeBehavior.initializeBase(this);
// Private fields.
var _resizeControlHandler;
var _mousedownHandler;
var _mouseupHandler;
var _mousemoveHandler;
var _resizeControlID; // control that is being resized
var _resizeControl;
var _popupBehavior;
var _mouseIsDown = false;
var _thresholdArrows = 20;
var _thresholdMinWidth = 60;
var _thresholdMinHeight = 40;
var _isResizing = false;
var _resizeObjectID; // control that is used as the resize handle
var _resizeObject;
var _dragEndHandler;
// Properties.
this.get_resizeControlID = function() {
return _resizeControlID;
}
this.set_resizeControlID = function(value) {
if(value != _resizeControlID) {
_resizeControlID = value;
this.raisePropertyChanged('resizeControlID');
}
}
this.get_resizeObjectID = function() {
return _resizeObjectID;
}
this.set_resizeObjectID = function(value) {
if(value != _resizeObjectID) {
_resizeObjectID = value;
this.raisePropertyChanged('resizeObjectID');
}
}
this.get_minWidth = function() {
return _thresholdMinWidth;
}
this.set_minWidth = function(value) {
if(value != _thresholdMinWidth) {
_thresholdMinWidth = value;
this.raisePropertyChanged('minWidth');
}
}
this.get_minHeight = function() {
return _thresholdMinHeight;
}
this.set_minHeight = function(value) {
if(value != _thresholdMinHeight) {
_thresholdMinHeight = value;
this.raisePropertyChanged('minHeight');
}
}
this.get_arrowThreshold = function() {
return _thresholdArrows;
}
this.set_arrowThreshold = function(value) {
if(value != _thresholdArrows) {
_thresholdArrows = value;
this.raisePropertyChanged('arrowThreshold');
}
}
// Events.
this.resizeControlShow = this.createEvent();
// Initialize / Dispose
this.initialize = function() {
SpriteHand.UI.ResizeBehavior.callBaseMethod(this, 'initialize');
_resizeControl = new Sys.UI.Control($(_resizeControlID));
_resizeObject = new Sys.UI.Control($(_resizeObjectID));
_resizeControl.initialize();
var bounds = Sys.UI.Control.getBounds(_resizeControl.element);
_mousemoveHandler = Function.createDelegate(this, mousemoveHandler);
document.attachEvent('onmousemove', _mousemoveHandler);
_mousedownHandler = Function.createDelegate(this, mousedownHandler);
document.attachEvent('onmousedown', _mousedownHandler);
_mouseupHandler = Function.createDelegate(this, mouseupHandler);
document.attachEvent('onmouseup', _mouseupHandler);
// wire up dragend event with drag handler
_dragEndHandler = Function.createDelegate(this, dragEndHandler);
_resizeControl.element.attachEvent("ondragend", _dragEndHandler);
// disable text selection (ie only)
document.onselectstart = function() {return false;}
}
this.dispose = function() {
SpriteHand.UI.ResizeBehavior.callBaseMethod(this, 'dispose');
document.detachEvent('onmousedown', _mousedownHandler);
document.detachEvent('onmouseup', _mouseupHandler);
document.detachEvent('onmousemove', _mousemoveHandler);
_mousemoveHandler = null;
_mousedownHandler = null;
_mouseupHandler = null;
}
// Handlers.
function dragEndHandler() {
window.status="dragEndHandler";
_mouseIsDown = false;
_isResizing = false;
}
function mousedownHandler() {
_mouseIsDown = true;
}
function mouseupHandler() {
_mouseIsDown = false;
_isResizing = true;
}
function mousemoveHandler() {
window.status="";
var boundsDragHandle = Sys.UI.Control.getBounds(_resizeObject.element);
var bounds = Sys.UI.Control.getBounds(_resizeControl.element);
var x = window.event.clientX;
var y = window.event.clientY;
if (!_mouseIsDown) {
// check for resize east
if( (x >= (boundsDragHandle.x - _thresholdArrows) && x <= (boundsDragHandle.x + boundsDragHandle.width + _thresholdArrows)) &&
(y >= (boundsDragHandle.y - _thresholdArrows) && y <= (boundsDragHandle.y + boundsDragHandle.height + _thresholdArrows))) {
_resizeControl.element.style.cursor="se-resize";
_isResizing = true;
window.status="click and drag to resize southeast";
} else {
_resizeControl.element.style.cursor="auto";
}
}
if (_mouseIsDown && _isResizing) {
newWidth = (x + _resizeObject.element.style.width) - bounds.x;
if (newWidth > _thresholdMinWidth) _resizeControl.element.style.width = newWidth + "px";
newHeight = (y + _resizeObject.element.style.height) - bounds.y;
if (newHeight > _thresholdMinHeight) _resizeControl.element.style.height = newHeight + "px";
}
}
// Public methods.
// getDescriptor.
this.getDescriptor = function() {
var td = SpriteHand.UI.ResizeBehavior.callBaseMethod(this, 'getDescriptor');
td.addProperty('resizeControlID', String);
td.addProperty('resizeObjectID', String);
td.addProperty('minWidth', Number);
td.addProperty('minHeight', Number);
td.addProperty('arrowThreshold', Number);
return td;
}
}
SpriteHand.UI.ResizeBehavior.registerClass('SpriteHand.UI.ResizeBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'resizeBehavior', SpriteHand.UI.ResizeBehavior);