diff --git a/app/assets/javascripts/app/views/location_map.js b/app/assets/javascripts/app/views/location_map.js deleted file mode 100644 index 59949ae16..000000000 --- a/app/assets/javascripts/app/views/location_map.js +++ /dev/null @@ -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 © OpenStreetMap contributors, " + - "CC-BY-SA, " + - "Imagery © Mapbox"; - - 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 diff --git a/app/assets/javascripts/app/views/location_stream.js b/app/assets/javascripts/app/views/location_stream.js index fd6fae946..591a88bdb 100644 --- a/app/assets/javascripts/app/views/location_stream.js +++ b/app/assets/javascripts/app/views/location_stream.js @@ -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 © OpenStreetMap contributors, " + + "CC-BY-SA, " + + "Imagery © Mapbox"; + + 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 - 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 92e5cb29e..463986151 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 @@ -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 }); }, diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss index f210f8dbb..6729448cb 100644 --- a/app/assets/stylesheets/map.scss +++ b/app/assets/stylesheets/map.scss @@ -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; } diff --git a/app/assets/stylesheets/single-post-view.scss b/app/assets/stylesheets/single-post-view.scss index 71ca37235..2706c8608 100644 --- a/app/assets/stylesheets/single-post-view.scss +++ b/app/assets/stylesheets/single-post-view.scss @@ -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; diff --git a/app/assets/stylesheets/stream_element.scss b/app/assets/stylesheets/stream_element.scss index 1cf764c64..46ed66c96 100644 --- a/app/assets/stylesheets/stream_element.scss +++ b/app/assets/stylesheets/stream_element.scss @@ -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; } 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 4da6a3ead..3f55e580a 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 @@ -57,7 +57,6 @@ {{t "stream.via" provider=provider_display_name}} {{/if}} {{/if}} -
{{#unless root}}
@@ -68,6 +67,9 @@
{{/unless}}
+
+
+
{{#if root}}
@@ -99,5 +101,4 @@
-
diff --git a/app/assets/templates/status-message-location_tpl.jst.hbs b/app/assets/templates/status-message-location_tpl.jst.hbs index 0f97e3d7a..1cb8bda65 100644 --- a/app/assets/templates/status-message-location_tpl.jst.hbs +++ b/app/assets/templates/status-message-location_tpl.jst.hbs @@ -1,5 +1,8 @@ {{#if location.address}}
- {{ t "publisher.near_from" location=location.address}} + {{t "publisher.near_from" location=location.address}} +
+
+
{{/if}} diff --git a/app/assets/templates/status-message-map_tpl.jst.hbs b/app/assets/templates/status-message-map_tpl.jst.hbs deleted file mode 100644 index 6b344c792..000000000 --- a/app/assets/templates/status-message-map_tpl.jst.hbs +++ /dev/null @@ -1,4 +0,0 @@ -{{#if location.lat}} -
-
-{{/if}} diff --git a/spec/javascripts/app/views/content_view_spec.js b/spec/javascripts/app/views/content_view_spec.js index 218bc4e0f..90fa3c4af 100644 --- a/spec/javascripts/app/views/content_view_spec.js +++ b/spec/javascripts/app/views/content_view_spec.js @@ -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()); + }); }); }); diff --git a/spec/javascripts/app/views/location_stream_spec.js b/spec/javascripts/app/views/location_stream_spec.js new file mode 100644 index 000000000..25a01b642 --- /dev/null +++ b/spec/javascripts/app/views/location_stream_spec.js @@ -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"); + }); + }); + }); +}); diff --git a/spec/javascripts/helpers/factory.js b/spec/javascripts/helpers/factory.js index 40aeaf39f..f8a40b874 100644 --- a/spec/javascripts/helpers/factory.js +++ b/spec/javascripts/helpers/factory.js @@ -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));