From 57b7c05c4ff6b34aa1c1a55592cdc7f324045b70 Mon Sep 17 00:00:00 2001 From: realtin Date: Mon, 24 Aug 2015 12:15:45 +0200 Subject: [PATCH] set maptile default to OpenMapSurfer - refactor code for toggle map function - adjust jasmine tests for maps and add tests for SPV - change name of access token in defaults.yml according to naming conventions - add explanation of map use for podmins - add location to post_presenter - fix opening multiple maps inside the stream when clicking on a reshare location (#5813) --- .../javascripts/app/views/location_stream.js | 22 ++++---- .../single_post_content_view.js | 29 ++++++----- app/assets/stylesheets/single-post-view.scss | 4 +- .../single-post-content_tpl.jst.hbs | 2 +- app/presenters/post_presenter.rb | 3 +- config/defaults.yml | 5 +- config/diaspora.yml.example | 17 ++++--- .../app/views/location_stream_spec.js | 28 ++++++----- .../views/single_post_content_view_spec.js | 50 +++++++++++++++++++ spec/models/reshare_spec.rb | 28 +++++------ 10 files changed, 127 insertions(+), 61 deletions(-) create mode 100644 spec/javascripts/app/views/single_post_content_view_spec.js diff --git a/app/assets/javascripts/app/views/location_stream.js b/app/assets/javascripts/app/views/location_stream.js index 446a9765f..25687585b 100644 --- a/app/assets/javascripts/app/views/location_stream.js +++ b/app/assets/javascripts/app/views/location_stream.js @@ -15,17 +15,23 @@ app.views.LocationStream = app.views.Content.extend({ mapContainer.css("height", "150px"); if (location.lat) { - var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}"; - var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 16); + // If the mapbox option is enabled in the defaults the mapbox tiles with the podmin's credentials are used. + // If mapbox is not enabled the OpenMapSurfer tiles are used, which don't need credentials. + var mapsource = gon.appConfig.map.mapbox.enabled ? gon.appConfig.map.mapbox : ""; + var tileLayerSource = mapsource ? "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}" + : "http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}"; + var tileAttribution = mapsource ? "Mapbox" + : "OpenMapSurfer"; var attribution = "Map data © OpenStreetMap contributors, " + "CC-BY-SA, " + - "Imagery © Mapbox"; + "Imagery © "+ tileAttribution; + var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); L.tileLayer(tileLayerSource, { + id: mapsource.id, + accessToken: mapsource.access_token, attribution: attribution, maxZoom: 18, - id: gon.appConfig.map.mapbox.id, - accessToken: gon.appConfig.map.mapbox.accessToken }).addTo(map); var markerOnMap = L.marker(location).addTo(map); @@ -33,11 +39,7 @@ app.views.LocationStream = app.views.Content.extend({ return map; } } else { - if (mapContainer.css("display") === "none") { - mapContainer.css("display", "block"); - } else { - mapContainer.css("display", "none"); - } + mapContainer.toggle(); } } } 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 d1f3dcfd6..7cca84507 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 @@ -36,17 +36,24 @@ app.views.SinglePostContent = app.views.Base.extend({ // get location data and render map var location = this.model.get("location"); - var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}"; - var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); + + // If the mapbox option is enabled in the defaults the mapbox tiles with the podmin's credentials are used. + // If mapbox is not enabled the OpenMapSurfer tiles are used, which don't need credentials. + var mapsource = gon.appConfig.map.mapbox.enabled ? gon.appConfig.map.mapbox : ""; + var tileLayerSource = mapsource ? "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}" + : "http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}"; + var tileAttribution = mapsource ? "Mapbox" + : "OpenMapSurfer"; var attribution = "Map data © OpenStreetMap contributors, " + "CC-BY-SA, " + - "Imagery © Mapbox"; + "Imagery © "+ tileAttribution; + var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); L.tileLayer(tileLayerSource, { + id: mapsource.id, + accessToken: mapsource.access_token, attribution: attribution, maxZoom: 18, - id: gon.appConfig.map.mapbox.id, - accessToken: gon.appConfig.map.mapbox.accessToken }).addTo(map); // set mapContainer size to a smaller preview size @@ -56,18 +63,14 @@ app.views.SinglePostContent = app.views.Base.extend({ // put marker on map var markerOnMap = L.marker(location).addTo(map); return map; - }; + } }, toggleMap: function () { if (gon.appConfig.map.enabled){ - if (this.$el.find(".mapContainer").css("height") === "75px") { - this.$el.find(".mapContainer").css("height", "200px"); - this.$el.find(".leaflet-control-zoom").css("display", "block"); - } else { - this.$el.find(".mapContainer").css("height", "75px"); - this.$el.find(".leaflet-control-zoom").css("display", "none"); - } + $(".mapContainer").height($(".small-map")[0] ? 200 : 50); + $(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none"); + $(".mapContainer").toggleClass("small-map"); } }, diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss index cf2298821..0166d1802 100644 --- a/app/assets/stylesheets/single-post-view.scss +++ b/app/assets/stylesheets/single-post-view.scss @@ -28,7 +28,9 @@ font-size: 12px; margin: 10px 20px 0px 15px; } - + .mapContainer { + margin: 10px 20px 0px 15px; + } .row.reshare { border-top: 1px solid lighten($border-grey,5%); padding-top: 10px; diff --git a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs index c8dcd63f1..9295117eb 100644 --- a/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs +++ b/app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs @@ -71,8 +71,8 @@
{{t "publisher.near_from" location=location.address}} -
+
{{/if}} {{#if root}} diff --git a/app/presenters/post_presenter.rb b/app/presenters/post_presenter.rb index ea77b1530..8e95647f4 100644 --- a/app/presenters/post_presenter.rb +++ b/app/presenters/post_presenter.rb @@ -31,8 +31,7 @@ class PostPresenter < BasePresenter photos: build_photos_json, root: root, title: title, - address: @post.address, - coordinates: @post.coordinates, + location: @post.post_location, poll: @post.poll, already_participated_in_poll: already_participated_in_poll, participation: participate?, diff --git a/config/defaults.yml b/config/defaults.yml index 6f67eeb13..3d558d167 100644 --- a/config/defaults.yml +++ b/config/defaults.yml @@ -78,8 +78,9 @@ defaults: map: enabled: true mapbox: - id: 'zaziemo.mpn66kn8' - accessToken: 'pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA' + enabled: false + id: "zaziemo.mpn66kn8" + access_token: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA" privacy: jquery_cdn: false google_analytics_key: diff --git a/config/diaspora.yml.example b/config/diaspora.yml.example index 0f7d8ec52..fb01cadd1 100644 --- a/config/diaspora.yml.example +++ b/config/diaspora.yml.example @@ -324,16 +324,21 @@ configuration: ## Section ## The debug level logs all XML sent and received by the server. #level: 'info' - ## Displaying location of posts in a map. We are using the map tiles of - ## https://www.mapbox.com. There you have to create a account to get and ID - ## and an access token. If you want to use this feature you can write an email - ## to team@diasporafoundation.org and you'll get an unlimited and free account. + ## Displays the location of a post in a map. Per default we are using the map + ## tiles of OpenMapSurfer (http://korona.geog.uni-heidelberg.de/). + ## If you want to use them you only have to enable the map. You also have the + ## possibility to use the map tiles of https://www.mapbox.com which is probably + ## more reliable. There you have to create a account to get an ID and an access token which is limited. If + ## you want to get an unlimited account you can write an email + ## to team@diasporafoundation.org. Please enable mapbox and fill out your id + ## and access_token. map: ##Section - # enable: true + # enable: false # mapbox: + # enable: false # id: 'your.id' - # accessToken: 'youraccesstoken' + # access_token: 'youraccesstoken' ## Settings potentially affecting the privacy of your users. privacy: ## Section diff --git a/spec/javascripts/app/views/location_stream_spec.js b/spec/javascripts/app/views/location_stream_spec.js index 25a01b642..fe87ea478 100644 --- a/spec/javascripts/app/views/location_stream_spec.js +++ b/spec/javascripts/app/views/location_stream_spec.js @@ -1,38 +1,42 @@ -describe("app.views.LocationMap", function() { +describe("app.views.LocationStream", function() { beforeEach(function(){ this.post = factory.post(); this.view = new app.views.LocationStream({model : this.post}); + gon.appConfig = { map: {enabled: true, mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken" }} }; }); describe("toggleMap", function() { context("with location provided", function() { beforeEach(function(){ this.post.set({location : factory.location()}); // set location - this.view.render(); - console.log(this.view.$el.find(".mapContainer")[0]); + spec.content().html(this.view.render().el); // loads html element to the page }); it("should contain a map container", function() { - expect(this.view.$el[0]).toContainElement(".mapContainer"); + expect(spec.content()).toContainElement(".mapContainer"); }); it("should initialize map", function() { - expect(this.view.$el.find(".mapContainer")[0]).toHaveClass("empty"); + expect($(".mapContainer")).toHaveClass("empty"); this.view.toggleMap(); - expect(this.view.$el.find(".mapContainer")[0]).not.toHaveClass("empty"); + expect($(".mapContainer")).not.toHaveClass("empty"); }); - /* - * does not work .. not sure why + it("should change display status on every click", function() { - expect(this.view.$el.find(".mapContainer")[0]).toHaveCss({display: "block"}); this.view.toggleMap(); - expect(this.view.$el.find(".mapContainer")[0]).toHaveCss({display: "none"}); + expect($(".mapContainer")).toHaveCss({display: "block"}); + this.view.toggleMap(); + expect($(".mapContainer")).toHaveCss({display: "none"}); }); - */ }), + context("without location provided", function() { + beforeEach(function(){ + spec.content().html(this.view.render().el); + }); + it("should not initialize the map", function() { - expect(this.view.$el[0]).not.toContainElement(".mapContainer"); + expect(spec.content()).not.toContainElement(".mapContainer"); }); }); }); diff --git a/spec/javascripts/app/views/single_post_content_view_spec.js b/spec/javascripts/app/views/single_post_content_view_spec.js new file mode 100644 index 000000000..b38c38b78 --- /dev/null +++ b/spec/javascripts/app/views/single_post_content_view_spec.js @@ -0,0 +1,50 @@ +describe("app.views.SinglePostContent", function() { + beforeEach(function(){ + this.post = factory.post(); + this.view = new app.views.SinglePostContent({model : this.post}); + gon.appConfig = { map: {enabled: true, mapbox: {enabled: true, id: "yourID", accessToken: "yourAccessToken" }} }; + }); + + 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() { + expect(spec.content()).not.toContainElement(".mapContainer"); + }); + }); + }); +}); diff --git a/spec/models/reshare_spec.rb b/spec/models/reshare_spec.rb index 0e13aacd4..bfaff0dc6 100644 --- a/spec/models/reshare_spec.rb +++ b/spec/models/reshare_spec.rb @@ -292,24 +292,24 @@ describe Reshare, type: :model do end describe "#post_location" do - let(:status_message) { build(:status_message, text: "This is a status_message", author: bob.person, public: true) } - let(:reshare) { create(:reshare, root: status_message) } + let(:status_message) { build(:status_message, text: "This is a status_message", author: bob.person, public: true) } + let(:reshare) { create(:reshare, root: status_message) } - context "with location" do - let(:location) { build(:location) } + context "with location" do + let(:location) { build(:location) } - it "should deliver address and coordinates" do - status_message.location = location - expect(reshare.post_location).to include(address: location.address, lat: location.lat, lng: location.lng) + it "should deliver address and coordinates" do + status_message.location = location + expect(reshare.post_location).to include(address: location.address, lat: location.lat, lng: location.lng) + end end - end - context "without location" do - it "should deliver empty address and coordinates" do - expect(reshare.post_location[:address]).to be_nil - expect(reshare.post_location[:lat]).to be_nil - expect(reshare.post_location[:lng]).to be_nil + context "without location" do + it "should deliver empty address and coordinates" do + expect(reshare.post_location[:address]).to be_nil + expect(reshare.post_location[:lat]).to be_nil + expect(reshare.post_location[:lng]).to be_nil + end end end end -end