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