From 233f3b809ecdbfe136dcd060339c7ac496b683d0 Mon Sep 17 00:00:00 2001 From: Aaron Ogle Date: Tue, 11 Mar 2014 11:53:28 -0400 Subject: [PATCH 1/4] Require the user to drag the map after the place form is shown - Set the center on user drag - Prevent form submit if user has not set the location (dragged the map) - Update the drag instructions and scroll to the top --- src/sa_web/jstemplates/place-form.html | 2 ++ src/sa_web/static/css/default.css | 21 ++++++++++++---- src/sa_web/static/js/views/app-view.js | 9 +++++++ src/sa_web/static/js/views/place-form-view.js | 24 ++++++++++++++++--- 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/sa_web/jstemplates/place-form.html b/src/sa_web/jstemplates/place-form.html index a1b3465fc..7dfb01701 100644 --- a/src/sa_web/jstemplates/place-form.html +++ b/src/sa_web/jstemplates/place-form.html @@ -1,4 +1,6 @@

Drag the map to your location.

+

It doesn't look set your + location yet. Drag the map to the location you want to share.

{{ place_config.title }}

diff --git a/src/sa_web/static/css/default.css b/src/sa_web/static/css/default.css index b505b14fc..55c1301f8 100644 --- a/src/sa_web/static/css/default.css +++ b/src/sa_web/static/css/default.css @@ -571,6 +571,19 @@ a.logout-btn { border-radius: 0.325em; } +.drag-marker-warning { + background-color: rgba(242, 206, 206, 0.8); + 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: 1.5; + margin-bottom: 1em; + padding: 0.325em; + border-radius: 0.325em; +} + /* Ajax Error Message */ #ajax-error-msg { display: none; @@ -954,7 +967,7 @@ ul.recent-points { /* =List View -------------------------------------------------------------- */ -.list-toggle-nav { +.list-toggle-nav { display: none; } @@ -1047,10 +1060,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 +1412,7 @@ a.close-unsupported-overlay { } /* List View */ - .list-toggle-nav { + .list-toggle-nav { display: block; float: right; width: auto; diff --git a/src/sa_web/static/js/views/app-view.js b/src/sa_web/static/js/views/app-view.js index b3437a7ee..a300ea7a1 100644 --- a/src/sa_web/static/js/views/app-view.js +++ b/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}; @@ -225,6 +228,12 @@ var Shareabouts = Shareabouts || {}; onMapMoveEnd: function(evt) { this.$centerpoint.removeClass('dragging'); }, + onMapDragEnd: function(evt) { + if (this.placeFormView) { + this.placeFormView.setLatLng(this.getCenter()); + this.placeFormView.$('.drag-marker-instructions, .drag-marker-warning').addClass('is-visuallyhidden'); + } + }, onClickAddPlaceBtn: function(evt) { evt.preventDefault(); S.Util.log('USER', 'map', 'new-place-btn-click'); diff --git a/src/sa_web/static/js/views/place-form-view.js b/src/sa_web/static/js/views/place-form-view.js index 60706f286..d36093da2 100644 --- a/src/sa_web/static/js/views/place-form-view.js +++ b/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) { + console.log('set latlng'); + this.center = latLng; + }, // 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 From f745925b5f298a1f9bdf0d9cc1f9a1f02e0f1e2d Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Tue, 11 Mar 2014 12:24:30 -0400 Subject: [PATCH 2/4] DRYer CSS, fix typo in drag error message --- src/sa_web/jstemplates/place-form.html | 3 +-- src/sa_web/static/css/default.css | 18 ++++-------------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/sa_web/jstemplates/place-form.html b/src/sa_web/jstemplates/place-form.html index 7dfb01701..761424903 100644 --- a/src/sa_web/jstemplates/place-form.html +++ b/src/sa_web/jstemplates/place-form.html @@ -1,6 +1,5 @@

Drag the map to your location.

-

It doesn't look set your - location yet. Drag the map to the location you want to share.

+

It looks like you didn't set your location yet. Please drag the map to your location.

{{ place_config.title }}

diff --git a/src/sa_web/static/css/default.css b/src/sa_web/static/css/default.css index 55c1301f8..dcff0be02 100644 --- a/src/sa_web/static/css/default.css +++ b/src/sa_web/static/css/default.css @@ -557,31 +557,21 @@ 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); - 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: 1.5; - margin-bottom: 1em; - padding: 0.325em; - border-radius: 0.325em; } /* Ajax Error Message */ From 6515f3e5a2e2464f9b7dd3eea496ca68d0de5ca1 Mon Sep 17 00:00:00 2001 From: Aaron Ogle Date: Tue, 11 Mar 2014 12:44:40 -0400 Subject: [PATCH 3/4] Make sure that keyboard map pans also set the latlng on the place form view --- src/sa_web/static/js/views/app-view.js | 16 ++++++++++++---- src/sa_web/static/js/views/place-form-view.js | 2 +- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/sa_web/static/js/views/app-view.js b/src/sa_web/static/js/views/app-view.js index a300ea7a1..3ce153c9b 100644 --- a/src/sa_web/static/js/views/app-view.js +++ b/src/sa_web/static/js/views/app-view.js @@ -222,17 +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) { - if (this.placeFormView) { - this.placeFormView.setLatLng(this.getCenter()); - this.placeFormView.$('.drag-marker-instructions, .drag-marker-warning').addClass('is-visuallyhidden'); - } + this.setPlaceFormViewLatLng(this.getCenter()); }, onClickAddPlaceBtn: function(evt) { evt.preventDefault(); diff --git a/src/sa_web/static/js/views/place-form-view.js b/src/sa_web/static/js/views/place-form-view.js index d36093da2..fc15e9b19 100644 --- a/src/sa_web/static/js/views/place-form-view.js +++ b/src/sa_web/static/js/views/place-form-view.js @@ -37,8 +37,8 @@ var Shareabouts = Shareabouts || {}; }, // This is called from the app view setLatLng: function(latLng) { - console.log('set latlng'); this.center = latLng; + this.$('.drag-marker-instructions, .drag-marker-warning').addClass('is-visuallyhidden'); }, // Get the attributes from the form getAttrs: function() { From d028b9acd88c76614abf8276d5f418363ef4c1cd Mon Sep 17 00:00:00 2001 From: Aaron Ogle Date: Tue, 11 Mar 2014 12:48:03 -0400 Subject: [PATCH 4/4] 3.11.17 --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 00ac4a1b5..8910aa049 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -3.11.16 +3.11.17