Add polyfill for pointer events, change code to handle both mouse and pointer events equalls.

Mobile first!

BUG=skia:
R=mtklein@google.com

Author: jcgregorio@google.com

Review URL: https://codereview.chromium.org/286913005

git-svn-id: http://skia.googlecode.com/svn/trunk@14756 2bbb7eff-a529-9590-31e7-b0007b416f81
This commit is contained in:
commit-bot@chromium.org 2014-05-15 21:14:34 +00:00
parent 300790e228
commit 8265fe61f0
7 changed files with 45 additions and 8 deletions

View File

@ -85,3 +85,9 @@ Do this step only once, but only after running webtry_setup.sh the first time
sudo debootstrap --variant=minbase wheezy /srv/chroot/webtry
Third Party Code
----------------
* res/js/pointerevents.min.js - obtained from https://github.com/components/pointerevents-polyfill

File diff suppressed because one or more lines are too long

View File

@ -73,9 +73,9 @@
this.parentNode.insertBefore(canvasCopy, this);
}
document.body.addEventListener('mousemove', zoomMove, true);
document.body.addEventListener('mouseup', zoomFinished);
document.body.addEventListener('mouseleave', zoomFinished);
document.body.addEventListener('pointermove', zoomMove, true);
document.body.addEventListener('pointerup', zoomFinished);
document.body.addEventListener('pointerleave', zoomFinished);
// Kick off the drawing.
setTimeout(drawZoom, 1);
@ -141,15 +141,15 @@
document.body.style.cursor = 'default';
ctx.canvas.parentNode.removeChild(ctx.canvas);
canvasCopy.parentNode.removeChild(canvasCopy);
document.body.removeEventListener('mousemove', zoomMove, true);
document.body.removeEventListener('mouseup', zoomFinished);
document.body.removeEventListener('mouseleave', zoomFinished);
document.body.removeEventListener('pointermove', zoomMove, true);
document.body.removeEventListener('pointerup', zoomFinished);
document.body.removeEventListener('pointerleave', zoomFinished);
}
this.addEventListener('DOMContentLoaded', function() {
var zoomables = document.body.querySelectorAll('.zoom');
for (var i=0; i<zoomables.length; i++) {
zoomables[i].addEventListener('mousedown', zoomMouseDown);
zoomables[i].addEventListener('pointerdown', zoomMouseDown);
}
});
})();

View File

@ -14,7 +14,7 @@
<input type="text" value="" id="embed" readonly style="display:none;">
<p>
<img class='zoom' id='img' src='{{if .Hash}}/i/{{.Hash}}.png{{end}}'/>
<img touch-action='none' class='zoom' id='img' src='{{if .Hash}}/i/{{.Hash}}.png{{end}}'/>
</p>
<p id='zoomHex'></p>

View File

@ -3,6 +3,7 @@
<head>
<title>Skia WebTry</title>
<meta charset='utf-8' />
<script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
<link rel='stylesheet' href='/res/css/webtry.css' type='text/css' media='screen'>
<link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
</head>

View File

@ -3,6 +3,7 @@
<head>
<title>Skia WebTry</title>
<meta charset='utf-8' />
<script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/res/css/webtry.css" type="text/css" media="screen">
<link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
</head>

View File

@ -3,6 +3,7 @@
<head>
<title>Workspace</title>
<meta charset='utf-8' />
<script src="/res/js/pointerevents.min.js" type="text/javascript" charset="utf-8"></script>
<link rel='stylesheet' href='/res/css/webtry.css' type='text/css' media='screen'>
<link rel="stylesheet" href="/res/css/cm/codemirror.css" type="text/css" media="screen">
</head>