Use Heightgraph in lieu of Elevation (part II)

- Heightgraph supports resizing; remove the Elevation specific
  workaround which was readding the data
- resize the elevation chart on window resize and chart show

js/index.js

@@ -199,9 +199,19 @@
             stats = new BR.TrackStats();
         }
 
-        // remove the old dep
-        // elevation = new BR.Elevation();
         elevation = new BR.Heightgraph();
+        // Trigger the chart resize after the toggle animation is complete,
+        // in case the window was resized while the chart was not visible.
+        // The resize must be called after the animation (i.e. 'shown.bs.collapse')
+        // and cannot be called before the animation (i.e. 'show.bs.collapse'),
+        // for the container has the old width pre animation and new width post animation.
+        var container = $('#elevation-chart');
+        container.on('shown.bs.collapse', function() {
+            elevation.resize({
+                width: container.width(),
+                height: container.height()
+            });
+        });
 
         profile = new BR.Profile();
         profile.on('update', function(evt) {
@@ -422,12 +432,6 @@
             },
             urlHash
         );
-
-        // listener and initCollapse here and not in onAdd, as addBelow calls addTo (-> onAdd) on resize
-        $(window).resize(function() {
-            elevation.addBelow(map);
-        });
-        elevation.initCollapse(map);
     }
 
     i18next.on('languageChanged', function(detectedLanguage) {

js/plugin/Heightgraph.js

@@ -216,6 +216,7 @@ BR.Heightgraph = L.Control.Heightgraph.extend({
         }
     },
 
+    /*
     onAdd: function(map) {
         var container = L.Control.Heightgraph.prototype.onAdd.call(this, map);
 
@@ -240,8 +241,9 @@ BR.Heightgraph = L.Control.Heightgraph.extend({
 
         return container;
     },
+    */
 
-    initialized: false,
+    // initialized: false,
 
     addBelow: function(map) {
         // waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
@@ -263,20 +265,32 @@ BR.Heightgraph = L.Control.Heightgraph.extend({
         // this function is also executed on window resize; hence,
         // initialize the internal state on first call,
         // otherwise reset it
-        if (this.initialized === true) {
-            this._removeMarkedSegmentsOnMap();
-            this._resetDrag();
-            this._onAddData();
-        } else {
+        //         if (this.initialized === true) {
+        //             this._removeMarkedSegmentsOnMap();
+        //             this._resetDrag();
+        //             this._onAddData();
+        //         } else {
         // bind the the mouse move and mouse out handlers, I'll reuse them later on
-            this._mouseMoveHandlerBound = this._mapMousemoveHandler.bind(this);
+        this._mouseMoveHandlerBound = this.mapMousemoveHandler.bind(this);
         this._mouseoutHandlerBound = this._mouseoutHandler.bind(this);
 
-            this.initialized = true;
+        var self = this;
+        var container = $('#elevation-chart');
+        $(window).resize(function() {
+            // avoid useless computations if the chart is not visible
+            if (container.is(':visible')) {
+                self.resize({
+                    width: container.width(),
+                    height: container.height()
+                });
+            }
+        });
+
+        //            this.initialized = true;
 
         // and render the chart
         this.update();
-        }
+        //        }
     },
 
     update: function(track, layer) {