ffrgb / meshviewer

lib/gui.js

define(['d3-interpolate', 'map', 'sidebar', 'tabs', 'container', 'legend',
  'linklist', 'nodelist', 'simplenodelist', 'infobox/main',
  'proportions', 'forcegraph', 'title', 'about', 'datadistributor',
  'filters/filtergui', 'filters/hostname', 'helper'],
function (d3Interpolate, Map, Sidebar, Tabs, Container, Legend, Linklist,
  Nodelist, SimpleNodelist, Infobox, Proportions, ForceGraph,
  Title, About, DataDistributor, FilterGUI, HostnameFilter, helper) {
  'use strict';

  return function (language) {
    var self = this;
    var content;
    var contentDiv;

    var linkScale = d3Interpolate.interpolate(config.map.tqFrom, config.map.tqTo);
    var sidebar;

    var buttons = document.createElement('div');
    buttons.classList.add('buttons');

    var fanout = new DataDistributor();

The variable DataDistributor is changed as part of the for loop for example by DataDistributor on line 7. Only the value of the last iteration will be visible in this function if it is called after the loop.

    var fanoutUnfiltered = new DataDistributor();
    fanoutUnfiltered.add(fanout);

    function removeContent() {
      if (!content) {
        return;
      }

      router.removeTarget(content);
      fanout.remove(content);

      content.destroy();

      content = null;
    }

    function addContent(K) {
      removeContent();

      content = new K(linkScale, sidebar, buttons);
      content.render(contentDiv);

      fanout.add(content);
      router.addTarget(content);
    }

    function mkView(K) {
      return function () {
        addContent(K);
      };
    }

    var loader = document.getElementsByClassName('loader')[0];
    loader.classList.add('hide');

    contentDiv = document.createElement('div');
    contentDiv.classList.add('content');
    document.body.appendChild(contentDiv);

    sidebar = new Sidebar(document.body);

    contentDiv.appendChild(buttons);

    var buttonToggle = document.createElement('button');
    buttonToggle.classList.add('ion-eye');
    buttonToggle.setAttribute('aria-label', _.t('button.switchView'));
    buttonToggle.onclick = function onclick() {
      var data;
      if (content.constructor === Map) {
        data = { view: 'graph', lat: undefined, lng: undefined, zoom: undefined };
      } else {
        data = { view: 'map' };
      }
      router.fullUrl(data, false, true);
    };

    buttons.appendChild(buttonToggle);

    if (config.fullscreen || config.fullscreenFrame && window.frameElement) {
      var buttonFullscreen = document.createElement('button');
      buttonFullscreen.classList.add('ion-full-enter');
      buttonFullscreen.setAttribute('aria-label', _.t('button.fullscreen'));
      buttonFullscreen.onclick = function onclick() {
        helper.fullscreen(buttonFullscreen);
      };

      buttons.appendChild(buttonFullscreen);
    }

    var title = new Title();

    var header = new Container('header');
    var infobox = new Infobox(sidebar, linkScale);
    var tabs = new Tabs();
    var overview = new Container();
    var legend = new Legend(language);
    var newnodeslist = new SimpleNodelist('new', 'firstseen', _.t('node.new'));
    var lostnodeslist = new SimpleNodelist('lost', 'lastseen',  _.t('node.missing'));
    var nodelist = new Nodelist();
    var linklist = new Linklist(linkScale);
    var statistics = new Proportions(fanout);
    var about = new About();

    fanoutUnfiltered.add(legend);
    fanoutUnfiltered.add(newnodeslist);
    fanoutUnfiltered.add(lostnodeslist);
    fanoutUnfiltered.add(infobox);
    fanout.add(nodelist);
    fanout.add(linklist);
    fanout.add(statistics);

    sidebar.add(header);
    header.add(legend);

    overview.add(newnodeslist);
    overview.add(lostnodeslist);

    var filterGUI = new FilterGUI(fanout);
    fanout.watchFilters(filterGUI);
    header.add(filterGUI);

    var hostnameFilter = new HostnameFilter();
    fanout.addFilter(hostnameFilter);

    sidebar.add(tabs);
    tabs.add('sidebar.actual', overview);
    tabs.add('node.nodes', nodelist);
    tabs.add('node.links', linklist);
    tabs.add('sidebar.stats', statistics);
    tabs.add('sidebar.about', about);

    router.addTarget(title);
    router.addTarget(infobox);

    router.addView('map', mkView(Map));
    router.addView('graph', mkView(ForceGraph));

    self.setData = fanoutUnfiltered.setData;

    return self;
  };
});