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 %> +
+
+

FILTERS

+ + +
+
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
diff --git a/db/schema.rb b/db/schema.rb index 6d76773a..5e30d2b0 100644 --- a/db/schema.rb +++ b/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 diff --git a/test/fixtures/item_categories.yml b/test/fixtures/item_categories.yml index 61d74ce8..97daed6b 100644 --- a/test/fixtures/item_categories.yml +++ b/test/fixtures/item_categories.yml @@ -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 - - - - -