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