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.
7 * Class representing the client tool-bar.
12 /** @suppress {duplicate} */
13 var remoting = remoting || {};
16 * @param {HTMLElement} toolbar The HTML element representing the tool-bar.
19 remoting.Toolbar = function(toolbar) {
24 this.toolbar_ = toolbar;
29 this.stub_ = /** @type {HTMLElement} */toolbar.querySelector('.toolbar-stub');
31 * @type {number?} The id of the preview timer, if any.
36 * @type {number} The left edge of the tool-bar stub, updated on resize.
41 * @type {number} The right edge of the tool-bar stub, updated on resize.
46 window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
47 window.addEventListener('resize', this.center.bind(this), false);
49 registerEventListener('new-connection', 'click',
51 chrome.app.window.create('main.html', { 'width': 800, 'height': 600 });
53 registerEventListener('send-ctrl-alt-del', 'click', remoting.sendCtrlAltDel);
54 registerEventListener('send-print-screen', 'click', remoting.sendPrintScreen);
55 registerEventListener('sign-out', 'click', remoting.signOut);
56 registerEventListener('toolbar-disconnect', 'click', remoting.disconnect);
57 registerEventListener('toolbar-stub', 'click',
58 function() { remoting.toolbar.toggle(); });
60 // Prevent the preview canceling if the user is interacting with the tool-bar.
61 /** @type {remoting.Toolbar} */
63 var stopTimer = function() {
65 window.clearTimeout(that.timerId_);
69 this.toolbar_.addEventListener('mousemove', stopTimer, false);
73 * Preview the tool-bar functionality by showing it for 3s.
74 * @return {void} Nothing.
76 remoting.Toolbar.prototype.preview = function() {
77 this.toolbar_.classList.add(remoting.Toolbar.VISIBLE_CLASS_);
79 window.clearTimeout(this.timerId_);
82 var classList = this.toolbar_.classList;
83 this.timerId_ = window.setTimeout(
84 classList.remove.bind(classList, remoting.Toolbar.VISIBLE_CLASS_),
89 * Center the tool-bar horizonally.
91 remoting.Toolbar.prototype.center = function() {
92 var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
93 this.toolbar_.style['left'] = toolbarX + 'px';
94 var r = this.stub_.getBoundingClientRect();
95 this.stubLeft_ = r.left;
96 this.stubRight_ = r.right;
100 * Toggle the tool-bar visibility.
102 remoting.Toolbar.prototype.toggle = function() {
103 this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
107 * Test the specified co-ordinate to see if it is close enough to the stub
110 * @param {number} x The x co-ordinate.
111 * @param {number} y The y co-ordinate.
112 * @return {boolean} True if the position should activate the tool-bar stub, or
116 remoting.Toolbar.prototype.hitTest_ = function(x, y) {
118 return (x >= this.stubLeft_ - threshold &&
119 x <= this.stubRight_ + threshold &&
124 * Called whenever the mouse moves in the document. This is used to make the
125 * active area of the tool-bar stub larger without making a corresponding area
126 * of the host screen inactive.
128 * @param {Event} event The mouse move event.
129 * @return {void} Nothing.
131 remoting.Toolbar.onMouseMove = function(event) {
132 if (remoting.toolbar) {
133 var toolbarStub = remoting.toolbar.stub_;
134 if (remoting.toolbar.hitTest_(event.x, event.y)) {
135 toolbarStub.classList.add(remoting.Toolbar.STUB_EXTENDED_CLASS_);
137 toolbarStub.classList.remove(remoting.Toolbar.STUB_EXTENDED_CLASS_);
140 document.removeEventListener('mousemove',
141 remoting.Toolbar.onMouseMove, false);
145 /** @type {remoting.Toolbar} */
146 remoting.toolbar = null;
149 remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
151 remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';