From 3931fdd40e070dccda50b060f165e1979e34f04a Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 16 Dec 2012 15:00:43 -0500 Subject: [PATCH] got Rgraph working --- app/assets/javascripts/Jit/filters.js | 225 +++++++++++++++ app/assets/javascripts/Jit/graphsettings.js | 184 ++++++------- app/assets/javascripts/application.js | 172 +----------- .../autocomplete-rails-uncompressed.js | 260 +++++++++--------- app/assets/stylesheets/application.css | 5 +- app/controllers/items_controller.rb | 61 ++-- app/controllers/main_controller.rb | 2 +- app/controllers/maps_controller.rb | 2 + app/controllers/users_controller.rb | 2 + app/views/items/_new.html.erb | 3 +- app/views/items/create.js.erb | 17 +- app/views/items/show.html.erb | 2 - app/views/layouts/application.html.erb | 63 +---- app/views/main/console.html.erb | 68 ++++- app/views/maps/_newtopic.html.erb | 32 +-- config/routes.rb | 5 + 16 files changed, 571 insertions(+), 532 deletions(-) diff --git a/app/assets/javascripts/Jit/filters.js b/app/assets/javascripts/Jit/filters.js index 09902aeb..8a85d9ce 100644 --- a/app/assets/javascripts/Jit/filters.js +++ b/app/assets/javascripts/Jit/filters.js @@ -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; + } + } + }); +}); \ No newline at end of file diff --git a/app/assets/javascripts/Jit/graphsettings.js b/app/assets/javascripts/Jit/graphsettings.js index e9e6e3c7..9ee000cf 100644 --- a/app/assets/javascripts/Jit/graphsettings.js +++ b/app/assets/javascripts/Jit/graphsettings.js @@ -41,21 +41,7 @@ function graphSettings(type) { //Add Tips Tips: { enable: false, - onShow: function (tip, node) { - - //display node info in tooltip - var html = - '

' + node.getData("itemcatname") + '

' + - '' + node.getData(' + - '
' + node.name + '' + - '
Added by: ' + node.getData('username') + '
' + - '

' + node.getData('desc') + '

' + - '' + node.getData('link') + ''; - - tip.innerHTML = '
'; - $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 = "
" + node.name + "
" + "
connections: " + count + "
"; - } + 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 = - '

' + node.getData("itemcatname") + '

' + - '' + node.getData(' + - '
' + node.name + '' + - '
Added by: ' + node.getData('username') + '
' + - '

' + node.getData('desc') + '

' + - '' + node.getData('link') + ''; - - //append connections information - $jit.id('showcard').innerHTML = '
'; - $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 = '
' + node.name + '
'; - domElement.onclick = function () { - Mconsole.onClick(node.id, { - onComplete: function () { - var html = - '

' + node.getData("itemcatname") + '

' + - '' + node.getData(' + - '
' + node.name + '' + - '
Added by: ' + node.getData('username') + '
' + - '

' + node.getData('desc') + '

' + - '' + node.getData('link') + ''; - - //append connections information - $jit.id('showcard').innerHTML = '
'; - $jit.id('item_' + node.id).innerHTML = html; - $("#showcard .scroll").mCustomScrollbar(); - } - }); - } + var html = + '

' + node.getData("itemcatname") + '

' + + '' + node.getData(' + + '
' + node.name + '' + + '
Added by: ' + node.getData('username') + '
' + + '

' + node.getData('desc') + '

' + + '' + node.getData('link') + '
'; + 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 = '
' + node.name + '
'; + 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); diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 36e960a6..ba9675d2 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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 = ""; diff --git a/app/assets/javascripts/autocomplete-rails-uncompressed.js b/app/assets/javascripts/autocomplete-rails-uncompressed.js index edd20c45..37b61fea 100644 --- a/app/assets/javascripts/autocomplete-rails-uncompressed.js +++ b/app/assets/javascripts/autocomplete-rails-uncompressed.js @@ -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: -* -* -* 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: -* -*/ - -(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: +* +* +* 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: +* +*/ + +(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); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 2fa44cad..a4477350 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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; } diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb index 70cdd9af..791ad314 100644 --- a/app/controllers/items_controller.rb +++ b/app/controllers/items_controller.rb @@ -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)) } diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb index cd844aca..05f11002 100644 --- a/app/controllers/main_controller.rb +++ b/app/controllers/main_controller.rb @@ -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) } diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index 01471d24..ce20629b 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -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]) diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index b03bfc18..c0adfec1 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -5,6 +5,8 @@ class UsersController < ApplicationController respond_to :html, :json + autocomplete :user, :name, :full => true + # GET /user/new def new @user = User.new diff --git a/app/views/items/_new.html.erb b/app/views/items/_new.html.erb index fd0d38eb..761c5494 100644 --- a/app/views/items/_new.html.erb +++ b/app/views/items/_new.html.erb @@ -1,7 +1,8 @@
<%= 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 %>
diff --git a/app/views/items/create.js.erb b/app/views/items/create.js.erb index eeeda9b7..132788a7 100644 --- a/app/views/items/create.js.erb +++ b/app/views/items/create.js.erb @@ -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(""); - $("#node2_id").prepend(""); - } else { $('#cards').prepend('<%= escape_javascript(render(@item)) %>'); $(".scroll").mCustomScrollbar(); -} +} \ No newline at end of file diff --git a/app/views/items/show.html.erb b/app/views/items/show.html.erb index 649752ba..ece31552 100644 --- a/app/views/items/show.html.erb +++ b/app/views/items/show.html.erb @@ -20,8 +20,6 @@
-
-
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ec77181e..83d04042 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,6 +12,8 @@ <%= javascript_include_tag "application" %> + + <%= csrf_meta_tags %> @@ -55,66 +57,7 @@ <%= yield %> - close -
- Find... - - by - -
- <%= form_for Item.new, :html => { :class => "find_topic_by_name", :id => "find_topic_by_name" } do |f| %> - <%= f.autocomplete_field :name, autocomplete_item_name_items_path, :id => "by_name_input", :placeholder => "Search for topics..." %> - <% end %> -
-
    -
  • Show All
    • -
  • Action

    action

    • -
  • Activity

    activity

    • -
  • Bizarre

    bizarre

    • -
  • Catalyst

    catalyst

    • -
  • Closed

    closed

    • -
  • Experience

    experience

    • -
  • Future Dev

    future dev

    • -
  • Group

    group

    • -
  • Idea

    idea

    • -
-
    -
  • Hide All
    • -
  • Implication

    implication

    • -
  • Insight

    insight

    • -
  • Intention

    intention

    • -
  • Knowledge

    knowledge

    • -
  • Location

    location

    • -
  • Open Issue

    open issue

    • -
  • Opinion

    opinion

    • -
  • Opportunity

    opportunity

    • -
  • Person

    person

    • -
-
    -
  • Platform

    platform

    • -
  • Problem

    problem

    • -
  • Question

    question

    • -
  • Reference

    reference

    • -
  • Requirement

    requirement

    • -
  • Resource

    resource

    • -
  • Role

    role

    • -
  • Task

    task

    • -
  • Tool

    tool

    • -
  • Trajectory

    trajectory

    • -
-
-
- - -
+
diff --git a/app/views/main/console.html.erb b/app/views/main/console.html.erb index 223fc351..edc81afa 100644 --- a/app/views/main/console.html.erb +++ b/app/views/main/console.html.erb @@ -50,14 +50,78 @@ <% end %> <% else %>


Shucks, there are no maps.

<% end %> + +close +
+ Find... + + by + +
+ <%= 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 %> +
+
    +
  • Show All
    • +
  • Action

    action

    • +
  • Activity

    activity

    • +
  • Bizarre

    bizarre

    • +
  • Catalyst

    catalyst

    • +
  • Closed

    closed

    • +
  • Experience

    experience

    • +
  • Future Dev

    future dev

    • +
  • Group

    group

    • +
  • Idea

    idea

    • +
+
    +
  • Hide All
    • +
  • Implication

    implication

    • +
  • Insight

    insight

    • +
  • Intention

    intention

    • +
  • Knowledge

    knowledge

    • +
  • Location

    location

    • +
  • Open Issue

    open issue

    • +
  • Opinion

    opinion

    • +
  • Opportunity

    opportunity

    • +
  • Person

    person

    • +
+
    +
  • Platform

    platform

    • +
  • Problem

    problem

    • +
  • Question

    question

    • +
  • Reference

    reference

    • +
  • Requirement

    requirement

    • +
  • Resource

    resource

    • +
  • Role

    role

    • +
  • Task

    task

    • +
  • Tool

    tool

    • +
  • Trajectory

    trajectory

    • +
+
+
diff --git a/app/views/maps/_newtopic.html.erb b/app/views/maps/_newtopic.html.erb index 388d7e64..2771983a 100644 --- a/app/views/maps/_newtopic.html.erb +++ b/app/views/maps/_newtopic.html.erb @@ -1,29 +1,9 @@ -
+
<%= form_for Item.new, url: user_items_url(user), remote: true do |form| %> - -
-

Add New Topic

-

Add Existing Topic

-
-
-
- - <%= select_tag "category", options_from_collection_for_select(ItemCategory.order("name ASC").all, "id", "name") %> - - <%= form.text_field :name %> - - <%= form.text_area :desc, class: "description", :rows => 5 %> - - <%= form.text_field :link, class: "link" %> - - <%= form.select(:permission, options_for_select(['commons', 'public', 'private'])) %> - <%= form.hidden_field :map, :value => @map.id %> - <%= form.submit "Add Topic", class: "addTopic", id: "addTopic" %> -
- + <%= 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 %>
\ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 1fba1a4e..d7fffc00 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -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