added filtering

This commit is contained in:
Connor Turland 2012-10-21 21:10:43 -04:00
parent 851b133ed1
commit 587a2a3b2a
9 changed files with 347 additions and 136 deletions

View file

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

BIN
app/assets/images/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View file

@ -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
});
}

View file

@ -17,6 +17,12 @@
//= require Jit/excanvas //= require Jit/excanvas
//= require Jit/ForceDirected/metamapFD //= require Jit/ForceDirected/metamapFD
//= require Jit/RGraph/metamapRG //= require Jit/RGraph/metamapRG
//= require Jit/filters
function capitaliseFirstLetter(string)
{
return string.charAt(0).toUpperCase() + string.slice(1);
}
$(document).ready(function() { $(document).ready(function() {
$('.nodemargin').css('padding-top',$('.focus').css('height')); $('.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);
}
}
});
});

View file

@ -60,7 +60,7 @@ input[type="submit"] { margin-top:5px; }
.nodemargin { padding-top:120px; } .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, .focusmiddle, .focusright { display:block; float:left; }
.focusleft { width:20%; min-width:70px; text-align:center; } .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;} .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; } .divider { margin: 20px 50px 20px 50px; border-bottom:2px solid #FFF; }
.empty { margin-left:50px; } .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;
}

View file

@ -2,7 +2,7 @@
// They will automatically be included in application.css. // They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/ // 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; .item .delete {position: absolute;
top: -14px; top: -14px;

View file

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

View file

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