OLD | NEW |
| (Empty) |
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 }); | |
OLD | NEW |