From 5940f3e13b882d2c1f11777b71fe5a566abc736c Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Tue, 8 May 2012 18:59:22 +0200 Subject: [PATCH 1/4] adding events for start, rotate, release and fullStop --- demo/js/traqball.js | 28 +++++++++++++++++++++++++--- src/traqball.js | 28 +++++++++++++++++++++++++--- 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/demo/js/traqball.js b/demo/js/traqball.js index aa72ca6..b8e3487 100644 --- a/demo/js/traqball.js +++ b/demo/js/traqball.js @@ -10,6 +10,10 @@ (function(){ var userAgent = navigator.userAgent.toLowerCase(), + startEvent = document.createEvent('HTMLEvents'), + rotateEvent = document.createEvent('HTMLEvents'), + releaseEvent = document.createEvent('HTMLEvents'), + fullStopEvent = document.createEvent('HTMLEvents'), canTouch = "ontouchstart" in window, prefix = cssPref = "", requestAnimFrame, cancelAnimFrame; @@ -29,7 +33,12 @@ }else{ prefix = ""; } - + + startEvent.initEvent("traqballStartRotate", true, true); + rotateEvent.initEvent("traqballRotate", true, true); + releaseEvent.initEvent("traqballRelease", true, true); + fullStopEvent.initEvent("traqballFullStop", true, true); + function bindEvent(target, type, callback, remove){ //translate events var evType = type || "touchend", @@ -207,7 +216,9 @@ mouseDownVect = calcZvector(getCoords(e)); oldTime = curTime = new Date().getTime(); oldAngle = angle; - + + THIS.box.dispatchEvent(startEvent); + bindEvent(THIS.box,'touchstart', startrotation, "remove"); bindEvent(document, 'touchmove', rotate); bindEvent(document, 'touchend', finishrotation); @@ -220,6 +231,9 @@ bindEvent(document, 'touchend', finishrotation, "remove"); bindEvent(THIS.box, 'touchstart', startrotation); calcSpeed(); + + THIS.box.dispatchEvent(releaseEvent); + if( impulse && delta > 0){ requestAnimFrame(slide); }else if(!(isNaN(axis[0]) || isNaN(axis[1]) || isNaN(axis[2]))) { @@ -264,7 +278,9 @@ //Only one thing left to do: Update the position of the box by applying a new transform: // 2 transforms will be applied: the current rotation 3d and the start-matrix THIS.box.style[cssPref+"Transform"] = "rotate3d("+ axis+","+angle+"rad) matrix3d("+startMatrix+")"; - + rotateEvent.data = {axis: axis, angle: angle}; + THIS.box.dispatchEvent(rotateEvent); + curTime = new Date().getTime(); } @@ -287,6 +303,8 @@ delta = delta > 0 ? delta-decr : 0; THIS.box.style[cssPref+"Transform"] = "rotate3d("+ axis+","+angle+"rad) matrix3d("+startMatrix+")"; + rotateEvent.data = {axis: axis, angle: angle}; + THIS.box.dispatchEvent(rotateEvent); if (delta === 0){ stopSlide(); @@ -298,8 +316,12 @@ function stopSlide(){ cancelAnimFrame(slide); cleanupMatrix(); + oldAngle = angle = 0; delta = 0; + + fullStopEvent.data = {matrix: startMatrix}; + THIS.box.dispatchEvent(fullStopEvent); } //Some stupid matrix-multiplication. diff --git a/src/traqball.js b/src/traqball.js index aa72ca6..b8e3487 100644 --- a/src/traqball.js +++ b/src/traqball.js @@ -10,6 +10,10 @@ (function(){ var userAgent = navigator.userAgent.toLowerCase(), + startEvent = document.createEvent('HTMLEvents'), + rotateEvent = document.createEvent('HTMLEvents'), + releaseEvent = document.createEvent('HTMLEvents'), + fullStopEvent = document.createEvent('HTMLEvents'), canTouch = "ontouchstart" in window, prefix = cssPref = "", requestAnimFrame, cancelAnimFrame; @@ -29,7 +33,12 @@ }else{ prefix = ""; } - + + startEvent.initEvent("traqballStartRotate", true, true); + rotateEvent.initEvent("traqballRotate", true, true); + releaseEvent.initEvent("traqballRelease", true, true); + fullStopEvent.initEvent("traqballFullStop", true, true); + function bindEvent(target, type, callback, remove){ //translate events var evType = type || "touchend", @@ -207,7 +216,9 @@ mouseDownVect = calcZvector(getCoords(e)); oldTime = curTime = new Date().getTime(); oldAngle = angle; - + + THIS.box.dispatchEvent(startEvent); + bindEvent(THIS.box,'touchstart', startrotation, "remove"); bindEvent(document, 'touchmove', rotate); bindEvent(document, 'touchend', finishrotation); @@ -220,6 +231,9 @@ bindEvent(document, 'touchend', finishrotation, "remove"); bindEvent(THIS.box, 'touchstart', startrotation); calcSpeed(); + + THIS.box.dispatchEvent(releaseEvent); + if( impulse && delta > 0){ requestAnimFrame(slide); }else if(!(isNaN(axis[0]) || isNaN(axis[1]) || isNaN(axis[2]))) { @@ -264,7 +278,9 @@ //Only one thing left to do: Update the position of the box by applying a new transform: // 2 transforms will be applied: the current rotation 3d and the start-matrix THIS.box.style[cssPref+"Transform"] = "rotate3d("+ axis+","+angle+"rad) matrix3d("+startMatrix+")"; - + rotateEvent.data = {axis: axis, angle: angle}; + THIS.box.dispatchEvent(rotateEvent); + curTime = new Date().getTime(); } @@ -287,6 +303,8 @@ delta = delta > 0 ? delta-decr : 0; THIS.box.style[cssPref+"Transform"] = "rotate3d("+ axis+","+angle+"rad) matrix3d("+startMatrix+")"; + rotateEvent.data = {axis: axis, angle: angle}; + THIS.box.dispatchEvent(rotateEvent); if (delta === 0){ stopSlide(); @@ -298,8 +316,12 @@ function stopSlide(){ cancelAnimFrame(slide); cleanupMatrix(); + oldAngle = angle = 0; delta = 0; + + fullStopEvent.data = {matrix: startMatrix}; + THIS.box.dispatchEvent(fullStopEvent); } //Some stupid matrix-multiplication. From cbe2d931b87c4662a2318dd4333df95f909fbcfe Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Tue, 15 May 2012 16:25:44 +0200 Subject: [PATCH 2/4] configuring the stage now also accepts a pre-selected element --- README.md | 2 +- demo/js/traqball.js | 11 ++++++++--- src/traqball.js | 11 ++++++++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 1d0cd8b..0f1466d 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ var mytraqball = new Traqball(configurationObject); ``` js { - stage: "stage", // id of block element. String, default value: + stage: "stage", // id (String) of block element or selected DOM-Element. Default value: axis: [0.5,1,0.25], // X,Y,Z values of initial rotation vector. Array, default value: [1,0,0] angle: 0.12, // Initial rotation angle in radian. Float, default value: 0. perspective: perspectiveValue, // Perspective. Integer, default value 700. diff --git a/demo/js/traqball.js b/demo/js/traqball.js index b8e3487..82a3f3d 100644 --- a/demo/js/traqball.js +++ b/demo/js/traqball.js @@ -88,7 +88,9 @@ })(); var Traqball = function(confObj){ - this.config = {}; + this.config = { + stage: document.body + }; this.box = null; this.setup(confObj); @@ -127,8 +129,11 @@ for(var prop in conf){ THIS.config[prop] = conf[prop]; } - - stage = document.getElementById(THIS.config.stage) || document.getElementsByTagname("body")[0]; + + if (typeof THIS.config.stage === 'string') { + THIS.config.stage = document.getElementById(THIS.config.stage); + } + stage = THIS.config.stage; pos = findPos(stage); angle = THIS.config.angle || 0; impulse = THIS.config.impulse === false ? false : true; diff --git a/src/traqball.js b/src/traqball.js index b8e3487..82a3f3d 100644 --- a/src/traqball.js +++ b/src/traqball.js @@ -88,7 +88,9 @@ })(); var Traqball = function(confObj){ - this.config = {}; + this.config = { + stage: document.body + }; this.box = null; this.setup(confObj); @@ -127,8 +129,11 @@ for(var prop in conf){ THIS.config[prop] = conf[prop]; } - - stage = document.getElementById(THIS.config.stage) || document.getElementsByTagname("body")[0]; + + if (typeof THIS.config.stage === 'string') { + THIS.config.stage = document.getElementById(THIS.config.stage); + } + stage = THIS.config.stage; pos = findPos(stage); angle = THIS.config.angle || 0; impulse = THIS.config.impulse === false ? false : true; From c550317f8bc13cbf1b0814932c9b9d67a4fd4ed1 Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Tue, 15 May 2012 16:26:51 +0200 Subject: [PATCH 3/4] activationArea can now be different from box. This enables dragging even when the element is orthogonal to the display plane --- README.md | 1 + demo/js/traqball.js | 11 +++++++---- src/traqball.js | 11 +++++++---- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 0f1466d..6d3d29d 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ var mytraqball = new Traqball(configurationObject); ``` js { stage: "stage", // id (String) of block element or selected DOM-Element. Default value: + activationElement: "stage", // DOM-Element that catches the events. Default value: first child of stage (the rotating element) axis: [0.5,1,0.25], // X,Y,Z values of initial rotation vector. Array, default value: [1,0,0] angle: 0.12, // Initial rotation angle in radian. Float, default value: 0. perspective: perspectiveValue, // Perspective. Integer, default value 700. diff --git a/demo/js/traqball.js b/demo/js/traqball.js index 82a3f3d..c70f021 100644 --- a/demo/js/traqball.js +++ b/demo/js/traqball.js @@ -98,7 +98,7 @@ Traqball.prototype.disable = function(){ if(this.box !== null){ - bindEvent(this.box, 'touchstart', this.evHandlers[0], "remove"); + bindEvent(this.config.activationArea, 'touchstart', this.evHandlers[0], "remove"); bindEvent(document, 'touchmove', this.evHandlers[1], "remove"); bindEvent(document, 'touchend', this.evHandlers[2], "remove"); } @@ -106,7 +106,7 @@ Traqball.prototype.activate = function(){ if(this.box !== null){ - bindEvent(this.box, 'touchstart', this.evHandlers[0]); + bindEvent(this.config.activationArea, 'touchstart', this.evHandlers[0]); bindEvent(document, 'touchmove', this.evHandlers[1], "remove"); bindEvent(document, 'touchend', this.evHandlers[2], "remove"); } @@ -155,6 +155,9 @@ break; } } + if (typeof THIS.config.activationArea === 'undefined') { + THIS.config.activationArea = THIS.box; + } var perspective = getStyle(stage, prefix+"perspective"), pOrigin = getStyle(stage, prefix+"perspective-origin"), @@ -224,7 +227,7 @@ THIS.box.dispatchEvent(startEvent); - bindEvent(THIS.box,'touchstart', startrotation, "remove"); + bindEvent(THIS.config.activationArea,'touchstart', startrotation, "remove"); bindEvent(document, 'touchmove', rotate); bindEvent(document, 'touchend', finishrotation); } @@ -234,7 +237,7 @@ bindEvent(document, 'touchmove', rotate, "remove"); bindEvent(document, 'touchend', finishrotation, "remove"); - bindEvent(THIS.box, 'touchstart', startrotation); + bindEvent(THIS.config.activationArea, 'touchstart', startrotation); calcSpeed(); THIS.box.dispatchEvent(releaseEvent); diff --git a/src/traqball.js b/src/traqball.js index 82a3f3d..c70f021 100644 --- a/src/traqball.js +++ b/src/traqball.js @@ -98,7 +98,7 @@ Traqball.prototype.disable = function(){ if(this.box !== null){ - bindEvent(this.box, 'touchstart', this.evHandlers[0], "remove"); + bindEvent(this.config.activationArea, 'touchstart', this.evHandlers[0], "remove"); bindEvent(document, 'touchmove', this.evHandlers[1], "remove"); bindEvent(document, 'touchend', this.evHandlers[2], "remove"); } @@ -106,7 +106,7 @@ Traqball.prototype.activate = function(){ if(this.box !== null){ - bindEvent(this.box, 'touchstart', this.evHandlers[0]); + bindEvent(this.config.activationArea, 'touchstart', this.evHandlers[0]); bindEvent(document, 'touchmove', this.evHandlers[1], "remove"); bindEvent(document, 'touchend', this.evHandlers[2], "remove"); } @@ -155,6 +155,9 @@ break; } } + if (typeof THIS.config.activationArea === 'undefined') { + THIS.config.activationArea = THIS.box; + } var perspective = getStyle(stage, prefix+"perspective"), pOrigin = getStyle(stage, prefix+"perspective-origin"), @@ -224,7 +227,7 @@ THIS.box.dispatchEvent(startEvent); - bindEvent(THIS.box,'touchstart', startrotation, "remove"); + bindEvent(THIS.config.activationArea,'touchstart', startrotation, "remove"); bindEvent(document, 'touchmove', rotate); bindEvent(document, 'touchend', finishrotation); } @@ -234,7 +237,7 @@ bindEvent(document, 'touchmove', rotate, "remove"); bindEvent(document, 'touchend', finishrotation, "remove"); - bindEvent(THIS.box, 'touchstart', startrotation); + bindEvent(THIS.config.activationArea, 'touchstart', startrotation); calcSpeed(); THIS.box.dispatchEvent(releaseEvent); From 2026832e29b9a2dd24d0fb9b639123c5e97e9977 Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Wed, 30 May 2012 15:12:12 +0200 Subject: [PATCH 4/4] minor bugfix: one spot was still missing the activationArea --- src/traqball.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/traqball.js b/src/traqball.js index c70f021..78f1a0c 100644 --- a/src/traqball.js +++ b/src/traqball.js @@ -211,7 +211,7 @@ } THIS.box.style[cssPref+"Transform"] = "matrix3d("+ startMatrix+")"; - bindEvent(THIS.box, 'touchstart', startrotation); + bindEvent(THIS.config.activationArea, 'touchstart', startrotation); THIS.evHandlers = [startrotation, rotate, finishrotation]; })();