src/remoting/webapp/toolbar.js

   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';