mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-09 02:00:44 +08:00
touch capabilites
This commit is contained in:
Ali Abid
parent
45a3f0b511
commit
5e38aab701
@ -1,8 +1,8 @@
|
||||
body {
|
||||
body#lib {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 20px 0 0;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
|
||||
border: none;
|
||||
@ -87,7 +87,7 @@ button.secondary {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
bottom: 18pSx;
|
||||
height: 24px;
|
||||
}
|
||||
#credit a {
|
||||
|
||||
238
build/lib/gradio/static/js/vendor/jquery.ui.touch-punch.js
vendored
Normal file
238
build/lib/gradio/static/js/vendor/jquery.ui.touch-punch.js
vendored
Normal file
@ -0,0 +1,238 @@
|
||||
/*!
|
||||
* jQuery UI Touch Punch 1.0.7 as modified by RWAP Software
|
||||
* based on original touchpunch v0.2.3 which has not been updated since 2014
|
||||
*
|
||||
* Updates by RWAP Software to take account of various suggested changes on the original code issues
|
||||
*
|
||||
* Original: https://github.com/furf/jquery-ui-touch-punch
|
||||
* Copyright 2011–2014, Dave Furfero
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
*
|
||||
* Fork: https://github.com/RWAP/jquery-ui-touch-punch
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.widget.js
|
||||
* jquery.ui.mouse.js
|
||||
*/
|
||||
|
||||
(function( factory ) {
|
||||
if ( typeof define === "function" && define.amd ) {
|
||||
|
||||
// AMD. Register as an anonymous module.
|
||||
define([ "jquery", "jquery.ui" ], factory );
|
||||
} else {
|
||||
|
||||
// Browser globals
|
||||
factory( jQuery );
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
// Detect touch support
|
||||
$.support.touch = ( 'ontouchstart' in document
|
||||
|| 'ontouchstart' in window
|
||||
|| window.TouchEvent
|
||||
|| (window.DocumentTouch && document instanceof DocumentTouch)
|
||||
|| navigator.maxTouchPoints > 0
|
||||
|| navigator.msMaxTouchPoints > 0
|
||||
);
|
||||
|
||||
// Ignore browsers without touch or mouse support
|
||||
if (!$.support.touch || !$.ui.mouse) {
|
||||
return;
|
||||
}
|
||||
|
||||
var mouseProto = $.ui.mouse.prototype,
|
||||
_mouseInit = mouseProto._mouseInit,
|
||||
_mouseDestroy = mouseProto._mouseDestroy,
|
||||
touchHandled;
|
||||
|
||||
/**
|
||||
* Get the x,y position of a touch event
|
||||
* @param {Object} event A touch event
|
||||
*/
|
||||
function getTouchCoords (event) {
|
||||
return {
|
||||
x: event.originalEvent.changedTouches[0].pageX,
|
||||
y: event.originalEvent.changedTouches[0].pageY
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulate a mouse event based on a corresponding touch event
|
||||
* @param {Object} event A touch event
|
||||
* @param {String} simulatedType The corresponding mouse event
|
||||
*/
|
||||
function simulateMouseEvent (event, simulatedType) {
|
||||
|
||||
// Ignore multi-touch events
|
||||
if (event.originalEvent.touches.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent "Ignored attempt to cancel a touchmove event with cancelable=false" errors
|
||||
if (event.cancelable) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var touch = event.originalEvent.changedTouches[0],
|
||||
simulatedEvent = document.createEvent('MouseEvents');
|
||||
|
||||
// Initialize the simulated mouse event using the touch event's coordinates
|
||||
simulatedEvent.initMouseEvent(
|
||||
simulatedType, // type
|
||||
true, // bubbles
|
||||
true, // cancelable
|
||||
window, // view
|
||||
1, // detail
|
||||
touch.screenX, // screenX
|
||||
touch.screenY, // screenY
|
||||
touch.clientX, // clientX
|
||||
touch.clientY, // clientY
|
||||
false, // ctrlKey
|
||||
false, // altKey
|
||||
false, // shiftKey
|
||||
false, // metaKey
|
||||
0, // button
|
||||
null // relatedTarget
|
||||
);
|
||||
|
||||
// Dispatch the simulated event to the target element
|
||||
event.target.dispatchEvent(simulatedEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchstart events
|
||||
* @param {Object} event The widget element's touchstart event
|
||||
*/
|
||||
mouseProto._touchStart = function (event) {
|
||||
|
||||
var self = this;
|
||||
|
||||
// Interaction time
|
||||
this._startedMove = event.timeStamp;
|
||||
|
||||
// Track movement to determine if interaction was a click
|
||||
self._startPos = getTouchCoords(event);
|
||||
|
||||
// Ignore the event if another widget is already being handled
|
||||
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the flag to prevent other widgets from inheriting the touch event
|
||||
touchHandled = true;
|
||||
|
||||
// Track movement to determine if interaction was a click
|
||||
self._touchMoved = false;
|
||||
|
||||
// Simulate the mouseover event
|
||||
simulateMouseEvent(event, 'mouseover');
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
|
||||
// Simulate the mousedown event
|
||||
simulateMouseEvent(event, 'mousedown');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchmove events
|
||||
* @param {Object} event The document's touchmove event
|
||||
*/
|
||||
mouseProto._touchMove = function (event) {
|
||||
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Interaction was moved
|
||||
this._touchMoved = true;
|
||||
|
||||
// Simulate the mousemove event
|
||||
simulateMouseEvent(event, 'mousemove');
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the jQuery UI widget's touchend events
|
||||
* @param {Object} event The document's touchend event
|
||||
*/
|
||||
mouseProto._touchEnd = function (event) {
|
||||
|
||||
// Ignore event if not handled
|
||||
if (!touchHandled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate the mouseup event
|
||||
simulateMouseEvent(event, 'mouseup');
|
||||
|
||||
// Simulate the mouseout event
|
||||
simulateMouseEvent(event, 'mouseout');
|
||||
|
||||
// If the touch interaction did not move, it should trigger a click
|
||||
// Check for this in two ways - length of time of simulation and distance moved
|
||||
// Allow for Apple Stylus to be used also
|
||||
var timeMoving = event.timeStamp - this._startedMove;
|
||||
if (!this._touchMoved || timeMoving < 500) {
|
||||
// Simulate the click event
|
||||
simulateMouseEvent(event, 'click');
|
||||
} else {
|
||||
var endPos = getTouchCoords(event);
|
||||
if ((Math.abs(endPos.x - this._startPos.x) < 10) && (Math.abs(endPos.y - this._startPos.y) < 10)) {
|
||||
|
||||
// If the touch interaction did not move, it should trigger a click
|
||||
if (!this._touchMoved || event.originalEvent.changedTouches[0].touchType === 'stylus') {
|
||||
// Simulate the click event
|
||||
simulateMouseEvent(event, 'click');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Unset the flag to determine the touch movement stopped
|
||||
this._touchMoved = false;
|
||||
|
||||
// Unset the flag to allow other widgets to inherit the touch event
|
||||
touchHandled = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* A duck punch of the $.ui.mouse _mouseInit method to support touch events.
|
||||
* This method extends the widget with bound touch event handlers that
|
||||
* translate touch events to mouse events and pass them to the widget's
|
||||
* original mouse event handling methods.
|
||||
*/
|
||||
mouseProto._mouseInit = function () {
|
||||
|
||||
var self = this;
|
||||
|
||||
// Delegate the touch handlers to the widget's element
|
||||
self.element.on({
|
||||
touchstart: $.proxy(self, '_touchStart'),
|
||||
touchmove: $.proxy(self, '_touchMove'),
|
||||
touchend: $.proxy(self, '_touchEnd')
|
||||
});
|
||||
|
||||
// Call the original $.ui.mouse init method
|
||||
_mouseInit.call(self);
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove the touch event handlers
|
||||
*/
|
||||
mouseProto._mouseDestroy = function () {
|
||||
|
||||
var self = this;
|
||||
|
||||
// Delegate the touch handlers to the widget's element
|
||||
self.element.off({
|
||||
touchstart: $.proxy(self, '_touchStart'),
|
||||
touchmove: $.proxy(self, '_touchMove'),
|
||||
touchend: $.proxy(self, '_touchEnd')
|
||||
});
|
||||
|
||||
// Call the original $.ui.mouse destroy method
|
||||
_mouseDestroy.call(self);
|
||||
};
|
||||
|
||||
}));
|
||||
@ -43,7 +43,7 @@
|
||||
<link rel="stylesheet" href="../static/css/loading.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="lib">
|
||||
<div id="share" class="invisible">
|
||||
Live at <a id="share-link" target="_blank"></a>.
|
||||
<button id="share-copy">Copy Link</button>
|
||||
@ -58,12 +58,12 @@
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
<div id="credit">Built with <a href="http://gradio.app" target="_blank">Gradio</a>.</div>
|
||||
<div id="credit">Built with <a href="https://github.com/gradio-app/gradio" target="_blank">Gradio</a>.</div>
|
||||
<!-- VENDOR -->
|
||||
<script src="../static/js/vendor/jquery.min.js"></script>
|
||||
<script src="../static/js/vendor/html2canvas.min.js"></script>
|
||||
<script src="../static/js/vendor/jquery-ui.min.js"></script>
|
||||
<script src="../static/js/vendor/jquery.ui.touch-punch.min.js"></script>
|
||||
<script src="../static/js/vendor/jquery.ui.touch-punch.js"></script>
|
||||
<script src="../static/js/vendor/fabric.js"></script>
|
||||
<script src="../static/js/vendor/tui-code-snippet.min.js"></script>
|
||||
<script src="../static/js/vendor/FileSaver.min.js"></script>
|
||||
|
||||
@ -80,7 +80,7 @@ gradio/static/js/vendor/fabric.js
|
||||
gradio/static/js/vendor/html2canvas.min.js
|
||||
gradio/static/js/vendor/jquery-ui.min.js
|
||||
gradio/static/js/vendor/jquery.min.js
|
||||
gradio/static/js/vendor/jquery.ui.touch-punch.min.js
|
||||
gradio/static/js/vendor/jquery.ui.touch-punch.js
|
||||
gradio/static/js/vendor/p5.dom.min.js
|
||||
gradio/static/js/vendor/p5.min.js
|
||||
gradio/static/js/vendor/p5.sound.min.js
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
body {
|
||||
body#lib {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
margin: 20px 0 0;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
button, input[type="submit"], input[type="reset"], input[type="text"], input[type="button"], select[type="submit"] {
|
||||
border: none;
|
||||
@ -87,7 +87,7 @@ button.secondary {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
bottom: 18px;
|
||||
height: 24px;
|
||||
}
|
||||
#credit a {
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<link rel="stylesheet" href="../static/css/loading.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="lib">
|
||||
<div id="share" class="invisible">
|
||||
Live at <a id="share-link" target="_blank"></a>.
|
||||
<button id="share-copy">Copy Link</button>
|
||||
@ -58,7 +58,7 @@
|
||||
<table>
|
||||
</table>
|
||||
</div>
|
||||
<div id="credit">Built with <a href="http://gradio.app" target="_blank">Gradio</a>.</div>
|
||||
<div id="credit">Built with <a href="https://github.com/gradio-app/gradio" target="_blank">Gradio</a>.</div>
|
||||
<!-- VENDOR -->
|
||||
<script src="../static/js/vendor/jquery.min.js"></script>
|
||||
<script src="../static/js/vendor/html2canvas.min.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user