var ProfileController = Backbone.Model.extend({ options: { events: { resize: true }, showOnInit:false }, profiles: {}, initialize: function(options) { var that = this; $.extend(true, that.options, options); if (that.options.events.resize) { $(window).resize(function() { that.resizeAll(); }); } }, initProfile: function(track, container, mapController) { var that = this; var id = $(container).attr('id'); if (id == undefined) { return; } $('#abs-map-profile-toggler').html("– " + track.experience.name + " –"); if (that.profiles[id] == undefined) { that.profiles[id] = new Profile(track, container, mapController, that.options.showOnInit); } else { that.profiles[id].resize(); } return that.profiles[id]; }, removeProfile: function(id) { var that = this; $('#' + id).html(''); delete that.profiles[id]; }, resizeAll: function() { var that = this; $.each(that.profiles, function(i, profile) { profile.resize(); }); } }); var Profile = Backbone.Model.extend({ container : null, markersContainer: null, track : null, width: null, height: null, mapController: null, data: null, options: { padTop: 100, heightMin: 20, profileSteps: 1, }, markers: [], symbolizer: { line: { outer: {fill: "none", "stroke-width": 7, "stroke" : '#000000'}, inner: {fill: "none", "stroke-width": 5, "stroke" : '#ff9900'} } }, initialize : function(track, container, mapController, showOnInit) { var that = this; that.container = $('
').appendTo($(container)); that.markersContainer = $('
').appendTo($(container)); that.track = track; that.mapController = mapController; $(container).mousemove(function(e) { var x = e.clientX - $(container).offset().left; if (that.mapController && that.data !== null) { var dis = (that.data[that.data.length - 1].dis) / that.data.length * x; that.mapController.setTrackInfoOnMapFromTp(that.data[x], dis); } }); $(container).mouseout(function(e) { if (that.mapController && that.data !== null) { that.mapController.setTrackInfoOnMapFromTp(null); } }); $(container).addClass('is-init').removeClass('hidden').parent().removeClass('hidden'); that.resize(); if (showOnInit) { $(container).show(); } }, resize: function() { var that = this; that.width = $(that.container).width(); that.height = $(that.container).height(); that._draw(); that._drawMarkers(); }, draw: function() { var that = this; that._draw(); }, _draw : function() { var that = this; that.raph = null; $(that.container).html(''); that.raph = Raphael($(that.container).get(0), that.width, that.height); if (that.width > 0 && that.height > 0) { that.track.getHeightProfile(that.width); that.drawProfile(); that.drawProfileLine(); } }, _drawMarkers: function() { var that = this; $(that.markersContainer).html(''); $.each(that.markers, function(i, marker) { var arrProfile = that.track.getHeightProfile(that.width, false); var scale = (that.height - that.options.padTop - that.options.heightMin) / (that.track.getMaxEle() - that.track.getMinEle()); var n = Math.round((arrProfile.length - 1) * marker.positionRelativ); var lineHeight = parseInt((arrProfile[n].ele - that.track.getMinEle()) * scale + that.options.heightMin); var lineStart = that.height - lineHeight; if (marker.type == 'onLine') { var m = marker.html; m.css('left', marker.positionRelativ*100 + '%'); m.css('top', (lineStart - marker.height) + 45); m.css('margin-left', -1 * marker.width/2); m.css('transform', 'none'); m.appendTo($(that.markersContainer)); } }); }, drawProfile: function() { var that = this; that.getProfilePathFromTour(); if (that.mapController) { that.data = that.track.getHeightProfile(that.width, false); } }, getProfilePathFromTour: function() { var that = this; var scale = (that.height - that.options.padTop - that.options.heightMin) / (that.track.getMaxEle() - that.track.getMinEle()); var set = that.raph.set(); var i = 0; while ( i !== false) { var next = that.getNextProfilePath(i, scale); var path = next[0]; var col = next[2]; var c = that.raph.path(path).attr({"stroke-width": 0, stroke : col, fill: col, title: 'b'}); i = next[1]; set.push(c); } return set; }, getNextProfilePath: function(i, scale) { var that = this; var path = '', iStart = i, trackpoints = that.track.getHeightProfile(that.width, false), ug = trackpoints[i].ug; path += "M" + [i, that.height]; while (i < trackpoints.length && ug == trackpoints[i].ug) { var lineHeight = parseInt((trackpoints[i].ele - that.track.getMinEle()) * scale + that.options.heightMin); var lineStart = that.height - lineHeight; path += "L" + i + ","+ lineStart; i++; } if (i !== trackpoints.length) { var lineHeight = parseInt((trackpoints[i].ele - that.track.getMinEle()) * scale + that.options.heightMin); var lineStart = that.height - lineHeight; path += "L" + (i) + ","+ lineStart; } else { var lineHeight = parseInt((trackpoints[i-1].ele - that.track.getMinEle()) * scale + that.options.heightMin); var lineStart = that.height - lineHeight; path += "L" + i + ","+ lineStart; } path += "L" + i + "," + that.height; path += "L" + iStart + "," + that.height; var re = []; re.push(path); if (i < trackpoints.length) re.push(i); else re.push(false); re.push(that.track.colors[ug]); return re; }, drawProfileLine: function() { var that = this; var path = that.getProfileLinePathFromTrack(); that.raph.path(path).attr(that.symbolizer.line.outer); that.raph.path(path).attr(that.symbolizer.line.inner); }, getProfileLinePathFromTrack: function() { var that = this; var path = '', x = that.options.profileSteps, y = 0; var arrProfile = that.track.getHeightProfile(that.width, false); var scale = (that.height - that.options.padTop - that.options.heightMin) / (that.track.getMaxEle() - that.track.getMinEle()); for (var n = 0; n < arrProfile.length; n = n + that.options.profileSteps) { var lineHeight = parseInt((arrProfile[n].ele - that.track.getMinEle()) * scale + that.options.heightMin); var lineStart = that.height - lineHeight; var value = lineStart; if (n > 0) { path += "C" + [x + that.options.profileSteps/2, y, (x += that.options.profileSteps) - that.options.profileSteps/2, (y = value), x, y]; } else { path += "M" + [0, (y = lineStart)]; } } return path; }, addMarkers: function(data, type) { var that = this; if (type == 'experienceMarker') { $.each(data, function(i, experienceMarker) { var closestTrackpoint = null; var closestDistance = null; $.each(that.track.getTrackpoints(), function(ii, tp) { var distance = new L.LatLng(tp.lat, tp.lon).distanceTo(new L.LatLng(experienceMarker.getLatLng().lat, experienceMarker.getLatLng().lng)); if (closestDistance == null || distance < closestDistance) { closestDistance = distance; closestTrackpoint = tp; } }); var icon = $(experienceMarker._icon).clone(); var marker = { positionRelativ: closestTrackpoint.dis / that.track.distance, width: 34, height: 47, html: icon, type: 'onLine' }; that.markers.push(marker); }); } that.resize(); } });