Alloy UI

aui-resize  1.0.1

 
Filters
Classes

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.

originalInfo - protected Object

Stores the original values for the height, width, top and left, stored on resize start.

Resize.ATTRS - static Object

Static property used to define the default attribute configuration for the Resize.

Resize.NAME - static String

Static property provides a string to identify the class.

Properties inherited from Attribute:

Properties inherited from Base:

Configuration Attributes

autoHide - boolean

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

changeHeightHandles - boolean

Whether the handle being dragged can change the height.
Default Value: false

changeLeftHandles - boolean

Whether the handle being dragged can change the left.
Default Value: false

changeTopHandles - boolean

Whether the handle being dragged can change the top.
Default Value: false

changeWidthHandles - boolean

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

constrainBorderInfo - Object

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

maxHeight - Number

The maximum height of the element
Default Value: Infinity

maxWidth - Number

The maximum width of the element
Default Value: Infinity

minHeight - Number

The minimum height of the element
Default Value: 15

minWidth - Number

The minimum width of the element
Default Value: 15

node - Node

The selector or element to resize. Required.

preserveRatio - boolean

Maintain the element's ratio when resizing.
Default Value: false

proxy - boolean

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

resizing - boolean

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

wrapTypes - Regex

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

_afterResize

protected void _afterResize ( event )
Fires after resize:resize event.
Parameters:
event <EventFacade> resize:resize custom event

_buildHandle

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', ...).

_checkConstrain

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'

_checkHeight

protected void _checkHeight ( )
Update the current values on info to respect the maxHeight and minHeight.

_checkRatio

protected void _checkRatio ( )
Update the current values on info calculating the correct ratio for the other values.

_checkRegion

protected boolean _checkRegion ( )
Check whether the resizable node is inside the constrain region.

_checkWidth

protected void _checkWidth ( )
Update the current values on info to respect the maxWidth and minWidth.

_copyStyles

protected void _copyStyles ( node , wrapper )
Copy relevant styles of the node to the wrapper.
Parameters:
node <Node> Node from.
wrapper <Node> Node to.

_defMouseUpFn

protected void _defMouseUpFn ( event )
Default resize:mouseUp handler
Parameters:
event <EventFacade> The Event object

_defResizeEndFn

protected void _defResizeEndFn ( event )
Default resize:end handler
Parameters:
event <EventFacade> The Event object

_defResizeFn

protected void _defResizeFn ( event )
Default resize:resize handler
Parameters:
event <EventFacade> The Event object

_defResizeStartFn

protected void _defResizeStartFn ( event )
Default resize:start handler
Parameters:
event <EventFacade> The Event object

_getConstrainRegion

protected Object Region _getConstrainRegion ( )
Get the constrain region based on the constrain attribute.

_handleMouseUpEvent

protected void _handleMouseUpEvent ( event )
Fires the resize:mouseUp event.
Parameters:
event <EventFacade> resize:mouseUp event facade

_handleResizeEndEvent

protected void _handleResizeEndEvent ( event )
Fires the resize:end event.
Parameters:
event <EventFacade> resize:end event facade

_handleResizeEvent

protected void _handleResizeEvent ( event )
Fires the resize:resize event.
Parameters:
event <EventFacade> resize:resize event facade

_handleResizeStartEvent

protected void _handleResizeStartEvent ( event )
Fires the resize:start event.
Parameters:
event <EventFacade> resize:start event facade

_onHandleMouseOut

protected void _onHandleMouseOut ( event )
Mouseout event handler for the handles.
Parameters:
event <EventFacade>

_onHandleMouseOver

protected void _onHandleMouseOver ( event )
Mouseover event handler for the handles.
Parameters:
event <EventFacade>

_onWrapperMouseEnter

protected void _onWrapperMouseEnter ( event )
Mouseenter event handler for the wrapper.
Parameters:
event <EventFacade>

_onWrapperMouseLeave

protected void _onWrapperMouseLeave ( event )
Mouseleave event handler for the wrapper.
Parameters:
event <EventFacade>

_renderHandles

protected void _renderHandles ( )
Responsible for loop each handle element and append to the wrapper.

_renderProxy

protected void _renderProxy ( )
Render the proxyEl element and make it sibling of the node.

_resize

protected void _resize ( )
Basic resize calculations.

_setActiveHandlesUI

protected void _setActiveHandlesUI ( val )
Set the active state of the handles.
Parameters:
val <boolean> True to activate the handles, false to deactivate.

_setHideHandlesUI

protected void _setHideHandlesUI ( val )
Set the visibility of the handles.
Parameters:
val <boolean> True to hide the handles, false to show.

_setOffset

protected void _setOffset ( node , offsetWidth , offsetHeight )
Set offsetWidth and offsetHeight of the passed node.
Parameters:
node <Node> Node
offsetWidth <number>
offsetHeight <number>

_syncProxyUI

protected void _syncProxyUI ( )
Sync the proxy UI with internal values from info.

_syncUI

protected void _syncUI ( )
Sync the Resize UI with internal values from info.

bindUI

protected void bindUI ( )
Bind the events on the Resize UI. Lifecycle.

destructor

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.

eachHandle

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.

initializer

protected void initializer ( )
Construction logic executed during Resize instantiation. Lifecycle.

renderer

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.

renderUI

protected void renderUI ( )
Create the DOM structure for the Resize. Lifecycle.

syncUI

protected void syncUI ( )
Sync the Resize UI.

Events

activeHandleChange

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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: