diff --git a/Gemfile.lock b/Gemfile.lock index 16ce60bc..a2d9b215 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/assets/images/bg.png b/app/assets/images/bg.png new file mode 100644 index 00000000..681d441c Binary files /dev/null and b/app/assets/images/bg.png differ diff --git a/app/assets/javascripts/Jit/filters.js b/app/assets/javascripts/Jit/filters.js new file mode 100644 index 00000000..560b13d8 --- /dev/null +++ b/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 + }); +} diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index faa5b073..26204d23 100644 --- a/app/assets/javascripts/application.js +++ b/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); + } + } + }); +}); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 75c53243..61644c7b 100644 --- a/app/assets/stylesheets/application.css +++ b/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;} @@ -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; } \ No newline at end of file +.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; +} + diff --git a/app/assets/stylesheets/items.css.scss b/app/assets/stylesheets/items.css.scss index 31a799b8..a2371269 100644 --- a/app/assets/stylesheets/items.css.scss +++ b/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; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1ad17f2f..610edc8d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -7,6 +7,43 @@ <%= csrf_meta_tags %>
+action
activity
bizarre
catalyst
closed
experience
future dev
group
idea
implication
insight
intention
knowledge
location
open issue
opinion
opportunity
person
platform
problem
question
reference
requirement
resource
role
task
tool
trajectory