Skip to content

Commit

Permalink
makes samples compliant with the build system
Browse files Browse the repository at this point in the history
  • Loading branch information
Sebastien Pereira committed Sep 15, 2014
1 parent 40b502a commit 8a16f0d
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 33 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dpointer",
"version": "0.3.0",
"version": "0.3.1",
"dependencies": {
"requirejs-dplugins": "0.2.x"
},
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dpointer",
"version": "0.3.0",
"version": "0.3.1",
"dependencies": {
"requirejs-dplugins": "0.2.x"
},
Expand Down
30 changes: 19 additions & 11 deletions samples/capture.html
Original file line number Diff line number Diff line change
Expand Up @@ -70,35 +70,43 @@
}
</style>

<script>var require = {baseUrl: "../.."}</script>
<script type="text/javascript" src="../../requirejs/require.js"></script>

<script type="text/javascript">
requirejs([
require.config({
baseUrl: "../.."
});
</script>

<script type="text/javascript">
require([
"dpointer/events",
"requirejs-domready/domReady!"
], function(pointer){
], function (pointer) {
var msgArea = document.getElementById("msgArea");

document.getElementById("capturedBtn").addEventListener("pointerdown", function(event){
document.getElementById("capturedBtn").addEventListener("pointerdown", function (event) {
msgArea.innerHTML = "";
pointer.setPointerCapture(capturedBtn, event.pointerId);
});
document.getElementById("Btn").addEventListener("pointerdown", function(event){

document.getElementById("Btn").addEventListener("pointerdown", function (event) {
msgArea.innerHTML = "";
});

document.body.addEventListener("gotpointercapture", function(event){
document.body.addEventListener("gotpointercapture", function (event) {
logit(event.target.id + ":gotpointercapture ");
});
document.body.addEventListener("lostpointercapture", function(event){

document.body.addEventListener("lostpointercapture", function (event) {
logit(event.target.id + ":lostpointercapture !");
});

document.body.addEventListener("click", function(event){
document.body.addEventListener("click", function (event) {
logit(event.target.id + ":CAPTURE:CLICK !");
});

document.body.addEventListener("pointermove", function(event){
document.body.addEventListener("pointermove", function (event) {
logit(event.target.id + ":pointermove (" + event.clientX + "/" + event.clientY + ")");
});

Expand All @@ -108,11 +116,11 @@
}, false);

// clear log on double click
msgArea.addEventListener("dblclick", function(event){
msgArea.addEventListener("dblclick", function (event) {
msgArea.innerHTML = "";
});

function logit(msg){
function logit(msg) {
msgArea.innerHTML = msg + "</br>" + msgArea.innerHTML;
}
});
Expand Down
28 changes: 17 additions & 11 deletions samples/paint-with-capture.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,19 @@
}
</style>

<script>var require = {baseUrl: "../.."}</script>
<script type="text/javascript" src="../../requirejs/require.js"></script>

<script type="text/javascript">
require.config({
baseUrl: "../.."
});
</script>

<script type="text/javascript">
requirejs([
require([
"dpointer/events",
"requirejs-domready/domReady!"
], function(pointer){
], function (pointer) {
var canvas = document.getElementById("drawingArea");
var context = canvas.getContext("2d");
canvas.height = window.innerHeight;
Expand All @@ -63,23 +69,23 @@
var captured = {};

// catch Pointer Down events and set capture on canvas
canvas.addEventListener("pointerdown", function(event){
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){
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){
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]){
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.
Expand All @@ -88,18 +94,18 @@
}
});
// reset canvas on double tap/click
canvas.addEventListener("dblclick", function(){
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){
get: function (pointerId) {
return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
},
next: function(){
next: function () {
this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
return (this.colors[this.index]);
}
Expand Down
23 changes: 14 additions & 9 deletions samples/paint.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,40 +43,46 @@
}
</style>

<script>var require = {baseUrl: "../.."}</script>
<script type="text/javascript" src="../../requirejs/require.js"></script>

<script type="text/javascript">
require.config({
baseUrl: "../.."
});
</script>

<script type="text/javascript">
requirejs([
require([
"dpointer/events",
"requirejs-domready/domReady!"
], function(pointer){
], 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){
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.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){
get: function (pointerId) {
return ( (this[pointerId]) || ((this[pointerId]) = this.next()));
},
next: function(){
next: function () {
this.index = ((this.colors.length - this.index) == 1) ? 0 : (this.index + 1);
return (this.colors[this.index]);
}
Expand All @@ -85,7 +91,6 @@
alert(error);
}
});

</script>

</head>
Expand Down

0 comments on commit 8a16f0d

Please sign in to comment.