added filtering
This commit is contained in:
Connor Turland
parent
851b133ed1
commit
587a2a3b2a
|
|
@ -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
|
||||
|
|
|
|||
BIN
app/assets/images/bg.png
Normal file
BIN
app/assets/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
76
app/assets/javascripts/Jit/filters.js
Normal file
76
app/assets/javascripts/Jit/filters.js
Normal 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
|
||||
});
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
|
@ -75,4 +75,41 @@ input[type="submit"] { margin-top:5px; }
|
|||
.focus .link { padding:0 0 0 10px; display:block; width:90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
108
db/schema.rb
108
db/schema.rb
|
|
@ -1,54 +1,54 @@
|
|||
# encoding: UTF-8
|
||||
# This file is auto-generated from the current state of the database. Instead
|
||||
# of editing this file, please use the migrations feature of Active Record to
|
||||
# incrementally modify your database, and then regenerate this schema definition.
|
||||
#
|
||||
# Note that this schema.rb definition is the authoritative source for your
|
||||
# database schema. If you need to create the application database on another
|
||||
# system, you should be using db:schema:load, not running all the migrations
|
||||
# from scratch. The latter is a flawed and unsustainable approach (the more migrations
|
||||
# you'll amass, the slower it'll run and the greater likelihood for issues).
|
||||
#
|
||||
# It's strongly recommended to check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema.define(:version => 20121005160234) do
|
||||
|
||||
create_table "item_categories", :force => true do |t|
|
||||
t.text "name"
|
||||
t.string "icon"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "items", :force => true do |t|
|
||||
t.text "name"
|
||||
t.text "desc"
|
||||
t.text "link"
|
||||
t.integer "user_id"
|
||||
t.integer "item_category_id"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "synapses", :force => true do |t|
|
||||
t.text "desc"
|
||||
t.text "category"
|
||||
t.integer "node1_id"
|
||||
t.integer "node2_id"
|
||||
t.integer "user_id"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "users", :force => true do |t|
|
||||
t.string "name"
|
||||
t.string "email"
|
||||
t.string "crypted_password"
|
||||
t.string "password_salt"
|
||||
t.string "persistence_token"
|
||||
t.string "perishable_token"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
end
|
||||
# encoding: UTF-8
|
||||
# This file is auto-generated from the current state of the database. Instead
|
||||
# of editing this file, please use the migrations feature of Active Record to
|
||||
# incrementally modify your database, and then regenerate this schema definition.
|
||||
#
|
||||
# Note that this schema.rb definition is the authoritative source for your
|
||||
# database schema. If you need to create the application database on another
|
||||
# system, you should be using db:schema:load, not running all the migrations
|
||||
# from scratch. The latter is a flawed and unsustainable approach (the more migrations
|
||||
# you'll amass, the slower it'll run and the greater likelihood for issues).
|
||||
#
|
||||
# It's strongly recommended to check this file into your version control system.
|
||||
|
||||
ActiveRecord::Schema.define(:version => 20121005160234) do
|
||||
|
||||
create_table "item_categories", :force => true do |t|
|
||||
t.text "name"
|
||||
t.string "icon"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "items", :force => true do |t|
|
||||
t.text "name"
|
||||
t.text "desc"
|
||||
t.text "link"
|
||||
t.integer "user_id"
|
||||
t.integer "item_category_id"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "synapses", :force => true do |t|
|
||||
t.text "desc"
|
||||
t.text "category"
|
||||
t.integer "node1_id"
|
||||
t.integer "node2_id"
|
||||
t.integer "user_id"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
create_table "users", :force => true do |t|
|
||||
t.string "name"
|
||||
t.string "email"
|
||||
t.string "crypted_password"
|
||||
t.string "password_salt"
|
||||
t.string "persistence_token"
|
||||
t.string "perishable_token"
|
||||
t.datetime "created_at", :null => false
|
||||
t.datetime "updated_at", :null => false
|
||||
end
|
||||
|
||||
end
|
||||
|
|
|
|||
149
test/fixtures/item_categories.yml
vendored
149
test/fixtures/item_categories.yml
vendored
|
|
@ -1,118 +1,113 @@
|
|||
# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/Fixtures.html
|
||||
|
||||
one:
|
||||
name: Person
|
||||
icon: person.png
|
||||
one:
|
||||
name: Action
|
||||
icon: action.png
|
||||
|
||||
two:
|
||||
name: Group
|
||||
icon: group.png
|
||||
|
||||
name: Activity
|
||||
icon: activity.png
|
||||
|
||||
three:
|
||||
name: Bizarre
|
||||
name: Bizarre
|
||||
icon: bizarre.png
|
||||
|
||||
|
||||
four:
|
||||
name: Catalyst
|
||||
name: Catalyst
|
||||
icon: catalyst.png
|
||||
|
||||
|
||||
five:
|
||||
name: Closed
|
||||
name: Closed
|
||||
icon: closed.png
|
||||
|
||||
six:
|
||||
name: Experience
|
||||
|
||||
six:
|
||||
name: Experience
|
||||
icon: experience.png
|
||||
|
||||
seven:
|
||||
name: Future Dev
|
||||
name: Future Dev
|
||||
icon: futuredev.png
|
||||
|
||||
|
||||
eight:
|
||||
name: Idea
|
||||
name: Group
|
||||
icon: group.png
|
||||
|
||||
nine:
|
||||
name: Idea
|
||||
icon: idea.png
|
||||
|
||||
nine:
|
||||
name: Implication
|
||||
|
||||
ten:
|
||||
name: Implication
|
||||
icon: implication.png
|
||||
|
||||
ten:
|
||||
name: Insight
|
||||
icon: insight.png
|
||||
|
||||
eleven:
|
||||
name: Intention
|
||||
name: Insight
|
||||
icon: insight.png
|
||||
|
||||
twelve:
|
||||
name: Intention
|
||||
icon: intention.png
|
||||
|
||||
twelve:
|
||||
name: Knowledge
|
||||
icon: knowledge.png
|
||||
|
||||
|
||||
thirteen:
|
||||
name: Location
|
||||
icon: location.png
|
||||
|
||||
name: Knowledge
|
||||
icon: knowledge.png
|
||||
|
||||
fourteen:
|
||||
name: Open Issue
|
||||
icon: openissue.png
|
||||
name: Location
|
||||
icon: location.png
|
||||
|
||||
fifteen:
|
||||
name: Opinion
|
||||
icon: opinion.png
|
||||
|
||||
name: Open Issue
|
||||
icon: openissue.png
|
||||
|
||||
sixteen:
|
||||
name: Opportunity
|
||||
icon: opportunity.png
|
||||
|
||||
name: Opinion
|
||||
icon: opinion.png
|
||||
|
||||
seventeen:
|
||||
name: Platform
|
||||
icon: platform.png
|
||||
|
||||
name: Opportunity
|
||||
icon: opportunity.png
|
||||
|
||||
eighteen:
|
||||
name: Problem
|
||||
icon: problem.png
|
||||
name: Person
|
||||
icon: person.png
|
||||
|
||||
nineteen:
|
||||
name: Question
|
||||
icon: question.png
|
||||
name: Platform
|
||||
icon: platform.png
|
||||
|
||||
twenty:
|
||||
name: Reference
|
||||
name: Problem
|
||||
icon: problem.png
|
||||
|
||||
twenty-one:
|
||||
name: Question
|
||||
icon: question.png
|
||||
|
||||
twenty-two:
|
||||
name: Reference
|
||||
icon: reference.png
|
||||
|
||||
twentyone:
|
||||
name: Requirement
|
||||
|
||||
twenty-three:
|
||||
name: Requirement
|
||||
icon: requirement.png
|
||||
|
||||
twentytwo:
|
||||
name: Resource
|
||||
twenty-four:
|
||||
name: Resource
|
||||
icon: resource.png
|
||||
|
||||
twentythree:
|
||||
name: Role
|
||||
|
||||
twenty-five:
|
||||
name: Role
|
||||
icon: role.png
|
||||
|
||||
twentyfour:
|
||||
name: Task
|
||||
|
||||
twenty-six:
|
||||
name: Task
|
||||
icon: task.png
|
||||
|
||||
twentyfive:
|
||||
name: Tool
|
||||
twenty-seven:
|
||||
name: Tool
|
||||
icon: tool.png
|
||||
|
||||
twentysix:
|
||||
name: Trajectory
|
||||
twenty-eight:
|
||||
name: Trajectory
|
||||
icon: trajectory.png
|
||||
|
||||
twentyseven:
|
||||
name: Action
|
||||
icon: action.png
|
||||
|
||||
twentyeight:
|
||||
name: Activity
|
||||
icon: activity.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue