From adf24530d8d7e8b5be1c6f8120b7ec6db4188f49 Mon Sep 17 00:00:00 2001
From: Connor Turland <connor@madhattertech.ca>
Date: Tue, 23 Oct 2012 10:46:06 -0400
Subject: [PATCH] fixed filtering on multi word item categories

---
 app/assets/javascripts/application.js  | 21 ++++++----
 app/views/layouts/application.html.erb | 56 +++++++++++++-------------
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 8a3fd880..cbe5cc13 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -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
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 610edc8d..4cfddfa0 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -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>