add unstyled slider to naively filter by popularity

app/assets/javascripts/main.js.erb

@@ -148,6 +148,15 @@ $(function() {
     showPage(pages.filter('[data-welcome-page]').attr("href"));
   }
 
+  $('#map-container').hiderslider({
+      title: 'Filter by Popularity',
+      slider: {
+        slide: function(e, data) {
+          Map.shareabout('filterByPopularityPercentage', data.value/100);
+        }
+      }
+    });
+
   // Start the ticker
   if ( !Map.shareabout("smallScreen") ) {
     $("#ticker").activityticker({

app/assets/javascripts/shareabouts.js

@@ -6,7 +6,9 @@ $.widget("ui.shareabout", (function() {
       fsm, // state machine
       layersOnMap, // object that stores map features (marker layers, specifically) by their ID
       popup, // one popup on the map
-      featurePointsCache = []; // Cache of all of the feature points
+      featurePointsCache = [],  // Cache of all of the feature points
+      popularityStats, // popularity stats about the current features in the cache
+      popularityThreshold = 0; // The min popularity to show
 
   return {
     options : {
@@ -193,22 +195,26 @@ $.widget("ui.shareabout", (function() {
           feature,
           inBounds,
           onMap,
+          isPopular,
           markerLayer;
 
       for(i=0; i<len; i++) {
         feature = featurePointsCache[i];
 
+        // Popular enough to show
+        isPopular = feature.pop >= popularityThreshold;
+        // In the current map bounds
         inBounds = this._isFeatureInBounds(feature, bounds);
         // Not not something truthy is true
         onMap = !!layersOnMap[feature.id];
 
         // If inBounds and not onMap, add it
-        if (inBounds && !onMap) {
+        if (inBounds && !onMap && isPopular) {
           this.addMapFeature(feature);
         }
 
-        // If not inBounds and onMap, remove it
-        if (!inBounds && onMap) {
+        // If not popular or not inBounds and onMap, remove it
+        if ((!isPopular || !inBounds) && onMap) {
           map.removeLayer(layersOnMap[feature.id]);
           delete layersOnMap[feature.id];
         }
@@ -217,6 +223,20 @@ $.widget("ui.shareabout", (function() {
       if (callback) {callback();}
     },
 
+    // Will update the map and only show features that are more popular
+    // than the given value.
+    filterByPopularity: function(pop) {
+      popularityThreshold = pop;
+      this.refreshMapFeatures();
+    },
+
+    // Will update the map and only show features that are more popular
+    // than the given percentage.
+    filterByPopularityPercentage: function(percent) {
+      var pop = (popularityStats.max - popularityStats.min) * percent;
+      this.filterByPopularity(pop);
+    },
+
     openPopup : function(content) {
       // Unsfocus the icon if highlighted
       this._unsetFocusedIcon();
@@ -257,6 +277,7 @@ $.widget("ui.shareabout", (function() {
         success: function(data){
           if($.isArray(data) && data.length) {
             featurePointsCache = featurePointsCache.concat(data);
+            popularityStats = self._getPopularityStats();
           }
           if (success) {success(data);}
         },
@@ -287,6 +308,27 @@ $.widget("ui.shareabout", (function() {
       return null;
     },
 
+    _getPopularityStats: function() {
+      var i,
+          len = featurePointsCache.length,
+          min = Number.MAX_VALUE,
+          max = Number.MIN_VALUE;
+
+      for (i=0; i<len; i++) {
+        if (featurePointsCache[i].pop <= min) {
+          min = featurePointsCache[i].pop;
+        }
+        if (featurePointsCache[i].pop > max) {
+          max = featurePointsCache[i].pop;
+        }
+      }
+
+      return {
+        min: min,
+        max: max
+      };
+    },
+
     _refreshMapFeaturesWithDelay : function(ms) {
       if (this._waitingToLoad) return;
 

app/assets/stylesheets/application.css

@@ -8,6 +8,7 @@
  *= require layout-fullscreen
  *= require chrome
  *= require ../../../lib/assets/stylesheets/externals
+ *= require ../../../vendor/assets/stylesheets/externals
 */
 
 /* define custom Google Web Font */

app/assets/stylesheets/chrome.css

@@ -516,6 +516,14 @@ table.regions {
   background : transparent url('ticker-comment.png') no-repeat scroll top left;
 }
 
+/* HiderSlider Widget */
+.ui-sliderhider-container {
+  position: absolute;
+  right:0px;
+  bottom:20px;
+}
+
+
 /*
  *
  * Media Queries for Layout & Style Overrides

lib/assets/javascripts/jquery.ui.hiderslider.js

@@ -0,0 +1,51 @@
+(function($) {
+  $.widget("ui.hiderslider", {
+    options: {
+      title: 'HiderSlider'
+    },
+
+    _create: function() {
+      var self = this,
+          o = self.options,
+          el = self.element,
+          $inner;
+
+      // Append markup
+      $(el).append('<div class="ui-sliderhider-container">' +
+        '<div class="ui-sliderhider-title">'+o.title+'</div>' +
+        '<div class="ui-sliderhider-content">' +
+          '<div class="ui-sliderhider-inner">' +
+            '<div class="ui-sliderhider-slider"></div>' +
+            '<div class="ui-sliderhider-close">X</div>' +
+          '</div>' +
+        '</div>' +
+      '</div>');
+
+      // Init slider
+      $('.ui-sliderhider-slider', el).slider(o.slider);
+
+      // Manually set the width on inner to keep floated elements from jumping
+      $inner = $('.ui-sliderhider-inner');
+      $inner.width($inner.outerWidth());
+
+      // Toggle visibility when you click the title
+      $('.ui-sliderhider-title').click(function(){
+        self.toggleVisiblity();
+      });
+
+      // Toggle visibility when you click the close link
+      $('.ui-sliderhider-close').click(function(){
+        self.toggleVisiblity();
+      });
+    },
+
+    // Toggle visiblity
+    toggleVisiblity: function() {
+      $('.ui-sliderhider-content', self.element).animate({width: 'toggle'});
+    },
+
+    destroy: function() {
+      this.element.empty();
+    }
+  });
+})(jQuery);

lib/assets/stylesheets/jquery-ui-sliderhider.css

@@ -0,0 +1,29 @@
+.ui-sliderhider-container {
+  overflow: auto;
+}
+
+.ui-sliderhider-container > div {
+  float:left;
+}
+
+.ui-sliderhider-title {
+  padding: 10px;
+}
+
+.ui-sliderhider-content {
+  padding: 10px 0;
+  overflow: hidden;
+}
+
+.ui-sliderhider-inner {}
+
+.ui-sliderhider-inner > div {
+  float: left;
+  margin: 0 10px;
+}
+
+.ui-sliderhider-slider {
+  width:300px;
+}
+
+.ui-sliderhider-close {}