From c4194923a3796740074de27f0182b85af2b8494f Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sat, 22 Dec 2012 03:32:12 -0500 Subject: [PATCH] got filtering on canvas working --- app/assets/javascripts/Jit/filters.js | 271 +++++++++++++++++++------ app/assets/stylesheets/application.css | 14 +- app/controllers/main_controller.rb | 3 +- app/helpers/items_helper.rb | 12 ++ app/models/item.rb | 45 ++-- app/models/map.rb | 6 + app/models/synapse.rb | 10 +- app/views/main/console.html.erb | 10 +- 8 files changed, 293 insertions(+), 78 deletions(-) diff --git a/app/assets/javascripts/Jit/filters.js b/app/assets/javascripts/Jit/filters.js index e4ca1ec2..df2c053c 100644 --- a/app/assets/javascripts/Jit/filters.js +++ b/app/assets/javascripts/Jit/filters.js @@ -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'); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 0ff24ba6..c7df9d13 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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; diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb index 05f11002..d2cee820 100644 --- a/app/controllers/main_controller.rb +++ b/app/controllers/main_controller.rb @@ -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) } diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb index f7608054..cc6449df 100644 --- a/app/helpers/items_helper.rb +++ b/app/helpers/items_helper.rb @@ -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 diff --git a/app/models/item.rb b/app/models/item.rb index f17a8285..6a7ff32e 100644 --- a/app/models/item.rb +++ b/app/models/item.rb @@ -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 diff --git a/app/models/map.rb b/app/models/map.rb index 4ab76ba7..2c538a52 100644 --- a/app/models/map.rb +++ b/app/models/map.rb @@ -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) diff --git a/app/models/synapse.rb b/app/models/synapse.rb index 0b1f6b16..6324f236 100644 --- a/app/models/synapse.rb +++ b/app/models/synapse.rb @@ -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 diff --git a/app/views/main/console.html.erb b/app/views/main/console.html.erb index edc81afa..0d9a459e 100644 --- a/app/views/main/console.html.erb +++ b/app/views/main/console.html.erb @@ -63,6 +63,10 @@ <% end %> close +
+

On my Canvas

 +

In the Commons

 +
Find... by
<%= form_for Item.new, :html => { :class => "find_topic_by_name find find_topic", :id => "find_topic_by_name" } do |f| %>