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