Source: main/webapp/modules/InputSink.js

  1. /*
  2.  * Licensed to the Apache Software Foundation (ASF) under one
  3.  * or more contributor license agreements.  See the NOTICE file
  4.  * distributed with this work for additional information
  5.  * regarding copyright ownership.  The ASF licenses this file
  6.  * to you under the Apache License, Version 2.0 (the
  7.  * "License"); you may not use this file except in compliance
  8.  * with the License.  You may obtain a copy of the License at
  9.  *
  10.  *   http://www.apache.org/licenses/LICENSE-2.0
  11.  *
  12.  * Unless required by applicable law or agreed to in writing,
  13.  * software distributed under the License is distributed on an
  14.  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15.  * KIND, either express or implied.  See the License for the
  16.  * specific language governing permissions and limitations
  17.  * under the License.
  18.  */
  20. var Guacamole = Guacamole || {};
  22. /**
  23.  * A hidden input field which attempts to keep itself focused at all times,
  24.  * except when another input field has been intentionally focused, whether
  25.  * programatically or by the user. The actual underlying input field, returned
  26.  * by getElement(), may be used as a reliable source of keyboard-related events,
  27.  * particularly composition and input events which may require a focused input
  28.  * field to be dispatched at all.
  29.  *
  30.  * @constructor
  31.  */
  32. Guacamole.InputSink = function InputSink() {
  34.     /**
  35.      * Reference to this instance of Guacamole.InputSink.
  36.      *
  37.      * @private
  38.      * @type {!Guacamole.InputSink}
  39.      */
  40.     var sink = this;
  42.     /**
  43.      * The underlying input field, styled to be invisible.
  44.      *
  45.      * @private
  46.      * @type {!Element}
  47.      */
  48.     var field = document.createElement('textarea');
  49.     field.style.position   = 'fixed';
  50.     field.style.outline    = 'none';
  51.     field.style.border     = 'none';
  52.     field.style.margin     = '0';
  53.     field.style.padding    = '0';
  54.     field.style.height     = '0';
  55.     field.style.width      = '0';
  56.     field.style.left       = '0';
  57.     field.style.bottom     = '0';
  58.     field.style.resize     = 'none';
  59.     field.style.background = 'transparent';
  60.     field.style.color      = 'transparent';
  62.     // Keep field clear when modified via normal keypresses
  63.     field.addEventListener("keypress", function clearKeypress(e) {
  64.         field.value = '';
  65.     }, false);
  67.     // Keep field clear when modofied via composition events
  68.     field.addEventListener("compositionend", function clearCompletedComposition(e) {
  69.         if (e.data)
  70.             field.value = '';
  71.     }, false);
  73.     // Keep field clear when modofied via input events
  74.     field.addEventListener("input", function clearCompletedInput(e) {
  75.         if (e.data && !e.isComposing)
  76.             field.value = '';
  77.     }, false);
  79.     // Whenever focus is gained, automatically click to ensure cursor is
  80.     // actually placed within the field (the field may simply be highlighted or
  81.     // outlined otherwise)
  82.     field.addEventListener("focus", function focusReceived() {
  83.         window.setTimeout(function deferRefocus() {
  84.             field.click();
  85.             field.select();
  86.         }, 0);
  87.     }, true);
  89.     /**
  90.      * Attempts to focus the underlying input field. The focus attempt occurs
  91.      * asynchronously, and may silently fail depending on browser restrictions.
  92.      */
  93.     this.focus = function focus() {
  94.         window.setTimeout(function deferRefocus() {
  95.             field.focus(); // Focus must be deferred to work reliably across browsers
  96.         }, 0);
  97.     };
  99.     /**
  100.      * Returns the underlying input field. This input field MUST be manually
  101.      * added to the DOM for the Guacamole.InputSink to have any effect.
  102.      *
  103.      * @returns {!Element}
  104.      *     The underlying input field.
  105.      */
  106.     this.getElement = function getElement() {
  107.         return field;
  108.     };
  110.     // Automatically refocus input sink if part of DOM
  111.     document.addEventListener("keydown", function refocusSink(e) {
  113.         // Do not refocus if focus is on an input field
  114.         var focused = document.activeElement;
  115.         if (focused && focused !== document.body) {
  117.             // Only consider focused input fields which are actually visible
  118.             var rect = focused.getBoundingClientRect();
  119.             if (rect.left + rect.width > 0 && rect.top + rect.height > 0)
  120.                 return;
  122.         }
  124.         // Refocus input sink instead of handling click
  125.         sink.focus();
  127.     }, true);
  129. };