javascriptnavigationdom-eventsgoogle-closuregoogle-tv

tv-tab-container js for working tabs with closure library

I have a project that involves using the Google TV UI Closure library for keyboard/d-pad navigation. I'm using the code copied right from Google's appspot tvui demos for a tv-tab-container

<div class="tv-tab-container tv-container-vertical">
  <div class="tv-tab-container-bar tv-container-horizontal">
    // Tab bar components.
  </div>
  <div class="tv-tab-container-content tv-container-horizontal">
    // Content components.
  </div>
</div>

I was under the impression that the closure library would handle changing the content of the tabs, but it doesn't. Does anybody know the Javascript required to make the tabs function? I don't quite understand the closure library's event handling with the tv-tab-container-bar tabs.

Solution

  • Well after all this I ended up just writing my own event listeners for keyboard left and right when focused on the tv-tab-container, and used the setFocusedComponent() to change the tab-content accordingly by using dynamically created div id's. I'm still not entirely sure why every other tv-ui component works for me but the tv-tab-container, but this mimics the same behavior that I was after

    function updateTabContent(content, tab)
{
//sets the correct tab and content to be focused and visible
var allContentDivs = $('.tab-demo-content').hide();
var contentToShow = $('#'+content);
contentToShow.show();

var elementToFocus = goog.dom.getElement(content);
var componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus);

elementToFocus = goog.dom.getElement('tab' + tab);
componentToFocus = tv.ui.getComponentByElement(elementToFocus);
tv.ui.Document.getInstance().setFocusedComponent(componentToFocus)

}