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