// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview
* Class representing the client tool-bar.
*/
'use strict';
/** @suppress {duplicate} */
var remoting = remoting || {};
/**
* @param {HTMLElement} toolbar The HTML element representing the tool-bar.
* @constructor
*/
remoting.Toolbar = function(toolbar) {
/**
* @type {HTMLElement}
* @private
*/
this.toolbar_ = toolbar;
/**
* @type {HTMLElement}
* @private
*/
this.stub_ = /** @type {HTMLElement} */toolbar.querySelector('.toolbar-stub');
/**
* @type {number?} The id of the preview timer, if any.
* @private
*/
this.timerId_ = null;
/**
* @type {number} The left edge of the tool-bar stub, updated on resize.
* @private
*/
this.stubLeft_ = 0;
/**
* @type {number} The right edge of the tool-bar stub, updated on resize.
* @private
*/
this.stubRight_ = 0;
window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
window.addEventListener('resize', this.center.bind(this), false);
// Prevent the preview canceling if the user is interacting with the tool-bar.
/** @type {remoting.Toolbar} */
var that = this;
var stopTimer = function() {
if (that.timerId_) {
window.clearTimeout(that.timerId_);
that.timerId_ = null;
}
}
this.toolbar_.addEventListener('mousemove', stopTimer, false);
};
/**
* Preview the tool-bar functionality by showing it for 3s.
* @return {void} Nothing.
*/
remoting.Toolbar.prototype.preview = function() {
this.toolbar_.classList.add(remoting.Toolbar.VISIBLE_CLASS_);
if (this.timerId_) {
window.clearTimeout(this.timerId_);
this.timerId_ = null;
}
var classList = this.toolbar_.classList;
this.timerId_ = window.setTimeout(
classList.remove.bind(classList, remoting.Toolbar.VISIBLE_CLASS_),
3000);
};
/**
* Center the tool-bar horizonally.
*/
remoting.Toolbar.prototype.center = function() {
var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
this.toolbar_.style['left'] = toolbarX + 'px';
var r = this.stub_.getBoundingClientRect();
this.stubLeft_ = r.left;
this.stubRight_ = r.right;
};
/**
* Toggle the tool-bar visibility.
*/
remoting.Toolbar.prototype.toggle = function() {
this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
};
/**
* Test the specified co-ordinate to see if it is close enough to the stub
* to activate it.
*
* @param {number} x The x co-ordinate.
* @param {number} y The y co-ordinate.
* @return {boolean} True if the position should activate the tool-bar stub, or
* false otherwise.
* @private
*/
remoting.Toolbar.prototype.hitTest_ = function(x, y) {
var threshold = 50;
return (x >= this.stubLeft_ - threshold &&
x <= this.stubRight_ + threshold &&
y < threshold);
};
/**
* Called whenever the mouse moves in the document. This is used to make the
* active area of the tool-bar stub larger without making a corresponding area
* of the host screen inactive.
*
* @param {Event} event The mouse move event.
* @return {void} Nothing.
*/
remoting.Toolbar.onMouseMove = function(event) {
if (remoting.toolbar) {
var toolbarStub = remoting.toolbar.stub_;
if (remoting.toolbar.hitTest_(event.x, event.y)) {
toolbarStub.classList.add(remoting.Toolbar.STUB_EXTENDED_CLASS_);
} else {
toolbarStub.classList.remove(remoting.Toolbar.STUB_EXTENDED_CLASS_);
}
} else {
document.removeEventListener('mousemove',
remoting.Toolbar.onMouseMove, false);
}
};
/** @type {remoting.Toolbar} */
remoting.toolbar = null;
/** @private */
remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
/** @private */
remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';