got filtering/finding system working, and node creation happening in place.
This commit is contained in:
Connor Turland
parent
d822d87b5a
commit
04819ca342
6 changed files with 109 additions and 102 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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('');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -60,28 +116,6 @@ var viewMode = "list";
|
|||
|
||||
$('.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();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// controls the sliding hover of the filters
|
||||
var sliding1 = false;
|
||||
$(".accountWrap").hover(
|
||||
|
|
@ -123,50 +157,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) {
|
||||
obj = document.getElementById('container');
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue