got filtering on canvas working

This commit is contained in:
Connor Turland 2012-12-22 03:32:12 -05:00
parent 37e41c87bf
commit c4194923a3
8 changed files with 293 additions and 78 deletions

View file

@ -45,9 +45,9 @@ function hideCategory(category, duration) {
if (duration == null) duration = 500;
Mconsole.graph.eachNode( function (n) {
if (n.getData('itemcatname') == category) {
n.setData('alpha', 0, 'end');
n.setData('alpha', 0.4, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end');
adj.setData('alpha', 0.4, 'end');
});
}
});
@ -75,12 +75,27 @@ function showCategory(category, duration) {
});
}
// Define the Find/Filters possibilities
var findTopics = ['name','metacode', 'mapper (by name)', 'map (by name)']
var findSynapses = ['topics (by name)', 'directionality', 'mapper (by name)', 'map (by name)']
var findMaps = ['name', 'topic (by name)', 'mapper (by name)', 'synapse (by topics)']
var findMappers = ['name', 'topic (by name)', 'map (by name)', 'synapse (by topics)']
// These functions toggle ALL nodes and synapses on the page
function hideAll(duration) {
if (duration == null) duration = 500;
Mconsole.graph.eachNode( function (n) {
n.setData('alpha', 0, 'end');
n.setData('alpha', 0.4, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0, 'end');
adj.setData('alpha', 0.4, 'end');
});
});
Mconsole.fx.animate({
@ -89,7 +104,6 @@ function hideAll(duration) {
duration: duration
});
}
function showAll(duration) {
if (duration == null) duration = 500;
Mconsole.graph.eachNode( function (n) {
@ -106,22 +120,91 @@ function showAll(duration) {
}
$(document).ready(function() {
/// Traverse the Graph and only show the searched for nodes
function onCanvasSearch(name,mapID,mapperID) {
Mconsole.graph.eachNode( function (n) {
if (name != null) {
if (n.name.indexOf(name) !== -1) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
else {
n.setData('alpha', 0.4, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
}
else if (mapID != null) {
if (n.getData('inmaps').indexOf(parseInt(mapID)) !== -1) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
else {
n.setData('alpha', 0.4, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
}
else if (mapperID != null) {
if (n.getData('userid').toString() == mapperID) {
n.setData('alpha', 1, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
else {
n.setData('alpha', 0.4, 'end');
n.eachAdjacency(function(adj) {
adj.setData('alpha', 0.4, 'end');
});
}
}
});
Mconsole.fx.animate({
modes: ['node-property:alpha',
'edge-property:alpha'],
duration: 500
});
}
////
////
////
//// Define all the dynamic interactions for the FIND/FILTER using Jquery
$(document).ready(function() {
// this sets up the initial opening of the find box
$('.sideOption').bind('click',function(){
$('.sideOption').animate({
width: '250px',
width: '305px',
height: '76px'
}, 700, function() {
$('#by_name_input').focus();
$('#topic_by_name_input').focus();
});
$('#closeFind').css('display','block');
$('#closeFind, #findWhere').css('display','block');
$('.sideOption').unbind('click');
$('.sideOption').css('cursor','default');
});
// this sets up the closing of the find box, and the toggling between open and closed.
$('#closeFind').click(function(){
$('#closeFind').css('display','none');
$('#closeFind, #findWhere').css('display','none');
$('.sideOption').css('cursor','pointer');
$('.sideOption').animate({
width: '45px',
@ -130,34 +213,59 @@ function showAll(duration) {
$('.sideOption').bind('click',function(){
firstVal = $('.sideOption option[value="name"]').attr('selected');
secondVal = $('.sideOption option[value="metacode"]').attr('selected');
if ( firstVal === 'selected') {
thirdVal = $('.sideOption option[value="map (by name)"]').attr('selected');
fourthVal = $('.sideOption option[value="mapper (by name)"]').attr('selected');
if ( firstVal === 'selected' || thirdVal === 'selected' || fourthVal === 'selected' ) {
$('.sideOption').animate({
width: '250px',
height: '76px'
}, 700, function() {
$('#by_name_input').focus();
width: '305px',
height: '76px'
}, 300, function() {
$('#topic_by_name_input').focus();
});
} else if ( secondVal === 'selected') {
$('.sideOption').animate({
width: '380px',
height: '463px'
}, 700, function() {
}, 300, function() {
// Animation complete.
});
} else if ( thirdVal === 'selected' ) {
$('.sideOption').animate({
width: '305px',
height: '76px'
}, 300, function() {
$('#map_by_name_input').focus();
});
} else if ( fourthVal === 'selected' ) {
$('.sideOption').animate({
width: '305px',
height: '76px'
}, 300, function() {
$('#mapper_by_name_input').focus();
});
}
$('#closeFind').css('display','block');
$('#closeFind, #findWhere').css('display','block');
$('.sideOption').unbind('click');
$('.sideOption').css('cursor','default');
});
});
});
// this is where interactions within the find box begin
//
$("#topic_by_name_input").keyup(function() {
var topicName = $(this).val();
onCanvasSearch(topicName,null,null);
});
$('.sideOption .select_content').change(function() {
firstVal = $(this).children("option[value='topics']").attr('selected');
secondVal = $(this).children("option[value='maps']").attr('selected');
thirdVal = $(this).children("option[value='mappers']").attr('selected');
if ( firstVal == 'selected') {
$('.sideOption .select_type').children("option[value='metacode']").removeAttr('disabled');
$('.sideOption .select_type').children("option[value='map (by name)']").removeAttr('disabled');
$('.sideOption .select_type').children("option[value='mapper (by name)']").removeAttr('disabled');
$('.find').css('display','none');
$('.find_topic_by_name').css('display','block');
$('#topic_by_name_input').focus();
@ -167,13 +275,15 @@ function showAll(duration) {
if ( $(".sideOption .select_type").val() != "name") {
$(".sideOption .select_type").val('name');
$('.sideOption').animate({
width: '250px',
width: '305px',
height: '76px'
}, 700, function() {
}, 300, function() {
// Animation complete.
});
}
$('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
$('.sideOption .select_type').children("option[value='map (by name)']").attr('disabled','disabled');
$('.sideOption .select_type').children("option[value='mapper (by name)']").attr('disabled','disabled');
$('.find').css('display','none');
$('.find_map_by_name').css('display','block');
$('#map_by_name_input').focus();
@ -181,6 +291,8 @@ function showAll(duration) {
else if ( thirdVal == 'selected' ) {
$(".sideOption .select_type").val('name');
$('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
$('.sideOption .select_type').children("option[value='map (by name)']").attr('disabled','disabled');
$('.sideOption .select_type').children("option[value='mapper (by name)']").attr('disabled','disabled');
$('.find').css('display','none');
$('.find_mapper_by_name').css('display','block');
$('#mapper_by_name_input').focus();
@ -190,31 +302,54 @@ function showAll(duration) {
$('.sideOption .select_type').change(function() {
firstVal = $(this).children("option[value='name']").attr('selected');
secondVal = $(this).children("option[value='metacode']").attr('selected');
thirdVal = $(this).children("option[value='map (by name)']").attr('selected');
fourthVal = $(this).children("option[value='mapper (by name)']").attr('selected');
if ( firstVal === 'selected') {
$('.find_topic_by_metacode').fadeOut('fast', function() {
$('.find').fadeOut('fast', function() {
showAll();
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
for (var catVis in categoryVisible) {
categoryVisible[catVis] = true;
}
$('.sideOption').animate({
width: '250px',
width: '305px',
height: '76px'
}, 700, function() {
// Animation complete.
}, 300, function() {
$('.find_topic_by_name').css('display','block');
$('#topic_by_name_input').focus();
});
$('.find_topic_by_name').fadeIn('fast');
});
}
else if ( secondVal === 'selected' ) {
$('.find_topic_by_name').fadeOut('fast', function() {
$('.find').fadeOut('fast', function() {
$('.sideOption').animate({
width: '380px',
height: '463px'
}, 700, function() {
// Animation complete.
});
$('.find_topic_by_metacode').fadeIn('fast');
}, 300, function() {
$('.find_topic_by_metacode').fadeIn('fast');
});
});
}
else if ( thirdVal === 'selected' ) {
$('.find').fadeOut('fast', function() {
$('.sideOption').animate({
width: '305px',
height: '76px'
}, 300, function() {
$('.find_map_by_name').css('display','block');
$('#map_by_name_input').focus();
});
});
}
else if ( fourthVal === 'selected' ) {
$('.find').fadeOut('fast', function() {
$('.sideOption').animate({
width: '305px',
height: '76px'
}, 300, function() {
$('.find_mapper_by_name').css('display','block');
$('#mapper_by_name_input').focus();
});
});
}
});
@ -232,23 +367,43 @@ function showAll(duration) {
});
$('.find_map_by_name #map_by_name_input').bind('railsAutocomplete.select', function(event, data){
/* Do something here */
if (data.item.id != undefined) {
window.open("/maps/" + data.item.id)
}
$('.find_map_by_name #map_by_name_input').val('');
});
firstVal = $('.sideOption .select_content').children("option[value='topics']").attr('selected');
secondVal = $('.sideOption .select_content').children("option[value='maps']").attr('selected');
thirdVal = $('.sideOption .select_content').children("option[value='mappers']").attr('selected');
if ( firstVal == 'selected') {
onCanvasSearch(null,data.item.id,null);
}
else if ( secondVal == 'selected' ) {
if (data.item.id != undefined) {
window.open("/maps/" + data.item.id);
}
$('.find_map_by_name #map_by_name_input').val('');
}
else if ( thirdVal == 'selected' ) {
}
});
$('.find_map_by_name').bind('submit', function(event, data){
event.preventDefault();
});
$('.find_mapper_by_name #mapper_by_name_input').bind('railsAutocomplete.select', function(event, data){
/* Do something here */
if (data.item.id != undefined) {
window.open("/users/" + data.item.id)
}
$('.find_mapper_by_name #mapper_by_name_input').val('');
firstVal = $('.sideOption .select_content').children("option[value='topics']").attr('selected');
secondVal = $('.sideOption .select_content').children("option[value='maps']").attr('selected');
thirdVal = $('.sideOption .select_content').children("option[value='mappers']").attr('selected');
if ( firstVal == 'selected') {
onCanvasSearch(null,null,data.item.id.toString());
}
else if ( secondVal == 'selected' ) {
}
else if ( thirdVal == 'selected' ) {
if (data.item.id != undefined) {
window.open("/users/" + data.item.id);
}
$('.find_mapper_by_name #mapper_by_name_input').val('');
}
});
$('.find_mapper_by_name').bind('submit', function(event, data){
@ -299,24 +454,24 @@ function showAll(duration) {
switchVisible(category);
}
// this means that we are on a card view
else {
if (categoryVisible[category] == true) {
if (category.split(' ').length == 1) {
$('#cards .' + category).fadeOut('slow');
}
else {
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
}
}
else if (categoryVisible[category] == false) {
if (category.split(' ').length == 1) {
$('#cards .' + category).fadeIn('slow');
}
else {
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
}
}
}
//else {
// if (categoryVisible[category] == true) {
// if (category.split(' ').length == 1) {
// $('#cards .' + category).fadeOut('slow');
// }
// else {
// $('#cards .' + category.split(' ')[0]).fadeOut('slow');
// }
// }
// else if (categoryVisible[category] == false) {
// if (category.split(' ').length == 1) {
// $('#cards .' + category).fadeIn('slow');
// }
// else {
// $('#cards .' + category.split(' ')[0]).fadeIn('slow');
// }
// }
// }
// toggle the image and the boolean array value
if (categoryVisible[category] == true) {
$(this).addClass('toggledOff');

View file

@ -394,6 +394,18 @@ input[type="submit"] {
cursor:pointer;
}
#findWhere {
position:fixed;
top:25%;
left:40px;
display:none;
margin-top:-20px;
}
.findWhereField, #findWhere input, #findWhere p {
float:left;
}
.sideOption select,
.sideOption span {
float:left;
@ -414,7 +426,7 @@ input[type="submit"] {
.find_topic_by_name input, .find_map_by_name input, .find_mapper_by_name input {
margin:10px 0 0 0;
width: 207px;
width: 270px;
border-radius: 10px;
height: 20px;
padding: 0 10px;

View file

@ -11,7 +11,8 @@ class MainController < ApplicationController
@current = current_user
if authenticated?
@items = Item.all.first.self_as_json.html_safe
@synapses = Synapse.visibleToUser(@current, nil)
@items = synapses_as_json(@current, @synapses).html_safe
respond_to do |format|
format.html { respond_with(@current) }

View file

@ -60,10 +60,16 @@ module ItemsHelper
json.data @synapsedata
end
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
json.data @itemdata
@ -99,10 +105,16 @@ module ItemsHelper
json.data @synapsedata
end
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name

View file

@ -36,11 +36,16 @@ belongs_to :item_category
def self_as_json
Jbuilder.encode do |json|
@inmaps = Array.new
self.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = self.desc
@itemdata['$link'] = self.link
@itemdata['$itemcatname'] = self.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = self.user.id
@itemdata['$username'] = self.user.name
json.data @itemdata
@ -72,10 +77,16 @@ belongs_to :item_category
json.data @synapsedata
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
json.data @itemdata
@ -84,15 +95,21 @@ belongs_to :item_category
end
elsif @items.count == 1
json.array!(@items) do |item|
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
json.data @itemdata
json.id item.id
json.name item.name
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
json.data @itemdata
json.id item.id
json.name item.name
end
end
end

View file

@ -39,10 +39,16 @@ end
json.data @synapsedata
end
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
@mapping = Mapping.find_by_item_id_and_map_id(item.id,self.id)

View file

@ -46,12 +46,18 @@ has_many :maps, :through => :mappings
json.data @synapsedata
end
@inmaps = Array.new
item.maps.each do |map|
@inmaps.push(map.id)
end
@itemdata = Hash.new
@itemdata['$desc'] = item.desc
@itemdata['$link'] = item.link
@itemdata['$itemcatname'] = item.item_category.name
@itemdata['$userid'] = self.user.id
@itemdata['$username'] = self.user.name
@itemdata['$inmaps'] = @inmaps
@itemdata['$userid'] = item.user.id
@itemdata['$username'] = item.user.name
json.data @itemdata
json.id item.id
json.name item.name

View file

@ -63,6 +63,10 @@
<% end %>
<span id="closeFind">close</span>
<form id="findWhere">
<span class="findWhereField"><input type="checkbox" name="onCanvas" value="1" checked="checked"><p>On my Canvas</p></span>
<span class="findWhereField"><input type="checkbox" name="inCommons" value="0"><p>In the Commons</p></span>
</form>
<div class="sideOption" id="sideOptionFind">
<span class="find_key">Find...</span>
<select class="select_content">
@ -73,8 +77,10 @@
</select>
<span class="spacer">by</span>
<select class="select_type">
<option value="name" selected="selected">Name</option>
<option value="metacode">Metacode</option>
<option value="name" selected="selected">name</option>
<option value="metacode">metacode</option>
<option value="map (by name)">map (by name)</option>
<option value="mapper (by name)">mapper (by name)</option>
</select>
<div class="clearfloat"></div>
<%= form_for Item.new, :html => { :class => "find_topic_by_name find find_topic", :id => "find_topic_by_name" } do |f| %>