nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add map to header

Browse source 
and add toggle map function
to show and load map only when user is clicking on address

(#5813)
This commit is contained in:
Julia 2015-08-05 18:13:23 +02:00 committed by realtin
parent f92a2ee0dd
commit c0f909d228
12 changed files with 108 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/assets/javascripts/app/views/location_map.js
View file

@ -1,34 +0,0 @@
// @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 location = this.model.get("location");
// if (coordinates != "" && tileserver.enable) { // for when the tileserver is set via the diaspora.yml
if (location.lat) {
var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}";
var map = L.map("map").setView([location.lat, location.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(location).addTo(map);
return map;
}
},
postRenderTemplate : function(){
_.defer(_.bind(this.map, this));
}
});
// @license-end

40
app/assets/javascripts/app/views/location_stream.js
View file

@ -1,7 +1,43 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.LocationStream = app.views.Content.extend({
templateName: "status-message-location"
events: {
"click .near-from": "toggleMap"
},
templateName: "status-message-location",
toggleMap: function () {
var mapContainer = this.$el.find(".mapContainer");
if (mapContainer.hasClass("empty")) {
var location = this.model.get("location");
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);
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(location).addTo(map);
mapContainer.removeClass("empty");
return map;
}
} else {
if (mapContainer.css("display") === "none") {
mapContainer.css("display", "block");
} else {
mapContainer.css("display", "none");
}
}
}
});
// @license-end

2
app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js
View file

@ -11,7 +11,6 @@ app.views.SinglePostContent = app.views.Base.extend({
".oembed" : "oEmbedView",
".opengraph" : "openGraphView",
".status-message-location" : "postLocationStreamView",
".map" : "postMapView",
'.poll': 'pollView',
},
@ -21,7 +20,6 @@ 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 });
},

8
app/assets/stylesheets/map.scss
View file

@ -1,9 +1,13 @@
#map {
height: 180px;
.map {
position: relative;
overflow: hidden;
}
.near-from:hover {
cursor: pointer;
text-decoration: underline;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 0;
}

6
app/assets/stylesheets/single-post-view.scss
View file

@ -13,7 +13,6 @@
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;
@ -24,6 +23,11 @@
padding-left: 10px;
}
}
.status-message-location {
color: $text-grey;
font-size: 12px;
margin: 10px 20px 0px 15px;
}
.row.reshare {
border-top: 1px solid lighten($border-grey,5%);
padding-top: 10px;

2
app/assets/stylesheets/stream_element.scss
View file

@ -83,7 +83,7 @@
float: left;
margin-top: 6px;
}
.status-message-location .near-from a {
.status-message-location {
font-size: $font-size-small;
color: $text-grey;
}

5
app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
View file

@ -57,7 +57,6 @@
{{t "stream.via" provider=provider_display_name}}
{{/if}}
{{/if}}
<div class="status-message-location" />
</div>
{{#unless root}}
<div id="single-post-moderation" />
@ -68,6 +67,9 @@
<div id="single-post-actions" class="col-md-4" />
{{/unless}}
</div>
<div class="row">
<div class="status-message-location" />
</div>
{{#if root}}
<div class="row reshare">
<div class="col-md-8" id="reshare-info">
@ -99,5 +101,4 @@
<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>

5
app/assets/templates/status-message-location_tpl.jst.hbs
View file

@ -1,5 +1,8 @@
{{#if location.address}}
<div class='near-from'>
<a href="/posts/{{id}}">{{ t "publisher.near_from" location=location.address}}</a>
{{t "publisher.near_from" location=location.address}}
</div>
<div>
<div class="mapContainer empty"></div>
</div>
{{/if}}

4
app/assets/templates/status-message-map_tpl.jst.hbs
View file

@ -1,4 +0,0 @@
{{#if location.lat}}
<div id="map">
</div>
{{/if}}

9
spec/javascripts/app/views/content_view_spec.js
View file

@ -25,10 +25,9 @@ describe("app.views.Content", function(){
expect(this.view.presenter().isReshare).toBeTruthy();
});
// it("provides coordinates", function(){
// this.post.location;
// console.log(this.view.presenter());
// console.log(this.post.location);
// });
it("provides location", function(){
this.post.set({location : factory.location()});
expect(this.view.presenter().location).toEqual(factory.location());
});
});
});

39
spec/javascripts/app/views/location_stream_spec.js Normal file
View file

@ -0,0 +1,39 @@
describe("app.views.LocationMap", function() {
beforeEach(function(){
this.post = factory.post();
this.view = new app.views.LocationStream({model : this.post});
});
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]);
});
it("should contain a map container", function() {
expect(this.view.$el[0]).toContainElement(".mapContainer");
});
it("should initialize map", function() {
expect(this.view.$el.find(".mapContainer")[0]).toHaveClass("empty");
this.view.toggleMap();
expect(this.view.$el.find(".mapContainer")[0]).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"});
});
*/
}),
context("without location provided", function() {
it("should not initialize the map", function() {
expect(this.view.$el[0]).not.toContainElement(".mapContainer");
});
});
});
});

8
spec/javascripts/helpers/factory.js
View file

@ -148,6 +148,14 @@ var factory = {
}, overrides);
},
location : function() {
return {
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
};
},
post : function(overrides) {
var defaultAttrs = _.extend(factory.postAttrs(), {"author" : this.author()});
return new app.models.Post(_.extend(defaultAttrs, overrides));