YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

Yahoo! UI Library

imagecropper  2.9.0

Yahoo! UI Library > imagecropper > YAHOO.widget.ImageCropper
Search:
 
Filters

Class YAHOO.widget.ImageCropper - extends YAHOO.util.Element

Creates a Image Cropper control.

Constructor

YAHOO.widget.ImageCropper ( el , attrs )
Parameters:
el <String/HTMLElement> The image element to make croppable.
attrs <Object> Object liternal containing configuration parameters.

Properties

_active - private Boolean

Flag to determine if the crop region is active

_image - private String

The url of the image we are cropping

_instances - private static Object

Internal hash table for all ImageCropper instances

_mask - private HTMLElement

The HTML Element created to "mask" the image being cropped

_resize - private Object

A reference to the Resize Utility used in this Cropper Instance

_resizeEl - private HTMLElement

The HTML Element used to create the Resize Oject

_resizeMaskEl - private HTMLElement

The HTML Element used to create the Resize mask

_wrap - private HTMLElement

The HTML Element created to wrap the image

CSS_MAIN - private String

The CSS class used to wrap the element

CSS_MASK - private String

The CSS class for the mask element

CSS_RESIZE_MASK - private {HTML}

The CSS class for the mask inside the resize element

Properties inherited from YAHOO.util.Element:

Properties inherited from YAHOO.util.AttributeProvider:

Methods

_createMask

private void _createMask ( )
Creates the mask element used to mask the image

_createResize

private void _createResize ( )
Creates the resize element and the instance of the Resize Utility

_createWrap

private void _createWrap ( )
Creates the wrapper element used to wrap the image

_handleB4DragEvent

private void _handleB4DragEvent ( )
Handles the DragDrop b4DragEvent event

_handleBeforeResizeEvent

private void _handleBeforeResizeEvent ( )
Handles the Resize Utilitys beforeResize event

_handleDragEvent

private void _handleDragEvent ( )
Handles the DragDrop DragEvent event

_handleEndResizeEvent

private void _handleEndResizeEvent ( )
Handles the Resize Utilitys endResize event

_handleKeyPress

private void _handleKeyPress ( )
Handles the keypress event

_handleMouseOut

private void _handleMouseOut ( )
Handles the mouseout event

_handleMouseOver

private void _handleMouseOver ( )
Handles the mouseover event

_handleResizeEvent

private void _handleResizeEvent ( Event )
Handles the Resize Utilitys Resize event
Parameters:
Event <object> ev The Resize Utilitys resize event.

_handleResizeMaskEl

private void _handleResizeMaskEl ( )
Resizes the inner mask element

_handleStartResizeEvent

private void _handleStartResizeEvent ( )
Handles the Resize Utilitys startResize event

_moveEl

private void _moveEl ( )
Moves the resize element based on the arrow keys

_setBackgroundImage

private void _setBackgroundImage ( String )
Sets the background image of the resize element
Parameters:
String <object> url The url of the image

_setBackgroundPosition

private void _setBackgroundPosition ( Number )
Sets the background image position to the top and left position
Parameters:
Number <object> l The left position
Number <object> t The top position

_setConstraints

private Object _setConstraints ( Boolean )
Set the DragDrop constraints to keep the element inside the crop area.
Parameters:
Boolean <object> inside Used when called from inside a resize event, false by default (dragging)
Returns: Object
Object containing Top, Right, Bottom and Left constraints

_syncBackgroundPosition

private void _syncBackgroundPosition ( )
Syncs the packground position of the resize element with the resize elements top and left style position

destroy

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

getCropCoords

Object getCropCoords ( )
Returns the coordinates needed to crop the image
Returns: Object
The top, left, height, width and image url of the image being cropped

getCropperById

static Object getCropperById ( )
Get's an ImageCropper object by the HTML id of the image associated with the ImageCropper object.
Returns: Object
The ImageCropper Object

getEl

HTMLElement getEl ( )
Get the HTML reference for the image element.
Returns: HTMLElement
The image element

getMaskEl

HTMLElement getMaskEl ( )
Get the HTML reference for the mask element.
Returns: HTMLElement
The mask element

getResizeEl

HTMLElement getResizeEl ( )
Get the HTML reference for the resize element.
Returns: HTMLElement
The resize element

getResizeMaskEl

HTMLElement getResizeMaskEl ( )
Get the HTML reference for the resizable object's mask element.
Returns: HTMLElement
The resize objects mask element.

getResizeObject

YAHOO.util.Resize getResizeObject ( )
Get the Resize Utility object.
Returns: YAHOO.util.Resize
The Resize instance

getWrapEl

HTMLElement getWrapEl ( )
Get the HTML reference for the wrap element.
Returns: HTMLElement
The wrap element

init

private void init ( )
The ImageCropper class's initialization method

initAttributes

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

reset

YAHOO.widget.ImageCropper reset ( )
Resets the crop element back to it's original position
Returns: YAHOO.widget.ImageCropper
The ImageCropper instance

toString

String toString ( )
Returns a string representing the ImageCropper Object.

Events

beforeInitHeightChange

beforeInitHeightChange ( event )
Fires before the value for the configuration attribute 'initHeight' 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.

beforeInitialXYChange

beforeInitialXYChange ( event )
Fires before the value for the configuration attribute 'initialXY' 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.

beforeInitWidthChange

beforeInitWidthChange ( event )
Fires before the value for the configuration attribute 'initWidth' 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.

beforeKeyTickChange

beforeKeyTickChange ( event )
Fires before the value for the configuration attribute 'keyTick' 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.

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.

beforeShiftKeyTickChange

beforeShiftKeyTickChange ( event )
Fires before the value for the configuration attribute 'shiftKeyTick' 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.

beforeUseKeysChange

beforeUseKeysChange ( event )
Fires before the value for the configuration attribute 'useKeys' 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 DragDrop dragEvent

initHeightChange

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

initialXYChange

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

initWidthChange

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

keyTickChange

keyTickChange ( event )
Fires when the value for the configuration attribute 'keyTick' 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.

moveEvent

moveEvent ( )
Fires on every element move. Inside these methods: _handleKeyPress, _handleDragEvent, _handleResizeEvent

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.

resizeEvent

resizeEvent ( )
Fires on every element resize.

shiftKeyTickChange

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

startResizeEvent

startResizeEvent ( )
Fires when 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.

useKeysChange

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

Configuration Attributes

initHeight - Number

Set the initlal height of the crop area, defaults to 1/4 of the image height

initialXY - Array

Array of the XY position that we need to set the crop element to when we build it. Defaults to [10, 10]

initWidth - Number

Set the initlal width of the crop area, defaults to 1/4 of the image width

keyTick - Number

The pixel tick for the arrow keys, defaults to 1

minHeight - Number

MinHeight of the crop area, default 50

minWidth - Number

MinWidth of the crop area, default 50.

ratio - Boolean

Set the ratio config option of the Resize Utlility, default false

shiftKeyTick - Number

The pixel tick for shift + the arrow keys, defaults to 10

status - Boolean

Show the Resize Utility status, defaults to true

useKeys - Boolean

Should we use the Arrow keys to position the crop element, defaults to true

Configuration attributes inherited from YAHOO.util.Element:


Copyright © 2011 Yahoo! Inc. All rights reserved.