glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

got filtering/finding system working, and node creation happening in place.

Browse source
This commit is contained in:
Connor Turland 2012-12-16 01:12:41 -05:00
parent d822d87b5a
commit 04819ca342
6 changed files with 109 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/assets/javascripts/Jit/graphsettings.js
View file

@ -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

128
app/assets/javascripts/application.js
View file

@ -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) {

14
app/assets/stylesheets/application.css
View file

@ -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; }

5
app/controllers/items_controller.rb
View file

@ -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]

12
app/views/items/create.js.erb
View file

@ -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();
}

7
app/views/layouts/application.html.erb
View file

@ -55,22 +55,23 @@
<%= yield %>
</div>
<span id="closeFind">close</span>
<div class="sideOption" id="sideOptionFind">
<span class="find_key">Find...</span>
<select class="select_content">
<option value="topics">Topics</option>
<option value="topics" selected="selected">Topics</option>
<!-- <option value="synapses">Synapses</option>
<option value="maps">Maps</option>
<option value="mappers">Mappers</option> -->
</select>
<span class="spacer">by</span>
<select class="select_type">
<option value="name">Name</option>
<option value="name" selected="selected">Name</option>
<option value="metacode">Metacode</option>
</select>
<div class="clearfloat"></div>
<%= 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 %>
<div class="find_topic_by_metacode" id="find_topic_by_metacode">
<ul id="filters-one">