Skip to content
Browse files

refactor popularity slider into its own widget

  • Loading branch information...
1 parent 5bf30ce commit 17a80c7de3739284b7b72c5b353880e3a1fcabae @atogle atogle committed May 23, 2012
View
3 app/assets/javascripts/add_feature.js
@@ -26,9 +26,6 @@
$(S).trigger('locateNewFeature');
$locateFeature.hide();
$finalizeFeature.show();
-
- // TODO: FIX! Reset filtering
- $('#map-container').hiderslider('reset');
});
$finalizeFeature.click( function(event) {
View
1 app/assets/javascripts/application.js
@@ -14,3 +14,4 @@
//= require page_links
//= require feature_popup
//= require add_feature
+//= require popularity_slider
View
2 app/assets/javascripts/feature_popup.js
@@ -14,6 +14,8 @@
var $form = $(mouseEvent.target).closest('form');
// Send form data and url
+ // TODO: serialize the form to an object literal instead of passing a
+ // jQuery object of the form
$(S).trigger('submitNewFeature', [$form, $form.attr('action')]);
});
View
36 app/assets/javascripts/main.js.erb
@@ -8,7 +8,8 @@ var Shareabouts = Shareabouts || {};
var Map = $("#map"),
pageLinks,
featurePopup,
- addFeature;
+ addFeature,
+ popularitySlider;
var MarkerIcon = L.Icon.extend({
iconUrl : '<%= image_path("feature-point.png") %>',
@@ -44,23 +45,6 @@ var Shareabouts = Shareabouts || {};
shadowSize : new L.Point(0,0) // no shadow
});
- // Init the slider for filtering the results by popularity
- var initPopularitySlider = function(values) {
- // Popularity Filter
- $('#map-container').hiderslider({
- title: 'Filter by Popularity',
- slider: {
- max: values.length-1,
- slide: function(e, data) {
- Map.shareabout('filterByPopularity', values[data.value]);
- },
- change: function(e, data) {
- Map.shareabout('filterByPopularity', values[data.value]);
- }
- }
- });
- };
-
// Initialize shareabouts map
Map.shareabout({
map : {
@@ -84,15 +68,18 @@ var Shareabouts = Shareabouts || {};
},
onload : function() {
// See views/feature_points/index.html.erb
- // TODO: Should this just be handled automatically? A user shouldn't
- // have to know about this, methinks.
if (window.shareabouts && window.shareabouts.initialFeatureId) {
- Map.shareabout("viewFeature", window.shareabouts.initialFeatureId)
+ $(S).trigger('viewFeature', [window.shareabouts.initialFeatureId]);
}
// Popularity slider only shows up on the desktop
if ( !Map.shareabout("smallScreen") ) {
- initPopularitySlider(Map.shareabout('getPopularityStats').uniqueVals);
+ popularitySlider = S.PopularitySlider({
+ values: Map.shareabout('getPopularityStats').uniqueVals,
+ onFilter: function(val) {
+ Map.shareabout('filterByPopularity', val);
+ }
+ });
}
},
onpopup : function() {
@@ -142,10 +129,7 @@ var Shareabouts = Shareabouts || {};
},
click: function(e, ui) {
e.preventDefault();
- Map.shareabout('viewFeature', ui.featureId);
-
- // Reset filtering
- $('#map-container').hiderslider('reset');
+ $(S).trigger('viewFeature', [ui.featureId]);
}
});
}
View
48 app/assets/javascripts/popularity_slider.js
@@ -0,0 +1,48 @@
+(function(S){
+ S.PopularitySlider = function(o) {
+ var options = $.extend({
+ target: '#map-container',
+ title: 'Filter by Popularity',
+ values: [],
+ onFilter: function(){}
+ }, o),
+ self = {};
+
+
+ // Popularity Filter
+ $(options.target).hiderslider({
+ title: options.title,
+ slider: {
+ max: options.values.length-1,
+ slide: function(e, data) {
+ options.onFilter(options.values[data.value]);
+ },
+ change: function(e, data) {
+ options.onFilter(options.values[data.value]);
+ }
+ }
+ });
+
+ // Bind Events
+ $(S).bind('resetPopularityFilter', function(){
+ self.reset();
+ });
+
+ // Reset the slider when we're viewing a feature
+ $(S).bind('viewFeature', function() {
+ self.reset();
+ });
+
+ $(S).bind('locateNewFeature', function() {
+ self.reset();
+ });
+
+ // Public Methods
+
+ self.reset = function(){
+ $(options.target).hiderslider('reset');
+ };
+
+ return self;
+ };
+})(Shareabouts);
View
47 app/assets/javascripts/shareabouts.js
@@ -80,30 +80,32 @@ $.widget("ui.shareabout", (function() {
self.hint.remove();
} );
- // Bind events
+ // Bind events to allow map interaction without having access to this object
+
+ // Locate a new feature on the map
+ $(S).bind('locateNewFeature', function() {
+ self.locateNewFeature();
+ });
+
+ // Click the confirm button and a blank form loads
+ $(S).bind('loadNewFeatureForm', function(evt){
+ self.loadNewFeatureForm();
+ });
+
+ // Submit a new feature from a form
$(S).bind('submitNewFeature', function(evt, $form, url){
+ // TODO: pass in a data object and not the form
var data = $form.serialize() + '&' + S.Util.latLngToQueryString(self.newFeature.getLatLng());
- fsm.submitNewFeature({
+ self.submitNewFeature({
'url': url,
'data': data
});
});
- $(S).bind('locateNewFeature', function() {
- fsm.locateNewFeature();
- });
-
- $(S).bind('loadNewFeatureForm', function(evt){
- self._validateNewFeatureLocation(function(data){
- if (!data || data.status !== 'error') { // Location is good
- fsm.loadNewFeatureForm({
- url : self.options.newFeatureUrl
- });
- } else {
- this.showHint(data.message, newFeature);
- }
- });
+ // Show the details for the given feature id
+ $(S).bind('viewFeature', function(evt, fId) {
+ self.viewFeature(fId);
});
// Update featurePointsCache and populate the map
@@ -132,6 +134,8 @@ $.widget("ui.shareabout", (function() {
PUBLIC
*****************/
+ // TODO: revisit these functions to see if they're still necessary
+
/**
* Drops a pin on the map - at latLng, if provided, or map center.
* Advances map state to locatingFeature.
@@ -148,13 +152,14 @@ $.widget("ui.shareabout", (function() {
* @param {Object} ajaxOptions options for jQuery.ajax(). By default, success loads responseData.view into popup.
*/
loadNewFeatureForm : function() {
- this._validateNewFeatureLocation(function(data){
+ var self = this;
+ self._validateNewFeatureLocation(function(data){
if (!data || data.status !== 'error') { // Location is good
fsm.loadNewFeatureForm({
- url : this.options.newFeatureUrl
+ url : self.options.newFeatureUrl
});
} else {
- this.showHint(data.message, newFeature);
+ self.showHint(data.message, newFeature);
}
});
},
@@ -163,6 +168,10 @@ $.widget("ui.shareabout", (function() {
fsm.finalizeNewFeature();
},
+ submitNewFeature : function(ajaxOptions) {
+ fsm.submitNewFeature(ajaxOptions);
+ },
+
/**
* Displays a hint with content message at location latlng
* @param {String} message Content for the hint.

0 comments on commit 17a80c7

Please sign in to comment.
Something went wrong with that request. Please try again.