Keep track of current detail view

To guard against unsaved editor changes being lost, remember the detail
view that's on display in the side panel.

Addresses: #500

src/sa_web/static/js/views/app-view.js

@@ -21,6 +21,7 @@ var Shareabouts = Shareabouts || {};
   S.AppView = Backbone.View.extend({
     events: {
       'click #add-place': 'onClickAddPlaceBtn',
+      'click .list-toggle-btn': 'toggleListView',
       'click .close-btn': 'onClickClosePanelBtn'
     },
     initialize: function(){
@@ -48,6 +49,7 @@ var Shareabouts = Shareabouts || {};
       this.placeFormView = null;
       this.placeDetailViews = {};
       this.landmarkDetailViews = {};
+      this.activeDetailView;
 
       // this flag is used to distinguish between user-initiated zooms and
       // zooms initiated by a leaflet method
@@ -62,10 +64,10 @@ var Shareabouts = Shareabouts || {};
         $('#ajax-error-msg').hide();
       });
 
-      $('.list-toggle-btn').click(function(evt){
-        evt.preventDefault();
-        self.toggleListView();
-      });
+      // $('.list-toggle-btn').click(function(evt){
+      //   evt.preventDefault();
+      //   self.toggleListView();
+      // });
 
       $(document).on('click', '.activity-item a', function(evt) {
         window.app.clearLocationTypeFilter();
@@ -116,6 +118,7 @@ var Shareabouts = Shareabouts || {};
       this.pagesNavView = (new S.PagesNavView({
               el: '#pages-nav-container',
               pagesConfig: this.options.pagesConfig,
+              placeConfig: this.options.placeConfig,
               router: this.options.router
             })).render();
 
@@ -620,19 +623,22 @@ var Shareabouts = Shareabouts || {};
 
       onLandmarkFound = function(model, response, newOptions) {
         var map = self.mapView.map,
-            layer, center, landmarkDetailView, $responseToScrollTo;
+            layer, center, $responseToScrollTo;
         options = newOptions ? newOptions : options;
 
         layer = self.mapView.layerViews[options.collectionId][model.id].layer
 
         if (layer) {
           center = layer.getLatLng ? layer.getLatLng() : layer.getBounds().getCenter();
         }
-        landmarkDetailView = self.getLandmarkDetailView(options.collectionId, model);
+        self.activeDetailView = self.getLandmarkDetailView(options.collectionId, model);
+        self.activeDetailView.isModified = false;
+        self.activeDetailView.isEditingToggled = false;
 
         self.$panel.removeClass().addClass('place-detail place-detail-' + model);
-        self.showPanel(landmarkDetailView.render().$el, false);
-        landmarkDetailView.delegateEvents();
+        self.showPanel(self.activeDetailView.render().$el, false);
+        self.activeDetailView.delegateEvents();
+
         self.hideNewPin();
         self.destroyNewModels();
         self.hideCenterPoint();
@@ -770,7 +776,7 @@ var Shareabouts = Shareabouts || {};
 
       onPlaceFound = function(model) {
         var map = self.mapView.map,
-            layer, center, placeDetailView, $responseToScrollTo;
+            layer, center, $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
@@ -785,15 +791,17 @@ var Shareabouts = Shareabouts || {};
           layer = self.mapView.layerViews[datasetId][model.cid].layer;
         }
 
-        placeDetailView = self.getPlaceDetailView(model);
+        self.activeDetailView = self.getPlaceDetailView(model);
+        self.activeDetailView.isModified = false;
+        self.activeDetailView.isEditingToggled = false;
 
         if (layer) {
           center = layer.getLatLng ? layer.getLatLng() : layer.getBounds().getCenter();
         }
 
         self.$panel.removeClass().addClass('place-detail place-detail-' + model.id);
-        self.showPanel(placeDetailView.render().$el, !!responseId);
-        placeDetailView.delegateEvents();
+        self.showPanel(self.activeDetailView.render().$el, !!responseId);
+        self.activeDetailView.delegateEvents();
         // TODO(Trevor): prevent default form behavior when in editing mode
 
         self.hideNewPin();
@@ -830,7 +838,7 @@ var Shareabouts = Shareabouts || {};
 
         if (responseId) {
           // get the element based on the id
-          $responseToScrollTo = placeDetailView.$el.find('[data-response-id="'+ responseId +'"]');
+          $responseToScrollTo = self.activeDetailView.$el.find('[data-response-id="'+ responseId +'"]');
 
           // call scrollIntoView()
           if ($responseToScrollTo.length > 0) {
@@ -904,14 +912,6 @@ var Shareabouts = Shareabouts || {};
       this.setBodyClass('content-visible');
     },
     showPanel: function(markup, preventScrollToTop) {
-      console.log("show panel");
-
-      // if new panel content would replace an open, unsaved place detail
-      // view in editor mode, we need to stop the new content from being inserted
-      // and prompt the user
-      console.log("this.$panel", this.$panel);
-      if (this.$panel.hasClass("place-detail")) { console.log("replacing place detail") }
-
       var map = this.mapView.map;
 
       this.unfocusAllPlaces();
@@ -1045,12 +1045,9 @@ var Shareabouts = Shareabouts || {};
     },
     toggleListView: function() {
       if (this.listView.isVisible()) {
-        this.viewMap();
-        this.hideListView();
-        this.options.router.navigate('');
+        this.options.router.navigate('/', {"trigger": true});
       } else {
-        this.showListView();
-        this.options.router.navigate('list');
+        this.options.router.navigate('list', {"trigger": true});
       }
       this.mapView.clearFilter();
     }