Merge pull request #6954 from svbergerem/refactor-osm-in-spv

Refactor locations in the SPV
This commit is contained in:
Jonne Haß 2016-08-10 12:10:17 +02:00 committed by GitHub
commit edd568007d
6 changed files with 62 additions and 104 deletions

View 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 &copy; <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 &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
"rendering <a href='http://giscience.uni-hd.de/'>" +
"GIScience Research Group @ Heidelberg University</a>",
maxZoom: 18
});
}
};
})();

View file

@ -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 &copy; <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 &copy; <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);

View file

@ -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 &copy; <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 &copy; <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),

View file

@ -3,7 +3,7 @@
overflow: hidden;
}
.near-from:hover {
.stream_element .near-from:hover {
cursor: pointer;
text-decoration: underline;
}

View 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/");
});
});
});
});

View file

@ -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");
});
});