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