extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 00:54:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use jquery-tap-and-hold plugin for taphold event on touch devices

Browse Source
This commit is contained in:
Hadi Nategh 2014-10-22 15:12:48 +00:00
parent cd27be40ac
commit fb0059b796
4 changed files with 174 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
phpgwapi/js/egw_action/egw_action_popup.js
View File

@ -12,6 +12,7 @@
/*egw:uses /*egw:uses
jquery.jquery; jquery.jquery;
egw_menu; egw_menu;
/phpgwapi/js/jquery/jquery-tap-and-hold/jquery.tapandhold.js;
*/ */
if (typeof window._egwActionClasses == "undefined") if (typeof window._egwActionClasses == "undefined")
@ -253,7 +254,7 @@ function egwPopupActionImplementation()
$j(_node).bind('taphold', contextHandler); $j(_node).bind('taphold', contextHandler);
} else { } else {
$j(_node).on('contextmenu', contextHandler); $j(_node).on('contextmenu', contextHandler);
} }
} }
ai.doRegisterAction = function(_aoi, _callback, _context) ai.doRegisterAction = function(_aoi, _callback, _context)

19
phpgwapi/js/jquery/jquery-tap-and-hold/README.txt Normal file
View File

@ -0,0 +1,19 @@
jQuery - Tap and Hold
=====================
This jQuery plugin lets you detect a tap and hold event on touch interfaces.
How to use it?
1) Add the jQuery Tap and Hold plugin into your HTML
<script src="jquery.tapandhold.js" type="text/javascript"></script>
2) Bind a tap and hold handler function to the tap and hold event of an element.
$("#myDiv").bind("taphold", function(event){
alert("This is a tap and hold!");
});
You can check a working example in examples/example1.html

17
phpgwapi/js/jquery/jquery-tap-and-hold/examples/example1.html Normal file
View File

@ -0,0 +1,17 @@
<html>
<head>
<title>jQuery - Tap and Hold</title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/zaubersoftware/jquery-tap-and-hold/master/jquery.tapandhold.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".tap").bind("taphold", function(){
alert("Hello Tap and Hold World!");
});
});
</script>
</head>
<body>
<div class="tap" style="width:200px; height:200px; background-color: blue; margin: 100px 300px;"></div>
</body>
</html>

136
phpgwapi/js/jquery/jquery-tap-and-hold/jquery.tapandhold.js Normal file
View File

@ -0,0 +1,136 @@
/**
* Copyright (c) 2011 Zauber S.A. <http://www.zaubersoftware.com/>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* @author Guido Marucci Blas - guido@zaubersoftware.com
* @description Adds a handler for a custom event 'taphold' that handles a
* tap and hold on touch interfaces.
*/
(function($) {
var TAP_AND_HOLD_TRIGGER_TIMER = 1000;
var MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT = 40;
var TOUCHSTART = "touchstart";
var TOUCHEND = "touchend";
var TOUCHMOVE = "touchmove";
// For debugging only
// var TOUCHSTART = "mousedown";
// var TOUCHEND = "mouseup";
// var TOUCHMOVE = "mousemove";
var tapAndHoldTimer = null;
function calculateEuclideanDistance(x1, y1, x2, y2) {
var diffX = (x2 - x1);
var diffY = (y2 - y1);
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
function onTouchStart(event) {
var e = event.originalEvent;
// Only start detector if and only if one finger is over the widget
if (!e.touches || (e.targetTouches.length === 1 && e.touches.length === 1)) {
startTapAndHoldDetector.call(this, event)
var element = $(this);
element.bind(TOUCHMOVE, onTouchMove);
element.bind(TOUCHEND, onTouchEnd);
} else {
stopTapAndHoldDetector.call(this);
}
};
function onTouchMove(event) {
if (tapAndHoldTimer == null) {
return;
}
var e = event.originalEvent;
var x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
var y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
var tapAndHoldPoint = $(this).data("taphold.point");
var euclideanDistance = calculateEuclideanDistance(tapAndHoldPoint.x, tapAndHoldPoint.y, x, y);
if (euclideanDistance > MAX_DISTANCE_ALLOWED_IN_TAP_AND_HOLD_EVENT) {
stopTapAndHoldDetector.call(this);
}
};
function onTouchEnd(event) {
stopTapAndHoldDetector.call(this);
};
function onTapAndHold(event) {
clear.call(this);
$(this).data("taphold.handler").call(this, event);
};
function clear() {
tapAndHoldTimer = null;
$(this).unbind(TOUCHMOVE, onTouchMove);
$(this).unbind(TOUCHEND, onTouchEnd);
};
function startTapAndHoldDetector(event) {
if (tapAndHoldTimer != null) {
return;
}
var self = this;
tapAndHoldTimer = setTimeout(function(){
onTapAndHold.call(self, event)
}, TAP_AND_HOLD_TRIGGER_TIMER);
// Stores tap x & y
var e = event.originalEvent;
var tapAndHoldPoint = {};
tapAndHoldPoint.x = (e.changedTouches) ? e.changedTouches[0].pageX: e.pageX;
tapAndHoldPoint.y = (e.changedTouches) ? e.changedTouches[0].pageY: e.pageY;
$(this).data("taphold.point", tapAndHoldPoint);
};
function stopTapAndHoldDetector() {
clearTimeout(tapAndHoldTimer);
clear.call(this);
};
$.event.special["taphold"] = {
setup: function() {
},
add: function(handleObj) {
$(this).data("taphold.handler", handleObj.handler);
if (handleObj.data) {
$(this).bind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).bind(TOUCHSTART, onTouchStart);
}
},
remove: function(handleObj) {
stopTapAndHoldDetector.call(this);
if (handleObj.data) {
$(this).unbind(TOUCHSTART, handleObj.data, onTouchStart);
} else {
$(this).unbind(TOUCHSTART, onTouchStart);
}
},
teardown: function() {
}
};
})(jQuery);