1 /* Name: Input Module 2 Date: April 2011 3 Description: Main module for the input functionality (touch and keyboard) 4 Dependencies: <none> 5 Children: <none> */ 6 7 /* Properties GET FROM JSLINT */ 8 9 /** 10 * Creates an instance of the Input module 11 * 12 * @constructor 13 * @this {Input} 14 * @see input.js 15 */ 16 function Input(){ 17 /** 18 * Reference to device object. 19 * 20 * @type Object 21 */ 22 this.device = null; 23 24 /** 25 * Reference to keyboard 26 * 27 * @type Object 28 */ 29 this.keyboard = null; 30 31 /** 32 * Set device input type. 33 * <i>Device type should be passed from Core.detectPlatform().</i> 34 * @param {String} type Device type. 35 * @this {Input} 36 */ 37 this.setDeviceType = function(type){ 38 if (type === "Mobile"){ 39 this.device = new Touch(); 40 } else if (type === "Desktop"){ 41 this.keyboard = new Keyboard(); 42 this.device = new Mouse(); 43 } 44 }; 45 } 46 47 /** 48 * Get the x or y position of mouse or touch point from the Canvas. 49 * 50 * @param {[object HTMLCanvasElement]} canvas Canvas object. 51 * @param {Event} e Mouse or touch event. 52 * @return {Number} Returns x and y properties with x and y mouse/touch point from the Canvas. 53 * @this {Input} 54 */ 55 function getXY(canvas,e) { 56 if (e.offsetX) { 57 return {x: e.offsetX,y: e.offsetY}; 58 } else if (e.layerX) { 59 return {x: e.layerX-canvas.offsetLeft,y: e.layerY-canvas.offsetTop}; 60 } else { 61 return {x: e.pageX-canvas.offsetLeft,y: e.pageY-canvas.offsetTop}; 62 } 63 }; 64 65 /** 66 * Creates an instance of the Touch object 67 * 68 * @constructor 69 * @this {Touch} 70 * @see input.js 71 */ 72 function Touch(){ 73 /** 74 * Current touch point X. 75 * 76 * @type Number 77 */ 78 Touch.x = null; 79 80 /** 81 * Current touch point y. 82 * 83 * @type Number 84 */ 85 Touch.y = null; 86 87 /** 88 * Current touch points array. 89 * 90 * @type Array 91 */ 92 Touch.points = Array(); 93 94 /** 95 * Current touch state. 96 * 97 * @type Number 98 */ 99 Touch.state = -1; 100 101 /** 102 * Canvas reference. 103 * 104 * @type [object HTMLCanvasElement] 105 */ 106 this.canvas = null; 107 108 /** 109 * Reference to touch object. 110 * 111 * @type Object 112 */ 113 _this = Touch; 114 115 116 /** 117 * Return Input device type. 118 * 119 * @return {String} Input device type. 120 * @this {Touch} 121 */ 122 this.getDeviceType = function(){ 123 return "Touch"; 124 }; 125 126 /** 127 * Return x position of touch point. 128 * 129 * @return {Number} x touch point. 130 * @this {Touch} 131 */ 132 this.getX = function(){ 133 return _this.x; 134 }; 135 136 /** 137 * Return y position of touch point. 138 * 139 * @return {Number} y touch point. 140 * @this {Touch} 141 */ 142 this.getY = function(){ 143 return _this.y; 144 }; 145 146 /** 147 * Setup links to events inside the Touch object. 148 * 149 * @param {[object HTMLCanvasElement]} canvas Canvas object. 150 * @this {Touch} 151 */ 152 this.addEvents = function(canvas){ 153 canvas.ontouchstart = this.ontouchstart; 154 canvas.ontouchmove = this.ontouchmove; 155 canvas.ontouchend = this.ontouchend; 156 _this.canvas = canvas; 157 }; 158 159 /** 160 * Setup links to custom events outside the Touch object. 161 * 162 * @param {[object HTMLCanvasElement]} canvas Canvas object. 163 * @param {Object} ontouchstart Touch start event reference. 164 * @param {Object} ontouchmove Touch move event reference. 165 * @param {Object} ontouchend Touch end event reference. 166 * @this {Touch} 167 */ 168 this.addCustomEvents = function(canvas,ontouchstart,ontouchmove,ontouchend){ 169 canvas.ontouchstart = ontouchstart; 170 canvas.ontouchmove = ontouchmove; 171 canvas.ontouchend = ontouchend; 172 _this.canvas = canvas; 173 }; 174 175 /** 176 * Touch start event 177 * 178 * @param {Event} e Touch start event. 179 * @this {Touch} 180 */ 181 this.ontouchstart = function(e){ 182 e.preventDefault(); 183 184 if (e.touches) { 185 for (var i=1; i<=e.touches.length; i++){ 186 Touch.points[i] = getXY(_this.canvas,e.touches[i-1]); 187 } 188 _this.x = Touch.points[1].x; 189 _this.y = Touch.points[1].y; 190 } 191 _this.state = 0; 192 return false; 193 }; 194 195 /** 196 * Touch move event 197 * 198 * @param {Event} e Touch move event. 199 * @this {Touch} 200 */ 201 this.ontouchmove = function(e){ 202 if (e.touches) { 203 for (var i=1; i<=e.touches.length; i++){ 204 Touch.points[i] = getXY(_this.canvas,e.touches[i-1]); 205 } 206 _this.x = Touch.points[1].x; 207 _this.y = Touch.points[1].y; 208 } 209 _this.state = 1; 210 return false; 211 }; 212 213 /** 214 * Touch end event 215 * 216 * @param {Event} e Touch end event. 217 * @this {Touch} 218 */ 219 this.ontouchend = function(e){ 220 if (e.touches) { 221 for (var i=1; i<=e.touches.length; i++){ 222 Touch.points[i] = getXY(_this.canvas,e.touches[i-1]); 223 } 224 _this.x = Touch.points[1].x; 225 _this.y = Touch.points[1].y; 226 } 227 _this.state = 2; 228 return false; 229 }; 230 231 /** 232 * Get the state of touch input, touchstart, touchmove or touchend. 233 * 234 * @return {String} Returns state string: touchstart, touchmove or touchend. 235 * @this {Touch} 236 */ 237 this.getState = function(){ 238 switch(_this.state){ 239 case 0: 240 return "touchstart"; 241 break; 242 case 1: 243 return "touchmove"; 244 break; 245 case 2: 246 return "touchend"; 247 break; 248 } 249 }; 250 } 251 252 /** 253 * Creates an instance of the Mouse object 254 * 255 * @constructor 256 * @this {Mouse} 257 * @see input.js 258 */ 259 function Mouse(){ 260 /** 261 * Current mouse x. 262 * 263 * @type Number 264 */ 265 Mouse.x = null; 266 267 /** 268 * Current mouse y. 269 * 270 * @type Number 271 */ 272 Mouse.y = null; 273 274 /** 275 * Current mouse state. 276 * 277 * @type Number 278 */ 279 Mouse.state = -1; 280 281 /** 282 * Canvas reference. 283 * 284 * @type [object HTMLCanvasElement] 285 */ 286 this.canvas = null; 287 288 /** 289 * Mouse object reference. 290 * 291 * @type Object 292 */ 293 _this = Mouse; 294 295 /** 296 * Return Input device type. 297 * 298 * @return {String} Input device type. 299 * @this {Mouse} 300 */ 301 this.getDeviceType = function(){ 302 return "Mouse"; 303 }; 304 305 /** 306 * Return x position of mouse point. 307 * 308 * @return {Number} x Mouse point. 309 * @this {Mouse} 310 */ 311 this.getX = function(){ 312 return _this.x; 313 }; 314 315 /** 316 * Return y position of mouse point. 317 * 318 * @return {Number} y Mouse point. 319 * @this {Mouse} 320 */ 321 this.getY = function(){ 322 return _this.y; 323 }; 324 325 /** 326 * Setup links to events inside the Mouse object. 327 * 328 * @param {[object HTMLCanvasElement]} canvas Canvas object. 329 * @this {Mouse} 330 */ 331 this.addEvents = function(canvas){ 332 canvas.onmousedown = this.onmousedown; 333 canvas.onmousemove = this.onmousemove; 334 canvas.onmouseup = this.onmouseup; 335 _this.canvas = canvas; 336 }; 337 338 /** 339 * Setup links to custom events outside the Mouse object. 340 * 341 * @param {[object HTMLCanvasElement]} canvas Canvas object. 342 * @param {Object} onmousedown Mouse down event reference. 343 * @param {Object} onmousemove Mouse move event reference. 344 * @param {Object} onmouseup Mouse up event reference. 345 * @this {Mouse} 346 */ 347 this.addCustomEvents = function(canvas,onmousedown,onmousemove,onmouseup){ 348 canvas.onmousedown = onmousedown; 349 canvas.onmousemove = onmousemove; 350 canvas.onmouseup = onmouseup; 351 _this.canvas = canvas; 352 }; 353 354 /** 355 * Mouse down event. 356 * 357 * @param {Event} e Mouse down event. 358 * @this {Mouse} 359 */ 360 this.onmousedown = function(e){ 361 _this.x = getXY(_this.canvas,e).x; 362 _this.y = getXY(_this.canvas,e).y; 363 _this.state = 0; 364 return false; 365 }; 366 367 /** 368 * Mouse move event. 369 * 370 * @param {Event} e Mouse move event. 371 * @this {Mouse} 372 */ 373 this.onmousemove = function(e){ 374 _this.x = getXY(_this.canvas,e).x; 375 _this.y = getXY(_this.canvas,e).y; 376 _this.state = 1; 377 return false; 378 }; 379 380 /** 381 * Mouse up event. 382 * 383 * @param {Event} e Mouse up event. 384 * @this {Mouse} 385 */ 386 this.onmouseup = function(e){ 387 _this.x = getXY(_this.canvas,e).x; 388 _this.y = getXY(_this.canvas,e).y; 389 _this.state = 2; 390 return false; 391 }; 392 393 /** 394 * Get the state of mouse input, mousedown, mousemove or mouseup. 395 * 396 * @return {String} Returns state string: mousedown, mousemove or mouseup. 397 * @this {Mouse} 398 */ 399 this.getState = function(){ 400 switch(_this.state){ 401 case 0: 402 return "mousedown"; 403 break; 404 case 1: 405 return "mousemove"; 406 break; 407 case 2: 408 return "mouseup"; 409 break; 410 } 411 }; 412 } 413 414 /** 415 * Creates an instance of the Keyboard object 416 * 417 * @constructor 418 * @this {Keyboard} 419 * @see input.js 420 */ 421 function Keyboard(){ 422 /** 423 * Keyboard key array. 424 * 425 * @type Array 426 */ 427 Keyboard.keys = Array(); 428 429 /** 430 * Keyboard event. 431 * 432 * @type Event 433 */ 434 Keyboard.e = null; 435 436 /** 437 * Keyboard key code. 438 * 439 * @type Number 440 */ 441 Keyboard.keyunicode = null; 442 443 /** 444 * Setup links to events inside the Keyboard object. 445 * 446 * @this {Keyboard} 447 */ 448 this.addEvents = function() { 449 document.onkeydown = this.onkeydown; 450 document.onkeyup = this.onkeyup; 451 } 452 453 /** 454 * Setup links to custom events outside the Keyboard object. 455 * 456 * @param {Object} onkeydown Key down event reference. 457 * @param {Object} onkeyup Key up event reference. 458 * @this {Keyboard} 459 */ 460 this.addCustomEvents = function(onkeydown,onkeyup) { 461 document.onkeydown = onkeydown; 462 document.onkeyup = onkeyup; 463 } 464 465 /** 466 * Key down function. 467 * 468 * @param {Event} e Key down event. 469 * @this {Keyboard} 470 */ 471 this.onkeydown = function(e) { 472 Keyboard.e = window.event || e; 473 Keyboard.keyunicode = Keyboard.e.charCode || Keyboard.e.keyCode; 474 var flag = false; 475 476 for (var i=0; i <= Keyboard.keys.length; i++){ 477 if (Keyboard.keys[i] == Keyboard.keyunicode){ 478 flag = true; 479 } 480 } 481 482 if (!flag) 483 Keyboard.keys.push(Keyboard.keyunicode); 484 } 485 486 /** 487 * Key up function. 488 * 489 * @param {Event} e Key up event. 490 * @this {Keyboard} 491 */ 492 this.onkeyup = function(e) { 493 Keyboard.e = window.event || e; 494 Keyboard.keyunicode = Keyboard.e.charCode || Keyboard.e.keyCode; 495 496 for (var i=0; i <= Keyboard.keys.length; i++){ 497 if (Keyboard.keys[i] == Keyboard.keyunicode){ 498 Keyboard.keys[i] = undefined; 499 } 500 } 501 } 502 503 /** 504 * Return keyboard array of key codes. 505 * @return {Array} Array of keyboard key codes. 506 * @this {Keyboard} 507 */ 508 this.getKeyArray = function(){ 509 return Keyboard.keys; 510 } 511 } 512