Home | History | Annotate | Download | only in webapp 
      1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2 // Use of this source code is governed by a BSD-style license that can be
      3 // found in the LICENSE file.
      4 
      5 /**
      6  * @fileoverview
      7  * Class representing the client tool-bar.
      8  */
      9 
     10 'use strict';
     11 
     12 /** @suppress {duplicate} */
     13 var remoting = remoting || {};
     14 
     15 /**
     16  * @param {HTMLElement} toolbar The HTML element representing the tool-bar.
     17  * @constructor
     18  */
     19 remoting.Toolbar = function(toolbar) {
     20   /**
     21    * @type {HTMLElement}
     22    * @private
     23    */
     24   this.toolbar_ = toolbar;
     25   /**
     26    * @type {HTMLElement}
     27    * @private
     28    */
     29   this.stub_ = /** @type {HTMLElement} */toolbar.querySelector('.toolbar-stub');
     30   /**
     31    * @type {number?} The id of the preview timer, if any.
     32    * @private
     33    */
     34   this.timerId_ = null;
     35   /**
     36    * @type {number} The left edge of the tool-bar stub, updated on resize.
     37    * @private
     38    */
     39   this.stubLeft_ = 0;
     40   /**
     41    * @type {number} The right edge of the tool-bar stub, updated on resize.
     42    * @private
     43    */
     44   this.stubRight_ = 0;
     45 
     46   /**
     47    * @type {remoting.MenuButton}
     48    * @private
     49    */
     50   this.screenOptionsMenu_ = new remoting.MenuButton(
     51       document.getElementById('screen-options-menu'),
     52       this.onShowOptionsMenu_.bind(this));
     53   /**
     54    * @type {remoting.MenuButton}
     55    * @private
     56    */
     57   this.sendKeysMenu_ = new remoting.MenuButton(
     58       document.getElementById('send-keys-menu')
     59   );
     60 
     61 
     62   window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
     63   window.addEventListener('resize', this.center.bind(this), false);
     64 
     65   registerEventListener('toolbar-disconnect', 'click', remoting.disconnect);
     66   registerEventListener('toolbar-stub', 'click',
     67       function() { remoting.toolbar.toggle(); });
     68 
     69   // Prevent the preview canceling if the user is interacting with the tool-bar.
     70   /** @type {remoting.Toolbar} */
     71   var that = this;
     72   var stopTimer = function() {
     73     if (that.timerId_) {
     74       window.clearTimeout(that.timerId_);
     75       that.timerId_ = null;
     76     }
     77   }
     78   this.toolbar_.addEventListener('mousemove', stopTimer, false);
     79 };
     80 
     81 
     82 /**
     83  * @return {remoting.OptionsMenu}
     84  */
     85 remoting.Toolbar.prototype.createOptionsMenu = function() {
     86   return new remoting.OptionsMenu(
     87       document.getElementById('send-ctrl-alt-del'),
     88       document.getElementById('send-print-screen'),
     89       document.getElementById('screen-resize-to-client'),
     90       document.getElementById('screen-shrink-to-fit'),
     91       document.getElementById('new-connection'),
     92       document.getElementById('toggle-full-screen'),
     93       null);
     94 };
     95 
     96 /**
     97  * Preview the tool-bar functionality by showing it for 3s.
     98  * @return {void} Nothing.
     99  */
    100 remoting.Toolbar.prototype.preview = function() {
    101   this.toolbar_.classList.add(remoting.Toolbar.VISIBLE_CLASS_);
    102   if (this.timerId_) {
    103     window.clearTimeout(this.timerId_);
    104     this.timerId_ = null;
    105   }
    106   var classList = this.toolbar_.classList;
    107   this.timerId_ = window.setTimeout(
    108       classList.remove.bind(classList, remoting.Toolbar.VISIBLE_CLASS_),
    109       3000);
    110 };
    111 
    112 /**
    113  * Center the tool-bar horizonally.
    114  */
    115 remoting.Toolbar.prototype.center = function() {
    116   var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
    117   this.toolbar_.style['left'] = toolbarX + 'px';
    118   var r = this.stub_.getBoundingClientRect();
    119   this.stubLeft_ = r.left;
    120   this.stubRight_ = r.right;
    121 };
    122 
    123 /**
    124  * Toggle the tool-bar visibility.
    125  */
    126 remoting.Toolbar.prototype.toggle = function() {
    127   this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
    128 };
    129 
    130 /**
    131  * @param {remoting.ClientSession} clientSession The active session, or null if
    132  *     there is no connection.
    133  */
    134 remoting.Toolbar.prototype.setClientSession = function(clientSession) {
    135   var connectedTo = document.getElementById('connected-to');
    136   connectedTo.innerText =
    137       clientSession ? clientSession.getHostDisplayName() : "";
    138 };
    139 
    140 /**
    141  * Test the specified co-ordinate to see if it is close enough to the stub
    142  * to activate it.
    143  *
    144  * @param {number} x The x co-ordinate.
    145  * @param {number} y The y co-ordinate.
    146  * @return {boolean} True if the position should activate the tool-bar stub, or
    147  *     false otherwise.
    148  * @private
    149  */
    150 remoting.Toolbar.prototype.hitTest_ = function(x, y) {
    151   var threshold = 50;
    152   return (x >= this.stubLeft_ - threshold &&
    153           x <= this.stubRight_ + threshold &&
    154           y < threshold);
    155 };
    156 
    157 /**
    158  * Called whenever the mouse moves in the document. This is used to make the
    159  * active area of the tool-bar stub larger without making a corresponding area
    160  * of the host screen inactive.
    161  *
    162  * @param {Event} event The mouse move event.
    163  * @return {void} Nothing.
    164  */
    165 remoting.Toolbar.onMouseMove = function(event) {
    166   if (remoting.toolbar) {
    167     var toolbarStub = remoting.toolbar.stub_;
    168     if (remoting.toolbar.hitTest_(event.x, event.y)) {
    169       toolbarStub.classList.add(remoting.Toolbar.STUB_EXTENDED_CLASS_);
    170     } else {
    171       toolbarStub.classList.remove(remoting.Toolbar.STUB_EXTENDED_CLASS_);
    172     }
    173   } else {
    174     document.removeEventListener('mousemove',
    175                                  remoting.Toolbar.onMouseMove, false);
    176   }
    177 };
    178 
    179 /**
    180  * Updates the options menu to reflect the current scale-to-fit and full-screen
    181  * settings.
    182  * @return {void} Nothing.
    183  * @private
    184  */
    185 remoting.Toolbar.prototype.onShowOptionsMenu_ = function() {
    186   remoting.optionsMenu.onShow();
    187 };
    188 
    189 /** @type {remoting.Toolbar} */
    190 remoting.toolbar = null;
    191 
    192 /** @private */
    193 remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
    194 /** @private */
    195 remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';
    196