OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview This implements a splitter element which can be used to resize | 6 * @fileoverview This implements a splitter element which can be used to resize |
7 * table columns. | 7 * table columns. |
8 * | 8 * |
9 * Each splitter is associated with certain column and resizes it when dragged. | 9 * Each splitter is associated with certain column and resizes it when dragged. |
10 * It is column model responsibility to resize other columns accordingly. | 10 * It is column model responsibility to resize other columns accordingly. |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
48 | 48 |
49 this.columnWidth_ = cm.getWidth(this.columnIndex); | 49 this.columnWidth_ = cm.getWidth(this.columnIndex); |
50 this.nextColumnWidth_ = cm.getWidth(this.columnIndex + 1); | 50 this.nextColumnWidth_ = cm.getWidth(this.columnIndex + 1); |
51 }, | 51 }, |
52 | 52 |
53 /** | 53 /** |
54 * Handles spliter moves. Sets new width of the column. | 54 * Handles spliter moves. Sets new width of the column. |
55 * @param {Event} e Splitter event. | 55 * @param {Event} e Splitter event. |
56 */ | 56 */ |
57 handleSplitterDragMove: function(deltaX) { | 57 handleSplitterDragMove: function(deltaX) { |
58 var cm = this.table_.columnModel; | 58 this.table_.columnModel.setWidth(this.columnIndex, |
59 | 59 this.columnWidth_ + deltaX); |
60 var clientWidth = this.table_.querySelector('list').clientWidth; | |
61 var percentChange = deltaX * 100 / clientWidth; | |
62 var newColumnWidth = this.columnWidth_ + percentChange; | |
63 | |
64 cm.setWidth(this.columnIndex, newColumnWidth); | |
65 }, | 60 }, |
66 | 61 |
67 /** | 62 /** |
68 * Handles end of the splitter dragging. Restores cursor. | 63 * Handles end of the splitter dragging. Restores cursor. |
69 * @param {Event} e Splitter event. | 64 * @param {Event} e Splitter event. |
70 */ | 65 */ |
71 handleSplitterDragEnd: function() { | 66 handleSplitterDragEnd: function() { |
72 this.ownerDocument.documentElement.classList.remove('col-resize'); | 67 this.ownerDocument.documentElement.classList.remove('col-resize'); |
73 }, | 68 }, |
74 }; | 69 }; |
75 | 70 |
76 /** | 71 /** |
77 * The column index. | 72 * The column index. |
78 * @type {number} | 73 * @type {number} |
79 */ | 74 */ |
80 cr.defineProperty(TableSplitter, 'columnIndex'); | 75 cr.defineProperty(TableSplitter, 'columnIndex'); |
81 | 76 |
82 /** | 77 /** |
83 * The table associated with the splitter. | 78 * The table associated with the splitter. |
84 * @type {cr.ui.Table} | 79 * @type {cr.ui.Table} |
85 */ | 80 */ |
86 cr.defineProperty(TableSplitter, 'table'); | 81 cr.defineProperty(TableSplitter, 'table'); |
87 | 82 |
88 return { | 83 return { |
89 TableSplitter: TableSplitter | 84 TableSplitter: TableSplitter |
90 }; | 85 }; |
91 }); | 86 }); |
OLD | NEW |