src/ui/webui/resources/js/cr/ui/table/table_splitter.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 /**
   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
  13 cr.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 {cr.ui.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      * @override
  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      * @override
  56      */
  57     handleSplitterDragMove: function(deltaX) {
  58       this.table_.columnModel.setWidth(this.columnIndex,
  59                                        this.columnWidth_ + deltaX);
  60     },
  61
  62     /**
  63      * Handles end of the splitter dragging. Restores cursor.
  64      * @override
  65      */
  66     handleSplitterDragEnd: function() {
  67       this.ownerDocument.documentElement.classList.remove('col-resize');
  68       cr.dispatchSimpleEvent(this, 'column-resize-end', true);
  69     },
  70   };
  71
  72   /**
  73    * The column index.
  74    * @type {number}
  75    */
  76   cr.defineProperty(TableSplitter, 'columnIndex');
  77
  78   /**
  79    * The table associated with the splitter.
  80    * @type {cr.ui.Table}
  81    */
  82   cr.defineProperty(TableSplitter, 'table');
  83
  84   return {
  85     TableSplitter: TableSplitter
  86   };
  87 });