Scroll to the response specified in the url

- when the survey response is rendered and the panel is shown, look for the response element and scroll it into view
openplans · Apr 16, 2014 · a246d28 · a246d28
1 parent b9f3799
commit a246d28
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/src/sa_web/jstemplates/activity-list-item.html b/src/sa_web/jstemplates/activity-list-item.html
@@ -1,6 +1,6 @@
       <li class="activity-item clearfix">
         {{!-- data attributes are not ideal, see comment in activity view --}}
-        <a href="/place/{{ place.id }}{{#is target_type 'comments'}}/response/{{ id }}{{/is}}" data-action-type="{{ target_type }}" data-place-id="{{ place.id }}">{{#_}}<strong>
+        <a href="/place/{{ place.id }}{{#is target_type 'comments'}}/response/{{ target.id }}{{/is}}" data-action-type="{{ target_type }}" data-place-id="{{ place.id }}">{{#_}}<strong>
 
         {{#if target.submitter}}
           <img src="{{ target.submitter.avatar_url }}" class="avatar" /> {{ target.submitter.name }}

diff --git a/src/sa_web/static/js/routes.js b/src/sa_web/static/js/routes.js
@@ -97,8 +97,8 @@ var Shareabouts = Shareabouts || {};
       this.appView.newPlace();
     },
 
-    viewPlace: function(id) {
-      this.appView.viewPlace(id, this.loading);
+    viewPlace: function(id, responseId) {
+      this.appView.viewPlace(id, responseId, this.loading);
     },
 
     editPlace: function(){},

diff --git a/src/sa_web/static/js/views/app-view.js b/src/sa_web/static/js/views/app-view.js
@@ -308,13 +308,13 @@ var Shareabouts = Shareabouts || {};
       // Called by the router
       this.collection.add({});
     },
-    viewPlace: function(model, zoom) {
+    viewPlace: function(model, responseId, zoom) {
       var self = this,
           onPlaceFound, onPlaceNotFound, modelId;
 
       onPlaceFound = function(model) {
         var map = self.mapView.map,
-            layer, center, placeDetailView;
+            layer, center, placeDetailView, $responseToScrollTo;
 
         // If this model is a duplicate of one that already exists in the
         // places collection, it may not correspond to a layerView. For this
@@ -328,7 +328,7 @@ var Shareabouts = Shareabouts || {};
         center = layer.getLatLng ? layer.getLatLng() : layer.getBounds().getCenter();
 
         self.$panel.removeClass().addClass('place-detail place-detail-' + model.id);
-        self.showPanel(placeDetailView.render().$el);
+        self.showPanel(placeDetailView.render().$el, true);
         self.hideNewPin();
         self.destroyNewModels();
         self.hideCenterPoint();
@@ -345,6 +345,16 @@ var Shareabouts = Shareabouts || {};
           map.panTo(center, {animate: true});
         }
 
+        if (responseId) {
+          // get the element based on the id
+          $responseToScrollTo = placeDetailView.$el.find('[data-response-id="'+ responseId +'"]');
+
+          // call scrollIntoView()
+          if ($responseToScrollTo.length > 0) {
+            $responseToScrollTo.get(0).scrollIntoView();
+          }
+        }
+
         // Focus the one we're looking
         model.trigger('focus');
       };
@@ -395,18 +405,20 @@ var Shareabouts = Shareabouts || {};
       this.hideCenterPoint();
       this.hideAddButton();
     },
-    showPanel: function(markup) {
+    showPanel: function(markup, preventScrollToTop) {
       var map = this.mapView.map;
 
       this.unfocusAllPlaces();
 
       this.$panelContent.html(markup);
       this.$panel.show();
 
-      this.$panelContent.scrollTop(0);
-      // Scroll to the top of window when showing new content on mobile. Does
-      // nothing on desktop.
-      window.scrollTo(0, 0);
+      if (preventScrollToTop) {
+        this.$panelContent.scrollTop(0);
+        // Scroll to the top of window when showing new content on mobile. Does
+        // nothing on desktop.
+        window.scrollTo(0, 0);
+      }
 
       $('body').addClass('content-visible');
       map.invalidateSize({ pan:false });

diff --git a/src/sa_web/static/js/views/survey-view.js b/src/sa_web/static/js/views/survey-view.js
@@ -17,7 +17,16 @@ var Shareabouts = Shareabouts || {};
 
     render: function() {
       var self = this,
-          responses = [];
+          responses = [],
+          url = window.location.toString(),
+          urlParts = url.split('response/'),
+          responseIdToScrollTo,
+          $responseToScrollTo;
+
+      // get the response id from the url
+      if (urlParts.length === 2) {
+        responseIdToScrollTo = urlParts[1];
+      }
 
       // I don't understand why we need to redelegate the event here, but they
       // are definitely unbound after the first render.
@@ -43,6 +52,16 @@ var Shareabouts = Shareabouts || {};
         survey_config: this.options.surveyConfig
       }));
 
+      // get the element based on the id
+      $responseToScrollTo = this.$el.find('[data-response-id="'+ responseIdToScrollTo +'"]');
+
+      // call scrollIntoView()
+      if ($responseToScrollTo.length > 0) {
+        setTimeout(function() {
+          $responseToScrollTo.get(0).scrollIntoView();
+        }, 500);
+      }
+
       return this;
     },