src/ui/file_manager/file_manager/foreground/js/mouse_inactivity_watcher.js

   1 // Copyright (c) 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  * A controller class detects mouse inactivity and hides "tool" elements.
   7  *
   8  * @param {Element} container The main DOM container.
   9  * @param {number=} opt_timeout Hide timeout in ms.
  10  * @param {function():boolean=} opt_toolsActive Function that returns |true|
  11  *     if the tools are active and should not be hidden.
  12  * @constructor
  13  */
  14 function MouseInactivityWatcher(container, opt_timeout, opt_toolsActive) {
  15   this.container_ = container;
  16   this.timeout_ = opt_timeout || MouseInactivityWatcher.DEFAULT_TIMEOUT;
  17   this.toolsActive_ = opt_toolsActive || function() { return false; };
  18
  19   this.onTimeoutBound_ = this.onTimeout_.bind(this);
  20   this.timeoutID_ = null;
  21   this.mouseOverTool_ = false;
  22
  23   this.clientX_ = 0;
  24   this.clientY_ = 0;
  25
  26   /**
  27    * Indicates if the inactivity watcher is enabled or disabled. Use getters
  28    * and setters.
  29    * @type {boolean}
  30    * @private
  31    **/
  32   this.disabled_ = false;
  33   this.__defineSetter__('disabled', function(value) {
  34     this.disabled_ = value;
  35     if (value)
  36       this.kick();
  37     else
  38       this.check();
  39   });
  40   this.__defineGetter__('disabled', function() {
  41     return this.disabled_;
  42   });
  43
  44   this.container_.addEventListener('mousemove', this.onMouseMove_.bind(this));
  45   var tools = this.container_.querySelector('.tool');
  46   for (var i = 0; i < tools.length; i++) {
  47     tools[i].addEventListener('mouseover', this.onToolMouseOver_.bind(this));
  48     tools[i].addEventListener('mouseout', this.onToolMouseOut_.bind(this));
  49   }
  50
  51   // Show tools when the user touches the screen.
  52   this.container_.addEventListener(
  53       'touchstart', this.activityStarted_.bind(this));
  54   var initiateFading = this.activityStopped_.bind(this, this.timeout_);
  55   this.container_.addEventListener('touchend', initiateFading);
  56   this.container_.addEventListener('touchcancel', initiateFading);
  57 }
  58
  59 /**
  60  * Default inactivity timeout.
  61  */
  62 MouseInactivityWatcher.DEFAULT_TIMEOUT = 3000;
  63
  64 /**
  65  * @param {boolean} on True if show, false if hide.
  66  */
  67 MouseInactivityWatcher.prototype.showTools = function(on) {
  68   if (on)
  69     this.container_.setAttribute('tools', 'true');
  70   else
  71     this.container_.removeAttribute('tools');
  72 };
  73
  74 /**
  75  * To be called when the user started activity. Shows the tools
  76  * and cancels the countdown.
  77  * @private
  78  */
  79 MouseInactivityWatcher.prototype.activityStarted_ = function() {
  80   this.showTools(true);
  81
  82   if (this.timeoutID_) {
  83     clearTimeout(this.timeoutID_);
  84     this.timeoutID_ = null;
  85   }
  86 };
  87
  88 /**
  89  * Called when user activity has stopped. Re-starts the countdown.
  90  * @param {number=} opt_timeout Timeout.
  91  * @private
  92  */
  93 MouseInactivityWatcher.prototype.activityStopped_ = function(opt_timeout) {
  94   if (this.disabled_ || this.mouseOverTool_ || this.toolsActive_())
  95     return;
  96
  97   if (this.timeoutID_)
  98     clearTimeout(this.timeoutID_);
  99
 100   this.timeoutID_ = setTimeout(
 101       this.onTimeoutBound_, opt_timeout || this.timeout_);
 102 };
 103
 104 /**
 105  * Called when a user performed a short action (such as a click or a key press)
 106  * that should show the tools if they are not visible.
 107  * @param {number=} opt_timeout Timeout.
 108  */
 109 MouseInactivityWatcher.prototype.kick = function(opt_timeout) {
 110   this.activityStarted_();
 111   this.activityStopped_(opt_timeout);
 112 };
 113
 114 /**
 115  * Check if the tools are active and update the tools visibility accordingly.
 116  */
 117 MouseInactivityWatcher.prototype.check = function() {
 118   if (this.toolsActive_())
 119     this.activityStarted_();
 120   else
 121     this.activityStopped_();
 122 };
 123
 124 /**
 125  * Mouse move handler.
 126  *
 127  * @param {Event} e Event.
 128  * @private
 129  */
 130 MouseInactivityWatcher.prototype.onMouseMove_ = function(e) {
 131   if (this.clientX_ == e.clientX && this.clientY_ == e.clientY) {
 132     // The mouse has not moved, must be the cursor change triggered by
 133     // some of the attributes on the root container. Ignore the event.
 134     return;
 135   }
 136   this.clientX_ = e.clientX;
 137   this.clientY_ = e.clientY;
 138
 139   if (this.disabled_)
 140     return;
 141
 142   this.kick();
 143 };
 144
 145 /**
 146  * Mouse over handler on a tool element.
 147  *
 148  * @param {Event} e Event.
 149  * @private
 150  */
 151 MouseInactivityWatcher.prototype.onToolMouseOver_ = function(e) {
 152   this.mouseOverTool_ = true;
 153   if (!this.disabled_)
 154     this.kick();
 155 };
 156
 157 /**
 158  * Mouse out handler on a tool element.
 159  *
 160  * @param {Event} e Event.
 161  * @private
 162  */
 163 MouseInactivityWatcher.prototype.onToolMouseOut_ = function(e) {
 164   this.mouseOverTool_ = false;
 165   if (!this.disabled_)
 166     this.kick();
 167 };
 168
 169 /**
 170  * Timeout handler.
 171  * @private
 172  */
 173 MouseInactivityWatcher.prototype.onTimeout_ = function() {
 174   this.timeoutID_ = null;
 175   if (!this.disabled_ && !this.toolsActive_())
 176     this.showTools(false);
 177 };