Home | History | Annotate | Download | only in ui 
      1 // Copyright 2014 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  * @constructor
      7  * @extends {WebInspector.Object}
      8  */
      9 WebInspector.ResizerWidget = function()
     10 {
     11     WebInspector.Object.call(this);
     12 
     13     this._isEnabled = true;
     14     this._isVertical = true;
     15     this._elements = [];
     16     this._installDragOnMouseDownBound = this._installDragOnMouseDown.bind(this);
     17 };
     18 
     19 WebInspector.ResizerWidget.Events = {
     20     ResizeStart: "ResizeStart",
     21     ResizeUpdate: "ResizeUpdate",
     22     ResizeEnd: "ResizeEnd"
     23 };
     24 
     25 WebInspector.ResizerWidget.prototype = {
     26     /**
     27      * @return {boolean}
     28      */
     29     isEnabled: function()
     30     {
     31         return this._isEnabled;
     32     },
     33 
     34     /**
     35      * @param {boolean} enabled
     36      */
     37     setEnabled: function(enabled)
     38     {
     39         this._isEnabled = enabled;
     40         this._updateElementsClass();
     41     },
     42 
     43     /**
     44      * @return {boolean}
     45      */
     46     isVertical: function()
     47     {
     48         return this._isVertical;
     49     },
     50 
     51     /**
     52      * Vertical widget resizes height (along y-axis).
     53      * @param {boolean} vertical
     54      */
     55     setVertical: function(vertical)
     56     {
     57         this._isVertical = vertical;
     58         this._updateElementsClass();
     59     },
     60 
     61     /**
     62      * @return {!Array.<!Element>}
     63      */
     64     elements: function()
     65     {
     66         return this._elements.slice();
     67     },
     68 
     69     /**
     70      * @param {!Element} element
     71      */
     72     addElement: function(element)
     73     {
     74         if (this._elements.indexOf(element) !== -1)
     75             return;
     76 
     77         this._elements.push(element);
     78         element.addEventListener("mousedown", this._installDragOnMouseDownBound, false);
     79         element.classList.toggle("ns-resizer-widget", this._isVertical && this._isEnabled);
     80         element.classList.toggle("ew-resizer-widget", !this._isVertical && this._isEnabled);
     81     },
     82 
     83     /**
     84      * @param {!Element} element
     85      */
     86     removeElement: function(element)
     87     {
     88         if (this._elements.indexOf(element) === -1)
     89             return;
     90 
     91         this._elements.remove(element);
     92         element.removeEventListener("mousedown", this._installDragOnMouseDownBound, false);
     93         element.classList.remove("ns-resizer-widget");
     94         element.classList.remove("ew-resizer-widget");
     95     },
     96 
     97     _updateElementsClass: function()
     98     {
     99         for (var i = 0; i < this._elements.length; ++i) {
    100             this._elements[i].classList.toggle("ns-resizer-widget", this._isVertical && this._isEnabled);
    101             this._elements[i].classList.toggle("ew-resizer-widget", !this._isVertical && this._isEnabled);
    102         }
    103     },
    104 
    105     /**
    106      * @param {!Event} event
    107      */
    108     _installDragOnMouseDown: function(event)
    109     {
    110         // Only handle drags of the nodes specified.
    111         if (this._elements.indexOf(event.target) === -1)
    112             return false;
    113         WebInspector.elementDragStart(this._dragStart.bind(this), this._drag.bind(this), this._dragEnd.bind(this), this._isVertical ? "ns-resize" : "ew-resize", event);
    114     },
    115 
    116     /**
    117      * @param {!MouseEvent} event
    118      * @return {boolean}
    119      */
    120     _dragStart: function(event)
    121     {
    122         if (!this._isEnabled)
    123             return false;
    124         this._startPosition = this._isVertical ? event.pageY : event.pageX;
    125         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeStart, { startPosition: this._startPosition, currentPosition: this._startPosition });
    126         return true;
    127     },
    128 
    129     /**
    130      * @param {!MouseEvent} event
    131      * @return {boolean}
    132      */
    133     _drag: function(event)
    134     {
    135         if (!this._isEnabled) {
    136             this._dragEnd(event);
    137             return true;  // Cancel drag.
    138         }
    139 
    140         var position = this._isVertical ? event.pageY : event.pageX;
    141         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startPosition: this._startPosition, currentPosition: position, shiftKey: event.shiftKey });
    142         event.preventDefault();
    143         return false;  // Continue drag.
    144     },
    145 
    146     /**
    147      * @param {!MouseEvent} event
    148      */
    149     _dragEnd: function(event)
    150     {
    151         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeEnd);
    152         delete this._startPosition;
    153     },
    154 
    155     __proto__: WebInspector.Object.prototype
    156 };
    157