fixed filtering on multi word item categories

This commit is contained in:
Connor Turland 2012-10-23 10:46:06 -04:00
parent 37c0be907b
commit adf24530d8
2 changed files with 41 additions and 36 deletions

View file

@ -19,11 +19,6 @@
//= require Jit/RGraph/metamapRG
//= require Jit/filters
function capitaliseFirstLetter(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
$(document).ready(function() {
$('.nodemargin').css('padding-top',$('.focus').css('height'));
@ -55,11 +50,11 @@ function capitaliseFirstLetter(string)
}
);
// toggle visibility of item categories based on status in the filters list
$('.legend ul li').click(function(event) {
obj = document.getElementById('container');
var category = $(this).children('img').attr('alt');
category = capitaliseFirstLetter(category);
// this means that we are on a map view
if (obj != null) {
@ -74,10 +69,20 @@ function capitaliseFirstLetter(string)
else {
console.log('test');
if (categoryVisible[category] == true) {
$('#cards .' + category).fadeOut('fast');
if (category.split(' ').length == 1) {
$('#cards .' + category).fadeOut('slow');
}
else {
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
}
}
else if (categoryVisible[category] == false) {
$('#cards .' + category).fadeIn('fast');
if (category.split(' ').length == 1) {
$('#cards .' + category).fadeIn('slow');
}
else {
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
}
}
}
// toggle the image and the boolean array value

View file

@ -11,36 +11,36 @@
<div id="iconLegend">
<h3>FILTERS</h3>
<ul id="filters-left">
<li><img src="/assets/action.png" alt="action" /><p>action</p></li>
<li><img src="/assets/activity.png" alt="activity" /><p>activity</p></li>
<li><img src="/assets/bizarre.png" alt="bizarre" /><p>bizarre</p></li>
<li><img src="/assets/catalyst.png" alt="catalyst" /><p>catalyst</p></li>
<li><img src="/assets/closed.png" alt="closed" /><p>closed</p></li>
<li><img src="/assets/experience.png" alt="experience" /><p>experience</p></li>
<li><img src="/assets/futuredev.png" alt="future dev" /><p>future dev</p></li>
<li><img src="/assets/group.png" alt="group" /><p>group</p></li>
<li><img src="/assets/idea.png" alt="idea" /><p>idea</p></li>
<li><img src="/assets/implication.png" alt="implication" /><p>implication</p></li>
<li><img src="/assets/insight.png" alt="insight" /><p>insight</p></li>
<li><img src="/assets/intention.png" alt="intention" /><p>intention</p></li>
<li><img src="/assets/knowledge.png" alt="knowledge" /><p>knowledge</p></li>
<li><img src="/assets/location.png" alt="location" /><p>location</p></li>
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
<li><img src="/assets/catalyst.png" alt="Catalyst" /><p>catalyst</p></li>
<li><img src="/assets/closed.png" alt="Closed" /><p>closed</p></li>
<li><img src="/assets/experience.png" alt="Experience" /><p>experience</p></li>
<li><img src="/assets/futuredev.png" alt="Future Dev" /><p>future dev</p></li>
<li><img src="/assets/group.png" alt="Group" /><p>group</p></li>
<li><img src="/assets/idea.png" alt="Idea" /><p>idea</p></li>
<li><img src="/assets/implication.png" alt="Implication" /><p>implication</p></li>
<li><img src="/assets/insight.png" alt="Insight" /><p>insight</p></li>
<li><img src="/assets/intention.png" alt="Intention" /><p>intention</p></li>
<li><img src="/assets/knowledge.png" alt="Knowledge" /><p>knowledge</p></li>
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
</ul>
<ul id="filters-right">
<li><img src="/assets/openissue.png" alt="openissue" /><p>open issue</p></li>
<li><img src="/assets/opinion.png" alt="opinion" /><p>opinion</p></li>
<li><img src="/assets/opportunity.png" alt="opportunity" /><p>opportunity</p></li>
<li><img src="/assets/person.png" alt="person" /><p>person</p></li>
<li><img src="/assets/platform.png" alt="platform" /><p>platform</p></li>
<li><img src="/assets/problem.png" alt="problem" /><p>problem</p></li>
<li><img src="/assets/question.png" alt="question" /><p>question</p></li>
<li><img src="/assets/reference.png" alt="reference" /><p>reference</p></li>
<li><img src="/assets/requirement.png" alt="requirement" /><p>requirement</p></li>
<li><img src="/assets/resource.png" alt="resource" /><p>resource</p></li>
<li><img src="/assets/role.png" alt="role" /><p>role</p></li>
<li><img src="/assets/task.png" alt="task" /><p>task</p></li>
<li><img src="/assets/tool.png" alt="tool" /><p>tool</p></li>
<li><img src="/assets/trajectory.png" alt="trajectory" /><p>trajectory</p></li>
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
<li><img src="/assets/person.png" alt="Person" /><p>person</p></li>
<li><img src="/assets/platform.png" alt="Platform" /><p>platform</p></li>
<li><img src="/assets/problem.png" alt="Problem" /><p>problem</p></li>
<li><img src="/assets/question.png" alt="Question" /><p>question</p></li>
<li><img src="/assets/reference.png" alt="Reference" /><p>reference</p></li>
<li><img src="/assets/requirement.png" alt="Requirement" /><p>requirement</p></li>
<li><img src="/assets/resource.png" alt="Resource" /><p>resource</p></li>
<li><img src="/assets/role.png" alt="Role" /><p>role</p></li>
<li><img src="/assets/task.png" alt="Task" /><p>task</p></li>
<li><img src="/assets/tool.png" alt="Tool" /><p>tool</p></li>
<li><img src="/assets/trajectory.png" alt="Trajectory" /><p>trajectory</p></li>
</ul>
</div>
</div>