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