Class Resize
- extends Base

A base class for Resize, providing:
- Basic Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
- Applies drag handles to an element to make it resizable
- Here is the list of valid resize handles:
[ 't', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl' ]
. You can
read this list as top, top-right, right, bottom-right, bottom,
bottom-left, left, top-left.
- The drag handles are inserted into the element and positioned
absolute. Some elements, such as a textarea or image, don't support
children. To overcome that, set wrap:true in your config and the
element willbe wrapped for you automatically.
Quick Example:
var instance = new A.Resize({
node: '#resize1',
proxy: true,
preserveRatio: true,
wrap: true,
maxHeight: 170,
maxWidth: 400,
handles: 't, tr, r, br, b, bl, l, tl'
});
Check the list of
Configuration Attributes available for
Resize.
Constructor
Resize
(
config
)
- Parameters:
-
config
<Object>
Object literal specifying widget configuration properties.
Properties
info
- protected Object
Stores the current values for the height, width, top and left. You are
able to manipulate these values on resize in order to change the resize
behavior.
Stores the original values for the height, width, top and left, stored
on resize start.
Static property used to define the default attribute
configuration for the Resize.
Static property provides a string to identify the class.
Properties inherited from Base:
Configuration Attributes
False to ensure that the resize handles are always visible, true to
display them only when the user mouses over the resizable borders.
Default Value: false
Whether the handle being dragged can change the height.
Default Value: false
Whether the handle being dragged can change the left.
Default Value: false
Whether the handle being dragged can change the top.
Default Value: false
Whether the handle being dragged can change the width.
Default Value: false
constrain
- {String/Object/Node}
Will attempt to constrain the resize node to the boundaries. Arguments:
'view': Contrain to Viewport
'#selector_string': Constrain to this node
'{Region Object}': An Object Literal containing a valid region (top, right, bottom, left) of page positions
Cache the border widths of the contrain node if constrain
option is being used.
Default Value: {}
handles
- Array | String
The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl',
'br', 'tl', 'tr'. Can use a shortcut of All.
Default Value: all
The maximum height of the element
Default Value: Infinity
The maximum width of the element
Default Value: Infinity
The minimum height of the element
Default Value: 15
The minimum width of the element
Default Value: 15
The selector or element to resize. Required.
Maintain the element's ratio when resizing.
Default Value: false
Resize a proxy element instead of the real element.
Default Value: false
proxyEl
- String | Node
The Resize proxy element.
Default Value: Generated using an internal HTML markup
True when the element is being Resized.
Default Value: false
tickX
- Number | false
The number of x ticks to span the resize to.
Default Value: false
tickY
- Number | false
The number of y ticks to span the resize to.
Default Value: false
wrap
- boolean
True to wrap an element with a div if needed (required for textareas
and images, defaults to false) in favor of the handles config option.
The wrapper element type (default div) could be over-riden passing the
wrapper
attribute.
Default Value: false
wrapper
- writeonce String | Node
Element to wrap the wrapTypes
. This element will house
the handles elements.
Default Value: div
Elements that requires a wrapper by default. Normally are elements
which cannot have children elements.
Default Value: /canvas|textarea|input|select|button|img/i
Configuration attributes inherited from Base:
Methods
protected
void
_afterResize
(
event
)
Fires after resize:resize event.
- Parameters:
-
event
<EventFacade>
resize:resize custom event
protected
void
_buildHandle
(
handle
)
Creates the handle element based on the handle name and initialize the
DragDrop on it.
- Parameters:
-
handle
<String>
Handle name ('t', 'tr', 'b', ...).
protected
void
_checkConstrain
(
axis
,
axisConstrain
,
offset
)
Helper method to update the current values on
info to respect the
constrain node.
- Parameters:
-
axis
<String>
'top' or 'left'
-
axisConstrain
<String>
'bottom' or 'right'
-
offset
<String>
'offsetHeight' or 'offsetWidth'
protected
void
_checkHeight
(
)
Update the current values on
info
to respect the maxHeight and minHeight.
protected
void
_checkRatio
(
)
Update the current values on
info
calculating the correct ratio for the other values.
protected
boolean
_checkRegion
(
)
Check whether the resizable node is inside the constrain region.
protected
void
_checkWidth
(
)
Update the current values on
info
to respect the maxWidth and minWidth.
protected
void
_copyStyles
(
node
,
wrapper
)
- Parameters:
-
node
<Node>
Node from.
-
wrapper
<Node>
Node to.
protected
void
_defMouseUpFn
(
event
)
Default resize:mouseUp handler
- Parameters:
-
event
<EventFacade>
The Event object
protected
void
_defResizeEndFn
(
event
)
Default resize:end handler
- Parameters:
-
event
<EventFacade>
The Event object
protected
void
_defResizeFn
(
event
)
Default resize:resize handler
- Parameters:
-
event
<EventFacade>
The Event object
protected
void
_defResizeStartFn
(
event
)
Default resize:start handler
- Parameters:
-
event
<EventFacade>
The Event object
protected
Object Region
_getConstrainRegion
(
)
Get the constrain region based on the constrain
attribute.
protected
void
_handleMouseUpEvent
(
event
)
Fires the resize:mouseUp event.
- Parameters:
-
event
<EventFacade>
resize:mouseUp event facade
protected
void
_handleResizeEndEvent
(
event
)
Fires the resize:end event.
- Parameters:
-
event
<EventFacade>
resize:end event facade
protected
void
_handleResizeEvent
(
event
)
Fires the resize:resize event.
- Parameters:
-
event
<EventFacade>
resize:resize event facade
protected
void
_handleResizeStartEvent
(
event
)
Fires the resize:start event.
- Parameters:
-
event
<EventFacade>
resize:start event facade
protected
void
_onHandleMouseOut
(
event
)
Mouseout event handler for the handles.
- Parameters:
-
event
<EventFacade>
protected
void
_onHandleMouseOver
(
event
)
Mouseover event handler for the handles.
- Parameters:
-
event
<EventFacade>
protected
void
_onWrapperMouseEnter
(
event
)
Mouseenter event handler for the
wrapper.
- Parameters:
-
event
<EventFacade>
protected
void
_onWrapperMouseLeave
(
event
)
Mouseleave event handler for the
wrapper.
- Parameters:
-
event
<EventFacade>
protected
void
_renderHandles
(
)
Responsible for loop each handle element and append to the wrapper.
protected
void
_renderProxy
(
)
Render the
proxyEl element and
make it sibling of the
node.
protected
void
_resize
(
)
Basic resize calculations.
protected
void
_setActiveHandlesUI
(
val
)
Set the active state of the handles.
- Parameters:
-
val
<boolean>
True to activate the handles, false to deactivate.
protected
void
_setHideHandlesUI
(
val
)
Set the visibility of the handles.
- Parameters:
-
val
<boolean>
True to hide the handles, false to show.
protected
void
_setOffset
(
node
,
offsetWidth
,
offsetHeight
)
Set offsetWidth and offsetHeight of the passed node.
- Parameters:
-
node
<Node>
Node
-
offsetWidth
<number>
-
offsetHeight
<number>
protected
void
_syncProxyUI
(
)
Sync the proxy UI with internal values from
info.
protected
void
_syncUI
(
)
Sync the Resize UI with internal values from
info.
protected
void
bindUI
(
)
Bind the events on the Resize UI. Lifecycle.
protected
void
destructor
(
)
Descructor lifecycle implementation for the Resize class. Purges events attached
to the node (and all child nodes) and removes the Resize handles.
void
eachHandle
(
fn
)
Loop through each handle which is being used and executes a callback.
Example:
instance.eachHandle(
function(handleName, index) { ... }
);
- Parameters:
-
fn
<function>
Callback function to be executed for each handle.
protected
void
initializer
(
)
Construction logic executed during Resize instantiation. Lifecycle.
protected
void
renderer
(
)
Creates DOM (or manipulates DOM for progressive enhancement)
This method is invoked by initializer(). It's chained automatically for
subclasses if required.
protected
void
renderUI
(
)
Create the DOM structure for the Resize. Lifecycle.
protected
void
syncUI
(
)
Sync the Resize UI.
Methods inherited from Base:
Events
activeHandleChange
(
event
)
Fires when the value for the configuration attribute 'activeHandle' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
activeHandleElChange
(
event
)
Fires when the value for the configuration attribute 'activeHandleEl' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
autoHideChange
(
event
)
Fires when the value for the configuration attribute 'autoHide' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
changeHeightHandlesChange
(
event
)
Fires when the value for the configuration attribute 'changeHeightHandles' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
changeLeftHandlesChange
(
event
)
Fires when the value for the configuration attribute 'changeLeftHandles' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
changeTopHandlesChange
(
event
)
Fires when the value for the configuration attribute 'changeTopHandles' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
changeWidthHandlesChange
(
event
)
Fires when the value for the configuration attribute 'changeWidthHandles' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
constrainBorderInfoChange
(
event
)
Fires when the value for the configuration attribute 'constrainBorderInfo' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
constrainChange
(
event
)
Fires when the value for the configuration attribute 'constrain' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
handlesChange
(
event
)
Fires when the value for the configuration attribute 'handles' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
maxHeightChange
(
event
)
Fires when the value for the configuration attribute 'maxHeight' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
maxWidthChange
(
event
)
Fires when the value for the configuration attribute 'maxWidth' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
minHeightChange
(
event
)
Fires when the value for the configuration attribute 'minHeight' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
minWidthChange
(
event
)
Fires when the value for the configuration attribute 'minWidth' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
nodeChange
(
event
)
Fires when the value for the configuration attribute 'node' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
preserveRatioChange
(
event
)
Fires when the value for the configuration attribute 'preserveRatio' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
proxyChange
(
event
)
Fires when the value for the configuration attribute 'proxy' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
proxyElChange
(
event
)
Fires when the value for the configuration attribute 'proxyEl' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
resize:end
(
event
)
Handles the resize end event. Fired when a handle stop to be
dragged.
- Parameters:
-
event<Event.Facade>
The resize end event.
Bubbles:
This event bubbles to
Resize.
Preventable:
This event is preventable by method e.preventDefault(). The default function executed by this event is _defResizeEndFn.
resize:mouseUp
(
event
)
Handles the resize mouseUp event. Fired when a mouseUp event happens on a
handle.
- Parameters:
-
event<Event.Facade>
The resize mouseUp event.
Bubbles:
This event bubbles to
Resize.
Preventable:
This event is preventable by method e.preventDefault(). The default function executed by this event is _defMouseUpFn.
resize:resize
(
event
)
Handles the resize event. Fired on each pixel when the handle is
being dragged.
- Parameters:
-
event<Event.Facade>
The resize event.
Bubbles:
This event bubbles to
Resize.
Preventable:
This event is preventable by method e.preventDefault(). The default function executed by this event is _defResizeFn.
resize:start
(
event
)
Handles the resize start event. Fired when a handle starts to be
dragged.
- Parameters:
-
event<Event.Facade>
The resize start event.
Bubbles:
This event bubbles to
Resize.
Preventable:
This event is preventable by method e.preventDefault(). The default function executed by this event is _defResizeStartFn.
resizingChange
(
event
)
Fires when the value for the configuration attribute 'resizing' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
tickXChange
(
event
)
Fires when the value for the configuration attribute 'tickX' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
tickYChange
(
event
)
Fires when the value for the configuration attribute 'tickY' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
wrapChange
(
event
)
Fires when the value for the configuration attribute 'wrap' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
wrapperChange
(
event
)
Fires when the value for the configuration attribute 'wrapper' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
wrapTypesChange
(
event
)
Fires when the value for the configuration attribute 'wrapTypes' is changed. You can listen for the event using the
on method if you wish to be notified before the attribute's value has changed, or using the
after method if you wish to be notified after the attribute's value has changed.
- Parameters:
-
event<Event.Facade>
An Event Facade object with the following attribute specific properties added: - prevVal
- The value of the attribute, prior to it being set
- newVal
- The value the attribute is to be set to
- attrName
- The name of the attribute being set
- subAttrName
- If setting a property within the attribute's value, the name of the sub-attribute property being set
Events inherited from Base: