Yahoo! UI Library

imagecropper  2.7.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 String

The CSS class for the mask inside the resize element

Properties inherited from YAHOO.util.Element:

DOM_EVENTS

Properties inherited from YAHOO.util.AttributeProvider:

_configs

Methods

_createMask

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

_createResize

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

_createWrap

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

_handleB4DragEvent

private void _handleB4DragEvent ( )
Handles the DragDrop b4DragEvent event
Returns: void

_handleBeforeResizeEvent

private void _handleBeforeResizeEvent ( )
Handles the Resize Utilitys beforeResize event
Returns: void

_handleDragEvent

private void _handleDragEvent ( )
Handles the DragDrop DragEvent event
Returns: void

_handleEndResizeEvent

private void _handleEndResizeEvent ( )
Handles the Resize Utilitys endResize event
Returns: void

_handleKeyPress

private void _handleKeyPress ( )
Handles the keypress event
Returns: void

_handleMouseOut

private void _handleMouseOut ( )
Handles the mouseout event
Returns: void

_handleMouseOver

private void _handleMouseOver ( )
Handles the mouseover event
Returns: void

_handleResizeEvent

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

_handleResizeMaskEl

private void _handleResizeMaskEl ( )
Resizes the inner mask element
Returns: void

_handleStartResizeEvent

private void _handleStartResizeEvent ( )
Handles the Resize Utilitys startResize event
Returns: void

_moveEl

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

_setBackgroundImage

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

_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
Returns: void

_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
Returns: void

destroy

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

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
Returns: void

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.
Returns: void

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.
Returns: String

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:

element,

Files

Copyright © 2009 Yahoo! Inc. All rights reserved.