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

Refactor locations in the SPV

app/assets/javascripts/app/helpers/locations.js

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

app/assets/javascripts/app/views/location_stream.js

@@ -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 = app.helpers.locations.getTiles();
-        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,
-          });
-        }
 
         tiles.addTo(map);
 

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

@@ -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 = app.helpers.locations.getTiles();
-    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,
-      });
-    }
 
     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),

app/assets/stylesheets/map.scss

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

spec/javascripts/app/helpers/locations_spec.js

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

spec/javascripts/app/views/single_post_content_view_spec.js

@@ -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() {
+      it("shouldn't add a map container", 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");
       });
     });