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

got Rgraph working

Browse source
This commit is contained in:
Connor Turland 2012-12-16 15:00:43 -05:00
parent 66a6e22854
commit 3931fdd40e
16 changed files with 571 additions and 532 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

225
app/assets/javascripts/Jit/filters.js
View file

@ -104,3 +104,228 @@ function showAll(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;
}
}
});
});

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

@ -41,21 +41,7 @@ function graphSettings(type) {
//Add Tips
Tips: {
enable: false,
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();
}
onShow: function (tip, node) {}
},
// Add node events
Events: {
@ -142,12 +128,7 @@ function graphSettings(type) {
// add some events to the label
nameContainer.onclick = function(){
node.setData('dim', 1, 'current');
$('.showcard').css('display','none');
$('.name').css('display','block');
$('.name.item_' + node.id).css('display','none');
$('.showcard.item_' + node.id).fadeIn('fast');
Mconsole.plot();
selectNodeOnClickHandler(node)
}
},
// Change node styles when DOM labels are placed
@ -209,16 +190,8 @@ function graphSettings(type) {
},
//Add Tips
Tips: {
enable: true,
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>";
}
enable: false,
onShow: function (tip, node) {}
},
// Add node events
Events: {
@ -226,10 +199,10 @@ function graphSettings(type) {
type: 'HTML',
//Change cursor style when hovering a node
onMouseEnter: function () {
//Mconsole.canvas.getElement().style.cursor = 'move';
},
onMouseLeave: function () {
//Mconsole.canvas.getElement().style.cursor = '';
},
//Update node positions when dragged
onDragMove: function (node, eventInfo, e) {
@ -243,83 +216,82 @@ function graphSettings(type) {
this.onDragMove(node, eventInfo, e);
},
//Add also a click handler to nodes
onClick: function (node) {
if (!node) return;
//set final styles
Mconsole.graph.eachNode(function (n) {
if (n.id != node.id) delete n.selected;
n.setData('dim', 25, 'end');
n.eachAdjacency(function (adj) {
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');
});
onClick: function (node, eventInfo, e) {
//clicking on a node, or clicking on blank part of canvas?
if (node) {
if (!Mconsole.busy) {
selectNodeOnClickHandler(node);
Mconsole.onClick(node.id, {
hideLabels: false
});
}
} else {
delete node.selected;
}
//trigger animation to final styles
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();
}
canvasDoubleClickHandler(eventInfo.getPos(), e);
}//if
}//onClick
},
//Number of iterations for the Mconsole algorithm
//Number of iterations for the FD algorithm
iterations: 200,
//Edge length
levelDistance: 200,
// Add text to the labels. This method is only triggered
// on label creation and only for DOM labels (not native canvas ones).
onCreateLabel: function (domElement, node) {
// Create a 'name' and 'close' buttons and add them
// to the main node label
domElement.innerHTML = '<div class="label">' + node.name + '</div>';
domElement.onclick = function () {
Mconsole.onClick(node.id, {
onComplete: function () {
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();
}
});
}
var html =
'<div class="CardOnGraph" title="Click to Hide" id="item_' + node.id + '"><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></div>';
var showCard = document.createElement('div');
showCard.className = 'showcard item_' + node.id;
showCard.innerHTML = html;
showCard.style.display = "none";
domElement.appendChild(showCard);
// add some events to the label
showCard.onclick = function(){
if (!Mconsole.busy) {
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();
});
}
}
// 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
// or moved.
@ -328,9 +300,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 = '';
}
};
@ -410,7 +381,6 @@ function selectNodeOnClickHandler(node) {
$('.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) {
@ -426,7 +396,8 @@ function selectNodeOnClickHandler(node) {
});
if (!node.selected) {
node.selected = true;
node.setData('dim', 1, 'current');
node.setData('dim', 1, 'current');
node.eachAdjacency(function (adj) {
adj.setDataset('end', {
lineWidth: 3,
@ -458,6 +429,7 @@ function canvasDoubleClickHandler(canvasLoc,e) {
if (now - storedTime < TOLERANCE) {
//pop up node creation :)
$('#item_grabItem').val("null");
document.getElementById('new_item').style.left = e.x + "px";
document.getElementById('new_item').style.top = e.y + "px";
$('#item_x').val(canvasLoc.x);

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

@ -20,103 +20,21 @@
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');
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('');
/// this is for the topic creation autocomplete fielf
$('#item_name').bind('railsAutocomplete.select', function(event, data){
if (data.item.id != undefined) {
$('#item_grabItem').val(data.item.id);
$('#new_item').submit();
}
});
$('.find_topic_by_name').bind('submit', function(event, data){
event.preventDefault();
});
$(".focus .desc").mCustomScrollbar();
$(".scroll").mCustomScrollbar();
$('.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;
$(".accountWrap").hover(
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
var coor = "";

260
app/assets/javascripts/autocomplete-rails-uncompressed.js
View file

@ -1,130 +1,130 @@
/*
* Unobtrusive autocomplete
*
* To use it, you just have to include the HTML attribute autocomplete
* with the autocomplete URL as the value
*
* Example:
* <input type="text" data-autocomplete="/url/to/autocomplete">
*
* 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
*
* Example:
* <input type="text" data-autocomplete="/url/to/autocomplete" data-id-element="#id_field">
*/
(function(jQuery)
{
var self = null;
jQuery.fn.railsAutocomplete = function() {
return this.live('focus',function() {
if (!this.railsAutoCompleter) {
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
}
});
};
jQuery.railsAutocomplete = function (e) {
_e = e;
this.init(_e);
};
jQuery.railsAutocomplete.fn = jQuery.railsAutocomplete.prototype = {
railsAutocomplete: '0.0.1'
};
jQuery.railsAutocomplete.fn.extend = jQuery.railsAutocomplete.extend = jQuery.extend;
jQuery.railsAutocomplete.fn.extend({
init: function(e) {
e.delimiter = jQuery(e).attr('data-delimiter') || null;
function split( val ) {
return val.split( e.delimiter );
}
function extractLast( term ) {
return split( term ).pop().replace(/^\s+/,"");
}
jQuery(e).autocomplete({
source: function( request, response ) {
jQuery.getJSON( jQuery(e).attr('data-autocomplete'), {
term: extractLast( request.term )
}, function() {
if(arguments[0].length == 0) {
arguments[0] = []
arguments[0][0] = { id: "", label: "no existing match" }
}
jQuery(arguments[0]).each(function(i, el) {
var obj = {};
obj[el.id] = el;
jQuery(e).data(obj);
});
response.apply(null, arguments);
});
},
change: function( event, ui ) {
if(jQuery(jQuery(this).attr('data-id-element')).val() == "") {
return;
}
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 data = ui.item ? jQuery(this).data(ui.item.id.toString()) : {};
if(update_elements && jQuery(update_elements['id']).val() == "") {
return;
}
for (var key in update_elements) {
jQuery(update_elements[key]).val(ui.item ? data[key] : "");
}
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
if (e.delimiter != null) {
terms.push( "" );
this.value = terms.join( e.delimiter );
} else {
this.value = terms.join("");
if (jQuery(this).attr('data-id-element')) {
jQuery(jQuery(this).attr('data-id-element')).val(ui.item.id);
}
if (jQuery(this).attr('data-update-elements')) {
var data = jQuery(this).data(ui.item.id.toString());
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
for (var key in update_elements) {
jQuery(update_elements[key]).val(data[key]);
}
}
}
var remember_string = this.value;
jQuery(this).bind('keyup.clearId', function(){
if(jQuery(this).val().trim() != remember_string.trim()){
jQuery(jQuery(this).attr('data-id-element')).val("");
jQuery(this).unbind('keyup.clearId');
}
});
jQuery(e).trigger('railsAutocomplete.select', ui);
return false;
}
});
}
});
jQuery(document).ready(function(){
jQuery('input[data-autocomplete]').railsAutocomplete();
});
})(jQuery);
/*
* Unobtrusive autocomplete
*
* To use it, you just have to include the HTML attribute autocomplete
* with the autocomplete URL as the value
*
* Example:
* <input type="text" data-autocomplete="/url/to/autocomplete">
*
* 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
*
* Example:
* <input type="text" data-autocomplete="/url/to/autocomplete" data-id-element="#id_field">
*/
(function(jQuery)
{
var self = null;
jQuery.fn.railsAutocomplete = function() {
return this.live('focus',function() {
if (!this.railsAutoCompleter) {
this.railsAutoCompleter = new jQuery.railsAutocomplete(this);
}
});
};
jQuery.railsAutocomplete = function (e) {
_e = e;
this.init(_e);
};
jQuery.railsAutocomplete.fn = jQuery.railsAutocomplete.prototype = {
railsAutocomplete: '0.0.1'
};
jQuery.railsAutocomplete.fn.extend = jQuery.railsAutocomplete.extend = jQuery.extend;
jQuery.railsAutocomplete.fn.extend({
init: function(e) {
e.delimiter = jQuery(e).attr('data-delimiter') || null;
function split( val ) {
return val.split( e.delimiter );
}
function extractLast( term ) {
return split( term ).pop().replace(/^\s+/,"");
}
jQuery(e).autocomplete({
source: function( request, response ) {
jQuery.getJSON( jQuery(e).attr('data-autocomplete'), {
term: extractLast( request.term )
}, function() {
if(arguments[0].length == 0) {
arguments[0] = []
//arguments[0][0] = { id: "", label: "no existing match" }
}
jQuery(arguments[0]).each(function(i, el) {
var obj = {};
obj[el.id] = el;
jQuery(e).data(obj);
});
response.apply(null, arguments);
});
},
change: function( event, ui ) {
if(jQuery(jQuery(this).attr('data-id-element')).val() == "") {
return;
}
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 data = ui.item ? jQuery(this).data(ui.item.id.toString()) : {};
if(update_elements && jQuery(update_elements['id']).val() == "") {
return;
}
for (var key in update_elements) {
jQuery(update_elements[key]).val(ui.item ? data[key] : "");
}
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
if (e.delimiter != null) {
terms.push( "" );
this.value = terms.join( e.delimiter );
} else {
this.value = terms.join("");
if (jQuery(this).attr('data-id-element')) {
jQuery(jQuery(this).attr('data-id-element')).val(ui.item.id);
}
if (jQuery(this).attr('data-update-elements')) {
var data = jQuery(this).data(ui.item.id.toString());
var update_elements = jQuery.parseJSON(jQuery(this).attr("data-update-elements"));
for (var key in update_elements) {
jQuery(update_elements[key]).val(data[key]);
}
}
}
var remember_string = this.value;
jQuery(this).bind('keyup.clearId', function(){
if(jQuery(this).val().trim() != remember_string.trim()){
jQuery(jQuery(this).attr('data-id-element')).val("");
jQuery(this).unbind('keyup.clearId');
}
});
jQuery(e).trigger('railsAutocomplete.select', ui);
return false;
}
});
}
});
jQuery(document).ready(function(){
jQuery('input[data-autocomplete]').railsAutocomplete();
});
})(jQuery);

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

@ -129,7 +129,8 @@ border: 1px solid rgba(0, 0, 0, 0.2);
.sideOption .spacer { margin:10px 10px 0; }
.sideOption .find_key { margin-right:8px; }
.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;
width: 207px;
border-radius: 10px;
@ -138,6 +139,8 @@ border: 1px solid rgba(0, 0, 0, 0.2);
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 ul { display:block; }
.find_topic_by_metacode ul li {clear:both; list-style-type:none; display:block; padding:3px; }

61
app/controllers/items_controller.rb
View file

@ -48,45 +48,40 @@ class ItemsController < ApplicationController
def create
@user = current_user
@addtomap = false
if params[:initem]
if params[:initem] != ""
@addtomap = true
@itemid = params[:initem]
end
end
if @addtomap
@item = Item.find(@itemid)
else
@item = Item.new()
@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
# if the topic exists grab it and return it
if params[:item][:grabItem] != "null"
@item = Item.find(params[:item][:grabItem])
# if the topic doesn't exist yet, create it
else
@item = Item.new()
@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
# also create an object to return the position to the canvas
@position = Hash.new()
@position['x'] = params[:item][:x]
@position['y'] = params[:item][:y]
@mapping = Mapping.new()
if params[:item][:map]
@mapping.category = "Item"
@mapping.user = @user
@mapping.map = Map.find(params[:item][:map])
@mapping.item = @item
@mapping.xloc = 0
@mapping.yloc = 0
@mapping.save
end
# set this for the case where the item is being created on a map.
@mapping = Mapping.new()
if params[:item][:map]
@mapping.category = "Item"
@mapping.user = @user
@mapping.map = Map.find(params[:item][:map])
@mapping.item = @item
@mapping.xloc = params[:item][:x]
@mapping.yloc = params[:item][:y]
@mapping.save
end
respond_to do |format|
format.html { respond_with(@user, location: user_item_url(@user, @item)) }

2
app/controllers/main_controller.rb
View file

@ -11,7 +11,7 @@ class MainController < ApplicationController
@current = current_user
if authenticated?
@items = all_as_json(@current, @current).html_safe
@items = Item.all.first.self_as_json.html_safe
respond_to do |format|
format.html { respond_with(@current) }

2
app/controllers/maps_controller.rb
View file

@ -4,6 +4,8 @@ class MapsController < ApplicationController
respond_to :html, :js, :json
autocomplete :map, :name, :full => true, :extra_data => [:user_id]
# GET /users/:user_id/maps
def index
@user = User.find(params[:user_id])

2
app/controllers/users_controller.rb
View file

@ -5,6 +5,8 @@ class UsersController < ApplicationController
respond_to :html, :json
autocomplete :user, :name, :full => true
# GET /user/new
def new
@user = User.new

3
app/views/items/_new.html.erb
View file

@ -1,7 +1,8 @@
<div class="anypage">
<%= 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 :y, :value => 0 %>
<%= form.hidden_field :grabItem, :value => "null" %>
<% end %>
</div>

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

@ -1,5 +1,8 @@
$('#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") {
var newnode = <%= @item.self_as_json.html_safe %>;
@ -9,6 +12,12 @@ if(viewMode == "graph") {
if (Mconsole != null) {
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 %>');
temp.setData('dim', 1, 'start');
temp.setData('dim', 40, 'end');
@ -37,12 +46,8 @@ if(viewMode == "graph") {
json = newnode;
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 {
$('#cards').prepend('<%= escape_javascript(render(@item)) %>');
$(".scroll").mCustomScrollbar();
}
}

2
app/views/items/show.html.erb
View file

@ -20,8 +20,6 @@
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="showcard">
</div>
</div>
<div class="clearfloat"></div>

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

@ -12,6 +12,8 @@
<%= javascript_include_tag "application" %>
<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" src="//use.typekit.net/obp7wss.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<%= csrf_meta_tags %>
</head>
<body>
@ -55,66 +57,7 @@
<%= 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" 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="footer">
<div class="logo"><h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div></div>
</div>

68
app/views/main/console.html.erb
View file

@ -50,14 +50,78 @@
<% end %>
<script>
json = <%= @items %>;
if (json.length > 0) {
//if (json.length > 0) {
$(document).ready(function() {
initialize("chaotic");
});
}
//}
</script>
<% else %>
<h1><br>Shucks, there are no maps.<h1>
<% 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>

32
app/views/maps/_newtopic.html.erb
View file

@ -1,29 +1,9 @@
<div class="anypage mapspages">
<div class="anypage">
<%= 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>
<div class="selecttype">
<h3 onclick="$('.existingtopic').fadeOut('fast', function () { $('.newtopic').fadeIn('fast'); });" style="border-right:1px solid #000;">Add New Topic</h3>
<h3 onclick="$('.newtopic').fadeOut('fast', function () { $('.existingtopic').fadeIn('fast'); });">Add Existing Topic</h3>
<div style="clear:both;"></div>
</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>
<%= 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 :y, :value => 0 %>
<%= form.hidden_field :map, :value => @map.id %>
<%= form.hidden_field :grabItem, :value => "null" %>
<% end %>
</div>

5
config/routes.rb
View file

@ -15,7 +15,12 @@ ISSAD::Application.routes.draw do
get :autocomplete_item_name, :on => :collection
end
resources :maps do
get :autocomplete_map_name, :on => :collection
end
resources :users do
get :autocomplete_user_name, :on => :collection
resources :items
resources :synapses
resources :maps