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 |