Re: Moving modal window in touch devices

2017-11-02 Thread Martin Grigorov 
Thank you for sharing it!

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Thu, Nov 2, 2017 at 12:03 PM, Rakesh A 
wrote:

> Thank you for the suggestion, I tried and was able to make it work.
>
> Below code is what I ended up (for some one who is interested in it)
>
> (function () {
> function _duckPunchTouchHandler(event) {
> // ignore multi-touch events
> if (event.originalEvent.touches.length > 1) {
>   return;
> }
>
> var touch = event.originalEvent.changedTouches[0];
>
> var simulatedEvent = document.createEvent("MouseEvent");
> simulatedEvent.initMouseEvent({
> touchstart: "mousedown",
> touchmove: "mousemove",
> touchend: "mouseup"}[event.type],
> true, true, window, 1,
> touch.screenX, touch.screenY,
> touch.clientX, touch.clientY, false,
> false, false, false, 0, null);
>
> touch.target.dispatchEvent(simulatedEvent);
> };
>
> DuckPunchWicketDrag = {
>  init : function () {
>  var init_org = Wicket.Drag.init;
>
>  var mousedown_org = Wicket.Drag.mouseDownHandler;
>  var clean_org = Wicket.Drag.clean;
>
>  var mousemove_org = Wicket.Drag.mousemove;
>  var mouseup_org = Wicket.Drag.mouseUp;
>  var mouseout_org = Wicket.Drag.mouseOut;
>
>  Wicket.Drag.init = function(element, onDragBegin, onDragEnd,
> onDrag) {
>  Wicket.Event.add(element, "touchstart",
> _duckPunchTouchHandler);
>  init_org.call(this, element, onDragBegin, onDragEnd,
> onDrag);
>  };
>
>  Wicket.Drag.mouseDownHandler = function (e) {
>  $(document).on('touchmove', _duckPunchTouchHandler);
>  $(document).on('touchend', _duckPunchTouchHandler);
>
>  return mousedown_org.call(this, e);
>  };
>
>  Wicket.Drag.clean = function (element) {
>  Wicket.Event.remove(element, "touchstart",
> _duckPunchTouchHandler);
>  clean_org.call(this, element);
>  };
>
>  Wicket.Drag.mousemove = function (e) {
>  return mousemove_org.call(this, e);
>  };
>
>  Wicket.Drag.mouseUp = function (e) {
>  if (Wicket.Drag.current) {
>  $(document).off('touchmove', _duckPunchTouchHandler);
>  $(document).off('touchend', _duckPunchTouchHandler);
>  }
>
>  mouseup_org.call(this, e);
>  };
>
>  Wicket.Drag.mouseOut = function (e) {
>  mouseout_org.call(this, e);
>  };
>  }
> };
> })();
>
> Regards,
> Rakesh.A
>
> --
> Sent from: http://apache-wicket.1842946.n4.nabble.com/Users-forum-
> f1842947.html
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>

Re: Moving modal window in touch devices

2017-11-02 Thread Rakesh A 
Thank you for the suggestion, I tried and was able to make it work.

Below code is what I ended up (for some one who is interested in it)

(function () {
function _duckPunchTouchHandler(event) {
// ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
  return;
}

var touch = event.originalEvent.changedTouches[0];

var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"}[event.type],
true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);

touch.target.dispatchEvent(simulatedEvent);
};

DuckPunchWicketDrag = {
 init : function () {
 var init_org = Wicket.Drag.init;

 var mousedown_org = Wicket.Drag.mouseDownHandler;
 var clean_org = Wicket.Drag.clean;

 var mousemove_org = Wicket.Drag.mousemove;
 var mouseup_org = Wicket.Drag.mouseUp;
 var mouseout_org = Wicket.Drag.mouseOut;

 Wicket.Drag.init = function(element, onDragBegin, onDragEnd,
onDrag) {
 Wicket.Event.add(element, "touchstart",
_duckPunchTouchHandler);
 init_org.call(this, element, onDragBegin, onDragEnd,
onDrag);
 };

 Wicket.Drag.mouseDownHandler = function (e) {
 $(document).on('touchmove', _duckPunchTouchHandler);
 $(document).on('touchend', _duckPunchTouchHandler);

 return mousedown_org.call(this, e);
 };

 Wicket.Drag.clean = function (element) {
 Wicket.Event.remove(element, "touchstart",
_duckPunchTouchHandler);
 clean_org.call(this, element);
 };

 Wicket.Drag.mousemove = function (e) {
 return mousemove_org.call(this, e);
 };

 Wicket.Drag.mouseUp = function (e) {
 if (Wicket.Drag.current) {
 $(document).off('touchmove', _duckPunchTouchHandler);
 $(document).off('touchend', _duckPunchTouchHandler);
 }

 mouseup_org.call(this, e);
 };

 Wicket.Drag.mouseOut = function (e) {
 mouseout_org.call(this, e);
 };
 }
};
})();

Regards,
Rakesh.A

--
Sent from: http://apache-wicket.1842946.n4.nabble.com/Users-forum-f1842947.html

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org

Re: Moving modal window in touch devices

2017-11-01 Thread Martin Grigorov 
Hi,

Wicket Extensions' ModalWindow uses wicket-ajax-jquery.js to support
dragging -
https://github.com/apache/wicket/blob/da8d5999f89949e2d38856eb315fcc1712d044f1/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js#L2439

As you can see it depends on "mousedown" JS event (
https://github.com/apache/wicket/blob/da8d5999f89949e2d38856eb315fcc1712d044f1/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js#L2470)
which is not touch-friendly.

One way to workaround this is to monkey-patch Wicket.Drag.xyz methods.

Martin Grigorov
Wicket Training and Consulting
https://twitter.com/mtgrigorov

On Wed, Nov 1, 2017 at 10:46 AM, Rakesh A 
wrote:

> Hi,
>
> I am trying to make modal window positioning (by dragging) work on touch
> enabled devices with no luck.
> What I tried is to use JQuery Touch punch, to simulate mouse event for
> touch
> events on devices, but this for some reason doesn't work.
>
> Any pointers how to make this (allow users to position Wicket modal dialogs
> by dragging them on touch devices) work ?
>
> Regards,
> Rakesh.A
>
> --
> Sent from: http://apache-wicket.1842946.n4.nabble.com/Users-forum-
> f1842947.html
>
> -
> To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
> For additional commands, e-mail: users-h...@wicket.apache.org
>
>

Moving modal window in touch devices

2017-11-01 Thread Rakesh A 
Hi,

I am trying to make modal window positioning (by dragging) work on touch
enabled devices with no luck.
What I tried is to use JQuery Touch punch, to simulate mouse event for touch
events on devices, but this for some reason doesn't work.

Any pointers how to make this (allow users to position Wicket modal dialogs
by dragging them on touch devices) work ?

Regards,
Rakesh.A

--
Sent from: http://apache-wicket.1842946.n4.nabble.com/Users-forum-f1842947.html

-
To unsubscribe, e-mail: users-unsubscr...@wicket.apache.org
For additional commands, e-mail: users-h...@wicket.apache.org