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_();