Skip to content

Commit

Permalink
More work on facets including live counts. #6
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmatsushita
jmatsushita committed Jan 11, 2016
1 parent 2b4ce8e commit 523bcac
Show file tree
Hide file tree
Showing 4 changed files with 254 additions and 10 deletions.
6 changes: 6 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,4 +164,10 @@ ul {
font-size: 20px;
color: #222;
float: right;
}

.small legend {
font-weight: bold;
font-size: 17px;
margin-bottom:0px;
}
49 changes: 46 additions & 3 deletions layouts/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

{% block main %}
{{ contents | safe }}
<div class="row">
<div class="row small">
<div class="col-md-12" role="main">
<div class="form-group">
<div>
Expand Down Expand Up @@ -59,7 +59,8 @@
<div class="row">
<div class="col-md-12" role="main">
<table class="table table-striped">
<thead><td>Name</td><td>Description</td></thead>
<caption id="total_results" class="small"></caption>
<thead><td><strong>Name</strong></td><td><strong>Description</strong></td></thead>
<tbody class="search-results" id="results"></tbody>
</table>
</div>
Expand Down Expand Up @@ -141,8 +142,50 @@
search: {ele: '#searchbox'},
//search: {ele: '#searchbox', fields: ['runtime']}, // With specific fields
callbacks: {
afterAddRecords: function(records){
$('#total_results').text('Found : ' + records.length);

_.chain(meta)
.keys()
.omit("library","data_modeling","bulk_upload","displays_lists","network_viz","network_editing","network_analysis","embeddable","document_viz","timelines","maps")
.each(function(k){
var checkboxes = $('#' + k + '_criteria :input');
var qResult = JsonQuery(records);

checkboxes.each(function(){
var c = $(this)
var q = {};
q[k] = c.val();
var count = qResult.where(q).count;
c.next().text(c.val() + ' (' + count + ')')
});
})

},
afterFilter: function(result){
$('#total_results').text(result.length);
if(!result.length){
$('#total_results').text("No results found");
}
else
{
$('#total_results').text('Found : ' + result.length);
}

_.chain(meta)
.keys()
.omit("library","data_modeling","bulk_upload","displays_lists","network_viz","network_editing","network_analysis","embeddable","document_viz","timelines","maps")
.each(function(k){
var checkboxes = $('#' + k + '_criteria :input');
var qResult = JsonQuery(result);

checkboxes.each(function(){
var c = $(this)
var q = {};
q[k] = c.val();
var count = qResult.where(q).count;
c.next().text(c.val() + ' (' + count + ')')
});
})
}
}
//appendToContainer: appendToContainer
Expand Down
206 changes: 199 additions & 7 deletions layouts/tools.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,96 @@

{% block main %}
{{ contents | safe }}
<div class="row">
<div class="row small">
<div class="col-md-12" role="main">
<div class="form-group">
<div>
<label class="sr-only" for="searchbox">Search</label>
<input type="text" class="form-control" id="searchbox" placeholder="Search &hellip;">
<span class="glyphicon glyphicon-search search-icon"></span>
</div>
<p id="total-results"></p>
</div>
</div>
<!-- <div class="col-md-3">
<div class="form-group">
<fieldset id="tool_features">
<legend>Tool Features</legend>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Data Modeling</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Bulk Upload</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Displays Lists</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Network Viz</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Network Editing</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Network Analysis</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Embeddable</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Document Viz</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Timelines</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_maps" type="checkbox" value="Yes">
<span>Maps</span>
</label>
</div>
<div class="checkbox">
<label>
<input id="tool_features_development" type="checkbox" value="Yes">
<span>Development</span>
</label>
</div>
</fieldset>
</div>
</div>-->
<div class="col-md-3">
<div class="form-group">
<fieldset id="feature_multicriteria">
<legend>Tool Features</legend>
</fieldset>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<fieldset id="practice_criteria">
Expand All @@ -27,6 +106,13 @@
</fieldset>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<fieldset id="deployment_criteria">
<legend>Deployment</legend>
</fieldset>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<fieldset id="installation_audience_criteria">
Expand All @@ -41,11 +127,19 @@
</fieldset>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<fieldset id="programming_language_criteria">
<legend>Programming Language</legend>
</fieldset>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" role="main">
<table class="table table-striped">
<thead><td>Name</td><td>Description</td></thead>
<caption id="total_results" class="small"></caption>
<thead><td><strong>Name</strong></td><td><strong>Description</strong></td></thead>
<tbody class="search-results" id="results"></tbody>
</table>
</div>
Expand All @@ -69,8 +163,9 @@
index,
store = $.getJSON("searchMeta.json"),
data = $.getJSON("searchIndex.json"),
meta = {}
res = {};
meta = {},
res = {},
multiCriteria = ["feature"];

data.then(function(data) {
store.then(function(store) {
Expand Down Expand Up @@ -98,6 +193,7 @@

_.chain(meta)
.keys()
.filter(function(k){return (k.lastIndexOf("feature_",0) !== 0)})
.each(function(k){
meta[k] = _.unique(meta[k]);
if (k!="content_type")
Expand All @@ -111,10 +207,26 @@
'</div>');
});
})
// Deal with multicolumn criteria

_.each(multiCriteria, function(mc) {
_.chain(meta)
.keys()
.filter(function(k){return (k.lastIndexOf(mc,0) === 0)})
.each(function(k){
$('#' + mc + '_multicriteria').append(
'<div id="' + k + '_criteria" class="checkbox">' +
' <label>' +
' <input type="checkbox" value="Yes">' +
' <span>' + makeTitle(k.replace(mc + '_','')) +'</span>' +
' </label>' +
'</div>');
})
})

var ks = _.keys(store);
var results = _.chain(ks)
.filter(function(k){ return store[k].content_type=="tool"})
.filter(function(k){ return (store[k].content_type=="tool" && store[k].published!="No")})
.map(function(k) {
// add store key of object as path key of array object
var ret = _.extend( { path: k.replace(".md", ".html") } , store[k] );
Expand All @@ -127,21 +239,52 @@
search: {ele: '#searchbox'},
//search: {ele: '#searchbox', fields: ['runtime']}, // With specific fields
callbacks: {
afterAddRecords: function(records){
$('#total_results').text('Found : ' + records.length);

updateCounts(meta, records);

},
afterFilter: function(result){
$('#total_results').text(result.length);
if(!result.length){
$('#total_results').text("No results found");
}
else
{
$('#total_results').text('Found : ' + result.length);
}

updateCounts(meta, result);

}
}
//appendToContainer: appendToContainer
});

FJS.addCriteria({field: 'content_type', ele: '#content_type_criteria input:checkbox'});

// FJS.addCriteria({field: 'library', ele: '#tool_features_library'});
// FJS.addCriteria({field: 'maps', ele: '#tool_features_maps'});

_.chain(meta)
.keys()
.filter(function(k){ return _.any(multiCriteria, function(mc) {return (k.lastIndexOf(mc + '_',0) !== 0)}) })
.each(function(k){
FJS.addCriteria({field: k, ele: '#' + k + '_criteria input:checkbox'});
})

// Deal with multicolumn criteria

_.each(multiCriteria, function(mc) {
_.chain(meta)
.keys()
.filter(function(k){return (k.lastIndexOf(mc,0) === 0)})
.each(function(k){
FJS.addCriteria({field: k, ele: '#' + k + '_criteria input'});
})
})


})
})
/*
Expand All @@ -164,6 +307,43 @@
});
*/

function updateCounts(meta, res) {
_.chain(meta)
.keys()
.filter(function(k){ return _.any(multiCriteria, function(mc) {return (k.lastIndexOf(mc + '_',0) !== 0)}) })
.each(function(k){
var checkboxes = $('#' + k + '_criteria :input');
var qResult = JsonQuery(res);

checkboxes.each(function(){
var c = $(this)
var q = {};
q[k] = c.val();
var count = qResult.where(q).count;
c.next().text(c.val() + ' (' + count + ')')
});
})

_.each(multiCriteria, function(mc) {
_.chain(meta)
.keys()
.filter(function(k){return (k.lastIndexOf(mc,0) === 0)})
.each(function(k){
var checkboxes = $('#' + k + '_criteria :input');
var qResult = JsonQuery(res);

checkboxes.each(function(){
var c = $(this)
var q = {};
q[k] = c.val();
var count = qResult.where(q).count;
c.next().text(makeTitle(k.replace(mc + '_','')) + ' (' + count + ')')
});
})
})
}

});

function prepareResults(results, store) {
Expand Down Expand Up @@ -193,5 +373,17 @@
});

}

function makeTitle(slug) {
var words = slug.split('_');

for(var i = 0; i < words.length; i++) {
var word = words[i];
words[i] = word.charAt(0).toUpperCase() + word.slice(1);
}

return words.join(' ');
}

</script>
{% endblock %}
3 changes: 3 additions & 0 deletions metalsmith.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,9 @@
"description",
"practice",
"practice_2",
"deployment",
"programming_language",
"feature_coding","feature_data_modeling","feature_bulk_upload","feature_displays_lists","feature_network_viz","feature_network_editing","feature_network_analysis","feature_embeddable","feature_document_viz","feature_timelines","feature_maps",
"phase",
"geographic_focus",
"intended_impact",
Expand Down

0 comments on commit 523bcac

Please sign in to comment.