Yahoo! UI Library

resize  2.8.0r4

Yahoo! UI Library > resize > YAHOO.util.Resize
Search:
 
Filters

Class YAHOO.util.Resize - extends YAHOO.util.Element

Makes an element resizable

Constructor

YAHOO.util.Resize ( el , attrs )
Parameters:
el <String/HTMLElement> The element to make resizable.
attrs <Object> Object liternal containing configuration parameters.

Properties

_active - private Boolean

Flag to show if the resize is active. Used for events.

_cache - private Object

An lookup table containing key information for the element being resized. e.g. height, width, x position, y position, etc..

_currentDD - private Object

A link to the currently active DD object

_currentHandle - private String

The string identifier of the currently active handle. e.g. 'r', 'br', 'tl'

_dds - private Object

An Object containing references to all of the YAHOO.util.DragDrop instances used for the resize handles

_handles - private Object

An object containing references to all of the resize handles.

_ieSelectBack - private object

We will hold a copy of the current "onselectstart" method on this property, and reset it after we are done using it.

_instances - private static Object

Internal hash table for all resize instances

_locked - private Boolean

A flag to show if the resize is locked

_positioned - private Boolean

A flag to show if the element is absolutely positioned

_proxy - private HTMLElement

The HTML reference of the element proxy

_resizeEvent - private Event

The mouse event used to resize with

_wrap - private HTMLElement

The HTML reference of the element wrapper

browser - private Object

A copy of the YAHOO.env.ua property

CSS_DRAG - private String

Class name added when dragging is enabled

CSS_GHOST - private String

Class name given to the wrap element when the ghost property is active

CSS_HANDLE - private String

Class name given to all handles, used as a base for single handle names as well.. Handle "t" will get this.CSS_HANDLE + '-t' as well as this.CSS_HANDLE

CSS_HIDDEN - private String

Class name given to the wrap element to make all handles hidden

CSS_HOVER - private String

Class name used for hover only handles

CSS_KNOB - private String

Class name used to make the knob style handles

CSS_PROXY - private String

Class name given to the proxy element

CSS_RESIZE - private String

Base CSS class name

CSS_RESIZING - private String

Class name given to the wrap element when a resize action is taking place.

CSS_STATUS - private String

Class name given to the status element

CSS_WRAP - private String

Class name given to the wrap element

dd - private Object

The YAHOO.util.DragDrop instance used if draggable is true

Properties inherited from YAHOO.util.Element:

DOM_EVENTS

Properties inherited from YAHOO.util.AttributeProvider:

_configs

Methods

_checkHeight

private Number _checkHeight ( h )
Checks the value passed against the maxHeight and minHeight.
Parameters:
h <Number> The height to check.
Returns: Number
The new value

_checkWidth

private Number _checkWidth ( w )
Checks the value passed against the maxWidth and minWidth.
Parameters:
w <Number> The width to check.
Returns: Number
the new value

_createHandles

private void _createHandles ( )
Creates the handles as specified in the config
Returns: void

_createProxy

private void _createProxy ( )
Creates the proxy element if the proxy config is true
Returns: void

_createWrap

private void _createWrap ( )
Creates the wrap element if the wrap config is true. It will auto wrap the following element types: img, textarea, input, iframe, select
Returns: void

_handle_for_b

private void _handle_for_b ( args )
Handles the sizes for the Bottom handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_bl

private void _handle_for_bl ( args )
Handles the sizes for the Bottom Left handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_br

private void _handle_for_br ( args )
Handles the sizes for the Bottom Right handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_l

private void _handle_for_l ( args )
Handles the sizes for the Left handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_r

private void _handle_for_r ( args )
Handles the sizes for the Right handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_t

private void _handle_for_t ( args )
Handles the sizes for the Top handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_tl

private void _handle_for_tl ( args )
Handles the sizes for the Top Left handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handle_for_tr

private void _handle_for_tr ( args )
Handles the sizes for the Top Right handle.
Parameters:
args <Object> The arguments from the CustomEvent.
Returns: void

_handleMouseDown

private void _handleMouseDown ( ev )
This method preps the autoRatio on MouseDown.
Parameters:
ev <Event> A mouse event.
Returns: void

_handleMouseOut

private void _handleMouseOut ( ev )
Removes CSS class names to the handles
Parameters:
ev <Event> A mouse event.
Returns: void

_handleMouseOver

private void _handleMouseOver ( ev )
Adds CSS class names to the handles
Parameters:
ev <Event> A mouse event.
Returns: void

_handleMouseUp

private void _handleMouseUp ( ev )
Cleans up listeners, hides proxy element and removes class names.
Parameters:
ev <Event> A mouse event.
Returns: void

_handleStartDrag

private void _handleStartDrag ( args , dd )
Resizes the proxy, sets up the YAHOO.util.DragDrop handlers, updates the status div and preps the cache
Parameters:
args <Object> The args passed from the CustomEvent.
dd <Object> The YAHOO.util.DragDrop object we are working with.
Returns: void

_ieSelectFix

private void _ieSelectFix ( )
The function we use as the onselectstart handler when we start a drag in Internet Explorer
Returns: void

_setAutoRatio

private void _setAutoRatio ( ev )
This method checks to see if the "autoRatio" config is set. If it is, we will check to see if the "Shift Key" is pressed. If so, we will set the config ratio to true.
Parameters:
ev <Event> A mouse event.
Returns: void

_setCache

private void _setCache ( )
Sets up the this._cache hash table.
Returns: void

_setHeight

private Number _setHeight ( ev , flip )
Calculated the height based on the mouse event.
Parameters:
ev <Event> The mouse event.
flip <Boolean> Argument to determine the direction of the movement.
Returns: Number
The new value

_setRatio

private Array _setRatio ( h , w , t , l )
Using the Height, Width, Top & Left, it recalcuates them based on the original element size.
Parameters:
h <Number> The height offset.
w <Number> The with offset.
t <Number> The top offset.
l <Number> The left offset.
Returns: Array
The new Height, Width, Top & Left settings

_setupDragDrop

private void _setupDragDrop ( )
Setup the YAHOO.util.DragDrop instance on the element
Returns: void

_setWidth

private Number _setWidth ( ev , flip )
Calculates the width based on the mouse event.
Parameters:
ev <Event> The mouse event.
flip <Boolean> Argument to determine the direction of the movement.
Returns: Number
The new value

_snapTick

private Number _snapTick ( size , pix )
Adjusts the number based on the ticks used.
Parameters:
size <Number> The size to tick against.
pix <Number> The tick pixels.
Returns: Number
the new snapped position

_updateStatus

private void _updateStatus ( h , w , t , l )
Using the Height, Width, Top & Left, it updates the status element with the elements sizes.
Parameters:
h <Number> The new height setting.
w <Number> The new width setting.
t <Number> The new top setting.
l <Number> The new left setting.
Returns: void

destroy

void destroy ( )
Destroys the resize object and all of it's elements & listeners.
Returns: void

getActiveHandleEl

HTMLElement getActiveHandleEl ( )
Get the HTML reference for the currently active resize handle.
Returns: HTMLElement
The handle element that is active

getProxyEl

HTMLElement getProxyEl ( )
Get the HTML reference for the proxy, returns null if no proxy.
Returns: HTMLElement
The proxy element

getResizeById

static Object getResizeById ( )
Get's a resize object by the HTML id of the element associated with the Resize object.
Returns: Object
The Resize Object

getStatusEl

HTMLElement getStatusEl ( )
Get the HTML reference for the status element.
Returns: HTMLElement
The status element

getWrapEl

HTMLElement getWrapEl ( )
Get the HTML reference for the wrap element, returns the current element if not wrapped.
Returns: HTMLElement
The wrap element

init

private void init ( )
The Resize class's initialization method
Returns: void

initAttributes

private void initAttributes ( attr )
Initializes all of the configuration attributes used to create a resizable element.
Parameters:
attr <Object> Object literal specifying a set of configuration attributes used to create the utility.
Returns: void

isActive

Boolean isActive ( )
Returns true or false if a resize operation is currently active on the element.
Returns: Boolean

isLocked

Boolean isLocked ( )
Check the locked status of the resize instance
Returns: Boolean

lock

YAHOO.util.Resize lock ( dd )
Lock the resize so it can't be resized
Parameters:
dd <Boolean> If the draggable config is set, lock it too
Returns: YAHOO.util.Resize
The Resize instance

reset

YAHOO.util.Resize reset ( )
Resets the element to is start state.
Returns: YAHOO.util.Resize
The Resize instance

resize

private YAHOO.util.Resize resize ( ev , h , w , t , l , force , silent )
Resizes the element, wrapper or proxy based on the data from the handlers.
Parameters:
ev <Event> The mouse event.
h <Number> The new height setting.
w <Number> The new width setting.
t <Number> The new top setting.
l <Number> The new left setting.
force <Boolean> Resize the element (used for proxy resize).
silent <Boolean> Don't fire the beforeResize Event.
Returns: YAHOO.util.Resize
The Resize instance

toString

String toString ( )
Returns a string representing the Resize Object.
Returns: String

unlock

YAHOO.util.Resize unlock ( dd )
Unlock the resize so it can be resized
Parameters:
dd <Boolean> If the draggable config is set, unlock it too
Returns: YAHOO.util.Resize
The Resize instance

Events

animateChange

animateChange ( event )
Fires when the value for the configuration attribute 'animate' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

animateDurationChange

animateDurationChange ( event )
Fires when the value for the configuration attribute 'animateDuration' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

animateEasingChange

animateEasingChange ( event )
Fires when the value for the configuration attribute 'animateEasing' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

autoRatioChange

autoRatioChange ( event )
Fires when the value for the configuration attribute 'autoRatio' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAnimateChange

beforeAnimateChange ( event )
Fires before the value for the configuration attribute 'animate' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAnimateDurationChange

beforeAnimateDurationChange ( event )
Fires before the value for the configuration attribute 'animateDuration' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAnimateEasingChange

beforeAnimateEasingChange ( event )
Fires before the value for the configuration attribute 'animateEasing' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAutoRatioChange

beforeAutoRatioChange ( event )
Fires before the value for the configuration attribute 'autoRatio' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeDraggableChange

beforeDraggableChange ( event )
Fires before the value for the configuration attribute 'draggable' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeGhostChange

beforeGhostChange ( event )
Fires before the value for the configuration attribute 'ghost' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeHandlesChange

beforeHandlesChange ( event )
Fires before the value for the configuration attribute 'handles' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeHeightChange

beforeHeightChange ( event )
Fires before the value for the configuration attribute 'height' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeHiddenHandlesChange

beforeHiddenHandlesChange ( event )
Fires before the value for the configuration attribute 'hiddenHandles' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeHoverChange

beforeHoverChange ( event )
Fires before the value for the configuration attribute 'hover' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeKnobHandlesChange

beforeKnobHandlesChange ( event )
Fires before the value for the configuration attribute 'knobHandles' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMaxHeightChange

beforeMaxHeightChange ( event )
Fires before the value for the configuration attribute 'maxHeight' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMaxWidthChange

beforeMaxWidthChange ( event )
Fires before the value for the configuration attribute 'maxWidth' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMaxXChange

beforeMaxXChange ( event )
Fires before the value for the configuration attribute 'maxX' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMaxYChange

beforeMaxYChange ( event )
Fires before the value for the configuration attribute 'maxY' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMinHeightChange

beforeMinHeightChange ( event )
Fires before the value for the configuration attribute 'minHeight' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMinWidthChange

beforeMinWidthChange ( event )
Fires before the value for the configuration attribute 'minWidth' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMinXChange

beforeMinXChange ( event )
Fires before the value for the configuration attribute 'minX' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeMinYChange

beforeMinYChange ( event )
Fires before the value for the configuration attribute 'minY' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeProxyChange

beforeProxyChange ( event )
Fires before the value for the configuration attribute 'proxy' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeRatioChange

beforeRatioChange ( event )
Fires before the value for the configuration attribute 'ratio' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeResize

beforeResize ( )
Fires before every element resize after the size calculations, returning false will stop the resize.

beforeSetSizeChange

beforeSetSizeChange ( event )
Fires before the value for the configuration attribute 'setSize' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeStatusChange

beforeStatusChange ( event )
Fires before the value for the configuration attribute 'status' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeUseShimChange

beforeUseShimChange ( event )
Fires before the value for the configuration attribute 'useShim' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeWidthChange

beforeWidthChange ( event )
Fires before the value for the configuration attribute 'width' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeWrapChange

beforeWrapChange ( event )
Fires before the value for the configuration attribute 'wrap' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeXTicksChange

beforeXTicksChange ( event )
Fires before the value for the configuration attribute 'xTicks' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeYTicksChange

beforeYTicksChange ( event )
Fires before the value for the configuration attribute 'yTicks' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

dragEvent

dragEvent ( )
Fires when the YAHOO.util.DragDrop dragEvent is fired for the config option draggable.

draggableChange

draggableChange ( event )
Fires when the value for the configuration attribute 'draggable' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

endResize

endResize ( )
Fires when the mouseUp event from the Drag Instance fires.

ghostChange

ghostChange ( event )
Fires when the value for the configuration attribute 'ghost' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

handlesChange

handlesChange ( event )
Fires when the value for the configuration attribute 'handles' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

heightChange

heightChange ( event )
Fires when the value for the configuration attribute 'height' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

hiddenHandlesChange

hiddenHandlesChange ( event )
Fires when the value for the configuration attribute 'hiddenHandles' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

hoverChange

hoverChange ( event )
Fires when the value for the configuration attribute 'hover' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

knobHandlesChange

knobHandlesChange ( event )
Fires when the value for the configuration attribute 'knobHandles' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

maxHeightChange

maxHeightChange ( event )
Fires when the value for the configuration attribute 'maxHeight' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

maxWidthChange

maxWidthChange ( event )
Fires when the value for the configuration attribute 'maxWidth' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

maxXChange

maxXChange ( event )
Fires when the value for the configuration attribute 'maxX' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

maxYChange

maxYChange ( event )
Fires when the value for the configuration attribute 'maxY' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

minHeightChange

minHeightChange ( event )
Fires when the value for the configuration attribute 'minHeight' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

minWidthChange

minWidthChange ( event )
Fires when the value for the configuration attribute 'minWidth' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

minXChange

minXChange ( event )
Fires when the value for the configuration attribute 'minX' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

minYChange

minYChange ( event )
Fires when the value for the configuration attribute 'minY' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

proxyChange

proxyChange ( event )
Fires when the value for the configuration attribute 'proxy' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

proxyResize

proxyResize ( )
Fires on every proxy resize (only fires when used with proxy config setting).

ratioChange

ratioChange ( event )
Fires when the value for the configuration attribute 'ratio' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

resize

resize ( )
Fires on every element resize (only fires once when used with proxy config setting).

setSizeChange

setSizeChange ( event )
Fires when the value for the configuration attribute 'setSize' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

startResize

startResize ( )
Fires when a resize action is started.

statusChange

statusChange ( event )
Fires when the value for the configuration attribute 'status' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

useShimChange

useShimChange ( event )
Fires when the value for the configuration attribute 'useShim' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

widthChange

widthChange ( event )
Fires when the value for the configuration attribute 'width' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

wrapChange

wrapChange ( event )
Fires when the value for the configuration attribute 'wrap' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

xTicksChange

xTicksChange ( event )
Fires when the value for the configuration attribute 'xTicks' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

yTicksChange

yTicksChange ( event )
Fires when the value for the configuration attribute 'yTicks' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

Configuration Attributes

animate - Boolean

Should be use animation to resize the element (can only be used if we use proxy).

animateDuration - Number

The Duration to apply to the animation.

animateEasing - Object

The Easing to apply to the animation.

autoRatio - Boolean

Using the shift key during a resize will toggle the ratio config.

draggable - Boolean

A convienence method to make the element draggable

ghost - Boolean

Apply an opacity filter to the element being resized (only works with proxy).

handles - Array

The handles to use (any combination of): 't', 'b', 'r', 'l', 'bl', 'br', 'tl', 'tr'. Defaults to: ['r', 'b', 'br']. Can use a shortcut of All. Note: 8 way resizing should be done on an element that is absolutely positioned.

height - Number

The height of the element

hiddenHandles - Boolean

Don't show the handles, just use the cursor to the user.

hover - Boolean

Only show the handles when they are being moused over.

knobHandles - Boolean

Use the smaller handles, instead if the full size handles.

maxHeight - Number

The maximum height of the element

maxWidth - Number

The maximum width of the element

maxX - Number

The max x coord of the element

maxY - Number

The max y coord of the element

minHeight - Number

The minimum height of the element

minWidth - Number

The minimum width of the element

minX - Number

The minimum x coord of the element

minY - Number

The minimum y coord of the element

proxy - Boolean

Resize a proxy element instead of the real element.

ratio - Boolean

Maintain the element's ratio when resizing.

setSize - Boolean

Set the size of the resized element, if set to false the element will not be auto resized, the resize event will contain the dimensions so the end user can resize it on their own. This setting will only work with proxy set to true and animate set to false.

status - Boolean

Show the status (new size) of the resize.

useShim - Boolean

This setting will be passed to the DragDrop instances on the resize handles and for the draggable property. This property should be used if you want the resize handles to work over iframe and other elements.

width - Number

The width of the element

wrap - Boolean

Should we wrap the element

xTicks - Number or False

The number of x ticks to span the resize to.

yTicks - Number or False

The number of y ticks to span the resize to.

Configuration attributes inherited from YAHOO.util.Element:

element,

Files

Copyright © 2009 Yahoo! Inc. All rights reserved.