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    * @type {remoting.OptionsMenu}
  47    * @private
  48    */
  49   this.optionsMenu_ = new remoting.OptionsMenu(
  50       document.getElementById('send-ctrl-alt-del'),
  51       document.getElementById('send-print-screen'),
  52       document.getElementById('screen-resize-to-client'),
  53       document.getElementById('screen-shrink-to-fit'),
  54       document.getElementById('new-connection'),
  55       document.getElementById('toggle-full-screen'));
  56
  57   window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
  58   window.addEventListener('resize', this.center.bind(this), false);
  59
  60   registerEventListener('toolbar-disconnect', 'click', remoting.disconnect);
  61   registerEventListener('toolbar-stub', 'click',
  62       function() { remoting.toolbar.toggle(); });
  63
  64   // Prevent the preview canceling if the user is interacting with the tool-bar.
  65   /** @type {remoting.Toolbar} */
  66   var that = this;
  67   var stopTimer = function() {
  68     if (that.timerId_) {
  69       window.clearTimeout(that.timerId_);
  70       that.timerId_ = null;
  71     }
  72   }
  73   this.toolbar_.addEventListener('mousemove', stopTimer, false);
  74 };
  75
  76 /**
  77  * Preview the tool-bar functionality by showing it for 3s.
  78  * @return {void} Nothing.
  79  */
  80 remoting.Toolbar.prototype.preview = function() {
  81   this.toolbar_.classList.add(remoting.Toolbar.VISIBLE_CLASS_);
  82   if (this.timerId_) {
  83     window.clearTimeout(this.timerId_);
  84     this.timerId_ = null;
  85   }
  86   var classList = this.toolbar_.classList;
  87   this.timerId_ = window.setTimeout(
  88       classList.remove.bind(classList, remoting.Toolbar.VISIBLE_CLASS_),
  89       3000);
  90 };
  91
  92 /**
  93  * Center the tool-bar horizonally.
  94  */
  95 remoting.Toolbar.prototype.center = function() {
  96   var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
  97   this.toolbar_.style['left'] = toolbarX + 'px';
  98   var r = this.stub_.getBoundingClientRect();
  99   this.stubLeft_ = r.left;
 100   this.stubRight_ = r.right;
 101 };
 102
 103 /**
 104  * Toggle the tool-bar visibility.
 105  */
 106 remoting.Toolbar.prototype.toggle = function() {
 107   this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
 108 };
 109
 110 /**
 111  * @param {remoting.ClientSession} clientSession The active session, or null if
 112  *     there is no connection.
 113  */
 114 remoting.Toolbar.prototype.setClientSession = function(clientSession) {
 115   this.optionsMenu_.setClientSession(clientSession);
 116   var connectedTo = document.getElementById('connected-to');
 117   connectedTo.innerText =
 118       clientSession ? clientSession.getHostDisplayName() : "";
 119 };
 120
 121 /**
 122  * Test the specified co-ordinate to see if it is close enough to the stub
 123  * to activate it.
 124  *
 125  * @param {number} x The x co-ordinate.
 126  * @param {number} y The y co-ordinate.
 127  * @return {boolean} True if the position should activate the tool-bar stub, or
 128  *     false otherwise.
 129  * @private
 130  */
 131 remoting.Toolbar.prototype.hitTest_ = function(x, y) {
 132   var threshold = 50;
 133   return (x >= this.stubLeft_ - threshold &&
 134           x <= this.stubRight_ + threshold &&
 135           y < threshold);
 136 };
 137
 138 /**
 139  * Called whenever the mouse moves in the document. This is used to make the
 140  * active area of the tool-bar stub larger without making a corresponding area
 141  * of the host screen inactive.
 142  *
 143  * @param {Event} event The mouse move event.
 144  * @return {void} Nothing.
 145  */
 146 remoting.Toolbar.onMouseMove = function(event) {
 147   if (remoting.toolbar) {
 148     var toolbarStub = remoting.toolbar.stub_;
 149     if (remoting.toolbar.hitTest_(event.x, event.y)) {
 150       toolbarStub.classList.add(remoting.Toolbar.STUB_EXTENDED_CLASS_);
 151     } else {
 152       toolbarStub.classList.remove(remoting.Toolbar.STUB_EXTENDED_CLASS_);
 153     }
 154   } else {
 155     document.removeEventListener('mousemove',
 156                                  remoting.Toolbar.onMouseMove, false);
 157   }
 158 };
 159
 160 /** @type {remoting.Toolbar} */
 161 remoting.toolbar = null;
 162
 163 /** @private */
 164 remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
 165 /** @private */
 166 remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';