• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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/**
6 * @fileoverview This implements a splitter element which can be used to resize
7 * table columns.
8 *
9 * Each splitter is associated with certain column and resizes it when dragged.
10 * It is column model responsibility to resize other columns accordingly.
11 */
12
13cr.define('cr.ui', function() {
14  /** @const */ var Splitter = cr.ui.Splitter;
15
16  /**
17   * Creates a new table splitter element.
18   * @param {Object=} opt_propertyBag Optional properties.
19   * @constructor
20   * @extends {Splitter}
21   */
22  var TableSplitter = cr.ui.define('div');
23
24  TableSplitter.prototype = {
25    __proto__: Splitter.prototype,
26
27    table_: null,
28
29    columnIndex_: null,
30
31    /**
32     * Initializes the element.
33     */
34    decorate: function() {
35      Splitter.prototype.decorate.call(this);
36
37      this.classList.add('table-header-splitter');
38    },
39
40    /**
41     * Handles start of the splitter dragging.
42     * Saves starting width of the column and changes the cursor.
43     * @param {Event} e Splitter event.
44     */
45    handleSplitterDragStart: function() {
46      var cm = this.table_.columnModel;
47      this.ownerDocument.documentElement.classList.add('col-resize');
48
49      this.columnWidth_ = cm.getWidth(this.columnIndex);
50      this.nextColumnWidth_ = cm.getWidth(this.columnIndex + 1);
51    },
52
53    /**
54     * Handles spliter moves. Sets new width of the column.
55     * @param {Event} e Splitter event.
56     */
57    handleSplitterDragMove: function(deltaX) {
58      var cm = this.table_.columnModel;
59
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    },
66
67    /**
68     * Handles end of the splitter dragging. Restores cursor.
69     * @param {Event} e Splitter event.
70     */
71    handleSplitterDragEnd: function() {
72      this.ownerDocument.documentElement.classList.remove('col-resize');
73    },
74  };
75
76  /**
77   * The column index.
78   * @type {number}
79   */
80  cr.defineProperty(TableSplitter, 'columnIndex');
81
82  /**
83   * The table associated with the splitter.
84   * @type {cr.ui.Table}
85   */
86  cr.defineProperty(TableSplitter, 'table');
87
88  return {
89    TableSplitter: TableSplitter
90  };
91});
92