chrome/browser/resources/pdf/toolbar_manager.js

   1 // Copyright 2015 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 'use strict';
   6
   7 /** Idle time in ms before the UI is hidden. */
   8 var HIDE_TIMEOUT = 2000;
   9 /** Time in ms after force hide before toolbar is shown again. */
  10 var FORCE_HIDE_TIMEOUT = 1000;
  11 /** Velocity required in a mousemove to reveal the UI (pixels/sample). */
  12 var SHOW_VELOCITY = 25;
  13 /** Distance from the top of the screen required to reveal the toolbars. */
  14 var TOP_TOOLBAR_REVEAL_DISTANCE = 100;
  15 /** Distance from the bottom-right of the screen required to reveal toolbars. */
  16 var SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT = 150;
  17 var SIDE_TOOLBAR_REVEAL_DISTANCE_BOTTOM = 250;
  18
  19 /**
  20  * Whether a mousemove event is high enough velocity to reveal the toolbars.
  21  * @param {MouseEvent} e Event to test.
  22  * @return {boolean} true if the event is a high velocity mousemove, false
  23  * otherwise.
  24  */
  25 function isHighVelocityMouseMove(e) {
  26   return e.type == 'mousemove' &&
  27          e.movementX * e.movementX + e.movementY * e.movementY >
  28              SHOW_VELOCITY * SHOW_VELOCITY;
  29 }
  30
  31 /**
  32  * @param {MouseEvent} e Event to test.
  33  * @return {boolean} True if the mouse is close to the top of the screen.
  34  */
  35 function isMouseNearTopToolbar(e) {
  36   return e.y < TOP_TOOLBAR_REVEAL_DISTANCE;
  37 }
  38
  39 /**
  40  * @param {MouseEvent} e Event to test.
  41  * @return {boolean} True if the mouse is close to the bottom-right of the
  42  * screen.
  43  */
  44 function isMouseNearSideToolbar(e) {
  45   return e.x > window.innerWidth - SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT &&
  46          e.y > window.innerHeight - SIDE_TOOLBAR_REVEAL_DISTANCE_BOTTOM;
  47 }
  48
  49 /**
  50  * Constructs a Toolbar Manager, responsible for co-ordinating between multiple
  51  * toolbar elements.
  52  * @constructor
  53  * @param {Object} window The window containing the UI.
  54  * @param {Object} toolbar The top toolbar element.
  55  * @param {Object} zoomToolbar The zoom toolbar element.
  56  */
  57 function ToolbarManager(window, toolbar, zoomToolbar) {
  58   this.window_ = window;
  59   this.toolbar_ = toolbar;
  60   this.zoomToolbar_ = zoomToolbar;
  61
  62   this.toolbarTimeout_ = null;
  63   this.isMouseNearTopToolbar_ = false;
  64   this.isMouseNearSideToolbar_ = false;
  65
  66   this.sideToolbarAllowedOnly_ = false;
  67   this.sideToolbarAllowedOnlyTimer_ = null;
  68
  69   this.window_.addEventListener('resize', this.resizeDropdowns_.bind(this));
  70   this.resizeDropdowns_();
  71 }
  72
  73 ToolbarManager.prototype = {
  74
  75   showToolbarsForMouseMove: function(e) {
  76     this.isMouseNearTopToolbar_ = this.toolbar_ && isMouseNearTopToolbar(e);
  77     this.isMouseNearSideToolbar_ = isMouseNearSideToolbar(e);
  78
  79     // Allow the top toolbar to be shown if the mouse moves away from the side
  80     // toolbar (as long as the timeout has elapsed).
  81     if (!this.isMouseNearSideToolbar_ && !this.sideToolbarAllowedOnlyTimer_)
  82       this.sideToolbarAllowedOnly_ = false;
  83
  84     // Allow the top toolbar to be shown if the mouse moves to the top edge.
  85     if (this.isMouseNearTopToolbar_)
  86       this.sideToolbarAllowedOnly_ = false;
  87
  88     // Show the toolbars if the mouse is near the top or right of the screen or
  89     // if the mouse moved fast.
  90     if (this.isMouseNearTopToolbar_ || this.isMouseNearSideToolbar_ ||
  91         isHighVelocityMouseMove(e)) {
  92       if (this.sideToolbarAllowedOnly_)
  93         this.zoomToolbar_.show();
  94       else
  95         this.showToolbars();
  96     }
  97     this.hideToolbarsAfterTimeout();
  98   },
  99
 100   /**
 101    * Display both UI toolbars.
 102    */
 103   showToolbars: function() {
 104     if (this.toolbar_)
 105       this.toolbar_.show();
 106     this.zoomToolbar_.show();
 107   },
 108
 109   /**
 110    * Hide toolbars after a delay, regardless of the position of the mouse.
 111    * Intended to be called when the mouse has moved out of the parent window.
 112    */
 113   hideToolbarsForMouseOut: function() {
 114     this.isMouseNearTopToolbar_ = false;
 115     this.isMouseNearSideToolbar_ = false;
 116     this.hideToolbarsAfterTimeout();
 117   },
 118
 119   /**
 120    * Check if the toolbars are able to be closed, and close them if they are.
 121    * Toolbars may be kept open based on mouse/keyboard activity and active
 122    * elements.
 123    */
 124   hideToolbarsIfAllowed: function() {
 125     if (this.isMouseNearSideToolbar_ || this.isMouseNearTopToolbar_)
 126       return;
 127
 128     if (this.toolbar_ && this.toolbar_.shouldKeepOpen())
 129       return;
 130
 131     if (this.toolbar_)
 132       this.toolbar_.hide();
 133     this.zoomToolbar_.hide();
 134   },
 135
 136   /**
 137    * Hide the toolbar after the HIDE_TIMEOUT has elapsed.
 138    */
 139   hideToolbarsAfterTimeout: function() {
 140     if (this.toolbarTimeout_)
 141       clearTimeout(this.toolbarTimeout_);
 142     this.toolbarTimeout_ =
 143         setTimeout(this.hideToolbarsIfAllowed.bind(this), HIDE_TIMEOUT);
 144   },
 145
 146   /**
 147    * Hide the 'topmost' layer of toolbars. Hides any dropdowns that are open, or
 148    * hides the basic toolbars otherwise.
 149    */
 150   hideSingleToolbarLayer: function() {
 151     if (!this.toolbar_ || !this.toolbar_.hideDropdowns())
 152       this.hideToolbarsIfAllowed();
 153   },
 154
 155   /**
 156    * Hide the top toolbar and keep it hidden until both:
 157    * - The mouse is moved away from the right side of the screen
 158    * - 1 second has passed.
 159    *
 160    * The top toolbar can be immediately re-opened by moving the mouse to the top
 161    * of the screen.
 162    */
 163   forceHideTopToolbar: function() {
 164     if (!this.toolbar_)
 165       return;
 166     this.toolbar_.hide();
 167     this.sideToolbarAllowedOnly_ = true;
 168     this.sideToolbarAllowedOnlyTimer_ = this.window_.setTimeout(function() {
 169       this.sideToolbarAllowedOnlyTimer_ = null;
 170     }.bind(this), FORCE_HIDE_TIMEOUT);
 171   },
 172
 173   /**
 174    * Updates the size of toolbar dropdowns based on the positions of the rest of
 175    * the UI.
 176    * @private
 177    */
 178   resizeDropdowns_: function() {
 179     if (!this.toolbar_)
 180       return;
 181     var lowerBound = this.window_.innerHeight - this.zoomToolbar_.clientHeight;
 182     this.toolbar_.setDropdownLowerBound(lowerBound);
 183   }
 184 };