// 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(tabHandleDivId) { document.getElementById(tabHandleDivId).classList.add('tab-switcher-view'); var tabHandleView = new DivView(tabHandleDivId); 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, switchOnClick) { var tab = new TabEntry(id, contentView); this.tabs_.push(tab); if (switchOnClick) { // Attach a click handler, used to switch to the tab. var self = this; tab.getTabHandleNode().onclick = function() { self.switchToTab(id, null); }; } // 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|. |params| is a dictionary that will be * passed to the tab's setParameters function, if it's non-null. */ TabSwitcherView.prototype.switchToTab = function(id, params) { var oldTab = this.findActiveTab(); if (oldTab) oldTab.setSelected(false); var newTab = this.findTabById(id); newTab.setSelected(true); if (params) newTab.contentView.setParameters(params); // Update data needed by newly active tab, as it may be // significantly out of date. if (typeof g_browser != 'undefined' && g_browser.checkForUpdatedInfo) g_browser.checkForUpdatedInfo(); }; TabSwitcherView.prototype.getAllTabIds = function() { var ids = []; for (var i = 0; i < this.tabs_.length; ++i) ids.push(this.tabs_[i].id); return ids; }; // Shows/hides the DOM node that is used to select the tab. Will not change // the active tab. TabSwitcherView.prototype.showTabHandleNode = function(id, isVisible) { var tab = this.findTabById(id); setNodeDisplay(tab.getTabHandleNode(), isVisible); }; //----------------------------------------------------------------------------- /** * @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); };