OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2010 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 * The class LayoutManager implements a vertically split layout that takes up |
| 7 * the whole window, and provides a draggable bar to resize the left and right |
| 8 * panes. Its elements are layed out as follows: |
| 9 * |
| 10 * |
| 11 * <<-- sizer -->> |
| 12 * |
| 13 * +----------------------++----------------+ |
| 14 * | topbar || | |
| 15 * +----------------------+| | |
| 16 * | || | |
| 17 * | || | |
| 18 * | || | |
| 19 * | || | |
| 20 * | middlebox || rightbox | |
| 21 * | || | |
| 22 * | || | |
| 23 * | || | |
| 24 * | || | |
| 25 * | || | |
| 26 * +----------------------++ | |
| 27 * | bottombar || | |
| 28 * +----------------------++----------------+ |
| 29 * |
| 30 * The "topbar" and "bottombar" have a fixed height which is determined |
| 31 * by their initial content height. The rest of the boxes fill to occupy the |
| 32 * remaining space. |
| 33 * |
| 34 * The consumer provides DIVs for each of these regions, and the LayoutManager |
| 35 * positions them correctly in the window. |
| 36 * |
| 37 * @constructor |
| 38 */ |
| 39 function LayoutManager(topbarId, |
| 40 middleboxId, |
| 41 bottombarId, |
| 42 sizerId, |
| 43 rightboxId) { |
| 44 // Lookup the elements. |
| 45 this.topbar_ = document.getElementById(topbarId); |
| 46 this.middlebox_ = document.getElementById(middleboxId); |
| 47 this.bottombar_ = document.getElementById(bottombarId); |
| 48 this.sizer_ = document.getElementById(sizerId); |
| 49 this.rightbox_ = document.getElementById(rightboxId); |
| 50 |
| 51 // Make all the elements absolutely positioned. |
| 52 this.topbar_.style.position = "absolute"; |
| 53 this.middlebox_.style.position = "absolute"; |
| 54 this.bottombar_.style.position = "absolute"; |
| 55 this.sizer_.style.position = "absolute"; |
| 56 this.rightbox_.style.position = "absolute"; |
| 57 |
| 58 // Set the initial split position at 50%. |
| 59 setNodeWidth(this.rightbox_, window.innerWidth / 2); |
| 60 |
| 61 // Setup the "sizer" so it can be dragged left/right to reposition the |
| 62 // vertical split. |
| 63 this.sizer_.addEventListener("mousedown", this.onDragSizerStart_.bind(this), |
| 64 true); |
| 65 |
| 66 // Recalculate the layout whenever the window size changes. |
| 67 window.addEventListener("resize", this.recalculateLayout_.bind(this), true); |
| 68 |
| 69 // Do the initial layout . |
| 70 this.recalculateLayout_(); |
| 71 } |
| 72 |
| 73 // Minimum width to size panels to, in pixels. |
| 74 LayoutManager.MIN_PANEL_WIDTH = 50; |
| 75 |
| 76 /** |
| 77 * Repositions all of the elements to fit the window. |
| 78 */ |
| 79 LayoutManager.prototype.recalculateLayout_ = function() { |
| 80 // Calculate the horizontal split points. |
| 81 var totalWidth = window.innerWidth; |
| 82 var rightboxWidth = this.rightbox_.offsetWidth; |
| 83 var sizerWidth = this.sizer_.offsetWidth; |
| 84 var leftPaneWidth = totalWidth - (rightboxWidth + sizerWidth); |
| 85 |
| 86 // Don't let the left pane get too small. |
| 87 if (leftPaneWidth < LayoutManager.MIN_PANEL_WIDTH) { |
| 88 leftPaneWidth = LayoutManager.MIN_PANEL_WIDTH; |
| 89 rightboxWidth = totalWidth - (sizerWidth + leftPaneWidth); |
| 90 } |
| 91 |
| 92 // Calculate the vertical split points. |
| 93 var totalHeight = window.innerHeight; |
| 94 var topbarHeight = this.topbar_.offsetHeight; |
| 95 var bottombarHeight = this.bottombar_.offsetHeight; |
| 96 var middleboxHeight = totalHeight - (topbarHeight + bottombarHeight); |
| 97 |
| 98 // Position the boxes using calculated split points. |
| 99 setNodePosition(this.topbar_, 0, 0, |
| 100 leftPaneWidth, topbarHeight); |
| 101 setNodePosition(this.middlebox_, 0, topbarHeight, |
| 102 leftPaneWidth, |
| 103 middleboxHeight); |
| 104 setNodePosition(this.bottombar_, 0, (topbarHeight + middleboxHeight), |
| 105 leftPaneWidth, bottombarHeight); |
| 106 |
| 107 setNodePosition(this.sizer_, leftPaneWidth, 0, |
| 108 sizerWidth, totalHeight); |
| 109 setNodePosition(this.rightbox_, leftPaneWidth + sizerWidth, 0, |
| 110 rightboxWidth, totalHeight); |
| 111 }; |
| 112 |
| 113 /** |
| 114 * Called once we have clicked into the sizer. Starts capturing the mouse |
| 115 * position to implement dragging. |
| 116 */ |
| 117 LayoutManager.prototype.onDragSizerStart_ = function(event) { |
| 118 this.sizerMouseMoveListener_ = this.onDragSizer.bind(this); |
| 119 this.sizerMouseUpListener_ = this.onDragSizerEnd.bind(this); |
| 120 |
| 121 window.addEventListener("mousemove", this.sizerMouseMoveListener_, true); |
| 122 window.addEventListener("mouseup", this.sizerMouseUpListener_, true); |
| 123 |
| 124 event.preventDefault(); |
| 125 }; |
| 126 |
| 127 /** |
| 128 * Called when the mouse has moved after dragging started. |
| 129 */ |
| 130 LayoutManager.prototype.onDragSizer = function(event) { |
| 131 var newWidth = window.innerWidth - event.pageX; |
| 132 |
| 133 // Avoid shrinking the right box too much. |
| 134 newWidth = Math.max(newWidth, LayoutManager.MIN_PANEL_WIDTH); |
| 135 |
| 136 setNodeWidth(this.rightbox_, newWidth); |
| 137 this.recalculateLayout_(); |
| 138 }; |
| 139 |
| 140 /** |
| 141 * Called once the mouse has been released, and the dragging is over. |
| 142 */ |
| 143 LayoutManager.prototype.onDragSizerEnd = function(event) { |
| 144 window.removeEventListener("mousemove", this.sizerMouseMoveListener_, true); |
| 145 window.removeEventListener("mouseup", this.sizerMouseUpListener_, true); |
| 146 |
| 147 this.sizerMouseMoveListener_ = null; |
| 148 this.sizerMouseUpListener_ = null; |
| 149 |
| 150 event.preventDefault(); |
| 151 }; |
OLD | NEW |