Print Friendly

Class YAHOO.ext.Resizable

Package:YAHOO.ext
Class:Resizable
Extends:Observable
Defined In:Resizable.js

Applies drag handles to an element to make it resizable. The drag handles are inserted into the element and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap the textarea in a div and set "resizeChild" to true (or the id of the textarea), or set wrap:true in your config and the element will be wrapped for you automatically.


Here's a Resizable with every possible config option and it's default value:
var resizer = new YAHOO.ext.Resizable('element-id', {
    resizeChild : false,
    adjustments : [0, 0],
    minWidth : 5,
    minHeight : 5,
    maxWidth : 10000,
    maxHeight : 10000,
    enabled : true,
    wrap: false, // true to wrap the element
    width: null, // initial size
    height: null, // initial size
    animate : false,
    duration : .35,
    dynamic : false,
    handles : false,
    multiDirectional : false,
    disableTrackOver : false,
    easing : YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null,
    widthIncrement : 0,
    heightIncrement : 0,
    pinned : false,
    width : null,
    height : null,
    preserveRatio : false,
    transparent: false,
    minX: 0,
    minY: 0,
    draggable: false
});
resizer.on('resize', myHandler);

To hide a particular handle, set it's display to none in CSS, or through script:
resizer.east.setDisplayed(false);


Public Properties

Property Defined By
  adjustments : Array/String Resizable
String "auto" or an array [width, height] with values to be added to the resize operation's new size.
  animate : Boolean Resizable
True to animate the resize (not compatible with dynamic sizing)
  disableTrackOver : Boolean Resizable
true to disable mouse tracking. This is only applied at config time.
  draggable : Boolean Resizable
convenience to initialize drag drop.
  duration : Float Resizable
Animation duration
  dynamic : Boolean Resizable
True to resize the element while dragging instead of using a proxy
  easing : YAHOO.util.Easing Resizable
Animation easing
  enabled : Boolean Resizable
false to disable resizing
  handles : String Resizable
String consisting of the resize handles to display. Valid handles are n (north), s (south) e (east), w (west), ne (n...
  height : Number Resizable
The initial height for the element
  heightIncrement : Number Resizable
The increment to snap the height resize in pixels (dynamic must be true)
  maxHeight : Number Resizable
The maximum height for the element
  maxWidth : Number Resizable
The maximum width for the element
  minHeight : Number Resizable
The minimum height for the element
  minWidth : Number Resizable
The minimum width for the element
  minX : Number Resizable
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
  minY : Number Resizable
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
  pinned : Boolean Resizable
true to pin the resize handles. This is only applied at config time.
  preserveRatio : Boolean Resizable
true to preserve the initial size ratio.
  resizeChild : YAHOO.ext.Element Resizable
True to resizeSize the first child or id/element to resize
  transparent : Boolean Resizable
true for transparent handles. This is only applied at config time.
  width : Number Resizable
The initial width for the element
  widthIncrement : Number Resizable
The increment to snap the width resize in pixels (dynamic must be true)

Public Methods

Method Defined By
  Resizable(String/HTMLElement/YAHOO.ext.Element el, Object config) Resizable
Create a new resizable component
  addListener(String eventName, Function handler, [Object scope], [boolean override]) : void Observable
Appends an event handler to this component
  bufferedListener(String eventName, Function handler, [Object scope], [Number millis]) : Function Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
  delayedListener(String eventName, Function handler, [Object scope], [Number delay]) : Function Observable
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for e...
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getEl() : YAHOO.ext.Element Resizable
Returns the element this component is bound to.
  getResizeChild() : YAHOO.ext.Element Resizable
Returns the resizeChild element (or null).
  on(String eventName, Function handler, [Object scope], [boolean override]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  resizeTo(Number width, Number height) : void Resizable
Perform a manual resize

Public Events

Event Defined By
  beforeresize : (YAHOO.ext.Resizable this, YAHOO.ext.EventObject e) Resizable
Fired before resize is allowed. Set enabled to false to cancel resize.
  resize : (YAHOO.ext.Resizable this, Number width, Number height, YAHOO.ext.EventObject e) Resizable
Fired after a resize.

Property Details

adjustments

public Array/String adjustments
String "auto" or an array [width, height] with values to be added to the resize operation's new size.
This property is defined by Resizable.

animate

public Boolean animate
True to animate the resize (not compatible with dynamic sizing)
This property is defined by Resizable.

disableTrackOver

public Boolean disableTrackOver
true to disable mouse tracking. This is only applied at config time.
This property is defined by Resizable.

draggable

public Boolean draggable
convenience to initialize drag drop.
This property is defined by Resizable.

duration

public Float duration
Animation duration
This property is defined by Resizable.

dynamic

public Boolean dynamic
True to resize the element while dragging instead of using a proxy
This property is defined by Resizable.

easing

public YAHOO.util.Easing easing
Animation easing
This property is defined by Resizable.

enabled

public Boolean enabled
false to disable resizing
This property is defined by Resizable.

handles

public String handles
String consisting of the resize handles to display. Valid handles are n (north), s (south) e (east), w (west), ne (northeast), nw (northwest), se (southeast), sw (southwest) and all (which applies them all). If this is blank it defaults to "e,s,se". Handles can be delimited using a space, comma or semi-colon. This is only applied at config time.
This property is defined by Resizable.

height

public Number height
The initial height for the element
This property is defined by Resizable.

heightIncrement

public Number heightIncrement
The increment to snap the height resize in pixels (dynamic must be true)
This property is defined by Resizable.

maxHeight

public Number maxHeight
The maximum height for the element
This property is defined by Resizable.

maxWidth

public Number maxWidth
The maximum width for the element
This property is defined by Resizable.

minHeight

public Number minHeight
The minimum height for the element
This property is defined by Resizable.

minWidth

public Number minWidth
The minimum width for the element
This property is defined by Resizable.

minX

public Number minX
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
This property is defined by Resizable.

minY

public Number minY
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
This property is defined by Resizable.

pinned

public Boolean pinned
true to pin the resize handles. This is only applied at config time.
This property is defined by Resizable.

preserveRatio

public Boolean preserveRatio
true to preserve the initial size ratio.
This property is defined by Resizable.

resizeChild

public YAHOO.ext.Element resizeChild
True to resizeSize the first child or id/element to resize
This property is defined by Resizable.

transparent

public Boolean transparent
true for transparent handles. This is only applied at config time.
This property is defined by Resizable.

width

public Number width
The initial width for the element
This property is defined by Resizable.

widthIncrement

public Number widthIncrement
The increment to snap the width resize in pixels (dynamic must be true)
This property is defined by Resizable.

Constructor Details

Resizable

public function Resizable(String/HTMLElement/YAHOO.ext.Element el, Object config)
Create a new resizable component
Parameters:
  • el : String/HTMLElement/YAHOO.ext.Element
    The id or element to resize
  • config : Object
    configuration options

Method Details

addListener

public function addListener(String eventName, Function handler, [Object scope], [boolean override])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this object) for the handler
  • override : boolean
    (optional) If true, scope becomes the scope
Returns:
  • void
This method is defined by Observable.

bufferedListener

public function bufferedListener(String eventName, Function handler, [Object scope], [Number millis])
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this object) for the handler
  • millis : Number
    (optional) The number of milliseconds to buffer (defaults to 250)
Returns:
  • Function
    The wrapped function that was created (can be used to remove the listener)
This method is defined by Observable.

delayedListener

public function delayedListener(String eventName, Function handler, [Object scope], [Number delay])
Appends an event handler to this component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this object) for the handler
  • delay : Number
    (optional) The number of milliseconds to delay (defaults to 1 millisecond)
Returns:
  • Function
    The wrapped function that was created (can be used to remove the listener)
This method is defined by Observable.

fireEvent

public function fireEvent(String eventName, Object... args)
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

getEl

public function getEl()
Returns the element this component is bound to.
Parameters:
  • None.
Returns:
  • YAHOO.ext.Element
This method is defined by Resizable.

getResizeChild

public function getResizeChild()
Returns the resizeChild element (or null).
Parameters:
  • None.
Returns:
  • YAHOO.ext.Element
This method is defined by Resizable.

on

public function on(String eventName, Function handler, [Object scope], [boolean override])
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • scope : Object
    (optional) The scope (this object) for the handler
  • override : boolean
    (optional) If true, scope becomes the scope
Returns:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

resizeTo

public function resizeTo(Number width, Number height)
Perform a manual resize
Parameters:
  • width : Number
  • height : Number
Returns:
  • void
This method is defined by Resizable.

Event Details

beforeresize

public event beforeresize
Fired before resize is allowed. Set enabled to false to cancel resize.
Subscribers will be called with the following parameters:
  • this : YAHOO.ext.Resizable
  • e : YAHOO.ext.EventObject
    The mousedown event
This event is defined by Resizable.

resize

public event resize
Fired after a resize.
Subscribers will be called with the following parameters:
  • this : YAHOO.ext.Resizable
  • width : Number
    The new width
  • height : Number
    The new height
  • e : YAHOO.ext.EventObject
    The mouseup event
This event is defined by Resizable.

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.