1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* TabSwitcher is an implementation of View that handles tab switching.
*
* +-----------------------------------+
* | Tab1 / Tab2 / Tab3 / .. | <- tab handle view
* +-----------------------------------+
* | |
* | |
* | |
* | stacked tab content areas |
* | (only 1 is visible at a time) |
* | |
* | |
* | |
* +-----------------------------------+
*
* @parameter {!View} tabHandleView the view that contains the tab handles.
*
* @constructor
*/
function TabSwitcherView(tabHandleView) {
View.call(this);
this.tabHandleView_ = tabHandleView;
this.tabs_ = [];
}
inherits(TabSwitcherView, View);
TabSwitcherView.prototype.setGeometry = function(left, top, width, height) {
TabSwitcherView.superClass_.setGeometry.call(this, left, top, width, height);
this.tabHandleView_.setGeometry(
left, top, width, this.tabHandleView_.getHeight());
var contentTop = this.tabHandleView_.getBottom();
var contentHeight = height - this.tabHandleView_.getHeight();
// Position each of the tabs content areas.
for (var i = 0; i < this.tabs_.length; ++i) {
var tab = this.tabs_[i];
tab.contentView.setGeometry(left, contentTop, width, contentHeight);
}
};
TabSwitcherView.prototype.show = function(isVisible) {
TabSwitcherView.superClass_.show.call(this, isVisible);
this.tabHandleView_.show(isVisible);
var activeTab = this.findActiveTab();
if (activeTab)
activeTab.contentView.show(isVisible);
};
/**
* Adds a new tab (initially hidden).
*
* @param {String} id The ID for DOM node that will be made clickable to select
* this tab. This is also the ID we use to identify the
* "tab".
* @param {!View} view The tab's actual contents.
*/
TabSwitcherView.prototype.addTab = function(id, contentView) {
var tab = new TabEntry(id, contentView);
this.tabs_.push(tab);
// Attach a click handler, used to switch to the tab.
var self = this;
tab.getTabHandleNode().onclick = function() {
self.switchToTab(id);
};
// Start tabs off as hidden.
tab.contentView.show(false);
};
/**
* Returns the currently selected tab, or null if there is none.
* @returns {!TabEntry}
*/
TabSwitcherView.prototype.findActiveTab = function() {
for (var i = 0; i < this.tabs_.length; ++i) {
var tab = this.tabs_[i];
if (tab.active)
return tab;
}
return null;
};
/**
* Returns the tab with ID |id|.
* @returns {!TabEntry}
*/
TabSwitcherView.prototype.findTabById = function(id) {
for (var i = 0; i < this.tabs_.length; ++i) {
var tab = this.tabs_[i];
if (tab.id == id)
return tab;
}
return null;
};
/**
* Focuses on tab with ID |id|.
*/
TabSwitcherView.prototype.switchToTab = function(id) {
var oldTab = this.findActiveTab();
if (oldTab)
oldTab.setSelected(false);
var newTab = this.findTabById(id);
newTab.setSelected(true);
};
//-----------------------------------------------------------------------------
/**
* @constructor
*/
function TabEntry(id, contentView) {
this.id = id;
this.contentView = contentView;
}
TabEntry.prototype.setSelected = function(isSelected) {
this.active = isSelected;
changeClassName(this.getTabHandleNode(), 'selected', isSelected);
this.contentView.show(isSelected);
};
/**
* Returns the DOM node that is used to select the tab.
*/
TabEntry.prototype.getTabHandleNode = function() {
return document.getElementById(this.id);
};
|
