added filtering

Gemfile.lock

@@ -63,6 +63,7 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.19)
     multi_json (1.3.6)
+    pg (0.12.2)
     pg (0.12.2-x86-mingw32)
     polyglot (0.3.3)
     rack (1.4.1)
@@ -107,9 +108,10 @@ GEM
     tzinfo (0.3.33)
     uglifier (1.3.0)
       execjs (>= 0.3.0)
-      multi_json (>= 1.0.2, ~> 1.0)
+      multi_json (~> 1.0, >= 1.0.2)
 
 PLATFORMS
+  ruby
   x86-mingw32
 
 DEPENDENCIES

app/assets/javascripts/Jit/filters.js

@@ -0,0 +1,76 @@
+// create filters for maps, and for card views
+
+//  keep an array of which item categories are currently visible.
+var categoryVisible = new Object();
+
+categoryVisible['Group'] = true; 
+categoryVisible['Person'] = true; 
+categoryVisible['Bizarre'] = true; 
+categoryVisible['Catalyst'] = true; 
+categoryVisible['Closed'] = true; 
+categoryVisible['Experience'] = true; 
+categoryVisible['Future Dev'] = true; 
+categoryVisible['Idea'] = true; 
+categoryVisible['Implication'] = true; 
+categoryVisible['Insight'] = true; 
+categoryVisible['Intention'] = true; 
+categoryVisible['Knowledge'] = true; 
+categoryVisible['Location'] = true; 
+categoryVisible['Open Issue'] = true; 
+categoryVisible['Opinion'] = true; 
+categoryVisible['Opportunity'] = true; 
+categoryVisible['Platform'] = true; 
+categoryVisible['Problem'] = true; 
+categoryVisible['Question'] = true; 
+categoryVisible['Reference'] = true; 
+categoryVisible['Requirement'] = true; 
+categoryVisible['Resource'] = true; 
+categoryVisible['Role'] = true; 
+categoryVisible['Task'] = true; 
+categoryVisible['Tool'] = true; 
+categoryVisible['Trajectory'] = true; 
+categoryVisible['Action'] = true; 
+categoryVisible['Activity'] = true; 
+
+function switchVisible(g, category, duration) {
+	if (categoryVisible[category] == true) {
+		hideCategory(g, category, duration);
+	}
+	else if (categoryVisible[category] == false) {
+		showCategory(g, category, duration);
+	}
+}
+
+function hideCategory(g, category, duration) {
+    if (duration == null) duration = 500;
+	g.graph.eachNode( function (n) {
+		if (n.getData('itemcatname') == category) {
+			n.setData('alpha', 0, 'end');
+			n.eachAdjacency(function(adj) {  
+			adj.setData('alpha', 0, 'end');  
+		  	});	
+		}	
+	});
+	g.fx.animate({  
+		modes: ['node-property:alpha',  
+				'edge-property:alpha'],  
+		duration: duration  
+	}); 	
+}
+
+function showCategory(g, category, duration) {
+    if (duration == null) duration = 500;
+	g.graph.eachNode( function (n) {
+		if (n.getData('itemcatname') == category) {
+			n.setData('alpha', 1, 'end');
+			n.eachAdjacency(function(adj) {  
+			adj.setData('alpha', 1, 'end');  
+		  	});	
+		}	
+	});
+	g.fx.animate({  
+		modes: ['node-property:alpha',  
+				'edge-property:alpha'],  
+		duration: duration  
+	});	
+}

app/assets/javascripts/application.js

@@ -17,6 +17,12 @@
 //= require Jit/excanvas
 //= require Jit/ForceDirected/metamapFD
 //= 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'));
@@ -29,6 +35,64 @@
 		}
 	});
 	
+    var sliding = false; 
+    $(".legend").hover( 
+        function () { 
+          if (! sliding) { 
+            sliding = true; 
+            $("#iconLegend ul").slideDown('slow', function() { 
+              sliding = false; 
             }); 
+          } 
+        },  
+        function () { 
+          if (! sliding) { 
+            sliding = true; 
+            $("#iconLegend ul").slideUp('slow', function() { 
+              sliding = false; 
+            }); 
+          } 
+        } 
+    ); 
+
+	$('.legend ul li').click(function(event) {
+		obj = document.getElementById('container');
+        
+		var category = $(this).children('img').attr('alt');
+		category = capitaliseFirstLetter(category);
+
+		// toggle the image and the boolean array value
+		if (categoryVisible[category] == true) {
+			$(this).addClass('toggledOff');
+			categoryVisible[category] = false;
+		}
+		else if (categoryVisible[category] == false) {
+			$(this).removeClass('toggledOff');
+			categoryVisible[category] = true;
+		}
+		
+		// this means that we are on a map view		
+		if (obj != null) {		  
+			  if (fd != null) {
+			  		switchVisible(fd, category);
+			  }
+			  else if (rg != null) {
+			  		switchVisible(rg, category);
+			  } 
+	  	}
+		// this means that we are on a card view
+	  	else {	
+		  console.log('test');	  		 
+		  if (categoryVisible[category] == false) {
+			  $('#cards .' + category).fadeOut('fast');
+			  console.log('#cards .' + category);
+		  }
+		  else if (categoryVisible[category] == true) {
+			  $('#cards .' + category).fadeOut('fast');
+			  console.log('#cards .' + category);
+		  }
+	  }
+	});
+});
  
  

app/assets/stylesheets/application.css

@@ -60,7 +60,7 @@ input[type="submit"] { margin-top:5px; }
 
 .nodemargin { padding-top:120px; }
 
-.focus { position:fixed; top:0; left:0; width:90%; z-index:10; display: block; min-width:533px; margin: 50px 50px 25px 50px; background: #D1D1D1; border-radius: 20px; color:#000; border:1px solid #000; }
+.focus { position:fixed; top:0; left:0; width:90%; z-index:10; display: block; min-width:533px; margin: 50px 50px 25px 50px; background: url('bg.png'); border-radius: 20px; color:#000; border:1px solid #000; }
 .focusleft, .focusmiddle, .focusright { display:block; float:left; }
 .focusleft { width:20%; min-width:70px; text-align:center; }
 .focusmiddle { display:block; width:49%; min-height:115px; border-right:2px solid #000; border-left:2px solid #000;}
@@ -76,3 +76,40 @@ input[type="submit"] { margin-top:5px; }
 
 .divider { margin: 20px 50px 20px 50px; border-bottom:2px solid #FFF; }
 .empty { margin-left:50px; }
+
+
+/* --- styling the filter ---*/
+.legend { position:fixed; bottom:10px; right:15px; z-index:12; display:block; width:auto; color: #67AF9F;
+white-space: nowrap;
+font-family: sans-serif;
+text-align: center;
+font-size: 14px;
+overflow: hidden;
+padding: 3px 8px;
+margin: -0.75em 0 0;
+border: 2px solid #AAA;
+background: white;
+border-radius: 6px;
+-webkit-border-radius: 6px;
+-moz-border-radius: 6px;
+box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+-webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+-moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset;
+background: -moz-linear-gradient( center top, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 0% ) repeat scroll 0 0 white;
+background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(rgba(0, 0, 0, 0.03)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(0, 0, 0, 0.03)) ) repeat scroll 0 0 white;
+border: 1px solid rgba(0, 0, 0, 0.2);
+cursor: pointer; }
+
+#iconLegend { width:inherit; height:inherit; }
+
+#iconLegend ul { display:none; }
+#iconLegend ul li {clear:both; list-style-type:none; display:block; padding:3px; }
+#iconLegend ul img { width:40px; height:40px; float:left; }
+#iconLegend ul p {float:left; font-weight:bold; font-family: sans-serif; display: block; margin: 0; background: none; padding: 10px 4px 2px 4px;}
+#iconLegend #filters-left { float:left; }
+#iconLegend #filters-right { float:left; }
+
+#iconLegend li.toggledOff {
+  opacity: 0.2;
+}
+

app/assets/stylesheets/items.css.scss

@@ -2,7 +2,7 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.item { display:block; float:left; position:relative; width:170px; height:300px; padding:10px 10px 10px 35px; background:#d1d1d1; border-radius:15px; margin:30px 0 30px 50px; color:#000; }
+.item { display:block; float:left; position:relative; width:170px; height:300px; padding:10px 10px 10px 35px; background: url('bg.png'); border-radius:15px; margin:30px 0 30px 50px; color:#000; }
 
 .item .delete {position: absolute;
 top: -14px;

app/views/layouts/application.html.erb

@@ -7,6 +7,43 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
+  <div class="legend">
+     <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>
+        </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>
+        </ul>
+     </div>
+  </div>
   <%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
 
         <div class="headertop">

test/fixtures/item_categories.yml

@@ -1,12 +1,12 @@
 # Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
 
 one: 
-  name: Person
+  name: Action  
-  icon: person.png
+  icon: action.png
 
 two: 
-  name: Group
+  name: Activity  
-  icon: group.png
+  icon: activity.png
 
 three: 
   name: Bizarre  
@@ -29,90 +29,85 @@ seven:
   icon: futuredev.png
 
 eight:
+  name: Group  
+  icon: group.png
+
+nine:
   name: Idea  
   icon: idea.png
 
-nine: 
+ten:
   name: Implication  
   icon: implication.png
 
-ten: 
+eleven:
   name: Insight  
   icon: insight.png
 
-eleven:
+twelve:
   name: Intention  
   icon: intention.png
 
-twelve: 
+thirteen:
   name: Knowledge  
   icon: knowledge.png
 
-thirteen:
+fourteen:
   name: Location  
   icon: location.png
 
-fourteen:
+fifteen:
   name: Open Issue  
   icon: openissue.png
 
-fifteen:
+sixteen:
   name: Opinion  
   icon: opinion.png
 
-sixteen:
+seventeen:
   name: Opportunity  
   icon: opportunity.png
 
-seventeen:
+eighteen:
+  name: Person  
+  icon: person.png
+
+nineteen:
   name: Platform  
   icon: platform.png
 
-eighteen:
+twenty:
   name: Problem  
   icon: problem.png
 
-nineteen:
+twenty-one:
   name: Question  
   icon: question.png
 
-twenty:
+twenty-two:
   name: Reference  
   icon: reference.png
 
-twentyone:
+twenty-three:
   name: Requirement  
   icon: requirement.png
 
-twentytwo:
+twenty-four:
   name: Resource  
   icon: resource.png 
 
-twentythree:
+twenty-five:
   name: Role  
   icon: role.png
 
-twentyfour:
+twenty-six:
   name: Task  
   icon: task.png
 
-twentyfive:
+twenty-seven:
   name: Tool	  
   icon: tool.png 
 
-twentysix:
+twenty-eight:
   name: Trajectory  
   icon: trajectory.png  
-  
-twentyseven:
-  name: Action
-  icon: action.png
-  
-twentyeight:
-  name: Activity
-  icon: activity.png
-  
-
-  
-
-