don't update table when data tab hidden, update when shown

js/control/Tabs.js

@@ -1,14 +1,34 @@
 BR.Tabs = BR.Control.extend({
     options: {
-        divId: 'tabs_div'
+        divId: 'tabs_div',
+        // tab a.hash > instance
+        tabs: {}
+    },
+
+    initialize: function (options) {
+        L.setOptions(this, options);
     },
 
     onAdd: function (map) {
         $('#tab a').click(function (e) {
-          e.preventDefault();
-          $(this).tab('show');
+            e.preventDefault();
+            $(this).tab('show');
         });
 
+        // e.target = activated tab
+        // e.relatedTarget = previous tab
+        $('#tab a').on('shown.bs.tab', L.bind(function (e) {
+            var tab = this.options.tabs[e.target.hash],
+                prevTab = this.options.tabs[e.relatedTarget.hash];
+
+            if (tab && tab.show) {
+                tab.show();
+            }
+            if (prevTab && prevTab.hide) {
+                prevTab.hide();
+            }
+        }, this));
+
         return BR.Control.prototype.onAdd.call(this, map);
     }
 });

js/control/TrackMessages.js

@@ -1,4 +1,6 @@
 BR.TrackMessages = L.Class.extend({
+    // true when tab is shown, false when hidden
+    active: false,
 
     columnOptions: {
         'Longitude': { visible: false },
@@ -10,7 +12,9 @@ BR.TrackMessages = L.Class.extend({
         'TurnCost': { title: 'turncost', className: 'dt-body-right' }
     },
 
-    initialize: function () {
+    initialize: function (options) {
+        L.setOptions(this, options);
+
         var table = document.getElementById('datatable');
         this.tableClassName = table.className;
         this.tableParent = table.parentElement;
@@ -24,6 +28,9 @@ BR.TrackMessages = L.Class.extend({
             headings,
             table;
 
+        if (!this.active)
+            return;
+
         for (i = 0; segments && i < segments.length; i++) {
             messages = segments[i].feature.properties.messages;
             data = data.concat(messages.slice(1));
@@ -54,6 +61,15 @@ BR.TrackMessages = L.Class.extend({
         console.timeEnd('datatable');
     },
 
+    show: function() {
+        this.active = true;
+        this.options.requestUpdate(this);
+    },
+
+    hide: function() {
+        this.active = false;
+    },
+
     _destroyTable: function() {
         var ele;
 

js/index.js

@@ -107,6 +107,13 @@
             routing.rerouteAllSegments(onUpdate);
         }
 
+        function requestUpdate(updatable) {
+            var track = routing.toPolyline(),
+                segments = routing.getSegments();
+        
+            updatable.update(track, segments);
+        }
+
         routingOptions = new BR.RoutingOptions();
         routingOptions.on('update', updateRoute);
 
@@ -141,7 +148,9 @@
             BR.message.hideError();
             routingOptions.setCustomProfile(null);
         });
-        trackMessages = new BR.TrackMessages();
+        trackMessages = new BR.TrackMessages({
+            requestUpdate: requestUpdate
+        });
 
         routing = new BR.Routing({
             routing: {
@@ -199,7 +208,12 @@
         stats.addTo(map);
         download.addTo(map);
         elevation.addTo(map);
-        map.addControl(new BR.Tabs());
+        map.addControl(new BR.Tabs({
+            tabs: {
+                '#tab_profile': profile,
+                '#tab_data': trackMessages
+            }
+        }));
 
         nogos.addTo(map);
         routing.addTo(map);