third_party/WebKit/Source/devtools/front_end/ui/ResizerWidget.js

   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._elements = [];
  15     this._installDragOnMouseDownBound = this._installDragOnMouseDown.bind(this);
  16     this._cursor = "nwse-resize";
  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.updateElementCursors();
  41     },
  42
  43     /**
  44      * @return {!Array.<!Element>}
  45      */
  46     elements: function()
  47     {
  48         return this._elements.slice();
  49     },
  50
  51     /**
  52      * @param {!Element} element
  53      */
  54     addElement: function(element)
  55     {
  56         if (this._elements.indexOf(element) !== -1)
  57             return;
  58
  59         this._elements.push(element);
  60         element.addEventListener("mousedown", this._installDragOnMouseDownBound, false);
  61         this._updateElementCursor(element);
  62     },
  63
  64     /**
  65      * @param {!Element} element
  66      */
  67     removeElement: function(element)
  68     {
  69         if (this._elements.indexOf(element) === -1)
  70             return;
  71
  72         this._elements.remove(element);
  73         element.removeEventListener("mousedown", this._installDragOnMouseDownBound, false);
  74         element.style.removeProperty("cursor");
  75     },
  76
  77     updateElementCursors: function()
  78     {
  79         this._elements.forEach(this._updateElementCursor.bind(this));
  80     },
  81
  82     /**
  83      * @param {!Element} element
  84      */
  85     _updateElementCursor: function(element)
  86     {
  87         if (this._isEnabled)
  88             element.style.setProperty("cursor", this.cursor());
  89         else
  90             element.style.removeProperty("cursor");
  91     },
  92
  93     /**
  94      * @return {string}
  95      */
  96     cursor: function()
  97     {
  98         return this._cursor;
  99     },
 100
 101     /**
 102      * @param {string} cursor
 103      */
 104     setCursor: function(cursor)
 105     {
 106         this._cursor = cursor;
 107         this.updateElementCursors();
 108     },
 109
 110     /**
 111      * @param {!Event} event
 112      */
 113     _installDragOnMouseDown: function(event)
 114     {
 115         // Only handle drags of the nodes specified.
 116         if (this._elements.indexOf(event.target) === -1)
 117             return false;
 118         WebInspector.elementDragStart(this._dragStart.bind(this), this._drag.bind(this), this._dragEnd.bind(this), this.cursor(), event);
 119     },
 120
 121     /**
 122      * @param {!MouseEvent} event
 123      * @return {boolean}
 124      */
 125     _dragStart: function(event)
 126     {
 127         if (!this._isEnabled)
 128             return false;
 129         this._startX = event.pageX;
 130         this._startY = event.pageY;
 131         this.sendDragStart(this._startX, this._startY);
 132         return true;
 133     },
 134
 135     /**
 136      * @param {number} x
 137      * @param {number} y
 138      */
 139     sendDragStart: function(x, y)
 140     {
 141         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeStart, { startX: x, currentX: x, startY: y, currentY: y });
 142     },
 143
 144     /**
 145      * @param {!MouseEvent} event
 146      * @return {boolean}
 147      */
 148     _drag: function(event)
 149     {
 150         if (!this._isEnabled) {
 151             this._dragEnd(event);
 152             return true;  // Cancel drag.
 153         }
 154
 155         this.sendDragMove(this._startX, event.pageX, this._startY, event.pageY, event.shiftKey);
 156         event.preventDefault();
 157         return false;  // Continue drag.
 158     },
 159
 160     /**
 161      * @param {number} startX
 162      * @param {number} currentX
 163      * @param {number} startY
 164      * @param {number} currentY
 165      * @param {boolean} shiftKey
 166      */
 167     sendDragMove: function(startX, currentX, startY, currentY, shiftKey)
 168     {
 169         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startX: startX, currentX: currentX, startY: startY, currentY: currentY, shiftKey: shiftKey });
 170     },
 171
 172     /**
 173      * @param {!MouseEvent} event
 174      */
 175     _dragEnd: function(event)
 176     {
 177         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeEnd);
 178         delete this._startX;
 179         delete this._startY;
 180     },
 181
 182     __proto__: WebInspector.Object.prototype
 183 };
 184
 185 /**
 186  * @constructor
 187  * @extends {WebInspector.ResizerWidget}
 188  */
 189 WebInspector.SimpleResizerWidget = function()
 190 {
 191     WebInspector.ResizerWidget.call(this);
 192     this._isVertical = true;
 193 };
 194
 195 WebInspector.SimpleResizerWidget.prototype = {
 196     /**
 197      * @return {boolean}
 198      */
 199     isVertical: function()
 200     {
 201         return this._isVertical;
 202     },
 203
 204     /**
 205      * Vertical widget resizes height (along y-axis).
 206      * @param {boolean} vertical
 207      */
 208     setVertical: function(vertical)
 209     {
 210         this._isVertical = vertical;
 211         this.updateElementCursors();
 212     },
 213
 214     /**
 215      * @override
 216      * @return {string}
 217      */
 218     cursor: function()
 219     {
 220         return this._isVertical ? "ns-resize" : "ew-resize";
 221     },
 222
 223     /**
 224      * @override
 225      * @param {number} x
 226      * @param {number} y
 227      */
 228     sendDragStart: function(x, y)
 229     {
 230         var position = this._isVertical ? y : x;
 231         this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeStart, { startPosition: position, currentPosition: position });
 232     },
 233
 234     /**
 235      * @override
 236      * @param {number} startX
 237      * @param {number} currentX
 238      * @param {number} startY
 239      * @param {number} currentY
 240      * @param {boolean} shiftKey
 241      */
 242     sendDragMove: function(startX, currentX, startY, currentY, shiftKey)
 243     {
 244         if (this._isVertical)
 245             this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startPosition: startY, currentPosition: currentY, shiftKey: shiftKey });
 246         else
 247             this.dispatchEventToListeners(WebInspector.ResizerWidget.Events.ResizeUpdate, { startPosition: startX, currentPosition: currentX, shiftKey: shiftKey });
 248     },
 249
 250     __proto__: WebInspector.ResizerWidget.prototype
 251 };