• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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} */
13var remoting = remoting || {};
14
15/**
16 * @param {HTMLElement} toolbar The HTML element representing the tool-bar.
17 * @constructor
18 */
19remoting.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 */
65remoting.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 */
80remoting.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 */
91remoting.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 */
105remoting.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 */
120remoting.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} */
135remoting.toolbar = null;
136
137/** @private */
138remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
139/** @private */
140remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';
141