Home | History | Annotate | Download | only in webapp 
      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} */
     13 var remoting = remoting || {};
     14 
     15 /**
     16  * @param {HTMLElement} toolbar The HTML element representing the tool-bar.
     17  * @constructor
     18  */
     19 remoting.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  */
     80 remoting.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  */
     95 remoting.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  */
    106 remoting.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  */
    120 remoting.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  */
    135 remoting.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} */
    150 remoting.toolbar = null;
    151 
    152 /** @private */
    153 remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
    154 /** @private */
    155 remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';
    156