Skip to content

Commit

Permalink
Add touch support for tract selection/highlighting.
Browse files Browse the repository at this point in the history 
- Several changes to subSelect.js, adding support for multiple selections (not yet enabled) and select/deselect/clear functions.
- Updated tract event bindings to support hover and click events without preference.
  • Loading branch information
@donmccurdy
donmccurdy committed Jun 24, 2015
1 parent 42d0e08 commit da218c0
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 52 deletions.
54 changes: 26 additions & 28 deletions src/scripts/censusLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,31 +277,29 @@ define([
});

var self = this;
$.each(geojsonLayer._layers,function(idx,layer){
var feature = layer.feature;
layer.feature.map_mouse_over = false;
hoverTract.watchForValue(feature.id,
function() {
layer.setStyle(self._styleFunction(feature, true));
},
function() {
layer.setStyle(self._styleFunction(feature));
});
layer.on("mouseover", function (e) {
hoverTract.select(feature.id,
feature,
self.getPropertyData(),
colorbrewer[self._colorBrewerName]);
feature.map_mouse_over = true;
console.log(feature);
});
layer.on("mouseout", function (e) {
feature.map_mouse_over = false;
// TODO: Move this somewhere else
hoverTract.select(null);
});


$.each(geojsonLayer._layers,function(idx,layer){
var feature = layer.feature;
feature.highlighted = false;
hoverTract.watchForValue(feature.id,
function() {
feature.highlighted = true;
layer.setStyle(self._styleFunction(feature));
}, function() {
feature.highlighted = false;
layer.setStyle(self._styleFunction(feature));
});
layer.on("mouseover click", function (e) {
if (!hoverTract.contains(feature.id)) {
hoverTract.clear();
hoverTract.select(feature.id,
feature,
self.getPropertyData(),
colorbrewer[self._colorBrewerName]);
}
});
layer.on("mouseout", function (e) {
hoverTract.deselect(feature.id);
});
});

if (this._layers_id[add[i]]) {
Expand All @@ -318,7 +316,7 @@ define([

},

_styleFunction : function(feature,highlight) {
_styleFunction : function(feature) {

if (this._itemStyle){
return this._itemStyle(feature);
Expand All @@ -331,8 +329,8 @@ define([
var val = parseFloat(feature.properties[this._currentProperty]);

if (val) {
if ((typeof(highlight)!=="undefined") || feature.map_mouse_over==true) {
return {"fillColor": this._getColor(prop.serie, val) , "color" : "#404040" , "weight": 4 , "opacity" : 1.0, "fillOpacity": 0.6};
if (feature.highlighted) {
return {"fillColor": this._getColor(prop.serie, val) , "color" : "#404040" , "weight": 4 , "opacity" : 1.0, "fillOpacity": 0.6};
} else {
return {"fillColor": this._getColor(prop.serie,val) , "weight": 0 , "opacity" : 0.0, "fillOpacity": 0.6};
}
Expand Down
13 changes: 8 additions & 5 deletions src/scripts/iwindow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,14 @@ define(['jquery', 'underscore', "hoverTract", "variables", "colors"], function($
currentVar = varname;
render();
});
hoverTract.watch(function(_, _, feature, prop, colors) {
//console.log(feature);
currentFeature = feature;
currentProp = prop;
currentColors = colors;

// Watch for changes, ignoring any selected
// tracts after the first.
hoverTract.watch(function(tracts) {
var tract = _.first(tracts) || {};
currentFeature = tract[0];
currentProp = tract[1];
currentColors = tract[2];
render();
});
}
Expand Down
87 changes: 68 additions & 19 deletions src/scripts/subSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ define(["underscore"], function(_) {

// Callbacks that run whenever the selection changes.
callbacks: [],
selected: null

// Selected values, stored as key/value pairs.
selected: {}
};

return {
Expand Down Expand Up @@ -37,30 +39,77 @@ define(["underscore"], function(_) {
pub.callbacks.push(handler);
},

// Sets the currently selected value to v and informs
// all subscribers.
select: function(v) {
var old = pub.selected,
args = _.rest(arguments);
/**
* Publish updates to all subscribers, and (optionally)
* all watchers on a given key.
*
* @param {array|string} keys Key/keys for which to
* update subscribers.
*/
publish: function(keys) {
keys = keys || [];
keys = _.isArray(keys) ? keys : [keys];

if (old) {
_.each(_.pluck(pub.subscribers[old], 1), function(f) {
if (f) f.apply(this, args);
});
}
var selected = _.values(pub.selected);

if (v) {
_.each(_.pluck(pub.subscribers[v], 0), function(f) {
if (f) f.apply(this, args);
});
}
var self = this;
_.each(keys, function (key) {
_.chain(pub.subscribers[key])
.pluck(self.contains(key) ? 0 : 1)
.each(function (f) {
if (f) f.apply(this);
});
});

_.each(pub.callbacks, function(f) {
if (f) f.apply(this, [v, old].concat(args));
if (f) f.apply(this, [selected]);
});
},

pub.selected = v;
return old;
/**
* Adds v to the currently selected set and informs
* all subscribers.
*
* @param {string} v Key/ID of selection.
* @param {Object...} args Arguments associated with the selection.
*/
select: function(v) {
var args = _.rest(arguments);
pub.selected[v] = args;
this.publish(v);
return _.values(pub.selected);
},

/**
* Removes v from the currently selected set and
* informs all subscribers.
*
* @param {string} v Key/ID of selection.
* @param {Object...} args Arguments associated with the selection.
*/
deselect: function(v) {
pub.selected = _.omit(pub.selected, v.toString());
this.publish(v);
return _.values(pub.selected);
},

/**
* Clear all selections and inform subscribers.
*/
clear: function() {
var keys = _.keys(pub.selected);
pub.selected = {};
this.publish(keys);
return pub.selected;
},

/**
* Returns true if the key is selected, else false.
*
* @param {string} v Key/ID of selection.
*/
contains: function(v) {
return !!pub.selected[v];
}
};
}
Expand Down

0 comments on commit da218c0

Please sign in to comment.