Skip to content

Added Option to link an item outside the touch element #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vivek-yadav wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added Option to link an item outside the touch element #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d6e2c5c
Example contains a linkItem Button which also move
vivek-yadav May 13, 2015
d5c8b9e
Added linkItem option which also moves
vivek-yadav May 13, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion gesture2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
Scale<br />
<input type="checkbox" id="rotatecheckbox" checked="checked" />
Rotate<br />
<button id="drag-button">Click</button>
<div id="drag-target">
:-)</div>
<div>
Expand Down Expand Up @@ -169,7 +170,8 @@
drag: function () { return ischecked("#dragcheckbox"); },
scale: function () { return ischecked("#scalecheckbox"); },
rotate: function () { return ischecked("#rotatecheckbox"); },
touchtarget: null
touchtarget: null,
linkItem:$("#drag-button")
}
);
</script>
Expand Down
47 changes: 46 additions & 1 deletion jquery.gesture2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,18 @@
rotate: true,

// we can make this jQuery object responds to touch on another jQuery
touchtarget: null
touchtarget: null,
// LinkItem which will move and transform along with this
linkItem: null
},
options);

var linkItem = options.linkItem ? $(options.linkItem) : null,
_linkItem = linkItem,
linkItem_original_x = 0,
linkItem_original_y = 0,
linkItem_original_css = "";

var touchtarget = options.touchtarget ? $(options.touchtarget) : this,
_this = this,
in_drag = false,
Expand All @@ -49,12 +57,29 @@
dy = ((event.touches.length == 0) ? event.pageY : event.touches[0].pageY) - original_y,
new_css = "translate(" + dx + "px," + dy + "px) " + original_css;
_this.__transform__(new_css);

// Transform LinkItem
if(_linkItem){

var linkItem_dx = ((event.touches.length == 0) ? event.pageX : event.touches[0].pageX) - linkItem_original_x,
linkItem_dy = ((event.touches.length == 0) ? event.pageY : event.touches[0].pageY) - linkItem_original_y,
linkItem_new_css = "translate(" + linkItem_dx + "px," + linkItem_dy + "px) " + linkItem_original_css;
_linkItem.__transform__(linkItem_new_css);
}
} else {
if (in_drag = event.type == "_gesture2_touch_start") {
original_x = event.touches[0].pageX;
original_y = event.touches[0].pageY;
original_css = _this.__transform__();
if (!original_css || original_css == "none") original_css = "";

// For linkItem
if(_linkItem){
linkItem_original_x = event.touches[0].pageX;
linkItem_original_y = event.touches[0].pageY;
linkItem_original_css = _linkItem.__transform__();
if (!linkItem_original_css || linkItem_original_css == "none") linkItem_original_css = "";
}
}
}

Expand All @@ -76,12 +101,32 @@
"translate(" + (-original_x) + "px," + (-original_y) + "px) " +
original_css;
_this.__transform__(new_css);

// Transform LinkItem
if(_linkItem){
var linkItem_dx = event.pageX - linkItem_original_x,
linkItem_dy = event.pageY - linkItem_original_y,
linkItem_new_css = (__getvalue__(options.drag) ? ("translate(" + event.pageX + "px," + event.pageY + "px) ") : ("translate(" + linkItem_original_x + "px," + linkItem_original_y + "px) ")) +
(__getvalue__(options.scale) ? ("scale(" + event.scale + ")") : "") +
(__getvalue__(options.rotate) ? ("rotate(" + event.rotation + "rad) ") : "") +
"translate(" + (-linkItem_original_x) + "px," + (-linkItem_original_y) + "px) " +
linkItem_original_css;
_linkItem.__transform__(linkItem_new_css);
}
} else {
in_gesture = true;
original_css = _this.__transform__();
original_x = event.pageX;
original_y = event.pageY;
if (!original_css || original_css == "none") original_css = "";

// For LinkItem
if(_linkItem){
linkItem_original_css = _linkItem.__transform__();
linkItem_original_x = event.pageX;
linkItem_original_y = event.pageY;
if (!linkItem_original_css || linkItem_original_css == "none") linkItem_original_css = "";
}
}

if (event.type == "_gesture2_gesture_end") {
Expand Down