src/main/resources/mouse.js

   1
   2 /* ***** BEGIN LICENSE BLOCK *****
   3  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   4  *
   5  * The contents of this file are subject to the Mozilla Public License Version
   6  * 1.1 (the "License"); you may not use this file except in compliance with
   7  * the License. You may obtain a copy of the License at
   8  * http://www.mozilla.org/MPL/
   9  *
  10  * Software distributed under the License is distributed on an "AS IS" basis,
  11  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  12  * for the specific language governing rights and limitations under the
  13  * License.
  14  *
  15  * The Original Code is guacamole-common-js.
  16  *
  17  * The Initial Developer of the Original Code is
  18  * Michael Jumper.
  19  * Portions created by the Initial Developer are Copyright (C) 2010
  20  * the Initial Developer. All Rights Reserved.
  21  *
  22  * Contributor(s):
  23  *
  24  * Alternatively, the contents of this file may be used under the terms of
  25  * either the GNU General Public License Version 2 or later (the "GPL"), or
  26  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  27  * in which case the provisions of the GPL or the LGPL are applicable instead
  28  * of those above. If you wish to allow use of your version of this file only
  29  * under the terms of either the GPL or the LGPL, and not to allow others to
  30  * use your version of this file under the terms of the MPL, indicate your
  31  * decision by deleting the provisions above and replace them with the notice
  32  * and other provisions required by the GPL or the LGPL. If you do not delete
  33  * the provisions above, a recipient may use your version of this file under
  34  * the terms of any one of the MPL, the GPL or the LGPL.
  35  *
  36  * ***** END LICENSE BLOCK ***** */
  37
  38 // Guacamole namespace
  39 var Guacamole = Guacamole || {};
  40
  41 /**
  42  * Provides cross-browser mouse events for a given element. The events of
  43  * the given element are automatically populated with handlers that translate
  44  * mouse events into a non-browser-specific event provided by the
  45  * Guacamole.Mouse instance.
  46  *
  47  * @constructor
  48  * @param {Element} element The Element to use to provide mouse events.
  49  */
  50 Guacamole.Mouse = function(element) {
  51
  52     /**
  53      * Reference to this Guacamole.Mouse.
  54      * @private
  55      */
  56     var guac_mouse = this;
  57
  58     /**
  59      * The current mouse state. The properties of this state are updated when
  60      * mouse events fire. This state object is also passed in as a parameter to
  61      * the handler of any mouse events.
  62      *
  63      * @type Guacamole.Mouse.State
  64      */
  65     this.currentState = new Guacamole.Mouse.State(
  66         0, 0,
  67         false, false, false, false, false
  68     );
  69
  70     /**
  71      * Fired whenever the user presses a mouse button down over the element
  72      * associated with this Guacamole.Mouse.
  73      *
  74      * @event
  75      * @param {Guacamole.Mouse.State} state The current mouse state.
  76      */
  77         this.onmousedown = null;
  78
  79     /**
  80      * Fired whenever the user releases a mouse button down over the element
  81      * associated with this Guacamole.Mouse.
  82      *
  83      * @event
  84      * @param {Guacamole.Mouse.State} state The current mouse state.
  85      */
  86         this.onmouseup = null;
  87
  88     /**
  89      * Fired whenever the user moves the mouse over the element associated with
  90      * this Guacamole.Mouse.
  91      *
  92      * @event
  93      * @param {Guacamole.Mouse.State} state The current mouse state.
  94      */
  95         this.onmousemove = null;
  96
  97     /**
  98      * Zero-delay timeout set when mouse events are fired, and canceled when
  99      * touch events are detected, in order to prevent touch events registering
 100      * as mouse events (some browsers will do this).
 101      */
 102     var deferred_mouse_event = null;
 103
 104     /**
 105      * Flag which, when set to true, will cause all mouse events to be
 106      * ignored. Used to temporarily ignore events when generated by
 107      * touch events, and not by a mouse.
 108      */
 109     var ignore_mouse = false;
 110
 111     /**
 112      * Forces all mouse events to be ignored until the event queue is flushed.
 113      */
 114     function ignorePendingMouseEvents() {
 115
 116         // Cancel deferred event
 117         if (deferred_mouse_event) {
 118             window.clearTimeout(deferred_mouse_event);
 119             deferred_mouse_event = null;
 120         }
 121
 122         // Ignore all other events until end of event loop
 123         ignore_mouse = true;
 124         window.setTimeout(function() {
 125             ignore_mouse = false;
 126         }, 0);
 127
 128     }
 129
 130     function cancelEvent(e) {
 131         e.stopPropagation();
 132         if (e.preventDefault) e.preventDefault();
 133         e.returnValue = false;
 134     }
 135
 136     // Block context menu so right-click gets sent properly
 137     element.addEventListener("contextmenu", function(e) {
 138         cancelEvent(e);
 139     }, false);
 140
 141     element.addEventListener("mousemove", function(e) {
 142
 143         cancelEvent(e);
 144
 145         // If artificial event detected, ignore currently pending events
 146         if (deferred_mouse_event)
 147             ignorePendingMouseEvents();
 148
 149         if (ignore_mouse)
 150             return;
 151
 152         guac_mouse.currentState.fromClientPosition(element, e.clientX, e.clientY);
 153
 154         if (guac_mouse.onmousemove)
 155             deferred_mouse_event = window.setTimeout(function() {
 156                 guac_mouse.onmousemove(guac_mouse.currentState);
 157                 deferred_mouse_event = null;
 158             }, 0);
 159
 160     }, false);
 161
 162     element.addEventListener("mousedown", function(e) {
 163
 164         cancelEvent(e);
 165
 166         // If artificial event detected, ignore currently pending events
 167         if (deferred_mouse_event)
 168             ignorePendingMouseEvents();
 169
 170         if (ignore_mouse)
 171             return;
 172
 173         switch (e.button) {
 174             case 0:
 175                 guac_mouse.currentState.left = true;
 176                 break;
 177             case 1:
 178                 guac_mouse.currentState.middle = true;
 179                 break;
 180             case 2:
 181                 guac_mouse.currentState.right = true;
 182                 break;
 183         }
 184
 185         if (guac_mouse.onmousedown)
 186             deferred_mouse_event = window.setTimeout(function() {
 187                 guac_mouse.onmousedown(guac_mouse.currentState);
 188                 deferred_mouse_event = null;
 189             }, 0);
 190
 191     }, false);
 192
 193     element.addEventListener("mouseup", function(e) {
 194
 195         cancelEvent(e);
 196
 197         // If artificial event detected, ignore currently pending events
 198         if (deferred_mouse_event)
 199             ignorePendingMouseEvents();
 200
 201         if (ignore_mouse)
 202             return;
 203
 204         switch (e.button) {
 205             case 0:
 206                 guac_mouse.currentState.left = false;
 207                 break;
 208             case 1:
 209                 guac_mouse.currentState.middle = false;
 210                 break;
 211             case 2:
 212                 guac_mouse.currentState.right = false;
 213                 break;
 214         }
 215
 216         if (guac_mouse.onmouseup)
 217             deferred_mouse_event = window.setTimeout(function() {
 218                 guac_mouse.onmouseup(guac_mouse.currentState);
 219                 deferred_mouse_event = null;
 220             }, 0);
 221
 222     }, false);
 223
 224     element.addEventListener("mouseout", function(e) {
 225
 226         // Get parent of the element the mouse pointer is leaving
 227         if (!e) e = window.event;
 228
 229         // Check that mouseout is due to actually LEAVING the element
 230         var target = e.relatedTarget || e.toElement;
 231         while (target != null) {
 232             if (target === element)
 233                 return;
 234             target = target.parentNode;
 235         }
 236
 237         cancelEvent(e);
 238
 239         // Release all buttons
 240         if (guac_mouse.currentState.left
 241             || guac_mouse.currentState.middle
 242             || guac_mouse.currentState.right) {
 243
 244             guac_mouse.currentState.left = false;
 245             guac_mouse.currentState.middle = false;
 246             guac_mouse.currentState.right = false;
 247
 248             if (guac_mouse.onmouseup)
 249                 guac_mouse.onmouseup(guac_mouse.currentState);
 250         }
 251
 252     }, false);
 253
 254     // Override selection on mouse event element.
 255     element.addEventListener("selectstart", function(e) {
 256         cancelEvent(e);
 257     }, false);
 258
 259
 260     // Ignore all pending mouse events when touch events are the apparent source
 261     element.addEventListener("touchmove",  ignorePendingMouseEvents, false);
 262     element.addEventListener("touchstart", ignorePendingMouseEvents, false);
 263     element.addEventListener("touchend",   ignorePendingMouseEvents, false);
 264
 265     // Scroll wheel support
 266     function mousewheel_handler(e) {
 267
 268         var delta = 0;
 269         if (e.detail)
 270             delta = e.detail;
 271         else if (e.wheelDelta)
 272             delta = -event.wheelDelta;
 273
 274         // Up
 275         if (delta < 0) {
 276             if (guac_mouse.onmousedown) {
 277                 guac_mouse.currentState.up = true;
 278                 guac_mouse.onmousedown(guac_mouse.currentState);
 279             }
 280
 281             if (guac_mouse.onmouseup) {
 282                 guac_mouse.currentState.up = false;
 283                 guac_mouse.onmouseup(guac_mouse.currentState);
 284             }
 285         }
 286
 287         // Down
 288         if (delta > 0) {
 289             if (guac_mouse.onmousedown) {
 290                 guac_mouse.currentState.down = true;
 291                 guac_mouse.onmousedown(guac_mouse.currentState);
 292             }
 293
 294             if (guac_mouse.onmouseup) {
 295                 guac_mouse.currentState.down = false;
 296                 guac_mouse.onmouseup(guac_mouse.currentState);
 297             }
 298         }
 299
 300         cancelEvent(e);
 301
 302     }
 303     element.addEventListener('DOMMouseScroll', mousewheel_handler, false);
 304     element.addEventListener('mousewheel',     mousewheel_handler, false);
 305
 306 };
 307
 308
 309 /**
 310  * Provides cross-browser relative touch event translation for a given element.
 311  *
 312  * Touch events are translated into mouse events as if the touches occurred
 313  * on a touchpad (drag to push the mouse pointer, tap to click).
 314  *
 315  * @constructor
 316  * @param {Element} element The Element to use to provide touch events.
 317  */
 318 Guacamole.Mouse.Touchpad = function(element) {
 319
 320     /**
 321      * Reference to this Guacamole.Mouse.Touchpad.
 322      * @private
 323      */
 324     var guac_touchpad = this;
 325
 326     /**
 327      * The distance a two-finger touch must move per scrollwheel event, in
 328      * pixels.
 329      */
 330     this.scrollThreshold = 20 * (window.devicePixelRatio || 1);
 331
 332     /**
 333      * The maximum number of milliseconds to wait for a touch to end for the
 334      * gesture to be considered a click.
 335      */
 336     this.clickTimingThreshold = 250;
 337
 338     /**
 339      * The maximum number of pixels to allow a touch to move for the gesture to
 340      * be considered a click.
 341      */
 342     this.clickMoveThreshold = 10 * (window.devicePixelRatio || 1);
 343
 344     /**
 345      * The current mouse state. The properties of this state are updated when
 346      * mouse events fire. This state object is also passed in as a parameter to
 347      * the handler of any mouse events.
 348      *
 349      * @type Guacamole.Mouse.State
 350      */
 351     this.currentState = new Guacamole.Mouse.State(
 352         0, 0,
 353         false, false, false, false, false
 354     );
 355
 356     /**
 357      * Fired whenever a mouse button is effectively pressed. This can happen
 358      * as part of a "click" gesture initiated by the user by tapping one
 359      * or more fingers over the touchpad element, as part of a "scroll"
 360      * gesture initiated by dragging two fingers up or down, etc.
 361      *
 362      * @event
 363      * @param {Guacamole.Mouse.State} state The current mouse state.
 364      */
 365         this.onmousedown = null;
 366
 367     /**
 368      * Fired whenever a mouse button is effectively released. This can happen
 369      * as part of a "click" gesture initiated by the user by tapping one
 370      * or more fingers over the touchpad element, as part of a "scroll"
 371      * gesture initiated by dragging two fingers up or down, etc.
 372      *
 373      * @event
 374      * @param {Guacamole.Mouse.State} state The current mouse state.
 375      */
 376         this.onmouseup = null;
 377
 378     /**
 379      * Fired whenever the user moves the mouse by dragging their finger over
 380      * the touchpad element.
 381      *
 382      * @event
 383      * @param {Guacamole.Mouse.State} state The current mouse state.
 384      */
 385         this.onmousemove = null;
 386
 387     var touch_count = 0;
 388     var last_touch_x = 0;
 389     var last_touch_y = 0;
 390     var last_touch_time = 0;
 391     var pixels_moved = 0;
 392
 393     var touch_buttons = {
 394         1: "left",
 395         2: "right",
 396         3: "middle"
 397     };
 398
 399     var gesture_in_progress = false;
 400     var click_release_timeout = null;
 401
 402     element.addEventListener("touchend", function(e) {
 403
 404         e.stopPropagation();
 405         e.preventDefault();
 406
 407         // If we're handling a gesture AND this is the last touch
 408         if (gesture_in_progress && e.touches.length == 0) {
 409
 410             var time = new Date().getTime();
 411
 412             // Get corresponding mouse button
 413             var button = touch_buttons[touch_count];
 414
 415             // If mouse already down, release anad clear timeout
 416             if (guac_touchpad.currentState[button]) {
 417
 418                 // Fire button up event
 419                 guac_touchpad.currentState[button] = false;
 420                 if (guac_touchpad.onmouseup)
 421                     guac_touchpad.onmouseup(guac_touchpad.currentState);
 422
 423                 // Clear timeout, if set
 424                 if (click_release_timeout) {
 425                     window.clearTimeout(click_release_timeout);
 426                     click_release_timeout = null;
 427                 }
 428
 429             }
 430
 431             // If single tap detected (based on time and distance)
 432             if (time - last_touch_time <= guac_touchpad.clickTimingThreshold
 433                     && pixels_moved < guac_touchpad.clickMoveThreshold) {
 434
 435                 // Fire button down event
 436                 guac_touchpad.currentState[button] = true;
 437                 if (guac_touchpad.onmousedown)
 438                     guac_touchpad.onmousedown(guac_touchpad.currentState);
 439
 440                 // Delay mouse up - mouse up should be canceled if
 441                 // touchstart within timeout.
 442                 click_release_timeout = window.setTimeout(function() {
 443
 444                     // Fire button up event
 445                     guac_touchpad.currentState[button] = false;
 446                     if (guac_touchpad.onmouseup)
 447                         guac_touchpad.onmouseup(guac_touchpad.currentState);
 448
 449                     // Gesture now over
 450                     gesture_in_progress = false;
 451
 452                 }, guac_touchpad.clickTimingThreshold);
 453
 454             }
 455
 456             // If we're not waiting to see if this is a click, stop gesture
 457             if (!click_release_timeout)
 458                 gesture_in_progress = false;
 459
 460         }
 461
 462     }, false);
 463
 464     element.addEventListener("touchstart", function(e) {
 465
 466         e.stopPropagation();
 467         e.preventDefault();
 468
 469         // Track number of touches, but no more than three
 470         touch_count = Math.min(e.touches.length, 3);
 471
 472         // Clear timeout, if set
 473         if (click_release_timeout) {
 474             window.clearTimeout(click_release_timeout);
 475             click_release_timeout = null;
 476         }
 477
 478         // Record initial touch location and time for touch movement
 479         // and tap gestures
 480         if (!gesture_in_progress) {
 481
 482             // Stop mouse events while touching
 483             gesture_in_progress = true;
 484
 485             // Record touch location and time
 486             var starting_touch = e.touches[0];
 487             last_touch_x = starting_touch.clientX;
 488             last_touch_y = starting_touch.clientY;
 489             last_touch_time = new Date().getTime();
 490             pixels_moved = 0;
 491
 492         }
 493
 494     }, false);
 495
 496     element.addEventListener("touchmove", function(e) {
 497
 498         e.stopPropagation();
 499         e.preventDefault();
 500
 501         // Get change in touch location
 502         var touch = e.touches[0];
 503         var delta_x = touch.clientX - last_touch_x;
 504         var delta_y = touch.clientY - last_touch_y;
 505
 506         // Track pixels moved
 507         pixels_moved += Math.abs(delta_x) + Math.abs(delta_y);
 508
 509         // If only one touch involved, this is mouse move
 510         if (touch_count == 1) {
 511
 512             // Calculate average velocity in Manhatten pixels per millisecond
 513             var velocity = pixels_moved / (new Date().getTime() - last_touch_time);
 514
 515             // Scale mouse movement relative to velocity
 516             var scale = 1 + velocity;
 517
 518             // Update mouse location
 519             guac_touchpad.currentState.x += delta_x*scale;
 520             guac_touchpad.currentState.y += delta_y*scale;
 521
 522             // Prevent mouse from leaving screen
 523
 524             if (guac_touchpad.currentState.x < 0)
 525                 guac_touchpad.currentState.x = 0;
 526             else if (guac_touchpad.currentState.x >= element.offsetWidth)
 527                 guac_touchpad.currentState.x = element.offsetWidth - 1;
 528
 529             if (guac_touchpad.currentState.y < 0)
 530                 guac_touchpad.currentState.y = 0;
 531             else if (guac_touchpad.currentState.y >= element.offsetHeight)
 532                 guac_touchpad.currentState.y = element.offsetHeight - 1;
 533
 534             // Fire movement event, if defined
 535             if (guac_touchpad.onmousemove)
 536                 guac_touchpad.onmousemove(guac_touchpad.currentState);
 537
 538             // Update touch location
 539             last_touch_x = touch.clientX;
 540             last_touch_y = touch.clientY;
 541
 542         }
 543
 544         // Interpret two-finger swipe as scrollwheel
 545         else if (touch_count == 2) {
 546
 547             // If change in location passes threshold for scroll
 548             if (Math.abs(delta_y) >= guac_touchpad.scrollThreshold) {
 549
 550                 // Decide button based on Y movement direction
 551                 var button;
 552                 if (delta_y > 0) button = "down";
 553                 else             button = "up";
 554
 555                 // Fire button down event
 556                 guac_touchpad.currentState[button] = true;
 557                 if (guac_touchpad.onmousedown)
 558                     guac_touchpad.onmousedown(guac_touchpad.currentState);
 559
 560                 // Fire button up event
 561                 guac_touchpad.currentState[button] = false;
 562                 if (guac_touchpad.onmouseup)
 563                     guac_touchpad.onmouseup(guac_touchpad.currentState);
 564
 565                 // Only update touch location after a scroll has been
 566                 // detected
 567                 last_touch_x = touch.clientX;
 568                 last_touch_y = touch.clientY;
 569
 570             }
 571
 572         }
 573
 574     }, false);
 575
 576 };
 577
 578 /**
 579  * Provides cross-browser absolute touch event translation for a given element.
 580  *
 581  * Touch events are translated into mouse events as if the touches occurred
 582  * on a touchscreen (tapping anywhere on the screen clicks at that point,
 583  * long-press to right-click).
 584  *
 585  * @constructor
 586  * @param {Element} element The Element to use to provide touch events.
 587  */
 588 Guacamole.Mouse.Touchscreen = function(element) {
 589
 590     /**
 591      * Reference to this Guacamole.Mouse.Touchscreen.
 592      * @private
 593      */
 594     var guac_touchscreen = this;
 595
 596     /**
 597      * The distance a two-finger touch must move per scrollwheel event, in
 598      * pixels.
 599      */
 600     this.scrollThreshold = 20 * (window.devicePixelRatio || 1);
 601
 602     /**
 603      * The current mouse state. The properties of this state are updated when
 604      * mouse events fire. This state object is also passed in as a parameter to
 605      * the handler of any mouse events.
 606      *
 607      * @type Guacamole.Mouse.State
 608      */
 609     this.currentState = new Guacamole.Mouse.State(
 610         0, 0,
 611         false, false, false, false, false
 612     );
 613
 614     /**
 615      * Fired whenever a mouse button is effectively pressed. This can happen
 616      * as part of a "mousedown" gesture initiated by the user by pressing one
 617      * finger over the touchscreen element, as part of a "scroll" gesture
 618      * initiated by dragging two fingers up or down, etc.
 619      *
 620      * @event
 621      * @param {Guacamole.Mouse.State} state The current mouse state.
 622      */
 623         this.onmousedown = null;
 624
 625     /**
 626      * Fired whenever a mouse button is effectively released. This can happen
 627      * as part of a "mouseup" gesture initiated by the user by removing the
 628      * finger pressed against the touchscreen element, or as part of a "scroll"
 629      * gesture initiated by dragging two fingers up or down, etc.
 630      *
 631      * @event
 632      * @param {Guacamole.Mouse.State} state The current mouse state.
 633      */
 634         this.onmouseup = null;
 635
 636     /**
 637      * Fired whenever the user moves the mouse by dragging their finger over
 638      * the touchscreen element. Note that unlike Guacamole.Mouse.Touchpad,
 639      * dragging a finger over the touchscreen element will always cause
 640      * the mouse button to be effectively down, as if clicking-and-dragging.
 641      *
 642      * @event
 643      * @param {Guacamole.Mouse.State} state The current mouse state.
 644      */
 645         this.onmousemove = null;
 646
 647     element.addEventListener("touchend", function(e) {
 648
 649         // Ignore if more than one touch
 650         if (e.touches.length + e.changedTouches.length != 1)
 651             return;
 652
 653         e.stopPropagation();
 654         e.preventDefault();
 655
 656         // Release button
 657         guac_touchscreen.currentState.left = false;
 658
 659         // Fire release event when the last touch is released, if event defined
 660         if (e.touches.length == 0 && guac_touchscreen.onmouseup)
 661             guac_touchscreen.onmouseup(guac_touchscreen.currentState);
 662
 663     }, false);
 664
 665     element.addEventListener("touchstart", function(e) {
 666
 667         // Ignore if more than one touch
 668         if (e.touches.length != 1)
 669             return;
 670
 671         e.stopPropagation();
 672         e.preventDefault();
 673
 674         // Get touch
 675         var touch = e.touches[0];
 676
 677         // Update state
 678         guac_touchscreen.currentState.left = true;
 679         guac_touchscreen.currentState.fromClientPosition(element, touch.clientX, touch.clientY);
 680
 681         // Fire press event, if defined
 682         if (guac_touchscreen.onmousedown)
 683             guac_touchscreen.onmousedown(guac_touchscreen.currentState);
 684
 685
 686     }, false);
 687
 688     element.addEventListener("touchmove", function(e) {
 689
 690         // Ignore if more than one touch
 691         if (e.touches.length != 1)
 692             return;
 693
 694         e.stopPropagation();
 695         e.preventDefault();
 696
 697         // Get touch
 698         var touch = e.touches[0];
 699
 700         // Update state
 701         guac_touchscreen.currentState.fromClientPosition(element, touch.clientX, touch.clientY);
 702
 703         // Fire movement event, if defined
 704         if (guac_touchscreen.onmousemove)
 705             guac_touchscreen.onmousemove(guac_touchscreen.currentState);
 706
 707     }, false);
 708
 709 };
 710
 711 /**
 712  * Simple container for properties describing the state of a mouse.
 713  *
 714  * @constructor
 715  * @param {Number} x The X position of the mouse pointer in pixels.
 716  * @param {Number} y The Y position of the mouse pointer in pixels.
 717  * @param {Boolean} left Whether the left mouse button is pressed.
 718  * @param {Boolean} middle Whether the middle mouse button is pressed.
 719  * @param {Boolean} right Whether the right mouse button is pressed.
 720  * @param {Boolean} up Whether the up mouse button is pressed (the fourth
 721  *                     button, usually part of a scroll wheel).
 722  * @param {Boolean} down Whether the down mouse button is pressed (the fifth
 723  *                       button, usually part of a scroll wheel).
 724  */
 725 Guacamole.Mouse.State = function(x, y, left, middle, right, up, down) {
 726
 727     /**
 728      * Reference to this Guacamole.Mouse.State.
 729      * @private
 730      */
 731     var guac_state = this;
 732
 733     /**
 734      * The current X position of the mouse pointer.
 735      * @type Number
 736      */
 737     this.x = x;
 738
 739     /**
 740      * The current Y position of the mouse pointer.
 741      * @type Number
 742      */
 743     this.y = y;
 744
 745     /**
 746      * Whether the left mouse button is currently pressed.
 747      * @type Boolean
 748      */
 749     this.left = left;
 750
 751     /**
 752      * Whether the middle mouse button is currently pressed.
 753      * @type Boolean
 754      */
 755     this.middle = middle
 756
 757     /**
 758      * Whether the right mouse button is currently pressed.
 759      * @type Boolean
 760      */
 761     this.right = right;
 762
 763     /**
 764      * Whether the up mouse button is currently pressed. This is the fourth
 765      * mouse button, associated with upward scrolling of the mouse scroll
 766      * wheel.
 767      * @type Boolean
 768      */
 769     this.up = up;
 770
 771     /**
 772      * Whether the down mouse button is currently pressed. This is the fifth
 773      * mouse button, associated with downward scrolling of the mouse scroll
 774      * wheel.
 775      * @type Boolean
 776      */
 777     this.down = down;
 778
 779     /**
 780      * Updates the position represented within this state object by the given
 781      * element and clientX/clientY coordinates (commonly available within event
 782      * objects). Position is translated from clientX/clientY (relative to
 783      * viewport) to element-relative coordinates.
 784      *
 785      * @param {Element} element The element the coordinates should be relative
 786      *                          to.
 787      * @param {Number} clientX The X coordinate to translate, viewport-relative.
 788      * @param {Number} clientY The Y coordinate to translate, viewport-relative.
 789      */
 790     this.fromClientPosition = function(element, clientX, clientY) {
 791
 792         guac_state.x = clientX - element.offsetLeft;
 793         guac_state.y = clientY - element.offsetTop;
 794
 795         // This is all JUST so we can get the mouse position within the element
 796         var parent = element.offsetParent;
 797         while (parent && !(parent === document.body)) {
 798             guac_state.x -= parent.offsetLeft - parent.scrollLeft;
 799             guac_state.y -= parent.offsetTop  - parent.scrollTop;
 800
 801             parent = parent.offsetParent;
 802         }
 803
 804         // Offset by document scroll amount
 805         var documentScrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
 806         var documentScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 807
 808         guac_state.x -= parent.offsetLeft - documentScrollLeft;
 809         guac_state.y -= parent.offsetTop  - documentScrollTop;
 810
 811     };
 812
 813 };
 814