diff --git a/app/assets/javascripts/app/helpers/locations.js b/app/assets/javascripts/app/helpers/locations.js new file mode 100644 index 000000000..4909dbe9c --- /dev/null +++ b/app/assets/javascripts/app/helpers/locations.js @@ -0,0 +1,25 @@ +(function() { + app.helpers.locations = { + getTiles: function() { + // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used. + if (gon.appConfig.map.mapbox.enabled) { + return L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { + id: gon.appConfig.map.mapbox.id, + accessToken: gon.appConfig.map.mapbox.access_token, + attribution: "Map data © OpenStreetMap contributors, " + + "CC-BY-SA, " + + "Imagery © Mapbox", + maxZoom: 18 + }); + } + + // maptiles from the Heidelberg University are used by default. + return L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", { + attribution: "Map data © OpenStreetMap contributors, " + + "rendering " + + "GIScience Research Group @ Heidelberg University", + maxZoom: 18 + }); + } + }; +})(); diff --git a/app/assets/javascripts/app/views/location_stream.js b/app/assets/javascripts/app/views/location_stream.js index 1db156dea..925ee1f2f 100644 --- a/app/assets/javascripts/app/views/location_stream.js +++ b/app/assets/javascripts/app/views/location_stream.js @@ -14,31 +14,8 @@ app.views.LocationStream = app.views.Content.extend({ mapContainer.css("height", "150px"); if (location.lat) { - // If map function is enabled the maptiles from the Heidelberg University are used by default. - var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); - - var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", { - attribution: "Map data © OpenStreetMap contributors, " + - "rendering " + - "GIScience Research Group @ Heidelberg University", - maxZoom: 18, - }); - - // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used. - if (gon.appConfig.map.mapbox.enabled) { - - tiles = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { - id: gon.appConfig.map.mapbox.id, - /* jshint camelcase: false */ - accessToken: gon.appConfig.map.mapbox.access_token, - /* jshint camelcase: true */ - attribution: "Map data © OpenStreetMap contributors, " + - "CC-BY-SA, " + - "Imagery © Mapbox", - maxZoom: 18, - }); - } + var tiles = app.helpers.locations.getTiles(); tiles.addTo(map); diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js index 9d11a3ca9..c58cf08af 100644 --- a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js +++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js @@ -1,10 +1,6 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later app.views.SinglePostContent = app.views.Base.extend({ - events: { - "click .near-from": "toggleMap" - }, - templateName: "single-post-viewer/single-post-content", tooltipSelector: "time, .post_scope", className: "framed-content", @@ -38,49 +34,16 @@ app.views.SinglePostContent = app.views.Base.extend({ // get location data and render map var location = this.model.get("location"); - // If map function is enabled the maptiles from the Heidelberg University are used by default. - var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); - - var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", { - attribution: "Map data © OpenStreetMap contributors, " + - "rendering " + - "GIScience Research Group @ Heidelberg University", - maxZoom: 18, - }); - - // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used. - if (gon.appConfig.map.mapbox.enabled) { - - tiles = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", { - id: gon.appConfig.map.mapbox.id, - /* jshint camelcase: false */ - accessToken: gon.appConfig.map.mapbox.access_token, - /* jshint camelcase: true */ - attribution: "Map data © OpenStreetMap contributors, " + - "CC-BY-SA, " + - "Imagery © Mapbox", - maxZoom: 18, - }); - } + var tiles = app.helpers.locations.getTiles(); tiles.addTo(map); - // set mapContainer size to a smaller preview size - mapContainer.css("height", "75px"); - map.invalidateSize(); - // put marker on map L.marker(location).addTo(map); return map; }, - toggleMap: function () { - $(".mapContainer").height($(".small-map")[0] ? 200 : 50); - $(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none"); - $(".mapContainer").toggleClass("small-map"); - }, - presenter : function() { return _.extend(this.defaultPresenter(), { authorIsCurrentUser :app.currentUser.isAuthorOf(this.model), diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss index f304d135b..c521795bf 100644 --- a/app/assets/stylesheets/map.scss +++ b/app/assets/stylesheets/map.scss @@ -3,7 +3,7 @@ overflow: hidden; } -.near-from:hover { +.stream_element .near-from:hover { cursor: pointer; text-decoration: underline; } diff --git a/spec/javascripts/app/helpers/locations_spec.js b/spec/javascripts/app/helpers/locations_spec.js new file mode 100644 index 000000000..f9848a7dc --- /dev/null +++ b/spec/javascripts/app/helpers/locations_spec.js @@ -0,0 +1,29 @@ +describe("app.helpers.locations", function() { + describe("getTiles", function() { + context("with mapbox disabled", function() { + beforeEach(function() { + gon.appConfig = {map: {mapbox: {enabled: false}}}; + }); + + it("returns tiles from the Heidelberg University", function() { + var tiles = app.helpers.locations.getTiles(); + expect(tiles._url).toMatch("http://korona.geog.uni-heidelberg.de/"); + expect(tiles._url).not.toMatch("https://api.tiles.mapbox.com/"); + }); + }); + + context("with mapbox enabled", function() { + beforeEach(function() { + /* eslint-disable camelcase */ + gon.appConfig = {map: {mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken"}}}; + /* eslint-enable camelcase */ + }); + + it("returns tiles from mapbox", function() { + var tiles = app.helpers.locations.getTiles(); + expect(tiles._url).toMatch("https://api.tiles.mapbox.com/"); + expect(tiles._url).not.toMatch("http://korona.geog.uni-heidelberg.de/"); + }); + }); + }); +}); diff --git a/spec/javascripts/app/views/single_post_content_view_spec.js b/spec/javascripts/app/views/single_post_content_view_spec.js index caa13128c..956866424 100644 --- a/spec/javascripts/app/views/single_post_content_view_spec.js +++ b/spec/javascripts/app/views/single_post_content_view_spec.js @@ -2,7 +2,6 @@ describe("app.views.SinglePostContent", function() { beforeEach(function(){ this.post = factory.post(); this.view = new app.views.SinglePostContent({model : this.post}); - gon.appConfig = { map: {mapbox: {enabled: true, id: "yourID", accessToken: "yourAccessToken" }}}; }); describe("map", function() { @@ -18,6 +17,10 @@ describe("app.views.SinglePostContent", function() { this.view.map(); expect(L.map).toHaveBeenCalled(); }); + + it("should add a map container", function() { + expect(spec.content()).toContainElement(".mapContainer"); + }); }); context("without location provided", function() { @@ -30,47 +33,8 @@ describe("app.views.SinglePostContent", function() { this.view.map(); expect(L.map).not.toHaveBeenCalled(); }); - }); - }); - describe("toggleMap", function() { - context("with location provided", function() { - beforeEach(function(){ - this.post.set({location : factory.location()}); // set location - spec.content().html(this.view.render().el); // loads html element to the page - }); - - it("should contain a map container", function() { - expect(spec.content()).toContainElement(".mapContainer"); - }); - - it("should provide a small map", function() { - expect($(".mapContainer")).toHaveClass("small-map"); - expect($(".mapContainer").height() < 100).toBeTruthy(); - expect($(".mapContainer")).toBeVisible(); - }); - - it("should toggle class small-map on every click", function(){ - this.view.toggleMap(); - expect($(".mapContainer")).not.toHaveClass("small-map"); - this.view.toggleMap(); - expect($(".mapContainer")).toHaveClass("small-map"); - }); - - it("should change height on every click", function() { - this.view.toggleMap(); - expect($(".mapContainer").height() > 100).toBeTruthy(); - this.view.toggleMap(); - expect($(".mapContainer").height() < 100).toBeTruthy(); - }); - }); - - context("without location provided", function() { - beforeEach(function(){ - spec.content().html(this.view.render().el); - }); - - it("should not initialize the map", function() { + it("shouldn't add a map container", function() { expect(spec.content()).not.toContainElement(".mapContainer"); }); });