Permalink
Browse files

add unstyled slider to naively filter by popularity

  • Loading branch information...
1 parent 8dfd2fe commit 356812b974b16aa4c7c440f77fa1ad3e05486e51 @atogle atogle committed Mar 5, 2012
@@ -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({
@@ -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;
@@ -8,6 +8,7 @@
*= require layout-fullscreen
*= require chrome
*= require ../../../lib/assets/stylesheets/externals
+ *= require ../../../vendor/assets/stylesheets/externals
*/
/* define custom Google Web Font */
@@ -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
@@ -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);
@@ -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 {}

Large diffs are not rendered by default.

Oops, something went wrong.

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 356812b

Please sign in to comment.