move.js

Javascript code for developing the virtual keyboard

/**
 *  $Id$
 *  $HeadURL$
 *
 *  MoveEvent is the class, used to control element movement
 *
 *  @modified $Date$
 *  @version $Rev$
 *  @license LGPL 2.1 or later
 *  @author Ilya Lebedev <[e-mail]>
 *  @depends helpers.js
 *  @depends eventmanager.js
 *
 *  @class
 *  @constructor EventManager.MoveEvent
 */
EM.MoveEvent = new function () {
    var self = this
    /**
     *  Custom events
     *
     *  @type EM.EventTarget
     *  @scope private
     */
       ,_movestart = null
       ,_moveend = null
       ,_move = null
    /**
     *  Delta movement, in px, used to initialize move* events
     *
     *  @type Number
     *  @scope private
     */
       ,_dp = 3
    /**
     *  Start coordinates
     *
     *  @type Object
     *  @scope private
     */
       ,_ic = {'x':0,'y':0}
    /**
     *  Tri-state flag, shows that move is allowed
     *
     *  @type Number
     *  @scope private
     */
       ,moveState = 0
    /**
     *  Movable target
     *
     *  @type HTMLElement
     *  @scope private
     */
       ,moveTarget = null
    /**
     *  Start offset, used to calculate new position, against start mouse 
     *  pointer coords
     *
     *  @type Object
     *  @scope private
     */
       ,moveTargetOffset = {'x':0,'y':0}
    /**************************************************************************
    *  PROTECTED METHODS
    **************************************************************************/
    /**
     *  Method sets the target for default move behavior
     *
     *  @param {HTMLElement}
     *  @return {Boolean} true, if target is set 
     *  @scope protected
     */
    var setMoveTarget = function (el) {
        /*
        *  simple check for required element type
        */
        if (el && el.nodeType && el.tagName) {
            moveTarget = el;
            moveTargetOffset = DOM.getOffset(el);
            return true;
        }
        return false;
    }
    /**************************************************************************
    *  PRIVATE METHODS
    **************************************************************************/
    /**
     *  Default mousemove handler, used to control mouse movement and start
     *  appropriate custom events
     *
     *  @param {Event} e mousemove event
     *  @scope protected
     */
    var __mousemove = function (e) {
    
        var cc = DOM.getCursorPosition(e);
        switch (moveState) {
            case 1:
                if (Math.abs(cc.x-_ic.x)>_dp || Math.abs(cc.y-_ic.y)>_dp) {
                    moveState = 2;
                    _movestart.trigger(e.target,{'setMoveTarget' : setMoveTarget})
                }
                break;
            case 2:
                if (moveTarget) {
                    _move.trigger(moveTarget,{
                        'pageX' : cc.x
                       ,'pageY' : cc.y
                       /*
                       *  this is the proposed offsets for the new element location
                       *  they could be overridden by the event handler
                       */
                       ,'newOffsetX' : cc.x-_ic.x+moveTargetOffset.x
                       ,'newOffsetY' : cc.y-_ic.y+moveTargetOffset.y
                    });
                    if (window.getSelection) window.getSelection().removeAllRanges();
                } else {
                    /*
                    *  detach event handler, as long, as no moveTarget registered...
                    */
                    EM.removeEventListener(document.body.parentNode, 'mousemove', __mousemove);
                }
                break;
        }
    }
    /**
     *  Just catches the mousedown event to record cursor coordinates
     *
     *  @param {Event} e mousedown event
     *  @scope protected
     */
    var __mousedown = function (e) {
        /*
        *  attach event handler to detect possible movements
        */
        EM.addEventListener(document.body.parentNode, 'mousemove', __mousemove);
        if (e.EM_MB_LEFT == e.getButton()) {
            moveState = 1;
            _ic = DOM.getCursorPosition(e);
        }
    }
    /**
     *  Releases nodemove event, if any and do some cleanup
     *
     *  @param {Event} e mouseup event
     *  @scope protected
     */
    var __mouseup = function (e) {
        /*
        *  detach event handler, as long, as it isn't needed anymore
        */
        EM.removeEventListener(document.body.parentNode, 'mousemove', __mousemove);
        moveState = 0;
        moveTarget = null;
        moveTargetOffset.x=0;
        moveTargetOffset.y=0;
        EM.removeEventListener(document.body, 'selectstart', EM.preventDefaultAction);
    }
    /**
     *  Default movement start action, could be cancelled, if needed
     *
     *  @param {NodeMoveEvent}
     *  @scope protected
     */
    var __defaultMoveStartAction = function (e) {
        EM.addEventListener(document.body, 'selectstart', EM.preventDefaultAction);
    }
    /**
     *  Default movement action, could be cancelled, if needed
     *
     *  @param {NodeMoveEvent}
     *  @scope protected
     */
    var __defaultMoveAction = function (e) {
        moveTarget.style.left = e.newOffsetX+'px';
        moveTarget.style.top = e.newOffsetY+'px';
    }

    /**
     *  Constructor
     *
     *  @scope private
     */
    var __construct = function() {
        EM.addEventListener(document.body, 'mousedown', __mousedown);
        EM.addEventListener(document.body.parentNode, 'mouseup', __mouseup);
        _move = EM.registerEvent('nodemove', self, true, __defaultMoveAction);
        _movestart = EM.registerEvent('nodemovestart', self, true, __defaultMoveStartAction);
    }
    EM.addEventListener(window,'domload',__construct);
}