ffrgb / meshviewer

lib/tabs.js

define(function () {
  'use strict';

  return function () {
    var self = this;

    var tabs = document.createElement('ul');
    tabs.classList.add('tabs');

    var container = document.createElement('div');

    function gotoTab(li) {
      for (var i = 0; i < tabs.children.length; i++) {
        tabs.children[i].classList.remove('visible');
      }

      while (container.firstChild) {
        container.removeChild(container.firstChild);
      }

      li.classList.add('visible');

      var tab = document.createElement('div');
      tab.classList.add('tab');
      container.appendChild(tab);
      li.child.render(tab);
    }

    function switchTab() {
      gotoTab(this);

      return false;
    }

    self.add = function add(title, d) {
      var li = document.createElement('li');
      li.textContent = _.t(title);
      li.onclick = switchTab;
      li.child = d;
      tabs.appendChild(li);

      var anyVisible = false;

      for (var i = 0; i < tabs.children.length; i++) {
        if (tabs.children[i].classList.contains('visible')) {
          anyVisible = true;
          break;
        }
      }

      if (!anyVisible) {
        gotoTab(li);
      }
    };

    self.render = function render(el) {
      el.appendChild(tabs);
      el.appendChild(container);

The variable container is changed as part of the for-each loop for example by document.createElement("div") on line 10. Only the value of the last iteration will be visible in this function if it is called after the loop.

    };

    return self;
  };
});