tools/cc-frame-viewer/src/ui/drag_handle.js

   1 /* Copyright (c) 2012 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 base.require('ui');
   8 base.requireStylesheet('ui.drag_handle');
   9
  10 base.exportTo('ui', function() {
  11
  12   /**
  13    * Detects when user clicks handle determines new height of container based
  14    * on user's vertical mouse move and resizes the target.
  15    * @constructor
  16    * @extends {HTMLDivElement}
  17    * You will need to set target to be the draggable element
  18    */
  19   var DragHandle = ui.define('x-drag-handle');
  20
  21   DragHandle.prototype = {
  22     __proto__: HTMLDivElement.prototype,
  23
  24     decorate: function() {
  25       this.lastMousePosY = 0;
  26       this.onMouseMove_ = this.onMouseMove_.bind(this);
  27       this.onMouseUp_ = this.onMouseUp_.bind(this);
  28       this.addEventListener('mousedown', this.onMouseDown_);
  29       this.target = undefined;
  30     },
  31
  32     onMouseMove_: function(e) {
  33       // Compute the difference in height position.
  34       var dy = this.lastMousePosY - e.clientY;
  35       // If style is not set, start off with computed height.
  36       if (!this.target.style.height)
  37         this.target.style.height = window.getComputedStyle(this.target).height;
  38       // Apply new height to the container.
  39       this.target.style.height = parseInt(this.target.style.height) + dy + 'px';
  40       this.lastMousePosY = e.clientY;
  41       e.preventDefault();
  42       return true;
  43     },
  44
  45     onMouseDown_: function(e) {
  46       if (!this.target)
  47         return;
  48       this.lastMousePosY = e.clientY;
  49       document.addEventListener('mousemove', this.onMouseMove_);
  50       document.addEventListener('mouseup', this.onMouseUp_);
  51       e.preventDefault();
  52       return true;
  53     },
  54
  55     onMouseUp_: function(e) {
  56       document.removeEventListener('mousemove', this.onMouseMove_);
  57       document.removeEventListener('mouseup', this.onMouseUp_);
  58       e.preventDefault();
  59     }
  60   };
  61
  62   return {
  63     DragHandle: DragHandle
  64   };
  65 });