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