summaryrefslogtreecommitdiff
path: root/chromium/ui/webui/resources/js/cr/ui/table/table_splitter.js
blob: 442918f7eeb7b016127f0de788244be95b60cee1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview This implements a splitter element which can be used to resize
 * table columns.
 *
 * Each splitter is associated with certain column and resizes it when dragged.
 * It is column model responsibility to resize other columns accordingly.
 */

cr.define('cr.ui', function() {
  /** @const */ var Splitter = cr.ui.Splitter;

  /**
   * Creates a new table splitter element.
   * @param {Object=} opt_propertyBag Optional properties.
   * @constructor
   * @extends {cr.ui.Splitter}
   */
  var TableSplitter = cr.ui.define('div');

  TableSplitter.prototype = {
    __proto__: Splitter.prototype,

    table_: null,

    columnIndex_: null,

    /**
     * Initializes the element.
     */
    decorate: function() {
      Splitter.prototype.decorate.call(this);

      this.classList.add('table-header-splitter');
    },

    /**
     * Handles start of the splitter dragging.
     * Saves starting width of the column and changes the cursor.
     * @override
     */
    handleSplitterDragStart: function() {
      var cm = this.table_.columnModel;
      this.ownerDocument.documentElement.classList.add('col-resize');

      this.columnWidth_ = cm.getWidth(this.columnIndex);
      this.nextColumnWidth_ = cm.getWidth(this.columnIndex + 1);
    },

    /**
     * Handles spliter moves. Sets new width of the column.
     * @override
     */
    handleSplitterDragMove: function(deltaX) {
      this.table_.columnModel.setWidth(
          this.columnIndex, this.columnWidth_ + deltaX);
    },

    /**
     * Handles end of the splitter dragging. Restores cursor.
     * @override
     */
    handleSplitterDragEnd: function() {
      this.ownerDocument.documentElement.classList.remove('col-resize');
      cr.dispatchSimpleEvent(this, 'column-resize-end', true);
    },
  };

  /**
   * The column index.
   * @type {number}
   */
  cr.defineProperty(TableSplitter, 'columnIndex');

  /**
   * The table associated with the splitter.
   * @type {Element}
   */
  cr.defineProperty(TableSplitter, 'table');

  return {TableSplitter: TableSplitter};
});