diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js index 25f24fcf..e9e6e3c7 100644 --- a/app/assets/javascripts/Jit/graphsettings.js +++ b/app/assets/javascripts/Jit/graphsettings.js @@ -85,7 +85,7 @@ function graphSettings(type) { if (node) { selectNodeOnClickHandler(node); } else { - canvasDoubleClickHandler(e); + canvasDoubleClickHandler(eventInfo.getPos(), e); }//if }//onClick }, @@ -111,6 +111,19 @@ function graphSettings(type) { // add some events to the label showCard.onclick = function(){ + delete node.selected; + node.setData('dim', 25, 'current'); + node.eachAdjacency(function (adj) { + adj.setDataset('end', { + lineWidth: 0.5, + color: '#222222' + }); + adj.setData('showDesc', false, 'current'); + }); + Mconsole.fx.animate({ + modes: ['edge-property:lineWidth:color'], + duration: 500 + }); $('.showcard.item_' + node.id).fadeOut('fast', function(){ $('.name').css('display','block'); Mconsole.plot(); @@ -128,8 +141,8 @@ function graphSettings(type) { style.color = "#222222"; // add some events to the label - nameContainer.onmouseover = function(){ - if (node.id == 0) return; + nameContainer.onclick = function(){ + node.setData('dim', 1, 'current'); $('.showcard').css('display','none'); $('.name').css('display','block'); $('.name.item_' + node.id).css('display','none'); @@ -144,9 +157,8 @@ function graphSettings(type) { var left = parseInt(style.left); var top = parseInt(style.top); var w = domElement.offsetWidth; - var dim = node.getData('dim'); style.left = (left - w / 2) + 'px'; - style.top = (top + dim) + 'px'; + style.top = (top+25) + 'px'; style.display = ''; } }; @@ -393,10 +405,17 @@ var nodeSettings = { } function selectNodeOnClickHandler(node) { + + $('.showcard').css('display','none'); + $('.name').css('display','block'); + $('.name.item_' + node.id).css('display','none'); + $('.showcard.item_' + node.id).fadeIn('fast'); + Mconsole.plot(); + //set final styles Mconsole.graph.eachNode(function (n) { if (n.id != node.id) delete n.selected; - n.setData('dim', 25, 'end'); + n.setData('dim', 25, 'current'); n.eachAdjacency(function (adj) { adj.setDataset('end', { lineWidth: 0.5, @@ -407,7 +426,7 @@ function selectNodeOnClickHandler(node) { }); if (!node.selected) { node.selected = true; - node.setData('dim', 35, 'end'); + node.setData('dim', 1, 'current'); node.eachAdjacency(function (adj) { adj.setDataset('end', { lineWidth: 3, @@ -416,12 +435,12 @@ function selectNodeOnClickHandler(node) { adj.setData('showDesc', true, 'current'); }); } else { + node.setData('dim', 25, 'current'); delete node.selected; } //trigger animation to final styles Mconsole.fx.animate({ - modes: ['node-property:dim', - 'edge-property:lineWidth:color'], + modes: ['edge-property:lineWidth:color'], duration: 500 }); }//selectNodeOnClickHandler @@ -430,8 +449,7 @@ function selectNodeOnClickHandler(node) { var canvasDoubleClickHandlerObject = new Object(); canvasDoubleClickHandlerObject.storedTime = 0; -function canvasDoubleClickHandler(e) { - console.log(e); +function canvasDoubleClickHandler(canvasLoc,e) { var TOLERANCE = 300; //0.3 seconds //grab the location and timestamp of the click @@ -442,11 +460,12 @@ function canvasDoubleClickHandler(e) { //pop up node creation :) document.getElementById('new_item').style.left = e.x + "px"; document.getElementById('new_item').style.top = e.y + "px"; - $('#item_x').val(e.x); - $('#item_y').val(e.y); + $('#item_x').val(canvasLoc.x); + $('#item_y').val(canvasLoc.y); $('#new_item').fadeIn('fast'); $('#item_name').focus(); } else { canvasDoubleClickHandlerObject.storedTime = now; + $('#new_item').fadeOut('fast'); } }//canvasDoubleClickHandler diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index c5f5e953..36e960a6 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -21,6 +21,50 @@ var viewMode = "list"; $(document).ready(function() { + $('.sideOption').bind('click',function(){ + $('.sideOption').animate({ + width: '245px', + height: '76px' + }, 700, function() { + $('#by_name_input').focus(); + }); + $('#closeFind').css('display','block'); + $('.sideOption').unbind('click'); + $('.sideOption').css('cursor','default'); + }); + + $('#closeFind').click(function(){ + $('#closeFind').css('display','none'); + $('.sideOption').css('cursor','pointer'); + $('.sideOption').animate({ + width: '45px', + height: '32px' + }, 700, function() { + $('.sideOption').bind('click',function(){ + firstVal = $('.sideOption option[value="name"]').attr('selected'); + secondVal = $('.sideOption option[value="metacode"]').attr('selected'); + if ( firstVal === 'selected') { + $('.sideOption').animate({ + width: '245px', + height: '76px' + }, 700, function() { + $('#by_name_input').focus(); + }); + } else if ( secondVal === 'selected') { + $('.sideOption').animate({ + width: '380px', + height: '463px' + }, 700, function() { + // Animation complete. + }); + } + $('#closeFind').css('display','block'); + $('.sideOption').unbind('click'); + $('.sideOption').css('cursor','default'); + }); + }); + }); + $('.sideOption .select_type').change(function() { firstVal = $(this).children("option[value='name']").attr('selected'); secondVal = $(this).children("option[value='metacode']").attr('selected'); @@ -31,23 +75,35 @@ var viewMode = "list"; for (var catVis in categoryVisible) { categoryVisible[catVis] = true; } + $('.sideOption').animate({ + width: '245px', + height: '76px' + }, 700, function() { + // Animation complete. + }); $('.find_topic_by_name').fadeIn('fast'); }); } else if ( secondVal === 'selected' ) { $('.find_topic_by_name').fadeOut('fast', function() { + $('.sideOption').animate({ + width: '380px', + height: '463px' + }, 700, function() { + // Animation complete. + }); $('.find_topic_by_metacode').fadeIn('fast'); }); } }); - $('.find_topic_by_name #item_name').bind('railsAutocomplete.select', function(event, data){ + $('.find_topic_by_name #by_name_input').bind('railsAutocomplete.select', function(event, data){ /* Do something here */ if (data.item.user_id != undefined && data.item.id != undefined) { window.open("/users/" + data.item.user_id + "/items/" + data.item.id) } else if (data.item.value == "no existing match"){ - $('.find_topic_by_name #item_name').val(''); + $('.find_topic_by_name #by_name_input').val(''); } }); @@ -58,29 +114,7 @@ var viewMode = "list"; $(".focus .desc").mCustomScrollbar(); $(".scroll").mCustomScrollbar(); - $('.nodemargin').css('padding-top',$('.focus').css('height')); - - - // if there's an add topic directly to page form loaded on the page you're on then let the user add one - $('#newtopic').click(function(event){ - obj1 = document.getElementById('new_item'); - if (obj1 != null) { - $('#new_synapse').css('display','none'); - $('#new_item').fadeIn('fast'); - event.preventDefault(); - } - }); - - // if there's an add synapse directly to page form loaded on the page you're on then let the user add one - $('#newsynapse').click(function(event){ - obj2 = document.getElementById('new_synapse'); - if (obj2 != null) { - $('#new_item').css('display','none'); - $('#new_synapse').fadeIn('fast'); - event.preventDefault(); - } - }); - + $('.nodemargin').css('padding-top',$('.focus').css('height')); // controls the sliding hover of the filters var sliding1 = false; @@ -122,50 +156,6 @@ var viewMode = "list"; } } ); - - var sliding3 = false; - $(".exploreWrap").hover( - function () { - if (! sliding3) { - sliding3 = true; - $(".explore").slideDown('slow', function() { - sliding3 = false; - }); - } - }, - function () { - if (! sliding3) { - sliding3 = true; - $(".explore").slideUp('slow', function() { - sliding3 = false; - }); - } - } - ); - - var sliding4 = false; - var lT; - $(".legend").hover( - function () { - clearTimeout(lT); - if (! sliding4) { - sliding4 = true; - $("#iconLegend ul").slideDown('slow', function() { - sliding4 = false; - }); - } - }, - function () { - lT = setTimeout(function() { - if (! sliding4) { - sliding4 = true; - $("#iconLegend ul").slideUp('slow', function() { - sliding4 = false; - }); - } - },800); - } - ); // toggle visibility of item categories based on status in the filters list $('.find_topic_by_metacode ul li').click(function(event) { diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7f926de3..2fa44cad 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -94,7 +94,7 @@ input[type="submit"] { margin-top:5px; } #menus { margin:0 7px; } .accountWrap, .createWrap, .exploreWrap { display:block; position:relative; cursor: pointer;} -#menus .account, #menus .create, #menus .explore { display:none; position:absolute; right:0; z-index:12; width:auto; color: #67AF9F; +#menus .account, #menus .create { display:none; position:absolute; right:0; z-index:12; width:auto; color: #67AF9F; white-space: nowrap; text-align: center; font-size: 16px; @@ -123,9 +123,10 @@ border: 1px solid rgba(0, 0, 0, 0.2); /* --- styling the FIND section ---*/ -.sideOption { position:fixed; top:20%; left:0px; display:block; width:auto; background: url('bg.png') repeat 0 0; padding:15px; border-bottom-right-radius:10px; border-top-right-radius:10px; color:#000; border:1px solid #000; overflow:visible;} -.sideOption select, .sideOption span { float:left; } -.sideOption .spacer { margin:0 8px; } +.sideOption { position:fixed; top:25%; left:0px; display:block; width:45px; height:32px; background: url('bg.png') repeat 0 0; padding:0 0 0 15px; border-bottom-right-radius:10px; border-top-right-radius:10px; color:#000; border:1px solid #000; overflow:hidden; cursor:pointer; } +#closeFind { position:fixed; top:25%; left:4px; display:none; margin-top:-20px; cursor:pointer; } +.sideOption select, .sideOption span { float:left; margin-top:10px; } +.sideOption .spacer { margin:10px 10px 0; } .sideOption .find_key { margin-right:8px; } .find_topic_by_name { display: block; } .find_topic_by_name input { @@ -138,9 +139,6 @@ border: 1px solid rgba(0, 0, 0, 0.2); } .find_topic_by_metacode { z-index:12; display:none; width:auto; color: #67AF9F; } - -#iconLegend { width:inherit; height:inherit; } - .find_topic_by_metacode ul { display:block; } .find_topic_by_metacode ul li {clear:both; list-style-type:none; display:block; padding:3px; } .find_topic_by_metacode ul img { width:40px; height:40px; float:left; } @@ -162,4 +160,4 @@ margin: -0.75em 0 0; #mainTitle { float: left; } #mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; font-style: italic; text-transform:uppercase; font-weight: 400; } -#beta { float:left; margin-left: 7px; } +#beta { float:left; margin-left: 7px; } diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb index fed86c2e..70cdd9af 100644 --- a/app/controllers/items_controller.rb +++ b/app/controllers/items_controller.rb @@ -74,9 +74,8 @@ class ItemsController < ApplicationController end @position = Hash.new() - @position.x = params[:item][:x] - @position.y = params[:item][:y] - @position.save + @position['x'] = params[:item][:x] + @position['y'] = params[:item][:y] @mapping = Mapping.new() if params[:item][:map] diff --git a/app/views/items/create.js.erb b/app/views/items/create.js.erb index 6979ded2..eeeda9b7 100644 --- a/app/views/items/create.js.erb +++ b/app/views/items/create.js.erb @@ -3,8 +3,9 @@ $('#new_item')[0].reset(); if(viewMode == "graph") { var newnode = <%= @item.self_as_json.html_safe %>; - var x = <%= position.x %>; - var y = <%= position.y %>; + var x = <%= @position['x'] %>; + var y = <%= @position['y'] %>; + if (Mconsole != null) { Mconsole.graph.addNode(newnode); @@ -21,9 +22,9 @@ if(viewMode == "graph") { temp.setData('xloc',0); temp.setData('yloc',0); temp.setData('mappingid', '<%= @mapping.id %>'); - temp.setPos(new $jit.Complex(0, 0), 'current'); - temp.setPos(new $jit.Complex(0, 0), 'start'); - temp.setPos(new $jit.Complex(0, 0), 'end'); + temp.setPos(new $jit.Complex(x, y), 'current'); + temp.setPos(new $jit.Complex(x, y), 'start'); + temp.setPos(new $jit.Complex(x, y), 'end'); } Mconsole.fx.plotNode(temp, Mconsole.canvas); @@ -42,7 +43,6 @@ if(viewMode == "graph") { } else { - alert('wrong!'); $('#cards').prepend('<%= escape_javascript(render(@item)) %>'); $(".scroll").mCustomScrollbar(); } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7d9b50c0..ec77181e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -55,22 +55,23 @@ <%= yield %> + close
Find... by
<%= form_for Item.new, :html => { :class => "find_topic_by_name", :id => "find_topic_by_name" } do |f| %> - <%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %> + <%= f.autocomplete_field :name, autocomplete_item_name_items_path, :id => "by_name_input", :placeholder => "Search for topics..." %> <% end %>