Merge pull request #109 from openplans/require-map-drag

Require the user to drag the map before submitting a place

VERSION

@@ -1 +1 @@
-3.11.16
+3.11.17

src/sa_web/jstemplates/place-form.html

@@ -1,4 +1,5 @@
         <p class="drag-marker-instructions">Drag the map to your location.</p>
+        <p class="drag-marker-warning is-visuallyhidden">It looks like you didn't set your location yet. Please drag the map to your location.</p>
 
         <h4 class="">{{ place_config.title }}</h4>
 

src/sa_web/static/css/default.css

@@ -557,19 +557,22 @@ a.logout-btn {
 }
 
 /* Drag Marker Instructions (for adding a new place) */
-.drag-marker-instructions {
+.drag-marker-instructions,
+.drag-marker-warning {
   background-color: LightYellow;
   background-color: rgba(240,240,0,0.2);
   color: #444;
-  font-size: 0.875em;
   font-weight: bold;
   text-shadow: -1px 1px 0 rgba(255,255,255,0.5);
   text-align: center;
-  line-height: 2;
   margin-bottom: 1em;
-  padding: 0.325em;
+  padding: 0.75em 1em 0.875em;
   border-radius: 0.325em;
 }
+.drag-marker-warning {
+  background-color: LightPink;
+  background-color: rgba(242, 206, 206, 0.8);
+}
 
 /* Ajax Error Message */
 #ajax-error-msg {
@@ -954,7 +957,7 @@ ul.recent-points {
 /* =List View
 -------------------------------------------------------------- */
 
-.list-toggle-nav { 
+.list-toggle-nav {
   display: none;
 }
 
@@ -1047,10 +1050,10 @@ ul.recent-points {
   margin: 0 1em 0.75em 0;
 }
 
-.place-list .place-label, 
+.place-list .place-label,
 .place-list .place-value {
 }
-.place-list .place-label:empty, 
+.place-list .place-label:empty,
 .place-list .place-value:empty {
   display: none;
 }
@@ -1399,7 +1402,7 @@ a.close-unsupported-overlay {
   }
 
   /* List View */
-  .list-toggle-nav { 
+  .list-toggle-nav {
     display: block;
     float: right;
     width: auto;

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

@@ -149,6 +149,9 @@ var Shareabouts = Shareabouts || {};
       // with utmost awesomeness.
       this.mapView.map.on('movestart', this.onMapMoveStart, this);
       this.mapView.map.on('moveend', this.onMapMoveEnd, this);
+      // For knowing if the user has moved the map after opening the form.
+      this.mapView.map.on('dragend', this.onMapDragEnd, this);
+
 
       // This is the "center" when the popup is open
       this.offsetRatio = {x: 0.2, y: 0.0};
@@ -219,11 +222,25 @@ var Shareabouts = Shareabouts || {};
     getCenter: function() {
       return this.mapView.map.getCenter();
     },
+    setPlaceFormViewLatLng: function(centerLatLng) {
+      if (this.placeFormView) {
+        this.placeFormView.setLatLng(centerLatLng);
+      }
+    },
     onMapMoveStart: function(evt) {
       this.$centerpoint.addClass('dragging');
     },
     onMapMoveEnd: function(evt) {
       this.$centerpoint.removeClass('dragging');
+
+      // Never set the placeFormView's latLng until the user does it with a
+      // drag event (below)
+      if (this.placeFormView && this.placeFormView.center) {
+        this.setPlaceFormViewLatLng(this.getCenter());
+      }
+    },
+    onMapDragEnd: function(evt) {
+      this.setPlaceFormViewLatLng(this.getCenter());
     },
     onClickAddPlaceBtn: function(evt) {
       evt.preventDefault();

src/sa_web/static/js/views/place-form-view.js

@@ -35,10 +35,14 @@ var Shareabouts = Shareabouts || {};
       // TODO handle model errors!
       console.log('oh no errors!!', model, res);
     },
+    // This is called from the app view
+    setLatLng: function(latLng) {
+      this.center = latLng;
+      this.$('.drag-marker-instructions, .drag-marker-warning').addClass('is-visuallyhidden');
+    },
     // Get the attributes from the form
     getAttrs: function() {
-      var attrs = {},
-          center = this.options.appView.getCenter();
+      var attrs = {};
 
       // Get values from the form
       _.each(this.$('form').serializeArray(), function(item, i) {
@@ -48,7 +52,7 @@ var Shareabouts = Shareabouts || {};
       // Get the location attributes from the map
       attrs.geometry = {
         type: 'Point',
-        coordinates: [center.lng, center.lat]
+        coordinates: [this.center.lng, this.center.lat]
       };
 
       return attrs;
@@ -90,6 +94,20 @@ var Shareabouts = Shareabouts || {};
       }
     },
     onSubmit: Gatekeeper.onValidSubmit(function(evt) {
+      // Make sure that the center point has been set after the form was
+      // rendered. If not, this is a good indication that the user neglected
+      // to move the map to set it in the correct location.
+      if (!this.center) {
+        this.$('.drag-marker-instructions').addClass('is-visuallyhidden');
+        this.$('.drag-marker-warning').removeClass('is-visuallyhidden');
+
+        // Scroll to the top of the panel if desktop
+        this.$el.parent('article').scrollTop(0);
+        // Scroll to the top of the window, if mobile
+        window.scrollTo(0, 0);
+        return;
+      }
+
       var router = this.options.router,
           model = this.model,
           // Should not include any files