Use separate handlers for titlebar and content

Fix needed for touch devices.

Change-Id: Iffc0e7fe1303b7a0e4aae88ba7649bda0677320f
This commit is contained in:
Szymon Kłos 2019-06-11 18:43:54 +02:00
parent 9dab231984
commit 3799d72bd8

View file

@ -60,6 +60,9 @@ L.Control.LokDialog = L.Control.extend({
dialogIdPrefix: 'lokdialog-', dialogIdPrefix: 'lokdialog-',
onPan: function (ev) { onPan: function (ev) {
if (!draggedObject)
return;
var id = toZoomTargetId(draggedObject.id); var id = toZoomTargetId(draggedObject.id);
var target = findZoomTarget(id); var target = findZoomTarget(id);
@ -71,8 +74,9 @@ L.Control.LokDialog = L.Control.extend({
if (window.mode.isDesktop() && if (window.mode.isDesktop() &&
(newX < -target.width/2 || newY < -target.height/2 (newX < -target.width/2 || newY < -target.height/2
|| newX > window.innerWidth - target.width/2 || newX > window.innerWidth - target.width/2
|| newY > window.innerHeight - target.height/2)) || newY > window.innerHeight - target.height/2)) {
return; return;
}
target.transformation.translate = { target.transformation.translate = {
x: newX, x: newX,
@ -618,8 +622,6 @@ L.Control.LokDialog = L.Control.extend({
}, },
_setupGestures: function(dialogContainer, id, canvas) { _setupGestures: function(dialogContainer, id, canvas) {
var self = this;
var dialogID = id;
var targetId = toZoomTargetId(canvas.id); var targetId = toZoomTargetId(canvas.id);
var zoomTarget = $('#' + targetId).parent().get(0); var zoomTarget = $('#' + targetId).parent().get(0);
var titlebar = $('#' + targetId).prev().children().get(0); var titlebar = $('#' + targetId).prev().children().get(0);
@ -661,23 +663,44 @@ L.Control.LokDialog = L.Control.extend({
if (findZoomTarget(targetId) != null) { if (findZoomTarget(targetId) != null) {
removeZoomTarget(targetId); removeZoomTarget(targetId);
} }
zoomTargets.push({key: targetId, value: zoomTarget, titlebar: titlebar, transformation: transformation, initialState: state, width:width, height: height}); zoomTargets.push({key: targetId, value: zoomTarget, titlebar: titlebar, transformation: transformation, initialState: state, width:width, height: height});
var hammerAll = new Hammer(zoomTarget); var hammerTitlebar = new Hammer(titlebar);
hammerAll.add(new Hammer.Pan({ threshold: 20, pointers: 0 })); hammerTitlebar.add(new Hammer.Pan({ threshold: 20, pointers: 0 }));
hammerAll.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([hammerAll.get('pan')]); hammerTitlebar.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([hammerTitlebar.get('pan')]);
hammerAll.on('panstart panmove panstop', function(ev) { hammerTitlebar.on('panstart', this.onPan);
self.onPan(ev, dialogID); hammerTitlebar.on('panmove', this.onPan);
}); hammerTitlebar.on('pinchstart pinchmove', this.onPinch);
hammerAll.on('pinchstart pinchmove', this.onPinch); hammerTitlebar.on('hammer.input', function(ev) {
hammerAll.on('hammer.input', function(ev) {
if (ev.isFirst) { if (ev.isFirst) {
draggedObject = ev.target; draggedObject = ev.target;
} }
if (ev.isFinal) { if (ev.isFinal && draggedObject) {
var id = toZoomTargetId(draggedObject.id);
var target = findZoomTarget(id);
if (target) {
target.initialState.startX = target.transformation.translate.x;
target.initialState.startY = target.transformation.translate.y;
}
draggedObject = null;
}
});
var hammerContent = new Hammer(canvas);
hammerContent.add(new Hammer.Pan({ threshold: 20, pointers: 0 }));
hammerContent.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([hammerContent.get('pan')]);
hammerContent.on('panstart', this.onPan);
hammerContent.on('panmove', this.onPan);
hammerContent.on('pinchstart pinchmove', this.onPinch);
hammerContent.on('hammer.input', function(ev) {
if (ev.isFirst) {
draggedObject = ev.target;
}
if (ev.isFinal && draggedObject) {
var id = toZoomTargetId(draggedObject.id); var id = toZoomTargetId(draggedObject.id);
var target = findZoomTarget(id); var target = findZoomTarget(id);
if (target) { if (target) {