diff --git a/js/index.js b/js/index.js index fbb0997..740c089 100644 --- a/js/index.js +++ b/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) { diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js index f3fa51c..9655069 100644 --- a/js/plugin/Heightgraph.js +++ b/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 { - // bind the the mouse move and mouse out handlers, I'll reuse them later on - this._mouseMoveHandlerBound = this._mapMousemoveHandler.bind(this); - this._mouseoutHandlerBound = this._mouseoutHandler.bind(this); + // 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._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() + }); + } + }); - // and render the chart - this.update(); - } + // this.initialized = true; + + // and render the chart + this.update(); + // } }, update: function(track, layer) {