1 

     2 function TabView(id, caption) {

     3     if (id != UI_NO_INIT_ID) {

     4         this.init(id, caption);

     5     }

     6 }

     7 

     8 // TabView inherits from View.

     9 TabView.prototype = new View(UI_NO_INIT_ID);

    10 

    11 // The caption of this view; null if none.

    12 TabView.prototype.caption = null;

    13 

    14 // The caption element of this view.

    15 TabView.prototype.captionElement = null;

    16 

    17 // The caption element of this view.

    18 TabView.prototype.captionTextElement = null;

    19 

    20 // Root HTML element for controls.

    21 TabView.prototype.tabViewRootElement = null;

    22 

    23 // HTML element for tabs heading .

    24 TabView.prototype.tabsElement = null;

    25 

    26 // HTML element for tab content.

    27 TabView.prototype.tabContent = null;

    28 

    29 // List of tabs in the view.

    30 TabView.prototype.tabs = [];

    31 

    32 // List of tab captions in the view.

    33 TabView.prototype.tabCaptions = [];

    34 

    35 // List of tab captions in the view.

    36 TabView.prototype.tabHeadElements = [];

    37 

    38 // Current tab in this view

    39 TabView.prototype.currentTab = null;

    40 

    41 // Initializer for TabView.

    42 TabView.prototype.init = function(id, caption) {

    43     uiLogger.debug("ListView.init(" + id + ", " + caption + ")");

    44     

    45     // call superclass initializer

    46     View.prototype.init.call(this, id);

    47     

    48     // init control array

    49     this.controls = [];

    50     

    51     // set style class name for root element - reuse ListView style

    52     this.rootElement.className = "ListView";

    53     

    54     // create caption and caption text elements

    55     this.captionElement = document.createElement("div");

    56     this.captionElement.className = "ListViewCaption";

    57     this.captionTextElement = document.createElement("div");

    58     this.captionTextElement.className = "ListViewCaptionText";

    59     this.captionElement.appendChild(this.captionTextElement);

    60     this.rootElement.appendChild(this.captionElement);

    61     

    62     // create root element for controls and add to the view root element

    63     this.tabViewRootElement = document.createElement("div");

    64     this.tabViewRootElement.className = "ListViewControlList";

    65     this.tabsElement = document.createElement("div");

    66     this.tabsElement.className = "ListViewCaption";

    67     this.tabContent = document.createElement("div");

    68     this.tabViewRootElement.appendChild(this.tabsElement);

    69     this.tabViewRootElement.appendChild(this.tabContent);

    70     this.rootElement.appendChild(this.tabViewRootElement);

    71     

    72     // set the caption

    73     this.setCaption(caption);

    74 }

    75 

    76 // Returns the caption; null if none.

    77 TabView.prototype.getCaption = function() {

    78     return this.caption;

    79 }

    80 

    81 // Sets the caption; null if none.

    82 TabView.prototype.setCaption = function(caption) {

    83     uiLogger.debug("ListView.setCaption(" + caption + ")");

    84     

    85     // set the display style

    86     this.captionElement.style.display = (caption == null) ? "none" : "block";

    87     

    88     // set the caption

    89     this.caption = caption;

    90     this.captionTextElement.innerHTML = (caption == null) ? "" : caption;

    91 }

    92 

    93 // Add a ListView as a tab

    94 TabView.prototype.addTab = function(tab) {

    95 	this.addTab(tab, tab.getCaption());

    96 }

    97 

    98 // Add a ListView as a tab specifying a label

    99 TabView.prototype.addTab = function(tab, label) {

   100 	this.tabs.push(tab);

   101 	this.tabCaptions.push(label);

   102 	// create a element for the tab heading

   103     var tabHead = document.createElement("div");

   104 	tabHead.className = "TabViewTabCaption";

   105 	tabHead.innerHTML = label;

   106 	this.tabHeadElements.push(tabHead);

   107     this.tabsElement.appendChild(this.tabHead);

   108 	if ( this.currentTab == null ) {

   109 		setCurrentTab(0);

   110 	}

   111 }

   112 

   113 TabView.prototype.setCurrentTab = function(newCurrentTab) {

   114 	// clear focus on current tab

   115 	

   116 	// store the current tab index

   117 	this.currentTab = newCurrentTab;

   118 	

   119 	// set focus on current tab

   120 	

   121 	// update the content element

   122 	this.tabContent.replaceNode(this.tabs[currentTab].rootElement);

   123 }

   124 

   125 

   126 TabView.prototype.bindTabActionListeners = function() {

   127     var self = this;

   128 	// bind left-right actions to switching tabs

   129     this.rootElement.addEventListener("keydown", function(event) { self.handleKeyPress(event); }, true); // capture phase

   130 //	for ( var t = 0; t < this.tabs.length; t++ ) {

   131 //		// bind tab listeners

   132 //	    this.tabHeadElements[t].addEventListener("focus", function() { self.focusStateChanged(true); }, false); // bubble phase

   133 //	    this.tabHeadElements[t].addEventListener("blur", function() { self.focusStateChanged(false); }, false);

   134 //	    this.tabHeadElements[t].addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);

   135 //	    this.tabHeadElements[t].addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);

   136 //	    this.tabHeadElements[t].addEventListener("mousedown", function(event){ self.setCurrentTab(t);}, true);

   137 //	}

   138 }

   139 

   140 TabView.prototype.handleKeyPress = function(event) {

   141 	if (event.keyCode == 37 ) { // left

   142 		if ( this.currentTab > 0 ) {

   143 			this.setCurrentTab(this.currentTab-1);

   144 		}

   145 		event.stopPropagation();

   146 		event.preventDefault();

   147 	}

   148 	if (event.keyCode == 39 ) { // right

   149 		if ( this.currentTab < this.tabs.length-1 ) {

   150 			this.setCurrentTab(this.currentTab+1);

   151 		}

   152 		event.stopPropagation();

   153 		event.preventDefault();

   154 	}

   155 }