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