Commit 298e195a authored by zaziemo's avatar zaziemo Committed by realtin

add a map subview

- add coordinates in post_presenter
- add map to the SPV if location is provided
- add leaflet.js to render map and marker of position
- make coordinates available in frontend
- add map scss
- make stream post location clickable and redirect to the SPV
- prevent render map if no location data is provided
- add tests for coordinates
- use the leaflet gem instead of the JS assets
(#5813)
parent f9a45226
......@@ -128,6 +128,9 @@ gem "rails-i18n", "4.0.4"
gem "markerb", "1.0.2"
gem "messagebus_ruby_api", "1.0.3"
# Map
gem "leaflet-rails", "0.7.4"
# Parsing
gem "nokogiri", "1.6.6.2"
......
......@@ -409,6 +409,7 @@ GEM
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
kgio (2.9.3)
leaflet-rails (0.7.4)
listen (3.0.3)
rb-fsevent (>= 0.9.3)
rb-inotify (>= 0.9)
......@@ -833,6 +834,7 @@ DEPENDENCIES
jshintrb (= 0.3.0)
json (= 1.8.3)
json-schema (= 2.5.1)
leaflet-rails (= 0.7.4)
logging-rails (= 0.5.0)
markerb (= 1.0.2)
messagebus_ruby_api (= 1.0.3)
......
......@@ -29,7 +29,6 @@ app.views.Content = app.views.Base.extend({
return photos;
},
expandPost: function(evt) {
var el = $(this.el).find('.collapsible');
el.removeClass('collapsed').addClass('opened');
......@@ -155,4 +154,5 @@ app.views.SPVOpenGraph = app.views.OpenGraph.extend({
// override with nothing
}
});
// @license-end
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.LocationMap = app.views.Content.extend({
templateName: "status-message-map",
map: function() {
var coordinates = this.model.get("coordinates");
// if (coordinates != "" && tileserver.enable) { // for when the tileserver is set via the diaspora.yml
if (coordinates.lat) {
var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}";
var map = L.map("map").setView([coordinates.lat, coordinates.lng], 16);
var 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='http://mapbox.com'>Mapbox</a>";
L.tileLayer(tileLayerSource, {
attribution: attribution,
maxZoom: 18,
id: "zaziemo.mpn66kn8",
accessToken: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA"
}).addTo(map);
var markerOnMap = L.marker(coordinates).addTo(map);
return map;
}
},
postRenderTemplate : function(){
_.defer(_.bind(this.map, this));
}
});
// @license-end
......@@ -11,7 +11,8 @@ app.views.SinglePostContent = app.views.Base.extend({
".oembed" : "oEmbedView",
".opengraph" : "openGraphView",
".status-message-location" : "postLocationStreamView",
".poll": "pollView"
".map" : "postMapView",
'.poll': 'pollView',
},
initialize : function() {
......@@ -20,6 +21,7 @@ app.views.SinglePostContent = app.views.Base.extend({
this.oEmbedView = new app.views.OEmbed({model : this.model});
this.openGraphView = new app.views.SPVOpenGraph({model : this.model});
this.postContentView = new app.views.ExpandedStatusMessage({model: this.model});
this.postMapView = new app.views.LocationMap({model: this.model});
this.pollView = new app.views.Poll({ model: this.model });
},
......
......@@ -45,3 +45,4 @@
//= require osmlocator
//= require bootstrap-switch
//= require blueimp-gallery
//= require leaflet
......@@ -42,6 +42,10 @@
@import 'single-post-view';
@import 'new_styles/poll';
/* map*/
@import 'leaflet';
@import 'map';
/* conversations */
@import 'conversations';
......
#map {
height: 180px;
position: relative;
overflow: hidden;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 0;
}
.leaflet-right .leaflet-control {
margin-right: 0;
}
......@@ -13,6 +13,7 @@
color: lighten($text-grey,10%);
font-size: 12px;
.post-time a { color: $text-grey; }
.near-from a { color: $text-grey; }
.post_scope { margin-right: 5px; }
.status-message-location {
padding-top: 2px;
......
......@@ -83,7 +83,7 @@
float: left;
margin-top: 6px;
}
.status-message-location .near-from {
.status-message-location .near-from a {
font-size: $font-size-small;
color: $text-grey;
}
......
......@@ -99,4 +99,5 @@
<div id="body" class="row">
<div id="real-post-content" class="post-content col-md-12">
</div>
<div class="map col-md-12"></div>
</div>
{{#if location}}
<div class='near-from'>
{{ t "publisher.near_from" location=location}}
<a href="/posts/{{id}}">{{ t "publisher.near_from" location=location}}</a>
</div>
{{/if}}
{{#if location}}
<div id="map">
</div>
{{/if}}
......@@ -3,7 +3,6 @@
# the COPYRIGHT file.
class Reshare < Post
belongs_to :root, :class_name => 'Post', :foreign_key => :root_guid, :primary_key => :guid
validate :root_must_be_public
validates_presence_of :root, :on => :create
......@@ -49,6 +48,10 @@ class Reshare < Post
absolute_root.try(:location).try(:address)
end
def coordinates
{lat: absolute_root.try(:location).try(:lat), lng: absolute_root.try(:location).try(:lng)}
end
def poll
absolute_root.try(:poll) || super
end
......
......@@ -162,6 +162,10 @@ class StatusMessage < Post
location.try(:address)
end
def coordinates
{lat: location.try(:lat), lng: location.try(:lng)}
end
protected
def presence_of_content
if text_and_photos_blank?
......
......@@ -32,6 +32,7 @@ class PostPresenter < BasePresenter
root: root,
title: title,
address: @post.address,
coordinates: @post.coordinates,
poll: @post.poll,
already_participated_in_poll: already_participated_in_poll,
participation: participate?,
......
......@@ -140,9 +140,10 @@ FactoryGirl.define do
end
factory(:location) do
address "unicorn city"
lat 1
lng 2
address "Starco Mart, Mission Street, West SoMa, San Francisco, San Francisco "\
"City and County, Kalifornien, 94103, Vereinigte Staaten von Amerika"
lat 37.78
lng -122.41
end
factory(:poll) do
......
......@@ -24,5 +24,11 @@ describe("app.views.Content", function(){
this.post.set({post_type : "Reshare"});
expect(this.view.presenter().isReshare).toBeTruthy();
});
// it("provides coordinates", function(){
// this.post.location;
// console.log(this.view.presenter());
// console.log(this.post.location);
// });
});
});
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment