Skip to content
This repository was archived by the owner on Feb 2, 2020. It is now read-only.

Commit 30fdee4

Browse files
clmathclmath
committed
Update to dpointer 0.3.0-alpha
1 parent 6449c29 commit 30fdee4

File tree

7 files changed

+352
-7
lines changed

7 files changed

+352
-7
lines changed

‎.bowerrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": ".."
3+
}

‎bower.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
{
22
"name": "dpointer-build",
3-
"version": "0.1.1-dev",
3+
"version": "0.3.0-alpha",
4+
"dependencies": {
5+
"requirejs-dplugins": "0.2.x"
6+
},
7+
"devDependencies": {
8+
"dpointer": "0.3.0-alpha"
9+
},
410
"ignore": [
511
".jshintrc",
612
".gitattributes",
713
".travis.yml",
814
"tests",
915
"CONTRIBUTING.md"
10-
],
11-
"devDependencies": {
12-
"dpointer": "0.1.1-dev"
13-
}
16+
]
1417
}

‎layer.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎layer.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/capture.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<!--
3+
4+
-->
5+
<html>
6+
<head>
7+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
8+
<meta name="viewport"
9+
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
10+
<meta name="apple-mobile-web-app-capable" content="yes">
11+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
12+
<title>Pointer Events: capture > capture1</title>
13+
14+
<style>
15+
html, body {
16+
height: 100%;
17+
width: 100%;
18+
margin: 0;
19+
border: 0;
20+
padding: 0;
21+
overflow: hidden;
22+
font-size: 100%;
23+
background-color: #000000;
24+
}
25+
26+
#container {
27+
height: auto;
28+
width: auto;
29+
background-color: #AAAAAA;
30+
padding: 10px;
31+
top: 0;
32+
left: 0;
33+
}
34+
35+
.btn {
36+
width: 150px;
37+
height: 35px;
38+
color: #000000;
39+
text-align: center;
40+
line-height: 35px;
41+
background-color: #008000;
42+
position: relative;
43+
border-width: 2px;
44+
border-style: solid;
45+
border-color: #000000;
46+
border-radius: 10%;
47+
cursor: pointer;
48+
-webkit-touch-callout: none;
49+
-webkit-user-select: none;
50+
-moz-user-select: none;
51+
-ms-user-select: none;
52+
user-select: none;
53+
}
54+
55+
.btn:active {
56+
border-color: red;
57+
background-color: #0000ff;
58+
color: wheat;
59+
}
60+
61+
#msgArea {
62+
background-color: orange;
63+
position: relative;
64+
margin: 0;
65+
left: 0;
66+
padding: 0;
67+
color: #000000;
68+
overflow: auto;
69+
height: 300px;
70+
}
71+
</style>
72+
73+
<script>var require = {baseUrl: "../.."}</script>
74+
<script type="text/javascript" src="../../requirejs/require.js"></script>
75+
<script type="text/javascript">
76+
requirejs([
77+
"dpointer/events",
78+
"requirejs-domready/domReady!"
79+
], function(pointer){
80+
var msgArea = document.getElementById("msgArea");
81+
82+
document.getElementById("capturedBtn").addEventListener("pointerdown", function(event){
83+
msgArea.innerHTML = "";
84+
pointer.setPointerCapture(capturedBtn, event.pointerId);
85+
});
86+
document.getElementById("Btn").addEventListener("pointerdown", function(event){
87+
msgArea.innerHTML = "";
88+
});
89+
90+
document.body.addEventListener("gotpointercapture", function(event){
91+
logit(event.target.id + ":gotpointercapture ");
92+
});
93+
document.body.addEventListener("lostpointercapture", function(event){
94+
logit(event.target.id + ":lostpointercapture !");
95+
});
96+
97+
document.body.addEventListener("click", function(event){
98+
logit(event.target.id + ":CAPTURE:CLICK !");
99+
});
100+
101+
document.body.addEventListener("pointermove", function(event){
102+
logit(event.target.id + ":pointermove (" + event.clientX + "/" + event.clientY + ")");
103+
});
104+
105+
// disable text selection
106+
msgArea.addEventListener("selectstart", function (e) {
107+
e.preventDefault();
108+
}, false);
109+
110+
// clear log on double click
111+
msgArea.addEventListener("dblclick", function(event){
112+
msgArea.innerHTML = "";
113+
});
114+
115+
function logit(msg){
116+
msgArea.innerHTML = msg + "</br>" + msgArea.innerHTML;
117+
}
118+
});
119+
</script>
120+
121+
</head>
122+
<body id="body">
123+
<div id="container" touch-action="none">Press inside a button, then move outside and over the other button.
124+
<div id="Btn" class="btn">NO CAPTURE</div>
125+
&#160;
126+
<div id="capturedBtn" class="btn">CAPTURE</div>
127+
</div>
128+
<div id="msgArea" touch-action="pan-x pan-y">== LOG ==</div>
129+
</body>
130+
</html>

‎samples/paint-with-capture.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Simple paint application to demonstrate multi touch handling with Pointer Events, using dpointer API.
4+
This sample relies on pointer capture rather than pointermove and event.button value.
5+
6+
This sample illustrate a possible usage of pointer capture. IE9 doesn't reflect pressed button state on
7+
mousemove events. Pointer capture allow to get over this limitation.
8+
9+
The number of active touch point depends on hardware capabilities and system option.
10+
To use more than 3 touch points on iOS, disable Mutitasking Gestures in Settings > General.
11+
Double Tab/click to clear the canvas.
12+
13+
Tested on:
14+
- Android 4.1.1: stockbrowser + Chrome
15+
- iOS 6.1.3
16+
- Windows Phone 8
17+
- FireFox desktop 24
18+
- Internet Explorer 9 and 10
19+
- Chrome Desktop 28
20+
-->
21+
<html>
22+
<head>
23+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
24+
<meta name="viewport"
25+
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
26+
<meta name="apple-mobile-web-app-capable" content="yes">
27+
<title>Pointer Events: tests > paint2</title>
28+
29+
<style>
30+
html, body {
31+
height: 100%;
32+
width: 100%;
33+
margin: 0;
34+
border: 0;
35+
padding: 0;
36+
overflow: hidden;
37+
font-size: 100%;
38+
}
39+
40+
#drawingArea {
41+
height: 100%;
42+
width: 100%;
43+
margin: 0;
44+
top: 0;
45+
right: 0;
46+
background-color: #000000;
47+
position: absolute;
48+
}
49+
</style>
50+
51+
<script>var require = {baseUrl: "../.."}</script>
52+
<script type="text/javascript" src="../../requirejs/require.js"></script>
53+
<script type="text/javascript">
54+
requirejs([
55+
"dpointer/events",
56+
"requirejs-domready/domReady!"
57+
], function(pointer){
58+
var canvas = document.getElementById("drawingArea");
59+
var context = canvas.getContext("2d");
60+
canvas.height = window.innerHeight;
61+
canvas.width = window.innerWidth;
62+
63+
var captured = {};
64+
65+
// catch Pointer Down events and set capture on canvas
66+
canvas.addEventListener("pointerdown", function(event){
67+
pointer.setPointerCapture(canvas, event.pointerId);
68+
});
69+
70+
// catch "got" pointer capture event and remember the pointerId as active
71+
canvas.addEventListener("gotpointercapture", function(event){
72+
captured[event.pointerId] = true;
73+
});
74+
75+
// catch "lost" pointer capture event and set the pointerId as inactive
76+
canvas.addEventListener("lostpointercapture", function(event){
77+
captured[event.pointerId] = false;
78+
});
79+
80+
// catch Pointer Move events and draw according to Pointer position
81+
canvas.addEventListener("pointermove", function(event){
82+
if(captured[event.pointerId]){
83+
// as pointer capture is enabled for this pointerId,
84+
// we do not have to check if the button is pressed:
85+
// Pointer capture is enabled until pointer is released.
86+
context.fillStyle = PointerColor.get(event.pointerId);
87+
context.fillRect(event.clientX, event.clientY, 5, 5);
88+
}
89+
});
90+
// reset canvas on double tap/click
91+
canvas.addEventListener("dblclick", function(){
92+
canvas.height = window.innerHeight;
93+
canvas.width = window.innerWidth;
94+
});
95+
96+
var PointerColor = {
97+
index: -1,
98+
colors: ["#FFFF00", "#0000FF", "#FF0000", "#00FF00", "#FFFFFF"], // yellow, blue, red, green, white
99+
get: function(pointerId){
100+
return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
101+
},
102+
next: function(){
103+
this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
104+
return (this.colors[this.index]);
105+
}
106+
};
107+
});
108+
</script>
109+
110+
</head>
111+
<body>
112+
<canvas id="drawingArea" touch-action="none">Canvas not supported?</canvas>
113+
</body>
114+
</html>

‎samples/paint.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Simple paint application to demonstrate multi touch handling with Pointer Events, using dpointer API.
4+
The number of active touch point depends on hardware capabilities and system option.
5+
To use more than 3 touch points on iOS, disable Mutitasking Gestures in Settings > General.
6+
Double Tab/click to clear the canvas.
7+
8+
Tested on:
9+
- Android 4.1.1: stockbrowser + Chrome
10+
- iOS 6.1.3
11+
- Windows Phone 8
12+
- FireFox desktop 24
13+
- Internet Explorer 10
14+
- Chrome Desktop 28
15+
-->
16+
<html>
17+
<head>
18+
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
19+
<meta name="viewport"
20+
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
21+
<meta name="apple-mobile-web-app-capable" content="yes">
22+
<title>Pointer Events: tests > paint1</title>
23+
24+
<style>
25+
html, body {
26+
height: 100%;
27+
width: 100%;
28+
margin: 0;
29+
border: 0;
30+
padding: 0;
31+
overflow: hidden;
32+
font-size: 100%;
33+
}
34+
35+
#drawingArea {
36+
height: 100%;
37+
width: 100%;
38+
margin: 0;
39+
top: 0;
40+
right: 0;
41+
background-color: #666666;
42+
position: absolute;
43+
}
44+
</style>
45+
46+
<script>var require = {baseUrl: "../.."}</script>
47+
<script type="text/javascript" src="../../requirejs/require.js"></script>
48+
<script type="text/javascript">
49+
requirejs([
50+
"dpointer/events",
51+
"requirejs-domready/domReady!"
52+
], function(pointer){
53+
try {
54+
var canvas = document.getElementById("drawingArea");
55+
var context = context = canvas.getContext("2d");
56+
canvas.height = window.innerHeight;
57+
canvas.width = window.innerWidth;
58+
59+
// catch Pointer Move events and draw according to Pointer position
60+
canvas.addEventListener("pointermove", function(event){
61+
if(event.buttons > 0){
62+
context.fillStyle = PointerColor.get(event.pointerId);
63+
context.fillRect(event.clientX, event.clientY, 5, 5);
64+
}
65+
});
66+
67+
// reset canvas on double tap/click
68+
canvas.addEventListener("dblclick", function(){
69+
canvas.height = window.innerHeight;
70+
canvas.width = window.innerWidth;
71+
});
72+
73+
var PointerColor = {
74+
index: -1,
75+
colors: ["#FFFF00", "#0000FF", "#FF0000", "#00FF00", "#FFFFFF"], // yellow, blue, red, green, white
76+
get: function(pointerId){
77+
return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
78+
},
79+
next: function(){
80+
this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
81+
return (this.colors[this.index]);
82+
}
83+
};
84+
} catch (error) {
85+
alert(error);
86+
}
87+
});
88+
89+
</script>
90+
91+
</head>
92+
<body>
93+
<canvas id="drawingArea" touch-action="none">Canvas not supported?</canvas>
94+
</body>
95+
</html>

0 commit comments

Comments
 (0)