Merge pull request #6954 from svbergerem/refactor-osm-in-spv
Refactor locations in the SPV
This commit is contained in:
commit
edd568007d
6 changed files with 62 additions and 104 deletions
25
app/assets/javascripts/app/helpers/locations.js
Normal file
25
app/assets/javascripts/app/helpers/locations.js
Normal file
|
|
@ -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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
|
||||
"Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",
|
||||
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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"rendering <a href='http://giscience.uni-hd.de/'>" +
|
||||
"GIScience Research Group @ Heidelberg University</a>",
|
||||
maxZoom: 18
|
||||
});
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"rendering <a href='http://giscience.uni-hd.de/'>" +
|
||||
"GIScience Research Group @ Heidelberg University</a>",
|
||||
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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
|
||||
"Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",
|
||||
maxZoom: 18,
|
||||
});
|
||||
}
|
||||
var tiles = app.helpers.locations.getTiles();
|
||||
|
||||
tiles.addTo(map);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"rendering <a href='http://giscience.uni-hd.de/'>" +
|
||||
"GIScience Research Group @ Heidelberg University</a>",
|
||||
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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
|
||||
"<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
|
||||
"Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",
|
||||
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),
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.near-from:hover {
|
||||
.stream_element .near-from:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
29
spec/javascripts/app/helpers/locations_spec.js
Normal file
29
spec/javascripts/app/helpers/locations_spec.js
Normal file
|
|
@ -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/");
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue