how to modify jcrop to support blackberry trackpads?

Question

I have reached out to the developer on this one and he indicated I'd be on my own modifying the code to support this method as the code as currently written was not very hack friendly...I have attempted to modify without 100% success.

Currently JCrop is using jquery to track .mousedown to start the selection and .mouseup to accept/stop the selection. What happens on the blackberry device(with trackpad) when you click the trackpad using jcrop it starts to draw the selection as you move the cursor(you cannot click(hold) and drag on the trackpad its more of a click event). The issue is when you click again it removes the selection and starts to redraw it from the current cursor position. It seems to me that JCrop is using the mousedown to track the click and drag selection process and then mouseup to release the selection and keep the crop box.

I thought about assigning a variable like clickCount track the clicks and a function to fireoff the events. So everytime the user clicks it would run a function to track the clickCount and fireoff either the start selection or finish selection events.

Below are all the references to .mousedown and .mouseup:

var $trk = newTracker().width(boundx + (bound * 2)).height(boundy + (bound * 2)).css({
      position: 'absolute',
      top: px(-bound),
      left: px(-bound),
      zIndex: 290
    }).mousedown(newSelection);

function dragDiv(ord, zi) //{{{
      {
        var jq = $('<div />').mousedown(createDragger(ord)).css({
          cursor: ord + '-resize',
          position: 'absolute',
          zIndex: zi
        });

        if (Touch.support) {
          jq.bind('touchstart', Touch.createDragger(ord));
        }

        $hdl_holder.append(jq);
        return jq;
      }

var $track = newTracker().mousedown(createDragger('move')).css({
        cursor: 'move',
        position: 'absolute',
        zIndex: 360
      });
function toFront() //{{{
      {
        $trk.css({
          zIndex: 450
        });
        if (trackDoc) {
          $(document)
            .bind('mousemove',trackMove)
            .bind('mouseup',trackUp);
        }
      } 
      //}}}
      function toBack() //{{{
      {
        $trk.css({
          zIndex: 290
        });
        if (trackDoc) {
          $(document)
            .unbind('mousemove', trackMove)
            .unbind('mouseup', trackUp);
        }
      } 
 if (!trackDoc) {
        $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
      }

Help / ideas would be greatly appreciated. Thanks

score 0 · Answer 1 · answered Aug 15 '12 at 16:43

What about something along the lines of this:

var isDragging = false;

function onMouseDown(event) {
    isDragging = !isDragging;
}

function onMouseUp(event) {
    if (isDragging) {
        event.preventDefault();
    }
}

window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);

This way, onMouseUp should technically only fire every other time, potentially preventing the release trigger from stopping selection. This would require some deeper integration with your code of course.

how to modify jcrop to support blackberry trackpads?

1 Answers1