Update to dpointer 0.3.0-alpha

ibm-js · Sep 12, 2014 · 30fdee4 · 30fdee4
1 parent 6449c29
commit 30fdee4
Show file tree

Hide file tree

Showing 7 changed files with 352 additions and 7 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+	"directory": ".."
+}
diff --git a/bower.json b/bower.json
@@ -1,14 +1,17 @@
 {
   "name": "dpointer-build",
-  "version": "0.1.1-dev",
+  "version": "0.3.0-alpha",
+  "dependencies": {
+    "requirejs-dplugins": "0.2.x"
+  },
+  "devDependencies": {
+    "dpointer": "0.3.0-alpha"
+  },
   "ignore": [
     ".jshintrc",
     ".gitattributes",
     ".travis.yml",
     "tests",
     "CONTRIBUTING.md"
-  ],
-  "devDependencies": {
-    "dpointer": "0.1.1-dev"
-  }
+  ]
 }
diff --git a/layer.js b/layer.js
diff --git a/layer.map b/layer.map
diff --git a/samples/capture.html b/samples/capture.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+
+-->
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport"
+		  content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	<title>Pointer Events: capture > capture1</title>
+
+	<style>
+		html, body {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			border: 0;
+			padding: 0;
+			overflow: hidden;
+			font-size: 100%;
+			background-color: #000000;
+		}
+
+		#container {
+			height: auto;
+			width: auto;
+			background-color: #AAAAAA;
+			padding: 10px;
+			top: 0;
+			left: 0;
+		}
+
+		.btn {
+			width: 150px;
+			height: 35px;
+			color: #000000;
+			text-align: center;
+			line-height: 35px;
+			background-color: #008000;
+			position: relative;
+			border-width: 2px;
+			border-style: solid;
+			border-color: #000000;
+			border-radius: 10%;
+			cursor: pointer;
+			-webkit-touch-callout: none;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
+
+		.btn:active {
+			border-color: red;
+			background-color: #0000ff;
+			color: wheat;
+		}
+
+		#msgArea {
+			background-color: orange;
+			position: relative;
+			margin: 0;
+			left: 0;
+			padding: 0;
+			color: #000000;
+			overflow: auto;
+			height: 300px;
+		}
+	</style>
+
+	<script>var require = {baseUrl: "../.."}</script>
+	<script type="text/javascript" src="../../requirejs/require.js"></script>
+	<script type="text/javascript">
+		requirejs([
+			"dpointer/events",
+			"requirejs-domready/domReady!"
+		], function(pointer){
+			var msgArea = document.getElementById("msgArea");
+
+			document.getElementById("capturedBtn").addEventListener("pointerdown", function(event){
+				msgArea.innerHTML = "";
+				pointer.setPointerCapture(capturedBtn, event.pointerId);
+			});
+			document.getElementById("Btn").addEventListener("pointerdown", function(event){
+				msgArea.innerHTML = "";
+			});
+
+			document.body.addEventListener("gotpointercapture", function(event){
+				logit(event.target.id + ":gotpointercapture ");
+			});
+			document.body.addEventListener("lostpointercapture", function(event){
+				logit(event.target.id + ":lostpointercapture !");
+			});
+
+			document.body.addEventListener("click", function(event){
+				logit(event.target.id + ":CAPTURE:CLICK !");
+			});
+
+			document.body.addEventListener("pointermove", function(event){
+				logit(event.target.id + ":pointermove (" + event.clientX + "/" + event.clientY + ")");
+			});
+
+			// disable text selection
+			msgArea.addEventListener("selectstart", function (e) {
+				e.preventDefault();
+			}, false);
+
+			// clear log on double click
+			msgArea.addEventListener("dblclick", function(event){
+				msgArea.innerHTML = "";
+			});
+
+			function logit(msg){
+				msgArea.innerHTML = msg + "</br>" + msgArea.innerHTML;
+			}
+		});
+	</script>
+
+</head>
+<body id="body">
+<div id="container" touch-action="none">Press inside a button, then move outside and over the other button.
+	<div id="Btn" class="btn">NO CAPTURE</div>
+	&#160;
+	<div id="capturedBtn" class="btn">CAPTURE</div>
+</div>
+<div id="msgArea" touch-action="pan-x pan-y">== LOG ==</div>
+</body>
+</html>
diff --git a/samples/paint-with-capture.html b/samples/paint-with-capture.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<!--
+	Simple paint application to demonstrate multi touch handling with Pointer Events, using dpointer API.
+	This sample relies on pointer capture rather than pointermove and event.button value.
+
+	This sample illustrate a possible usage of pointer capture. IE9 doesn't reflect pressed button state on
+	mousemove events. Pointer capture allow to get over	this limitation.
+
+	The number of active touch point depends on hardware capabilities and system option.
+	To use more than 3 touch points on iOS, disable Mutitasking Gestures in Settings > General.
+	Double Tab/click to clear the canvas.
+
+	 Tested on:
+	 - Android 4.1.1: stockbrowser + Chrome
+	 - iOS 6.1.3
+	 - Windows Phone 8
+	 - FireFox desktop 24
+	 - Internet Explorer 9 and 10
+	 - Chrome Desktop 28
+-->
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport"
+		  content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<title>Pointer Events: tests > paint2</title>
+
+	<style>
+		html, body {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			border: 0;
+			padding: 0;
+			overflow: hidden;
+			font-size: 100%;
+		}
+
+		#drawingArea {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			top: 0;
+			right: 0;
+			background-color: #000000;
+			position: absolute;
+		}
+	</style>
+
+	<script>var require = {baseUrl: "../.."}</script>
+	<script type="text/javascript" src="../../requirejs/require.js"></script>
+	<script type="text/javascript">
+		requirejs([
+			"dpointer/events",
+			"requirejs-domready/domReady!"
+		], function(pointer){
+			var canvas = document.getElementById("drawingArea");
+			var context = canvas.getContext("2d");
+			canvas.height = window.innerHeight;
+			canvas.width = window.innerWidth;
+
+			var captured = {};
+
+			// catch Pointer Down events and set capture on canvas
+			canvas.addEventListener("pointerdown", function(event){
+				pointer.setPointerCapture(canvas, event.pointerId);
+			});
+
+			// catch "got" pointer capture event and remember the pointerId as active
+			canvas.addEventListener("gotpointercapture", function(event){
+				captured[event.pointerId] = true;
+			});
+
+			// catch "lost" pointer capture event and set the pointerId as inactive
+			canvas.addEventListener("lostpointercapture", function(event){
+				captured[event.pointerId] = false;
+			});
+
+			// catch Pointer Move events and draw according to Pointer position
+			canvas.addEventListener("pointermove", function(event){
+				if(captured[event.pointerId]){
+					// as pointer capture is enabled for this pointerId,
+					// we do not have to check if the button is pressed:
+					// Pointer capture is enabled  until pointer is released.
+					context.fillStyle = PointerColor.get(event.pointerId);
+					context.fillRect(event.clientX, event.clientY, 5, 5);
+				}
+			});
+			// reset canvas on double tap/click
+			canvas.addEventListener("dblclick", function(){
+				canvas.height = window.innerHeight;
+				canvas.width = window.innerWidth;
+			});
+
+			var PointerColor = {
+				index: -1,
+				colors: ["#FFFF00", "#0000FF", "#FF0000", "#00FF00", "#FFFFFF"], // yellow, blue, red, green, white
+				get: function(pointerId){
+					return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
+				},
+				next: function(){
+					this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
+					return (this.colors[this.index]);
+				}
+			};
+		});
+	</script>
+
+</head>
+<body>
+<canvas id="drawingArea" touch-action="none">Canvas not supported?</canvas>
+</body>
+</html>
diff --git a/samples/paint.html b/samples/paint.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!--
+	Simple paint application to demonstrate multi touch handling with Pointer Events, using dpointer API.
+	The number of active touch point depends on hardware capabilities and system option.
+	To use more than 3 touch points on iOS, disable Mutitasking Gestures in Settings > General.
+	Double Tab/click to clear the canvas.
+
+	 Tested on:
+	 - Android 4.1.1: stockbrowser + Chrome
+	 - iOS 6.1.3
+	 - Windows Phone 8
+	 - FireFox desktop 24
+	 - Internet Explorer 10
+	 - Chrome Desktop 28
+-->
+<html>
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport"
+		  content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<title>Pointer Events: tests > paint1</title>
+
+	<style>
+		html, body {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			border: 0;
+			padding: 0;
+			overflow: hidden;
+			font-size: 100%;
+		}
+
+		#drawingArea {
+			height: 100%;
+			width: 100%;
+			margin: 0;
+			top: 0;
+			right: 0;
+			background-color: #666666;
+			position: absolute;
+		}
+	</style>
+
+	<script>var require = {baseUrl: "../.."}</script>
+	<script type="text/javascript" src="../../requirejs/require.js"></script>
+	<script type="text/javascript">
+		requirejs([
+			"dpointer/events",
+			"requirejs-domready/domReady!"
+		], function(pointer){
+			try {
+				var canvas = document.getElementById("drawingArea");
+				var context = context = canvas.getContext("2d");
+				canvas.height = window.innerHeight;
+				canvas.width = window.innerWidth;
+
+				// catch Pointer Move events and draw according to Pointer position
+				canvas.addEventListener("pointermove", function(event){
+					if(event.buttons > 0){
+						context.fillStyle = PointerColor.get(event.pointerId);
+						context.fillRect(event.clientX, event.clientY, 5, 5);
+					}
+				});
+
+				// reset canvas on double tap/click
+				canvas.addEventListener("dblclick", function(){
+					canvas.height = window.innerHeight;
+					canvas.width = window.innerWidth;
+				});
+
+				var PointerColor = {
+					index: -1,
+					colors: ["#FFFF00", "#0000FF", "#FF0000", "#00FF00", "#FFFFFF"], // yellow, blue, red, green, white
+					get: function(pointerId){
+						return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
+					},
+					next: function(){
+						this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
+						return (this.colors[this.index]);
+					}
+				};
+			} catch (error) {
+				alert(error);
+			}
+		});
+
+	</script>
+
+</head>
+<body>
+<canvas id="drawingArea" touch-action="none">Canvas not supported?</canvas>
+</body>
+</html>