src/third_party/trace-viewer/third_party/tvcm/src/tvcm/ui/mouse_tracker.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7 <link rel="import" href="/tvcm.html">
   8 <script>
   9 'use strict';
  10
  11 /**
  12  * @fileoverview A Mouse-event abtraction that waits for
  13  *   mousedown, then watches for subsequent mousemove events
  14  *   until the next mouseup event, then waits again.
  15  *   State changes are signaled with
  16  *      'mouse-tracker-start' : mousedown and tracking
  17  *      'mouse-tracker-move' : mouse move
  18  *      'mouse-tracker-end' : mouseup and not tracking.
  19  */
  20
  21 tvcm.exportTo('tvcm.ui', function() {
  22
  23   /**
  24    * @constructor
  25    * @param {HTMLElement} targetElement will recv events 'mouse-tracker-start',
  26    *     'mouse-tracker-move', 'mouse-tracker-end'.
  27    */
  28   function MouseTracker(opt_targetElement) {
  29     this.onMouseDown_ = this.onMouseDown_.bind(this);
  30     this.onMouseMove_ = this.onMouseMove_.bind(this);
  31     this.onMouseUp_ = this.onMouseUp_.bind(this);
  32
  33     this.targetElement = opt_targetElement;
  34   }
  35
  36   MouseTracker.prototype = {
  37
  38     get targetElement() {
  39       return this.targetElement_;
  40     },
  41
  42     set targetElement(targetElement) {
  43       if (this.targetElement_)
  44         this.targetElement_.removeEventListener('mousedown', this.onMouseDown_);
  45       this.targetElement_ = targetElement;
  46       if (this.targetElement_)
  47         this.targetElement_.addEventListener('mousedown', this.onMouseDown_);
  48     },
  49
  50     onMouseDown_: function(e) {
  51       if (e.button !== 0)
  52         return true;
  53
  54       e = this.remakeEvent_(e, 'mouse-tracker-start');
  55       this.targetElement_.dispatchEvent(e);
  56       document.addEventListener('mousemove', this.onMouseMove_);
  57       document.addEventListener('mouseup', this.onMouseUp_);
  58       this.targetElement_.addEventListener('blur', this.onMouseUp_);
  59       this.savePreviousUserSelect_ = document.body.style['-webkit-user-select'];
  60       document.body.style['-webkit-user-select'] = 'none';
  61       e.preventDefault();
  62       return true;
  63     },
  64
  65     onMouseMove_: function(e) {
  66       e = this.remakeEvent_(e, 'mouse-tracker-move');
  67       this.targetElement_.dispatchEvent(e);
  68     },
  69
  70     onMouseUp_: function(e) {
  71       document.removeEventListener('mousemove', this.onMouseMove_);
  72       document.removeEventListener('mouseup', this.onMouseUp_);
  73       this.targetElement_.removeEventListener('blur', this.onMouseUp_);
  74       document.body.style['-webkit-user-select'] =
  75           this.savePreviousUserSelect_;
  76       e = this.remakeEvent_(e, 'mouse-tracker-end');
  77       this.targetElement_.dispatchEvent(e);
  78     },
  79
  80     remakeEvent_: function(e, newType) {
  81       var remade = new tvcm.Event(newType, true, true);
  82       remade.x = e.x;
  83       remade.y = e.y;
  84       remade.offsetX = e.offsetX;
  85       remade.offsetY = e.offsetY;
  86       remade.clientX = e.clientX;
  87       remade.clientY = e.clientY;
  88       return remade;
  89     }
  90
  91   };
  92
  93   function trackMouseMovesUntilMouseUp(mouseMoveHandler, opt_mouseUpHandler) {
  94     function cleanupAndDispatchToMouseUp(e) {
  95       document.removeEventListener('mousemove', mouseMoveHandler);
  96       document.removeEventListener('mouseup', cleanupAndDispatchToMouseUp);
  97       if (opt_mouseUpHandler)
  98         opt_mouseUpHandler(e);
  99     }
 100     document.addEventListener('mousemove', mouseMoveHandler);
 101     document.addEventListener('mouseup', cleanupAndDispatchToMouseUp);
 102   }
 103
 104   return {
 105     MouseTracker: MouseTracker,
 106     trackMouseMovesUntilMouseUp: trackMouseMovesUntilMouseUp
 107   };
 108 });
 109 </script>