The X Toolkit API

X.interactor

/**
* Create an interactor for a given element in the DOM tree.
*
* @constructor
* @param {Element} element The DOM element to be observed.
* @extends X.base
*/
var i = new X.interactor();
/**
* The className of this class.
*
* @type {string}
* @protected
*/
i._classname = $_CLASSNAME;
/**
* The configuration of this interactor.
*
* @enum {boolean}
*/
i._config = $_CONFIG;
/**
* The 'dirty' flag of this object.
*
* @type {boolean}
* @protected
*/
i._dirty = $_DIRTY;
/**
* The observed DOM element of this interactor.
*
* @type {!Element}
* @protected
*/
i._element = $_ELEMENT;
/**
* The hover timeout index.
*
* @type {?number}
* @protected
*/
i._hoverTrigger = $_HOVERTRIGGER;
/**
* The uniqueId of this instance. Each class instance in XTK has a uniqueId.
*
* @type {number}
* @protected
*/
i._id = $_ID;
/**
* The previous mouse position.
*
* @type {!X.vector}
* @protected
*/
i._lastMousePosition = $_LASTMOUSEPOSITION;
/**
* The previous touch position of the first finger.
*
* @type {!X.vector}
* @protected
*/
i._lastTouchPosition = $_LASTTOUCHPOSITION;
/**
* Indicates if the left mouse button is pressed.
*
* @type {boolean}
* @protected
*/
i._leftButtonDown = $_LEFTBUTTONDOWN;
/**
* Indicates if the middle mouse button is pressed.
*
* @type {boolean}
* @protected
*/
i._middleButtonDown = $_MIDDLEBUTTONDOWN;
/**
* The listener id for mouse down observation.
*
* @type {?number|goog.events.ListenableKey}
* @protected
*/
i._mouseDownListener = $_MOUSEDOWNLISTENER;
/**
* Indicates if the mouse is inside the element.
*
* @type {boolean}
* @protected
*/
i._mouseInside = $_MOUSEINSIDE;
/**
* The listener id for mouse move observation.
*
* @type {?number|goog.events.ListenableKey}
* @protected
*/
i._mouseMoveListener = $_MOUSEMOVELISTENER;
/**
* The listener id for mouse out observation.
*
* @type {?number|goog.events.ListenableKey}
* @protected
*/
i._mouseOutListener = $_MOUSEOUTLISTENER;
/**
* The current mouse position.
*
* @type {!Array}
* @protected
*/
i._mousePosition = $_MOUSEPOSITION;
/**
* The listener id for mouse up observation.
*
* @type {?number|goog.events.ListenableKey}
* @protected
*/
i._mouseUpListener = $_MOUSEUPLISTENER;
/**
* The browser independent mouse wheel handler.
*
* @type {?goog.events.MouseWheelHandler}
* @protected
*/
i._mouseWheelHandler = $_MOUSEWHEELHANDLER;
/**
* The listener id for mouse wheel observation.
*
* @type {?number|goog.events.ListenableKey}
* @protected
*/
i._mouseWheelListener = $_MOUSEWHEELLISTENER;
/**
* Indicates if the right mouse button is pressed.
*
* @type {boolean}
* @protected
*/
i._rightButtonDown = $_RIGHTBUTTONDOWN;
/**
* The touch hover timeout index.
*
* @type {?number}
* @protected
*/
i._touchHoverTrigger = $_TOUCHHOVERTRIGGER;
/**
* The last distance between the first and second finger.
*
* @type {!number}
* @protected
*/
i.lastFingerDistance = $LASTFINGERDISTANCE;
/**
* Get the className of this object.
*
* @return {string} The className of this object.
* @public
*/
var _classname = i.classname;
/**
* Access the configuration of this interactor. Possible settings and there
* default values are:
*
* 
*  config.MOUSEWHEEL_ENABLED: true
*  config.MOUSECLICKS_ENABLED: true
*  config.KEYBOARD_ENABLED: true
*  config.HOVERING_ENABLED: true
*  config.CONTEXTMENU_ENABLED: false
*  config.TOUCH_ENABLED: true
*  config.TOUCH_BOUNCING_ENABLED: false
* 
*
* @return {Object} The configuration.
*/
var _config = i.config;
/**
* Get the id of this instance.
*
* @return {string} The className of this object.
* @public
*/
var _id = i.id;
/**
* Get the state of the left mouse button.
*
* @return {boolean} TRUE if the button is pressed, FALSE otherwise.
*/
var _leftButtonDown = i.leftButtonDown;
/**
* Get the state of the middle mouse button.
*
* @return {boolean} TRUE if the button is pressed, FALSE otherwise.
*/
var _middleButtonDown = i.middleButtonDown;
/**
* Get the current mouse position (offsetX, offsetY) relative to the viewport.
*
* @return {!Array} The mouse position as an array [x,y].
*/
var _mousePosition = i.mousePosition;
/**
* Get the state of the right mouse button.
*
* @return {boolean} TRUE if the button is pressed, FALSE otherwise.
*/
var _rightButtonDown = i.rightButtonDown;
/**
* Stop the hover countdown and fire a X.event.HoverEndEvent.
*
* @protected
*/
i.hoverEnd_();
/**
* Observe mouse wheel interaction on the associated DOM element.
*/
i.init();
/**
* Overload this function to execute code on keyboard events.
*
* @param {Event} event The browser fired keyboard event.
*/
i.onKey($EVENT);
/**
* Callback for keyboard events on the associated DOM element. This fires proper
* X.event events.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onKey_($EVENT);
/**
* Overload this function to execute code on mouse down (button press).
*
* @param {boolean} left TRUE if the left button triggered this event.
* @param {boolean} middle TRUE if the middle button triggered this event.
* @param {boolean} right TRUE if the right button triggered this event.
*/
i.onMouseDown($LEFT, $MIDDLE, $RIGHT);
/**
* Callback for mouse down events on the associated DOM element.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onMouseDown_($EVENT);
/**
* Overload this function to execute code on mouse movement.
*
* @param {Event} event The browser fired mousemove event.
*/
i.onMouseMove($EVENT);
/**
* Callback for mouse movement events inside the associated DOM element. This
* distinguishes by pressed mouse buttons, key accelerators etc. and fires
* proper X.event events.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onMouseMovementInside_($EVENT);
/**
* Callback for mouse movement events outside the associated DOM element. This
* resets all internal interactor flags.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onMouseMovementOutside_($EVENT);
/**
* Overload this function to execute code on mouse up (button release).
*
* @param {boolean} left TRUE if the left button triggered this event.
* @param {boolean} middle TRUE if the middle button triggered this event.
* @param {boolean} right TRUE if the right button triggered this event.
*/
i.onMouseUp($LEFT, $MIDDLE, $RIGHT);
/**
* Callback for mouse up events on the associated DOM element.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onMouseUp_($EVENT);
/**
* Overload this function to execute code on mouse wheel events.
*
* @param {Event} event The browser fired mousewheel event.
*/
i.onMouseWheel($EVENT);
/**
* Internal callback for mouse wheel events on the associated DOM element.
*
* @param {Event} event The browser fired event.
* @protected
*/
i.onMouseWheel_($EVENT);
/**
* Overload this function to execute code on touch end.
*/
i.onTouchEnd();
/**
* The callback for the touch end event.
*
* @param {Event} event The browser fired event.
*/
i.onTouchEnd_($EVENT);
/**
* Overload this function to execute code on touch hover. This gets called if a
* finger touches the screen for 500ms at the same position.
*
* @param {!number} x The x coordinate of the touch hover event.
* @param {!number} y The y coordinate of the touch hover event.
*/
i.onTouchHover($X, $Y);
/**
* The callback for the touch hover event which gets triggered when a finger
* sits at the same position for 500 ms.
*
* @param {!goog.events.Event} event The browser fired event.
*/
i.onTouchHover_($EVENT);
/**
* Overload this function to execute code on touch move.
*
* @param {Event} event The browser fired event.
*/
i.onTouchMove($EVENT);
/**
* The callback for the touch move event. This performs several actions like
* rotating, zooming, panning etc.
*
* @param {goog.events.Event} event The browser fired event.
*/
i.onTouchMove_($EVENT);
/**
* Overload this function to execute code on touch start of the first finger.
*
* @param {!number} x The x coordinate of the touch start event.
* @param {!number} y The y coordinate of the touch start event.
*/
i.onTouchStart($X, $Y);
/**
* Callback for the touch start event.
*
* @param {goog.events.Event} event The browser fired event.
* @protected
*/
i.onTouchStart_($EVENT);
/**
* Reset the current touch hover callback, f.e. if the finger moves or gets
* released.
*/
i.resetTouchHover_();


CONSTRUCTORS
X.interactor

PROPERTIES
_classname
_config
_dirty
_element
_hoverTrigger
_id
_lastMousePosition
_lastTouchPosition
_leftButtonDown
_middleButtonDown
_mouseDownListener
_mouseInside
_mouseMoveListener
_mouseOutListener
_mousePosition
_mouseUpListener
_mouseWheelHandler
_mouseWheelListener
_rightButtonDown
_touchHoverTrigger
lastFingerDistance

GETTERS/SETTERS
classname
config
id
leftButtonDown
middleButtonDown
mousePosition
rightButtonDown

FUNCTIONS
hoverEnd_
init
onKey
onKey_
onMouseDown
onMouseDown_
onMouseMove
onMouseMovementInside_
onMouseMovementOutside_
onMouseUp
onMouseUp_
onMouseWheel
onMouseWheel_
onTouchEnd
onTouchEnd_
onTouchHover
onTouchHover_
onTouchMove
onTouchMove_
onTouchStart
onTouchStart_
resetTouchHover_

STATIC



SOURCECODE