got Rgraph working
This commit is contained in:
parent
66a6e22854
commit
3931fdd40e
16 changed files with 571 additions and 532 deletions
|
@ -104,3 +104,228 @@ function showAll(duration) {
|
||||||
duration: duration
|
duration: duration
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
$('.sideOption').bind('click',function(){
|
||||||
|
$('.sideOption').animate({
|
||||||
|
width: '250px',
|
||||||
|
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: '250px',
|
||||||
|
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_content').change(function() {
|
||||||
|
firstVal = $(this).children("option[value='topics']").attr('selected');
|
||||||
|
secondVal = $(this).children("option[value='maps']").attr('selected');
|
||||||
|
thirdVal = $(this).children("option[value='mappers']").attr('selected');
|
||||||
|
if ( firstVal == 'selected') {
|
||||||
|
$('.sideOption .select_type').children("option[value='metacode']").removeAttr('disabled');
|
||||||
|
$('.find').css('display','none');
|
||||||
|
$('.find_topic_by_name').css('display','block');
|
||||||
|
$('#topic_by_name_input').focus();
|
||||||
|
|
||||||
|
}
|
||||||
|
else if ( secondVal == 'selected' ) {
|
||||||
|
if ( $(".sideOption .select_type").val() != "name") {
|
||||||
|
$(".sideOption .select_type").val('name');
|
||||||
|
$('.sideOption').animate({
|
||||||
|
width: '250px',
|
||||||
|
height: '76px'
|
||||||
|
}, 700, function() {
|
||||||
|
// Animation complete.
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
|
||||||
|
$('.find').css('display','none');
|
||||||
|
$('.find_map_by_name').css('display','block');
|
||||||
|
$('#map_by_name_input').focus();
|
||||||
|
}
|
||||||
|
else if ( thirdVal == 'selected' ) {
|
||||||
|
$(".sideOption .select_type").val('name');
|
||||||
|
$('.sideOption .select_type').children("option[value='metacode']").attr('disabled','disabled');
|
||||||
|
$('.find').css('display','none');
|
||||||
|
$('.find_mapper_by_name').css('display','block');
|
||||||
|
$('#mapper_by_name_input').focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.sideOption .select_type').change(function() {
|
||||||
|
firstVal = $(this).children("option[value='name']").attr('selected');
|
||||||
|
secondVal = $(this).children("option[value='metacode']").attr('selected');
|
||||||
|
if ( firstVal === 'selected') {
|
||||||
|
$('.find_topic_by_metacode').fadeOut('fast', function() {
|
||||||
|
showAll();
|
||||||
|
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
||||||
|
for (var catVis in categoryVisible) {
|
||||||
|
categoryVisible[catVis] = true;
|
||||||
|
}
|
||||||
|
$('.sideOption').animate({
|
||||||
|
width: '250px',
|
||||||
|
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 #topic_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)
|
||||||
|
}
|
||||||
|
$('.find_topic_by_name #topic_by_name_input').val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.find_topic_by_name').bind('submit', function(event, data){
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.find_map_by_name #map_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 + "/maps/" + data.item.id)
|
||||||
|
}
|
||||||
|
$('.find_map_by_name #map_by_name_input').val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.find_map_by_name').bind('submit', function(event, data){
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.find_mapper_by_name #mapper_by_name_input').bind('railsAutocomplete.select', function(event, data){
|
||||||
|
/* Do something here */
|
||||||
|
if (data.item.id != undefined) {
|
||||||
|
window.open("/users/" + data.item.id)
|
||||||
|
}
|
||||||
|
$('.find_mapper_by_name #mapper_by_name_input').val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.find_mapper_by_name').bind('submit', function(event, data){
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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');
|
||||||
|
|
||||||
|
var switchAll = $(this).attr('id');
|
||||||
|
|
||||||
|
if ( switchAll === "showAll" || switchAll === "hideAll") {
|
||||||
|
if (switchAll == "showAll") {
|
||||||
|
// this means that we are on a map view
|
||||||
|
if (obj != null) {
|
||||||
|
showAll();
|
||||||
|
}
|
||||||
|
// this means that we are on a card view
|
||||||
|
else {
|
||||||
|
$('.item').fadeIn('slow');
|
||||||
|
}
|
||||||
|
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
||||||
|
for (var catVis in categoryVisible) {
|
||||||
|
categoryVisible[catVis] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (switchAll == "hideAll") {
|
||||||
|
// this means that we are on a map view
|
||||||
|
if (obj != null) {
|
||||||
|
hideAll();
|
||||||
|
}
|
||||||
|
// this means that we are on a card view
|
||||||
|
else {
|
||||||
|
$('.item').fadeOut('slow');
|
||||||
|
}
|
||||||
|
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').addClass('toggledOff');
|
||||||
|
for (var catVis in categoryVisible) {
|
||||||
|
categoryVisible[catVis] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
var category = $(this).children('img').attr('alt');
|
||||||
|
|
||||||
|
// this means that we are on a map view
|
||||||
|
if (obj != null) {
|
||||||
|
switchVisible(category);
|
||||||
|
}
|
||||||
|
// this means that we are on a card view
|
||||||
|
else {
|
||||||
|
if (categoryVisible[category] == true) {
|
||||||
|
if (category.split(' ').length == 1) {
|
||||||
|
$('#cards .' + category).fadeOut('slow');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (categoryVisible[category] == false) {
|
||||||
|
if (category.split(' ').length == 1) {
|
||||||
|
$('#cards .' + category).fadeIn('slow');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
|
@ -41,21 +41,7 @@ function graphSettings(type) {
|
||||||
//Add Tips
|
//Add Tips
|
||||||
Tips: {
|
Tips: {
|
||||||
enable: false,
|
enable: false,
|
||||||
onShow: function (tip, node) {
|
onShow: function (tip, node) {}
|
||||||
|
|
||||||
//display node info in tooltip
|
|
||||||
var html =
|
|
||||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
|
||||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
|
||||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
|
||||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
|
||||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
|
||||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
|
||||||
|
|
||||||
tip.innerHTML = '<div class="" id="item_' + node.id + '"></div>';
|
|
||||||
$jit.id('item_' + node.id).innerHTML = html;
|
|
||||||
$("#_tooltip .scroll").mCustomScrollbar();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// Add node events
|
// Add node events
|
||||||
Events: {
|
Events: {
|
||||||
|
@ -142,12 +128,7 @@ function graphSettings(type) {
|
||||||
|
|
||||||
// add some events to the label
|
// add some events to the label
|
||||||
nameContainer.onclick = function(){
|
nameContainer.onclick = function(){
|
||||||
node.setData('dim', 1, 'current');
|
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();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// Change node styles when DOM labels are placed
|
// Change node styles when DOM labels are placed
|
||||||
|
@ -209,16 +190,8 @@ function graphSettings(type) {
|
||||||
},
|
},
|
||||||
//Add Tips
|
//Add Tips
|
||||||
Tips: {
|
Tips: {
|
||||||
enable: true,
|
enable: false,
|
||||||
onShow: function (tip, node) {
|
onShow: function (tip, node) {}
|
||||||
//count connections
|
|
||||||
var count = 0;
|
|
||||||
node.eachAdjacency(function () {
|
|
||||||
count++;
|
|
||||||
});
|
|
||||||
//display node info in tooltip
|
|
||||||
tip.innerHTML = "<div class=\"tip-title\">" + node.name + "</div>" + "<div class=\"tip-text\">connections: " + count + "</div>";
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// Add node events
|
// Add node events
|
||||||
Events: {
|
Events: {
|
||||||
|
@ -226,10 +199,10 @@ function graphSettings(type) {
|
||||||
type: 'HTML',
|
type: 'HTML',
|
||||||
//Change cursor style when hovering a node
|
//Change cursor style when hovering a node
|
||||||
onMouseEnter: function () {
|
onMouseEnter: function () {
|
||||||
//Mconsole.canvas.getElement().style.cursor = 'move';
|
|
||||||
},
|
},
|
||||||
onMouseLeave: function () {
|
onMouseLeave: function () {
|
||||||
//Mconsole.canvas.getElement().style.cursor = '';
|
|
||||||
},
|
},
|
||||||
//Update node positions when dragged
|
//Update node positions when dragged
|
||||||
onDragMove: function (node, eventInfo, e) {
|
onDragMove: function (node, eventInfo, e) {
|
||||||
|
@ -243,83 +216,82 @@ function graphSettings(type) {
|
||||||
this.onDragMove(node, eventInfo, e);
|
this.onDragMove(node, eventInfo, e);
|
||||||
},
|
},
|
||||||
//Add also a click handler to nodes
|
//Add also a click handler to nodes
|
||||||
onClick: function (node) {
|
onClick: function (node, eventInfo, e) {
|
||||||
if (!node) return;
|
//clicking on a node, or clicking on blank part of canvas?
|
||||||
//set final styles
|
if (node) {
|
||||||
Mconsole.graph.eachNode(function (n) {
|
if (!Mconsole.busy) {
|
||||||
if (n.id != node.id) delete n.selected;
|
selectNodeOnClickHandler(node);
|
||||||
n.setData('dim', 25, 'end');
|
Mconsole.onClick(node.id, {
|
||||||
n.eachAdjacency(function (adj) {
|
hideLabels: false
|
||||||
adj.setDataset('end', {
|
});
|
||||||
lineWidth: 1,
|
}
|
||||||
color: '#222222'
|
|
||||||
});
|
|
||||||
adj.setData('showDesc', false, 'current');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if (!node.selected) {
|
|
||||||
node.selected = true;
|
|
||||||
node.setData('dim', 35, 'end');
|
|
||||||
node.eachAdjacency(function (adj) {
|
|
||||||
adj.setDataset('end', {
|
|
||||||
lineWidth: 3,
|
|
||||||
color: '#FFF'
|
|
||||||
});
|
|
||||||
adj.setData('showDesc', true, 'current');
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
delete node.selected;
|
canvasDoubleClickHandler(eventInfo.getPos(), e);
|
||||||
}
|
}//if
|
||||||
//trigger animation to final styles
|
}//onClick
|
||||||
Mconsole.fx.animate({
|
|
||||||
modes: ['node-property:dim',
|
|
||||||
'edge-property:lineWidth:color'],
|
|
||||||
duration: 500
|
|
||||||
});
|
|
||||||
// Build the right column relations list.
|
|
||||||
// This is done by traversing the clicked node connections.
|
|
||||||
var html =
|
|
||||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
|
||||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
|
||||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
|
||||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
|
||||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
|
||||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
|
||||||
|
|
||||||
//append connections information
|
|
||||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
|
||||||
$jit.id('item_' + node.id).innerHTML = html;
|
|
||||||
$("#showcard .scroll").mCustomScrollbar();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
//Number of iterations for the Mconsole algorithm
|
//Number of iterations for the FD algorithm
|
||||||
iterations: 200,
|
iterations: 200,
|
||||||
//Edge length
|
//Edge length
|
||||||
levelDistance: 200,
|
levelDistance: 200,
|
||||||
// Add text to the labels. This method is only triggered
|
// Add text to the labels. This method is only triggered
|
||||||
// on label creation and only for DOM labels (not native canvas ones).
|
// on label creation and only for DOM labels (not native canvas ones).
|
||||||
onCreateLabel: function (domElement, node) {
|
onCreateLabel: function (domElement, node) {
|
||||||
// Create a 'name' and 'close' buttons and add them
|
var html =
|
||||||
// to the main node label
|
'<div class="CardOnGraph" title="Click to Hide" id="item_' + node.id + '"><p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||||
domElement.innerHTML = '<div class="label">' + node.name + '</div>';
|
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||||
domElement.onclick = function () {
|
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||||
Mconsole.onClick(node.id, {
|
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||||
onComplete: function () {
|
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
||||||
var html =
|
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a></div>';
|
||||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
var showCard = document.createElement('div');
|
||||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
showCard.className = 'showcard item_' + node.id;
|
||||||
'<div class="scroll"><a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
showCard.innerHTML = html;
|
||||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
showCard.style.display = "none";
|
||||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div></div>' +
|
domElement.appendChild(showCard);
|
||||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
|
||||||
|
// add some events to the label
|
||||||
//append connections information
|
showCard.onclick = function(){
|
||||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
if (!Mconsole.busy) {
|
||||||
$jit.id('item_' + node.id).innerHTML = html;
|
delete node.selected;
|
||||||
$("#showcard .scroll").mCustomScrollbar();
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a 'name' button and add it
|
||||||
|
// to the main node label
|
||||||
|
var nameContainer = document.createElement('span'),
|
||||||
|
style = nameContainer.style;
|
||||||
|
nameContainer.className = 'name item_' + node.id;
|
||||||
|
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||||
|
domElement.appendChild(nameContainer);
|
||||||
|
style.fontSize = "0.9em";
|
||||||
|
style.color = "#222222";
|
||||||
|
|
||||||
|
// add some events to the label
|
||||||
|
nameContainer.onclick = function(){
|
||||||
|
if (!Mconsole.busy) {
|
||||||
|
selectNodeOnClickHandler(node);
|
||||||
|
Mconsole.onClick(node.id, {
|
||||||
|
hideLabels: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// Change node styles when DOM labels are placed
|
// Change node styles when DOM labels are placed
|
||||||
// or moved.
|
// or moved.
|
||||||
|
@ -328,9 +300,8 @@ function graphSettings(type) {
|
||||||
var left = parseInt(style.left);
|
var left = parseInt(style.left);
|
||||||
var top = parseInt(style.top);
|
var top = parseInt(style.top);
|
||||||
var w = domElement.offsetWidth;
|
var w = domElement.offsetWidth;
|
||||||
var dim = node.getData('dim');
|
|
||||||
style.left = (left - w / 2) + 'px';
|
style.left = (left - w / 2) + 'px';
|
||||||
style.top = (top + dim) + 'px';
|
style.top = (top+25) + 'px';
|
||||||
style.display = '';
|
style.display = '';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -410,7 +381,6 @@ function selectNodeOnClickHandler(node) {
|
||||||
$('.name').css('display','block');
|
$('.name').css('display','block');
|
||||||
$('.name.item_' + node.id).css('display','none');
|
$('.name.item_' + node.id).css('display','none');
|
||||||
$('.showcard.item_' + node.id).fadeIn('fast');
|
$('.showcard.item_' + node.id).fadeIn('fast');
|
||||||
Mconsole.plot();
|
|
||||||
|
|
||||||
//set final styles
|
//set final styles
|
||||||
Mconsole.graph.eachNode(function (n) {
|
Mconsole.graph.eachNode(function (n) {
|
||||||
|
@ -426,7 +396,8 @@ function selectNodeOnClickHandler(node) {
|
||||||
});
|
});
|
||||||
if (!node.selected) {
|
if (!node.selected) {
|
||||||
node.selected = true;
|
node.selected = true;
|
||||||
node.setData('dim', 1, 'current');
|
node.setData('dim', 1, 'current');
|
||||||
|
|
||||||
node.eachAdjacency(function (adj) {
|
node.eachAdjacency(function (adj) {
|
||||||
adj.setDataset('end', {
|
adj.setDataset('end', {
|
||||||
lineWidth: 3,
|
lineWidth: 3,
|
||||||
|
@ -458,6 +429,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
|
||||||
|
|
||||||
if (now - storedTime < TOLERANCE) {
|
if (now - storedTime < TOLERANCE) {
|
||||||
//pop up node creation :)
|
//pop up node creation :)
|
||||||
|
$('#item_grabItem').val("null");
|
||||||
document.getElementById('new_item').style.left = e.x + "px";
|
document.getElementById('new_item').style.left = e.x + "px";
|
||||||
document.getElementById('new_item').style.top = e.y + "px";
|
document.getElementById('new_item').style.top = e.y + "px";
|
||||||
$('#item_x').val(canvasLoc.x);
|
$('#item_x').val(canvasLoc.x);
|
||||||
|
|
|
@ -20,103 +20,21 @@
|
||||||
var viewMode = "list";
|
var viewMode = "list";
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
$('.sideOption').bind('click',function(){
|
/// this is for the topic creation autocomplete fielf
|
||||||
$('.sideOption').animate({
|
$('#item_name').bind('railsAutocomplete.select', function(event, data){
|
||||||
width: '245px',
|
if (data.item.id != undefined) {
|
||||||
height: '76px'
|
$('#item_grabItem').val(data.item.id);
|
||||||
}, 700, function() {
|
$('#new_item').submit();
|
||||||
$('#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');
|
|
||||||
if ( firstVal === 'selected') {
|
|
||||||
$('.find_topic_by_metacode').fadeOut('fast', function() {
|
|
||||||
showAll();
|
|
||||||
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
|
||||||
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 #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 #by_name_input').val('');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.find_topic_by_name').bind('submit', function(event, data){
|
|
||||||
event.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".focus .desc").mCustomScrollbar();
|
$(".focus .desc").mCustomScrollbar();
|
||||||
$(".scroll").mCustomScrollbar();
|
$(".scroll").mCustomScrollbar();
|
||||||
|
|
||||||
$('.nodemargin').css('padding-top',$('.focus').css('height'));
|
$('.nodemargin').css('padding-top',$('.focus').css('height'));
|
||||||
|
|
||||||
// controls the sliding hover of the filters
|
// controls the sliding hover of the menus at the top
|
||||||
var sliding1 = false;
|
var sliding1 = false;
|
||||||
$(".accountWrap").hover(
|
$(".accountWrap").hover(
|
||||||
function () {
|
function () {
|
||||||
|
@ -156,80 +74,6 @@ var viewMode = "list";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// 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');
|
|
||||||
|
|
||||||
var switchAll = $(this).attr('id');
|
|
||||||
|
|
||||||
if ( switchAll === "showAll" || switchAll === "hideAll") {
|
|
||||||
if (switchAll == "showAll") {
|
|
||||||
// this means that we are on a map view
|
|
||||||
if (obj != null) {
|
|
||||||
showAll();
|
|
||||||
}
|
|
||||||
// this means that we are on a card view
|
|
||||||
else {
|
|
||||||
$('.item').fadeIn('slow');
|
|
||||||
}
|
|
||||||
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff');
|
|
||||||
for (var catVis in categoryVisible) {
|
|
||||||
categoryVisible[catVis] = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (switchAll == "hideAll") {
|
|
||||||
// this means that we are on a map view
|
|
||||||
if (obj != null) {
|
|
||||||
hideAll();
|
|
||||||
}
|
|
||||||
// this means that we are on a card view
|
|
||||||
else {
|
|
||||||
$('.item').fadeOut('slow');
|
|
||||||
}
|
|
||||||
$('.find_topic_by_metacode ul li').not('#hideAll, #showAll').addClass('toggledOff');
|
|
||||||
for (var catVis in categoryVisible) {
|
|
||||||
categoryVisible[catVis] = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
var category = $(this).children('img').attr('alt');
|
|
||||||
|
|
||||||
// this means that we are on a map view
|
|
||||||
if (obj != null) {
|
|
||||||
switchVisible(category);
|
|
||||||
}
|
|
||||||
// this means that we are on a card view
|
|
||||||
else {
|
|
||||||
if (categoryVisible[category] == true) {
|
|
||||||
if (category.split(' ').length == 1) {
|
|
||||||
$('#cards .' + category).fadeOut('slow');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('#cards .' + category.split(' ')[0]).fadeOut('slow');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (categoryVisible[category] == false) {
|
|
||||||
if (category.split(' ').length == 1) {
|
|
||||||
$('#cards .' + category).fadeIn('slow');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('#cards .' + category.split(' ')[0]).fadeIn('slow');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 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 is to save the layout of maps
|
// this is to save the layout of maps
|
||||||
var coor = "";
|
var coor = "";
|
||||||
|
|
|
@ -1,130 +1,130 @@
|
||||||
/*
|
/*
|
||||||
* Unobtrusive autocomplete
|
* Unobtrusive autocomplete
|
||||||
*
|
*
|
||||||
* To use it, you just have to include the HTML attribute autocomplete
|
* To use it, you just have to include the HTML attribute autocomplete
|
||||||
* with the autocomplete URL as the value
|
* with the autocomplete URL as the value
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
* <input type="text" data-autocomplete="/url/to/autocomplete">
|
* <input type="text" data-autocomplete="/url/to/autocomplete">
|
||||||
*
|
*
|
||||||
* Optionally, you can use a jQuery selector to specify a field that can
|
* Optionally, you can use a jQuery selector to specify a field that can
|
||||||
* be updated with the element id whenever you find a matching value
|
* be updated with the element id whenever you find a matching value
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
* <input type="text" data-autocomplete="/url/to/autocomplete" data-id-element="#id_field">
|
* <input type="text" data-autocomplete="/url/to/autocomplete" data-id-element="#id_field">
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function(jQuery)
|
(function(jQuery)
|
||||||
{
|
{
|
||||||
var self = null;
|
var self = null;
|
||||||
jQuery.fn.railsAutocomplete = function() {
|
jQuery.fn.railsAutocomplete = function() {
|
||||||
return this.live('focus',function() {
|
return this.live('focus',function() {
|
||||||
if (!this.railsAutoCompleter) {
|
if (!this.railsAutoCompleter) {
|
||||||
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
|
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
jQuery.railsAutocomplete = function (e) {
|
jQuery.railsAutocomplete = function (e) {
|
||||||
_e = e;
|
_e = e;
|
||||||
this.init(_e);
|
this.init(_e);
|
||||||
};
|
};
|
||||||
|
|
||||||
jQuery.railsAutocomplete.fn = jQuery.railsAutocomplete.prototype = {
|
jQuery.railsAutocomplete.fn = jQuery.railsAutocomplete.prototype = {
|
||||||
railsAutocomplete: '0.0.1'
|
railsAutocomplete: '0.0.1'
|
||||||
};
|
};
|
||||||
|
|
||||||
jQuery.railsAutocomplete.fn.extend = jQuery.railsAutocomplete.extend = jQuery.extend;
|
jQuery.railsAutocomplete.fn.extend = jQuery.railsAutocomplete.extend = jQuery.extend;
|
||||||
jQuery.railsAutocomplete.fn.extend({
|
jQuery.railsAutocomplete.fn.extend({
|
||||||
init: function(e) {
|
init: function(e) {
|
||||||
e.delimiter = jQuery(e).attr('data-delimiter') || null;
|
e.delimiter = jQuery(e).attr('data-delimiter') || null;
|
||||||
function split( val ) {
|
function split( val ) {
|
||||||
return val.split( e.delimiter );
|
return val.split( e.delimiter );
|
||||||
}
|
}
|
||||||
function extractLast( term ) {
|
function extractLast( term ) {
|
||||||
return split( term ).pop().replace(/^\s+/,"");
|
return split( term ).pop().replace(/^\s+/,"");
|
||||||
}
|
}
|
||||||
|
|
||||||
jQuery(e).autocomplete({
|
jQuery(e).autocomplete({
|
||||||
source: function( request, response ) {
|
source: function( request, response ) {
|
||||||
jQuery.getJSON( jQuery(e).attr('data-autocomplete'), {
|
jQuery.getJSON( jQuery(e).attr('data-autocomplete'), {
|
||||||
term: extractLast( request.term )
|
term: extractLast( request.term )
|
||||||
}, function() {
|
}, function() {
|
||||||
if(arguments[0].length == 0) {
|
if(arguments[0].length == 0) {
|
||||||
arguments[0] = []
|
arguments[0] = []
|
||||||
arguments[0][0] = { id: "", label: "no existing match" }
|
//arguments[0][0] = { id: "", label: "no existing match" }
|
||||||
}
|
}
|
||||||
jQuery(arguments[0]).each(function(i, el) {
|
jQuery(arguments[0]).each(function(i, el) {
|
||||||
var obj = {};
|
var obj = {};
|
||||||
obj[el.id] = el;
|
obj[el.id] = el;
|
||||||
jQuery(e).data(obj);
|
jQuery(e).data(obj);
|
||||||
});
|
});
|
||||||
response.apply(null, arguments);
|
response.apply(null, arguments);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
change: function( event, ui ) {
|
change: function( event, ui ) {
|
||||||
if(jQuery(jQuery(this).attr('data-id-element')).val() == "") {
|
if(jQuery(jQuery(this).attr('data-id-element')).val() == "") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
jQuery(jQuery(this).attr('data-id-element')).val(ui.item ? ui.item.id : "");
|
jQuery(jQuery(this).attr('data-id-element')).val(ui.item ? ui.item.id : "");
|
||||||
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
|
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
|
||||||
var data = ui.item ? jQuery(this).data(ui.item.id.toString()) : {};
|
var data = ui.item ? jQuery(this).data(ui.item.id.toString()) : {};
|
||||||
if(update_elements && jQuery(update_elements['id']).val() == "") {
|
if(update_elements && jQuery(update_elements['id']).val() == "") {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
for (var key in update_elements) {
|
for (var key in update_elements) {
|
||||||
jQuery(update_elements[key]).val(ui.item ? data[key] : "");
|
jQuery(update_elements[key]).val(ui.item ? data[key] : "");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
search: function() {
|
search: function() {
|
||||||
// custom minLength
|
// custom minLength
|
||||||
var term = extractLast( this.value );
|
var term = extractLast( this.value );
|
||||||
if ( term.length < 2 ) {
|
if ( term.length < 2 ) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
focus: function() {
|
focus: function() {
|
||||||
// prevent value inserted on focus
|
// prevent value inserted on focus
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
select: function( event, ui ) {
|
select: function( event, ui ) {
|
||||||
var terms = split( this.value );
|
var terms = split( this.value );
|
||||||
// remove the current input
|
// remove the current input
|
||||||
terms.pop();
|
terms.pop();
|
||||||
// add the selected item
|
// add the selected item
|
||||||
terms.push( ui.item.value );
|
terms.push( ui.item.value );
|
||||||
// add placeholder to get the comma-and-space at the end
|
// add placeholder to get the comma-and-space at the end
|
||||||
if (e.delimiter != null) {
|
if (e.delimiter != null) {
|
||||||
terms.push( "" );
|
terms.push( "" );
|
||||||
this.value = terms.join( e.delimiter );
|
this.value = terms.join( e.delimiter );
|
||||||
} else {
|
} else {
|
||||||
this.value = terms.join("");
|
this.value = terms.join("");
|
||||||
if (jQuery(this).attr('data-id-element')) {
|
if (jQuery(this).attr('data-id-element')) {
|
||||||
jQuery(jQuery(this).attr('data-id-element')).val(ui.item.id);
|
jQuery(jQuery(this).attr('data-id-element')).val(ui.item.id);
|
||||||
}
|
}
|
||||||
if (jQuery(this).attr('data-update-elements')) {
|
if (jQuery(this).attr('data-update-elements')) {
|
||||||
var data = jQuery(this).data(ui.item.id.toString());
|
var data = jQuery(this).data(ui.item.id.toString());
|
||||||
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
|
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
|
||||||
for (var key in update_elements) {
|
for (var key in update_elements) {
|
||||||
jQuery(update_elements[key]).val(data[key]);
|
jQuery(update_elements[key]).val(data[key]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var remember_string = this.value;
|
var remember_string = this.value;
|
||||||
jQuery(this).bind('keyup.clearId', function(){
|
jQuery(this).bind('keyup.clearId', function(){
|
||||||
if(jQuery(this).val().trim() != remember_string.trim()){
|
if(jQuery(this).val().trim() != remember_string.trim()){
|
||||||
jQuery(jQuery(this).attr('data-id-element')).val("");
|
jQuery(jQuery(this).attr('data-id-element')).val("");
|
||||||
jQuery(this).unbind('keyup.clearId');
|
jQuery(this).unbind('keyup.clearId');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
jQuery(e).trigger('railsAutocomplete.select', ui);
|
jQuery(e).trigger('railsAutocomplete.select', ui);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
jQuery(document).ready(function(){
|
jQuery(document).ready(function(){
|
||||||
jQuery('input[data-autocomplete]').railsAutocomplete();
|
jQuery('input[data-autocomplete]').railsAutocomplete();
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
|
@ -129,7 +129,8 @@ border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
.sideOption .spacer { margin:10px 10px 0; }
|
.sideOption .spacer { margin:10px 10px 0; }
|
||||||
.sideOption .find_key { margin-right:8px; }
|
.sideOption .find_key { margin-right:8px; }
|
||||||
.find_topic_by_name { display: block; }
|
.find_topic_by_name { display: block; }
|
||||||
.find_topic_by_name input {
|
|
||||||
|
.find_topic_by_name input, .find_map_by_name input, .find_mapper_by_name input {
|
||||||
margin:10px 0 0 0;
|
margin:10px 0 0 0;
|
||||||
width: 207px;
|
width: 207px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -138,6 +139,8 @@ border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.find_mapper_by_name, .find_map_by_name { display:none; }
|
||||||
|
|
||||||
.find_topic_by_metacode { z-index:12; display:none; width:auto; color: #67AF9F; }
|
.find_topic_by_metacode { z-index:12; display:none; width:auto; color: #67AF9F; }
|
||||||
.find_topic_by_metacode ul { display:block; }
|
.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 li {clear:both; list-style-type:none; display:block; padding:3px; }
|
||||||
|
|
|
@ -48,45 +48,40 @@ class ItemsController < ApplicationController
|
||||||
def create
|
def create
|
||||||
|
|
||||||
@user = current_user
|
@user = current_user
|
||||||
|
|
||||||
@addtomap = false
|
# if the topic exists grab it and return it
|
||||||
|
if params[:item][:grabItem] != "null"
|
||||||
if params[:initem]
|
@item = Item.find(params[:item][:grabItem])
|
||||||
if params[:initem] != ""
|
# if the topic doesn't exist yet, create it
|
||||||
@addtomap = true
|
else
|
||||||
@itemid = params[:initem]
|
@item = Item.new()
|
||||||
end
|
@item.name = params[:item][:name]
|
||||||
end
|
@item.desc = ""
|
||||||
|
@item.link = ""
|
||||||
if @addtomap
|
@item.permission = 'commons'
|
||||||
@item = Item.find(@itemid)
|
@item.item_category = ItemCategory.all.first
|
||||||
else
|
#@item.item_category = ItemCategory.find(params[:category])
|
||||||
@item = Item.new()
|
@item.user = @user
|
||||||
@item.name = params[:item][:name]
|
|
||||||
@item.desc = ""
|
|
||||||
@item.link = ""
|
|
||||||
@item.permission = 'commons'
|
|
||||||
@item.item_category = ItemCategory.all.first
|
|
||||||
#@item.item_category = ItemCategory.find(params[:category])
|
|
||||||
@item.user = @user
|
|
||||||
|
|
||||||
@item.save
|
@item.save
|
||||||
end
|
end
|
||||||
|
|
||||||
|
# also create an object to return the position to the canvas
|
||||||
@position = Hash.new()
|
@position = Hash.new()
|
||||||
@position['x'] = params[:item][:x]
|
@position['x'] = params[:item][:x]
|
||||||
@position['y'] = params[:item][:y]
|
@position['y'] = params[:item][:y]
|
||||||
|
|
||||||
@mapping = Mapping.new()
|
# set this for the case where the item is being created on a map.
|
||||||
if params[:item][:map]
|
@mapping = Mapping.new()
|
||||||
@mapping.category = "Item"
|
if params[:item][:map]
|
||||||
@mapping.user = @user
|
@mapping.category = "Item"
|
||||||
@mapping.map = Map.find(params[:item][:map])
|
@mapping.user = @user
|
||||||
@mapping.item = @item
|
@mapping.map = Map.find(params[:item][:map])
|
||||||
@mapping.xloc = 0
|
@mapping.item = @item
|
||||||
@mapping.yloc = 0
|
@mapping.xloc = params[:item][:x]
|
||||||
@mapping.save
|
@mapping.yloc = params[:item][:y]
|
||||||
end
|
@mapping.save
|
||||||
|
end
|
||||||
|
|
||||||
respond_to do |format|
|
respond_to do |format|
|
||||||
format.html { respond_with(@user, location: user_item_url(@user, @item)) }
|
format.html { respond_with(@user, location: user_item_url(@user, @item)) }
|
||||||
|
|
|
@ -11,7 +11,7 @@ class MainController < ApplicationController
|
||||||
@current = current_user
|
@current = current_user
|
||||||
|
|
||||||
if authenticated?
|
if authenticated?
|
||||||
@items = all_as_json(@current, @current).html_safe
|
@items = Item.all.first.self_as_json.html_safe
|
||||||
|
|
||||||
respond_to do |format|
|
respond_to do |format|
|
||||||
format.html { respond_with(@current) }
|
format.html { respond_with(@current) }
|
||||||
|
|
|
@ -4,6 +4,8 @@ class MapsController < ApplicationController
|
||||||
|
|
||||||
respond_to :html, :js, :json
|
respond_to :html, :js, :json
|
||||||
|
|
||||||
|
autocomplete :map, :name, :full => true, :extra_data => [:user_id]
|
||||||
|
|
||||||
# GET /users/:user_id/maps
|
# GET /users/:user_id/maps
|
||||||
def index
|
def index
|
||||||
@user = User.find(params[:user_id])
|
@user = User.find(params[:user_id])
|
||||||
|
|
|
@ -5,6 +5,8 @@ class UsersController < ApplicationController
|
||||||
|
|
||||||
respond_to :html, :json
|
respond_to :html, :json
|
||||||
|
|
||||||
|
autocomplete :user, :name, :full => true
|
||||||
|
|
||||||
# GET /user/new
|
# GET /user/new
|
||||||
def new
|
def new
|
||||||
@user = User.new
|
@user = User.new
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<div class="anypage">
|
<div class="anypage">
|
||||||
<%= form_for Item.new, url: user_items_url(user), remote: true do |form| %>
|
<%= form_for Item.new, url: user_items_url(user), remote: true do |form| %>
|
||||||
<%= form.text_field :name %>
|
<%= form.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "What is the name of your topic?" %>
|
||||||
<%= form.hidden_field :x, :value => 0 %>
|
<%= form.hidden_field :x, :value => 0 %>
|
||||||
<%= form.hidden_field :y, :value => 0 %>
|
<%= form.hidden_field :y, :value => 0 %>
|
||||||
|
<%= form.hidden_field :grabItem, :value => "null" %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
$('#new_item').fadeOut('fast');
|
$('#new_item').fadeOut('fast');
|
||||||
$('#new_item')[0].reset();
|
$('#item_name').data().autocomplete.term = null;
|
||||||
|
$('.ui-autocomplete').children().remove();
|
||||||
|
$('.ui-autocomplete').css('display','none');
|
||||||
|
$('#item_name').attr('value','');
|
||||||
|
|
||||||
if(viewMode == "graph") {
|
if(viewMode == "graph") {
|
||||||
var newnode = <%= @item.self_as_json.html_safe %>;
|
var newnode = <%= @item.self_as_json.html_safe %>;
|
||||||
|
@ -9,6 +12,12 @@ if(viewMode == "graph") {
|
||||||
|
|
||||||
if (Mconsole != null) {
|
if (Mconsole != null) {
|
||||||
Mconsole.graph.addNode(newnode);
|
Mconsole.graph.addNode(newnode);
|
||||||
|
|
||||||
|
// set the animation for everything back to normal
|
||||||
|
Mconsole.graph.eachNode( function (n) {
|
||||||
|
n.setData('dim', 25, 'start');
|
||||||
|
n.setData('dim', 25, 'end');
|
||||||
|
});
|
||||||
var temp = Mconsole.graph.getNode('<%= @item.id %>');
|
var temp = Mconsole.graph.getNode('<%= @item.id %>');
|
||||||
temp.setData('dim', 1, 'start');
|
temp.setData('dim', 1, 'start');
|
||||||
temp.setData('dim', 40, 'end');
|
temp.setData('dim', 40, 'end');
|
||||||
|
@ -37,12 +46,8 @@ if(viewMode == "graph") {
|
||||||
json = newnode;
|
json = newnode;
|
||||||
initialize("chaotic");
|
initialize("chaotic");
|
||||||
}
|
}
|
||||||
// add the new node to the synapse select lists
|
|
||||||
$("#node1_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
|
|
||||||
$("#node2_id").prepend("<option value='<%= @item.id %>'><%= @item.name %></option>");
|
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
|
$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
|
||||||
$(".scroll").mCustomScrollbar();
|
$(".scroll").mCustomScrollbar();
|
||||||
}
|
}
|
|
@ -20,8 +20,6 @@
|
||||||
<div id="center-container">
|
<div id="center-container">
|
||||||
<div id="infovis"></div>
|
<div id="infovis"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="showcard">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfloat"></div>
|
<div class="clearfloat"></div>
|
||||||
|
|
||||||
|
|
|
@ -12,6 +12,8 @@
|
||||||
<%= javascript_include_tag "application" %>
|
<%= javascript_include_tag "application" %>
|
||||||
<script type="text/javascript" src="//use.typekit.net/tki2nyo.js"></script>
|
<script type="text/javascript" src="//use.typekit.net/tki2nyo.js"></script>
|
||||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||||
|
<script type="text/javascript" src="//use.typekit.net/obp7wss.js"></script>
|
||||||
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||||
<%= csrf_meta_tags %>
|
<%= csrf_meta_tags %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -55,66 +57,7 @@
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span id="closeFind">close</span>
|
<div class="footer">
|
||||||
<div class="sideOption" id="sideOptionFind">
|
|
||||||
<span class="find_key">Find...</span>
|
|
||||||
<select class="select_content">
|
|
||||||
<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" 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, :id => "by_name_input", :placeholder => "Search for topics..." %>
|
|
||||||
<% end %>
|
|
||||||
<div class="find_topic_by_metacode" id="find_topic_by_metacode">
|
|
||||||
<ul id="filters-one">
|
|
||||||
<li id="showAll">Show All</li>
|
|
||||||
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
|
|
||||||
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
|
|
||||||
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
|
|
||||||
<li><img src="/assets/catalyst.png" alt="Catalyst" /><p>catalyst</p></li>
|
|
||||||
<li><img src="/assets/closed.png" alt="Closed" /><p>closed</p></li>
|
|
||||||
<li><img src="/assets/experience.png" alt="Experience" /><p>experience</p></li>
|
|
||||||
<li><img src="/assets/futuredev.png" alt="Future Dev" /><p>future dev</p></li>
|
|
||||||
<li><img src="/assets/group.png" alt="Group" /><p>group</p></li>
|
|
||||||
<li><img src="/assets/idea.png" alt="Idea" /><p>idea</p></li>
|
|
||||||
</ul>
|
|
||||||
<ul id="filters-two">
|
|
||||||
<li id="hideAll">Hide All</li>
|
|
||||||
<li><img src="/assets/implication.png" alt="Implication" /><p>implication</p></li>
|
|
||||||
<li><img src="/assets/insight.png" alt="Insight" /><p>insight</p></li>
|
|
||||||
<li><img src="/assets/intention.png" alt="Intention" /><p>intention</p></li>
|
|
||||||
<li><img src="/assets/knowledge.png" alt="Knowledge" /><p>knowledge</p></li>
|
|
||||||
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
|
|
||||||
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
|
|
||||||
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
|
|
||||||
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
|
|
||||||
<li><img src="/assets/person.png" alt="Person" /><p>person</p></li>
|
|
||||||
</ul>
|
|
||||||
<ul id="filters-three">
|
|
||||||
<li><img src="/assets/platform.png" alt="Platform" /><p>platform</p></li>
|
|
||||||
<li><img src="/assets/problem.png" alt="Problem" /><p>problem</p></li>
|
|
||||||
<li><img src="/assets/question.png" alt="Question" /><p>question</p></li>
|
|
||||||
<li><img src="/assets/reference.png" alt="Reference" /><p>reference</p></li>
|
|
||||||
<li><img src="/assets/requirement.png" alt="Requirement" /><p>requirement</p></li>
|
|
||||||
<li><img src="/assets/resource.png" alt="Resource" /><p>resource</p></li>
|
|
||||||
<li><img src="/assets/role.png" alt="Role" /><p>role</p></li>
|
|
||||||
<li><img src="/assets/task.png" alt="Task" /><p>task</p></li>
|
|
||||||
<li><img src="/assets/tool.png" alt="Tool" /><p>tool</p></li>
|
|
||||||
<li><img src="/assets/trajectory.png" alt="Trajectory" /><p>trajectory</p></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<div class="logo"><h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div></div>
|
<div class="logo"><h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -50,14 +50,78 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
<script>
|
<script>
|
||||||
json = <%= @items %>;
|
json = <%= @items %>;
|
||||||
if (json.length > 0) {
|
//if (json.length > 0) {
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
initialize("chaotic");
|
initialize("chaotic");
|
||||||
});
|
});
|
||||||
}
|
//}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<% else %>
|
<% else %>
|
||||||
<h1><br>Shucks, there are no maps.<h1>
|
<h1><br>Shucks, there are no maps.<h1>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
|
<span id="closeFind">close</span>
|
||||||
|
<div class="sideOption" id="sideOptionFind">
|
||||||
|
<span class="find_key">Find...</span>
|
||||||
|
<select class="select_content">
|
||||||
|
<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" selected="selected">Name</option>
|
||||||
|
<option value="metacode">Metacode</option>
|
||||||
|
</select>
|
||||||
|
<div class="clearfloat"></div>
|
||||||
|
<%= form_for Item.new, :html => { :class => "find_topic_by_name find find_topic", :id => "find_topic_by_name" } do |f| %>
|
||||||
|
<%= f.autocomplete_field :name, autocomplete_item_name_items_path, :id => "topic_by_name_input", :placeholder => "Search for topics..." %>
|
||||||
|
<% end %>
|
||||||
|
<%= form_for Map.new, :html => { :class => "find_map_by_name find", :id => "find_map_by_name" } do |f| %>
|
||||||
|
<%= f.autocomplete_field :name, autocomplete_map_name_maps_path, :id => "map_by_name_input", :placeholder => "Search for maps..." %>
|
||||||
|
<% end %>
|
||||||
|
<%= form_for User.new, :html => { :class => "find_mapper_by_name find", :id => "find_mapper_by_name" } do |f| %>
|
||||||
|
<%= f.autocomplete_field :name, autocomplete_user_name_users_path, :id => "mapper_by_name_input", :placeholder => "Search for mappers..." %>
|
||||||
|
<% end %>
|
||||||
|
<div class="find_topic_by_metacode find find_topic" id="find_topic_by_metacode">
|
||||||
|
<ul id="filters-one">
|
||||||
|
<li id="showAll">Show All</li>
|
||||||
|
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
|
||||||
|
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
|
||||||
|
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
|
||||||
|
<li><img src="/assets/catalyst.png" alt="Catalyst" /><p>catalyst</p></li>
|
||||||
|
<li><img src="/assets/closed.png" alt="Closed" /><p>closed</p></li>
|
||||||
|
<li><img src="/assets/experience.png" alt="Experience" /><p>experience</p></li>
|
||||||
|
<li><img src="/assets/futuredev.png" alt="Future Dev" /><p>future dev</p></li>
|
||||||
|
<li><img src="/assets/group.png" alt="Group" /><p>group</p></li>
|
||||||
|
<li><img src="/assets/idea.png" alt="Idea" /><p>idea</p></li>
|
||||||
|
</ul>
|
||||||
|
<ul id="filters-two">
|
||||||
|
<li id="hideAll">Hide All</li>
|
||||||
|
<li><img src="/assets/implication.png" alt="Implication" /><p>implication</p></li>
|
||||||
|
<li><img src="/assets/insight.png" alt="Insight" /><p>insight</p></li>
|
||||||
|
<li><img src="/assets/intention.png" alt="Intention" /><p>intention</p></li>
|
||||||
|
<li><img src="/assets/knowledge.png" alt="Knowledge" /><p>knowledge</p></li>
|
||||||
|
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
|
||||||
|
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
|
||||||
|
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
|
||||||
|
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
|
||||||
|
<li><img src="/assets/person.png" alt="Person" /><p>person</p></li>
|
||||||
|
</ul>
|
||||||
|
<ul id="filters-three">
|
||||||
|
<li><img src="/assets/platform.png" alt="Platform" /><p>platform</p></li>
|
||||||
|
<li><img src="/assets/problem.png" alt="Problem" /><p>problem</p></li>
|
||||||
|
<li><img src="/assets/question.png" alt="Question" /><p>question</p></li>
|
||||||
|
<li><img src="/assets/reference.png" alt="Reference" /><p>reference</p></li>
|
||||||
|
<li><img src="/assets/requirement.png" alt="Requirement" /><p>requirement</p></li>
|
||||||
|
<li><img src="/assets/resource.png" alt="Resource" /><p>resource</p></li>
|
||||||
|
<li><img src="/assets/role.png" alt="Role" /><p>role</p></li>
|
||||||
|
<li><img src="/assets/task.png" alt="Task" /><p>task</p></li>
|
||||||
|
<li><img src="/assets/tool.png" alt="Tool" /><p>tool</p></li>
|
||||||
|
<li><img src="/assets/trajectory.png" alt="Trajectory" /><p>trajectory</p></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,29 +1,9 @@
|
||||||
<div class="anypage mapspages">
|
<div class="anypage">
|
||||||
<%= form_for Item.new, url: user_items_url(user), remote: true do |form| %>
|
<%= form_for Item.new, url: user_items_url(user), remote: true do |form| %>
|
||||||
<button id="closenewtopic" onclick="$('#new_item').fadeOut('fast'); $('#new_item')[0].reset(); return false;">close</button>
|
<%= form.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "What is the name of your topic?" %>
|
||||||
<div class="selecttype">
|
<%= form.hidden_field :x, :value => 0 %>
|
||||||
<h3 onclick="$('.existingtopic').fadeOut('fast', function () { $('.newtopic').fadeIn('fast'); });" style="border-right:1px solid #000;">Add New Topic</h3>
|
<%= form.hidden_field :y, :value => 0 %>
|
||||||
<h3 onclick="$('.newtopic').fadeOut('fast', function () { $('.existingtopic').fadeIn('fast'); });">Add Existing Topic</h3>
|
<%= form.hidden_field :map, :value => @map.id %>
|
||||||
<div style="clear:both;"></div>
|
<%= form.hidden_field :grabItem, :value => "null" %>
|
||||||
</div>
|
|
||||||
<div class="newtopic">
|
|
||||||
<label for="category">Category</label>
|
|
||||||
<%= select_tag "category", options_from_collection_for_select(ItemCategory.order("name ASC").all, "id", "name") %>
|
|
||||||
<label for="item_name">Title</label>
|
|
||||||
<%= form.text_field :name %>
|
|
||||||
<label for="item_desc">Description</label>
|
|
||||||
<%= form.text_area :desc, class: "description", :rows => 5 %>
|
|
||||||
<label for="item_link">Link</label>
|
|
||||||
<%= form.text_field :link, class: "link" %>
|
|
||||||
<label for="item_permission">Permission</label>
|
|
||||||
<%= form.select(:permission, options_for_select(['commons', 'public', 'private'])) %>
|
|
||||||
<%= form.hidden_field :map, :value => @map.id %>
|
|
||||||
<%= form.submit "Add Topic", class: "addTopic", id: "addTopic" %>
|
|
||||||
</div>
|
|
||||||
<div class="existingtopic" style="display:none;" >
|
|
||||||
<label for="initem">Select Topic To Add</label>
|
|
||||||
<%= select_tag "initem", options_from_collection_for_select(Item.order("name ASC").visibleToUser(user, nil).delete_if{|item| @map.items.include?(item)}, "id", "name"), {:include_blank => true} %>
|
|
||||||
<%= form.submit "Add Topic", class: "addTopic", id: "addTopic" %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
|
@ -15,7 +15,12 @@ ISSAD::Application.routes.draw do
|
||||||
get :autocomplete_item_name, :on => :collection
|
get :autocomplete_item_name, :on => :collection
|
||||||
end
|
end
|
||||||
|
|
||||||
|
resources :maps do
|
||||||
|
get :autocomplete_map_name, :on => :collection
|
||||||
|
end
|
||||||
|
|
||||||
resources :users do
|
resources :users do
|
||||||
|
get :autocomplete_user_name, :on => :collection
|
||||||
resources :items
|
resources :items
|
||||||
resources :synapses
|
resources :synapses
|
||||||
resources :maps
|
resources :maps
|
||||||
|
|
Loading…
Reference in a new issue