| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2011 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 * This view implements a vertically split display with a draggable divider. | |
| 7 * | |
| 8 * <<-- sizer -->> | |
| 9 * | |
| 10 * +----------------------++----------------+ | |
| 11 * | || | | |
| 12 * | || | | |
| 13 * | || | | |
| 14 * | || | | |
| 15 * | leftView || rightView | | |
| 16 * | || | | |
| 17 * | || | | |
| 18 * | || | | |
| 19 * | || | | |
| 20 * | || | | |
| 21 * +----------------------++----------------+ | |
| 22 * | |
| 23 * @param {!View} leftView The widget to position on the left. | |
| 24 * @param {!View} rightView The widget to position on the right. | |
| 25 * @param {!DivView} sizerView The widget that will serve as draggable divider. | |
| 26 * @constructor | |
| 27 */ | |
| 28 function ResizableVerticalSplitView(leftView, rightView, sizerView) { | |
| 29 View.call(this); | |
| 30 | |
| 31 this.leftView_ = leftView; | |
| 32 this.rightView_ = rightView; | |
| 33 this.sizerView_ = sizerView; | |
| 34 | |
| 35 // Setup the "sizer" so it can be dragged left/right to reposition the | |
| 36 // vertical split. | |
| 37 sizerView.getNode().addEventListener( | |
| 38 'mousedown', this.onDragSizerStart_.bind(this), true); | |
| 39 } | |
| 40 | |
| 41 inherits(ResizableVerticalSplitView, View); | |
| 42 | |
| 43 // Minimum width to size panels to, in pixels. | |
| 44 ResizableVerticalSplitView.MIN_PANEL_WIDTH = 50; | |
| 45 | |
| 46 /** | |
| 47 * Sets the width of the left view. | |
| 48 * @param {Integer} px The number of pixels | |
| 49 */ | |
| 50 ResizableVerticalSplitView.prototype.setLeftSplit = function(px) { | |
| 51 this.leftSplit_ = px; | |
| 52 }; | |
| 53 | |
| 54 /** | |
| 55 * Repositions all of the elements to fit the window. | |
| 56 */ | |
| 57 ResizableVerticalSplitView.prototype.setGeometry = function( | |
| 58 left, top, width, height) { | |
| 59 ResizableVerticalSplitView.superClass_.setGeometry.call( | |
| 60 this, left, top, width, height); | |
| 61 | |
| 62 // If this is the first setGeometry(), initialize the split point at 50%. | |
| 63 if (!this.leftSplit_) | |
| 64 this.leftSplit_ = parseInt((width / 2).toFixed(0)); | |
| 65 | |
| 66 // Calculate the horizontal split points. | |
| 67 var leftboxWidth = this.leftSplit_; | |
| 68 var sizerWidth = this.sizerView_.getWidth(); | |
| 69 var rightboxWidth = width - (leftboxWidth + sizerWidth); | |
| 70 | |
| 71 // Don't let the right pane get too small. | |
| 72 if (rightboxWidth < ResizableVerticalSplitView.MIN_PANEL_WIDTH) { | |
| 73 rightboxWidth = ResizableVerticalSplitView.MIN_PANEL_WIDTH; | |
| 74 leftboxWidth = width - (sizerWidth + rightboxWidth); | |
| 75 } | |
| 76 | |
| 77 // Position the boxes using calculated split points. | |
| 78 this.leftView_.setGeometry(left, top, leftboxWidth, height); | |
| 79 this.sizerView_.setGeometry(this.leftView_.getRight(), top, | |
| 80 sizerWidth, height); | |
| 81 this.rightView_.setGeometry(this.sizerView_.getRight(), top, | |
| 82 rightboxWidth, height); | |
| 83 }; | |
| 84 | |
| 85 ResizableVerticalSplitView.prototype.show = function(isVisible) { | |
| 86 ResizableVerticalSplitView.superClass_.show.call(this, isVisible); | |
| 87 this.leftView_.show(isVisible); | |
| 88 this.sizerView_.show(isVisible); | |
| 89 this.rightView_.show(isVisible); | |
| 90 }; | |
| 91 | |
| 92 /** | |
| 93 * Called once we have clicked into the sizer. Starts capturing the mouse | |
| 94 * position to implement dragging. | |
| 95 */ | |
| 96 ResizableVerticalSplitView.prototype.onDragSizerStart_ = function(event) { | |
| 97 this.sizerMouseMoveListener_ = this.onDragSizer.bind(this); | |
| 98 this.sizerMouseUpListener_ = this.onDragSizerEnd.bind(this); | |
| 99 | |
| 100 window.addEventListener('mousemove', this.sizerMouseMoveListener_, true); | |
| 101 window.addEventListener('mouseup', this.sizerMouseUpListener_, true); | |
| 102 | |
| 103 event.preventDefault(); | |
| 104 }; | |
| 105 | |
| 106 /** | |
| 107 * Called when the mouse has moved after dragging started. | |
| 108 */ | |
| 109 ResizableVerticalSplitView.prototype.onDragSizer = function(event) { | |
| 110 // Convert from page coordinates, to view coordinates. | |
| 111 this.leftSplit_ = (event.pageX - this.getLeft()); | |
| 112 | |
| 113 // Avoid shrinking the left box too much. | |
| 114 this.leftSplit_ = Math.max( | |
| 115 this.leftSplit_, ResizableVerticalSplitView.MIN_PANEL_WIDTH); | |
| 116 // Avoid shrinking the right box too much. | |
| 117 this.leftSplit_ = Math.min( | |
| 118 this.leftSplit_, | |
| 119 this.getWidth() - ResizableVerticalSplitView.MIN_PANEL_WIDTH); | |
| 120 | |
| 121 // Force a layout with the new |leftSplit_|. | |
| 122 this.setGeometry( | |
| 123 this.getLeft(), this.getTop(), this.getWidth(), this.getHeight()); | |
| 124 }; | |
| 125 | |
| 126 /** | |
| 127 * Called once the mouse has been released, and the dragging is over. | |
| 128 */ | |
| 129 ResizableVerticalSplitView.prototype.onDragSizerEnd = function(event) { | |
| 130 window.removeEventListener('mousemove', this.sizerMouseMoveListener_, true); | |
| 131 window.removeEventListener('mouseup', this.sizerMouseUpListener_, true); | |
| 132 | |
| 133 this.sizerMouseMoveListener_ = null; | |
| 134 this.sizerMouseUpListener_ = null; | |
| 135 | |
| 136 event.preventDefault(); | |
| 137 }; | |
| OLD | NEW |