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   this.resizeDropdowns_();
  66 }
  67
  68 ToolbarManager.prototype = {
  69
  70   showToolbarsForMouseMove: function(e) {
  71     this.isMouseNearTopToolbar_ = isMouseNearTopToolbar(e);
  72     this.isMouseNearSideToolbar_ = isMouseNearSideToolbar(e);
  73
  74     // Allow the top toolbar to be shown if the mouse moves away from the side
  75     // toolbar (as long as the timeout has elapsed).
  76     if (!this.isMouseNearSideToolbar_ && !this.sideToolbarAllowedOnlyTimer_)
  77       this.sideToolbarAllowedOnly_ = false;
  78
  79     // Allow the top toolbar to be shown if the mouse moves to the top edge.
  80     if (this.isMouseNearTopToolbar_)
  81       this.sideToolbarAllowedOnly_ = false;
  82
  83     // Show the toolbars if the mouse is near the top or right of the screen or
  84     // if the mouse moved fast.
  85     if (this.isMouseNearTopToolbar_ || this.isMouseNearSideToolbar_ ||
  86         isHighVelocityMouseMove(e)) {
  87       if (this.sideToolbarAllowedOnly_)
  88         this.zoomToolbar_.show();
  89       else
  90         this.showToolbars();
  91     }
  92     this.hideToolbarsAfterTimeout();
  93   },
  94
  95   /**
  96    * Display both UI toolbars.
  97    */
  98   showToolbars: function() {
  99     this.toolbar_.show();
 100     this.zoomToolbar_.show();
 101   },
 102
 103   /**
 104    * Check if the toolbars are able to be closed, and close them if they are.
 105    * Toolbars may be kept open based on mouse/keyboard activity and active
 106    * elements.
 107    */
 108   hideToolbarsIfAllowed: function() {
 109     if (!(this.isMouseNearTopToolbar_ || this.isMouseNearSideToolbar_ ||
 110         this.toolbar_.shouldKeepOpen())) {
 111       this.toolbar_.hide();
 112       this.zoomToolbar_.hide();
 113     }
 114   },
 115
 116   /**
 117    * Hide the toolbar after the HIDE_TIMEOUT has elapsed.
 118    */
 119   hideToolbarsAfterTimeout: function() {
 120     if (this.toolbarTimeout_)
 121       clearTimeout(this.toolbarTimeout_);
 122     this.toolbarTimeout_ =
 123         setTimeout(this.hideToolbarsIfAllowed.bind(this), HIDE_TIMEOUT);
 124   },
 125
 126   /**
 127    * Hide the 'topmost' layer of toolbars. Hides any dropdowns that are open, or
 128    * hides the basic toolbars otherwise.
 129    */
 130   hideSingleToolbarLayer: function() {
 131     if (!this.toolbar_.hideDropdowns())
 132       this.hideToolbarsIfAllowed();
 133   },
 134
 135   /**
 136    * Hide the top toolbar and keep it hidden until both:
 137    * - The mouse is moved away from the right side of the screen
 138    * - 1 second has passed.
 139    *
 140    * The top toolbar can be immediately re-opened by moving the mouse to the top
 141    * of the screen.
 142    */
 143   forceHideTopToolbar: function() {
 144     this.toolbar_.hide();
 145     this.sideToolbarAllowedOnly_ = true;
 146     this.sideToolbarAllowedOnlyTimer_ = this.window_.setTimeout(function() {
 147       this.sideToolbarAllowedOnlyTimer_ = null;
 148     }.bind(this), FORCE_HIDE_TIMEOUT);
 149   },
 150
 151   /**
 152    * Updates the size of toolbar dropdowns based on the positions of the rest of
 153    * the UI.
 154    * @private
 155    */
 156   resizeDropdowns_: function() {
 157     var lowerBound = this.window_.innerHeight - this.zoomToolbar_.clientHeight;
 158     this.toolbar_.setDropdownLowerBound(lowerBound);
 159   }
 160 };