OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview This implements a splitter element which can be used to resize | 6 * @fileoverview This implements a splitter element which can be used to resize |
7 * elements in split panes. | 7 * elements in split panes. |
8 * | 8 * |
9 * The parent of the splitter should be an hbox (display: -webkit-box) with at | 9 * The parent of the splitter should be an hbox (display: -webkit-box) with at |
10 * least one previous element sibling. The splitter controls the width of the | 10 * least one previous element sibling. The splitter controls the width of the |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
71 'mousedown', this.handleMouseDown_.bind(this), true); | 71 'mousedown', this.handleMouseDown_.bind(this), true); |
72 this.addEventListener( | 72 this.addEventListener( |
73 'touchstart', this.handleTouchStart_.bind(this), true); | 73 'touchstart', this.handleTouchStart_.bind(this), true); |
74 this.resizeNextElement_ = false; | 74 this.resizeNextElement_ = false; |
75 }, | 75 }, |
76 | 76 |
77 /** | 77 /** |
78 * @param {boolean} resizeNext True if resize the next element. | 78 * @param {boolean} resizeNext True if resize the next element. |
79 * By default, splitter resizes previous (left) element. | 79 * By default, splitter resizes previous (left) element. |
80 */ | 80 */ |
81 set resizeNextElement(resizeNext) { this.resizeNextElement_ = resizeNext; }, | 81 set resizeNextElement(resizeNext) { |
| 82 this.resizeNextElement_ = resizeNext; |
| 83 }, |
82 | 84 |
83 /** | 85 /** |
84 * Starts the dragging of the splitter. Adds listeners for mouse or touch | 86 * Starts the dragging of the splitter. Adds listeners for mouse or touch |
85 * events and calls splitter drag start handler. | 87 * events and calls splitter drag start handler. |
86 * @param {number} clientX X position of the mouse or touch event that | 88 * @param {number} clientX X position of the mouse or touch event that |
87 * started the drag. | 89 * started the drag. |
88 * @param {boolean} isTouchEvent True if the drag started by touch event. | 90 * @param {boolean} isTouchEvent True if the drag started by touch event. |
89 */ | 91 */ |
90 startDrag: function(clientX, isTouchEvent) { | 92 startDrag: function(clientX, isTouchEvent) { |
91 if (this.handlers_) { | 93 if (this.handlers_) { |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
180 e.preventDefault(); | 182 e.preventDefault(); |
181 } | 183 } |
182 }, | 184 }, |
183 | 185 |
184 /** | 186 /** |
185 * Handles the mousemove event which moves the splitter as the user moves | 187 * Handles the mousemove event which moves the splitter as the user moves |
186 * the mouse. | 188 * the mouse. |
187 * @param {!MouseEvent} e The mouse event. | 189 * @param {!MouseEvent} e The mouse event. |
188 * @private | 190 * @private |
189 */ | 191 */ |
190 handleMouseMove_: function(e) { this.handleMove_(e.clientX); }, | 192 handleMouseMove_: function(e) { |
| 193 this.handleMove_(e.clientX); |
| 194 }, |
191 | 195 |
192 /** | 196 /** |
193 * Handles the touch move event. | 197 * Handles the touch move event. |
194 * @param {!TouchEvent} e The touch event. | 198 * @param {!TouchEvent} e The touch event. |
195 */ | 199 */ |
196 handleTouchMove_: function(e) { | 200 handleTouchMove_: function(e) { |
197 if (e.touches.length == 1) | 201 if (e.touches.length == 1) |
198 this.handleMove_(e.touches[0].clientX); | 202 this.handleMove_(e.touches[0].clientX); |
199 }, | 203 }, |
200 | 204 |
(...skipping 10 matching lines...) Expand all Loading... |
211 var dirMultiplier = rtl ? -1 : 1; | 215 var dirMultiplier = rtl ? -1 : 1; |
212 var deltaX = dirMultiplier * (clientX - this.startX_); | 216 var deltaX = dirMultiplier * (clientX - this.startX_); |
213 this.handleSplitterDragMove(deltaX); | 217 this.handleSplitterDragMove(deltaX); |
214 }, | 218 }, |
215 | 219 |
216 /** | 220 /** |
217 * Handles the mouse up event which ends the dragging of the splitter. | 221 * Handles the mouse up event which ends the dragging of the splitter. |
218 * @param {!MouseEvent} e The mouse event. | 222 * @param {!MouseEvent} e The mouse event. |
219 * @private | 223 * @private |
220 */ | 224 */ |
221 handleMouseUp_: function(e) { this.endDrag_(); }, | 225 handleMouseUp_: function(e) { |
| 226 this.endDrag_(); |
| 227 }, |
222 | 228 |
223 /** | 229 /** |
224 * Handles start of the splitter dragging. Saves current width of the | 230 * Handles start of the splitter dragging. Saves current width of the |
225 * element being resized. | 231 * element being resized. |
226 * @protected | 232 * @protected |
227 */ | 233 */ |
228 handleSplitterDragStart: function() { | 234 handleSplitterDragStart: function() { |
229 // Use the computed width style as the base so that we can ignore what | 235 // Use the computed width style as the base so that we can ignore what |
230 // box sizing the element has. | 236 // box sizing the element has. |
231 var targetElement = this.getResizeTarget_(); | 237 var targetElement = this.getResizeTarget_(); |
(...skipping 24 matching lines...) Expand all Loading... |
256 var doc = targetElement.ownerDocument; | 262 var doc = targetElement.ownerDocument; |
257 var computedWidth = | 263 var computedWidth = |
258 parseFloat(doc.defaultView.getComputedStyle(targetElement).width); | 264 parseFloat(doc.defaultView.getComputedStyle(targetElement).width); |
259 if (this.startWidth_ != computedWidth) | 265 if (this.startWidth_ != computedWidth) |
260 cr.dispatchSimpleEvent(this, 'resize'); | 266 cr.dispatchSimpleEvent(this, 'resize'); |
261 }, | 267 }, |
262 }; | 268 }; |
263 | 269 |
264 return {Splitter: Splitter}; | 270 return {Splitter: Splitter}; |
265 }); | 271 }); |
OLD | NEW |