remoting/webapp/crd/js/window_frame.js

   1 // Copyright 2014 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  * Apps v2 custom title bar implementation
   8  */
   9
  10 'use strict';
  11
  12 /** @suppress {duplicate} */
  13 var remoting = remoting || {};
  14
  15 /**
  16  * @param {HTMLElement} titleBar The root node of the title-bar DOM hierarchy.
  17  * @param {function()} disconnectCallback Callback for disconnecting the
  18  *     session.
  19  * @constructor
  20  */
  21 remoting.WindowFrame = function(titleBar, disconnectCallback) {
  22   /** @private {remoting.DesktopConnectedView} */
  23   this.desktopConnectedView_ = null;
  24
  25   /** @private {HTMLElement} */
  26   this.titleBar_ = titleBar;
  27
  28   /** @private {HTMLElement} */
  29   this.title_ = /** @type {HTMLElement} */
  30       (titleBar.querySelector('.window-title'));
  31   base.debug.assert(this.title_ != null);
  32
  33   /** @private {HTMLElement} */
  34   this.maximizeRestoreControl_ = /** @type {HTMLElement} */
  35       (titleBar.querySelector('.window-maximize-restore'));
  36   base.debug.assert(this.maximizeRestoreControl_ != null);
  37
  38   var optionsButton = titleBar.querySelector('.window-options');
  39   base.debug.assert(optionsButton != null);
  40   this.optionMenuButton_ = new remoting.MenuButton(
  41       optionsButton,
  42       this.onShowOptionsMenu_.bind(this),
  43       this.onHideOptionsMenu_.bind(this));
  44
  45   /** @private {HTMLElement} */
  46   this.optionsMenuList_ = /** @type {HTMLElement} */
  47       (optionsButton.querySelector('.window-options-menu'));
  48   base.debug.assert(this.optionsMenuList_ != null);
  49
  50   /**
  51    * @type {Array<{cls:string, fn: function()}>}
  52    */
  53   var handlers = [
  54     { cls: 'window-disconnect', fn: disconnectCallback },
  55     { cls: 'window-maximize-restore',
  56       fn: this.maximizeOrRestoreWindow_.bind(this) },
  57     { cls: 'window-minimize', fn: this.minimizeWindow_.bind(this) },
  58     { cls: 'window-close', fn: remoting.app.quit.bind(remoting.app) },
  59     { cls: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) }
  60   ];
  61   for (var i = 0; i < handlers.length; ++i) {
  62     var element = titleBar.querySelector('.' + handlers[i].cls);
  63     base.debug.assert(element != null);
  64     element.addEventListener('click', handlers[i].fn, false);
  65   }
  66
  67   // Ensure that tool-tips are always correct.
  68   this.handleWindowStateChange_();
  69   chrome.app.window.current().onMaximized.addListener(
  70       this.handleWindowStateChange_.bind(this));
  71   chrome.app.window.current().onRestored.addListener(
  72       this.handleWindowStateChange_.bind(this));
  73   chrome.app.window.current().onFullscreened.addListener(
  74       this.handleWindowStateChange_.bind(this));
  75   chrome.app.window.current().onFullscreened.addListener(
  76       this.showWindowControlsPreview_.bind(this));
  77 };
  78
  79 /**
  80  * @return {remoting.OptionsMenu}
  81  */
  82 remoting.WindowFrame.prototype.createOptionsMenu = function() {
  83   return new remoting.OptionsMenu(
  84       this.titleBar_.querySelector('.menu-send-ctrl-alt-del'),
  85       this.titleBar_.querySelector('.menu-send-print-screen'),
  86       this.titleBar_.querySelector('.menu-resize-to-client'),
  87       this.titleBar_.querySelector('.menu-shrink-to-fit'),
  88       this.titleBar_.querySelector('.menu-new-connection'),
  89       this.titleBar_.querySelector('.window-fullscreen'),
  90       this.titleBar_.querySelector('.menu-toggle-connection-stats'),
  91       this.titleBar_.querySelector('.menu-start-stop-recording'));
  92 };
  93
  94 /**
  95  * @param {remoting.DesktopConnectedView} desktopConnectedView The view for the
  96  *     current session, or null if there is no connection.
  97  */
  98 remoting.WindowFrame.prototype.setDesktopConnectedView = function(
  99     desktopConnectedView) {
 100   this.desktopConnectedView_ = desktopConnectedView;
 101   var windowTitle = document.head.querySelector('title');
 102   if (this.desktopConnectedView_) {
 103     this.title_.innerText = desktopConnectedView.getHostDisplayName();
 104     windowTitle.innerText = desktopConnectedView.getHostDisplayName() + ' - ' +
 105         remoting.app.getApplicationName();
 106   } else {
 107     this.title_.innerHTML = '&nbsp;';
 108     windowTitle.innerText = remoting.app.getApplicationName();
 109   }
 110   this.handleWindowStateChange_();
 111 };
 112
 113 /**
 114  * @return {{width: number, height: number}} The size of the window, ignoring
 115  *     the title-bar and window borders, if visible.
 116  */
 117 remoting.WindowFrame.prototype.getClientArea = function() {
 118   if (chrome.app.window.current().isFullscreen()) {
 119     return { 'height': window.innerHeight, 'width': window.innerWidth };
 120   } else {
 121     var kBorderWidth = 1;
 122     var titleHeight = this.titleBar_.clientHeight;
 123     return {
 124       'height': window.innerHeight - titleHeight - 2 * kBorderWidth,
 125       'width': window.innerWidth - 2 * kBorderWidth
 126     };
 127   }
 128 };
 129
 130 /**
 131  * @private
 132  */
 133 remoting.WindowFrame.prototype.maximizeOrRestoreWindow_ = function() {
 134   /** @type {boolean} */
 135   var restore =
 136       chrome.app.window.current().isFullscreen() ||
 137       chrome.app.window.current().isMaximized();
 138   if (restore) {
 139     chrome.app.window.current().restore();
 140   } else {
 141     chrome.app.window.current().maximize();
 142   }
 143 };
 144
 145 /**
 146  * @private
 147  */
 148 remoting.WindowFrame.prototype.minimizeWindow_ = function() {
 149   chrome.app.window.current().minimize();
 150 };
 151
 152 /**
 153  * @private
 154  */
 155 remoting.WindowFrame.prototype.toggleWindowControls_ = function() {
 156   this.titleBar_.classList.toggle('opened');
 157 };
 158
 159 /**
 160  * Update the tool-top for the maximize/full-screen/restore icon to reflect
 161  * its current behaviour.
 162  *
 163  * @private
 164  */
 165 remoting.WindowFrame.prototype.handleWindowStateChange_ = function() {
 166   // Set the title for the maximize/restore/full-screen button
 167   /** @type {string} */
 168   var tag = '';
 169   if (chrome.app.window.current().isFullscreen()) {
 170     tag = /*i18n-content*/'EXIT_FULL_SCREEN';
 171   } else if (chrome.app.window.current().isMaximized()) {
 172     tag = /*i18n-content*/'RESTORE_WINDOW';
 173   } else {
 174     tag = /*i18n-content*/'MAXIMIZE_WINDOW';
 175   }
 176   this.maximizeRestoreControl_.title = l10n.getTranslationOrError(tag);
 177
 178   // Ensure that the options menu aligns correctly for the side of the window
 179   // it occupies.
 180   if (chrome.app.window.current().isFullscreen()) {
 181     this.optionsMenuList_.classList.add('right-align');
 182   } else {
 183     this.optionsMenuList_.classList.remove('right-align');
 184   }
 185 };
 186
 187 /**
 188  * Callback invoked when the options menu is shown.
 189  * @private
 190  */
 191 remoting.WindowFrame.prototype.onShowOptionsMenu_ = function() {
 192   remoting.optionsMenu.onShow();
 193   this.titleBar_.classList.add('menu-opened');
 194 };
 195
 196 /**
 197  * Callback invoked when the options menu is shown.
 198  * @private
 199  */
 200 remoting.WindowFrame.prototype.onHideOptionsMenu_ = function() {
 201   this.titleBar_.classList.remove('menu-opened');
 202 };
 203
 204 /**
 205  * Show the window controls for a few seconds
 206  *
 207  * @private
 208  */
 209 remoting.WindowFrame.prototype.showWindowControlsPreview_ = function() {
 210   /**
 211    * @type {HTMLElement}
 212    */
 213   var target =  this.titleBar_;
 214   var kPreviewTimeoutMs = 3000;
 215   var hidePreview = function() {
 216     target.classList.remove('preview');
 217   };
 218   target.classList.add('preview');
 219   window.setTimeout(hidePreview, kPreviewTimeoutMs);
 220 };
 221
 222
 223 /** @type {remoting.WindowFrame} */
 224 remoting.windowFrame = null;