From f591baf4c9552a21b28a3cb0cf415dc92c46d143 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 5 Oct 2014 18:39:07 -0400 Subject: [PATCH] ability to switch between multiple synapses between two topics --- app/assets/javascripts/src/Metamaps.JIT.js | 12 +++- app/assets/javascripts/src/Metamaps.js | 75 ++++++++++++++++++---- app/assets/stylesheets/base.css | 45 ++++++++++++- 3 files changed, 118 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js index d2449fc2..fe5c34c2 100644 --- a/app/assets/javascripts/src/Metamaps.JIT.js +++ b/app/assets/javascripts/src/Metamaps.JIT.js @@ -97,7 +97,17 @@ Metamaps.JIT = { var pos = adj.nodeFrom.pos.getc(true); var posChild = adj.nodeTo.pos.getc(true); - var synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse + var synapse; + if(adj.getData("displayIndex")) { + synapse = adj.getData("synapses")[adj.getData("displayIndex")]; + if (!synapse) { + delete adj.data.$displayIndex; + synapse = adj.getData("synapses")[0]; + } + } + else { + synapse = adj.getData("synapses")[0]; + } if (!synapse) return; // this means there are no corresponding synapses for // this edge, don't render it diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js index 15a40824..cd2a7c3c 100644 --- a/app/assets/javascripts/src/Metamaps.js +++ b/app/assets/javascripts/src/Metamaps.js @@ -970,11 +970,9 @@ Metamaps.TopicCard = { */ Metamaps.SynapseCard = { openSynapseCard: null, - showCard: function (edge, e, synapseIndex) { + showCard: function (edge, e) { var self = Metamaps.SynapseCard; - var index = synapseIndex ? synapseIndex : 0; - //reset so we don't interfere with other edges, but first, save its x and y var myX = $('#edit_synapse').css('left'); var myY = $('#edit_synapse').css('top'); @@ -983,6 +981,7 @@ Metamaps.SynapseCard = { //so label is missing while editing Metamaps.Control.deselectEdge(edge); + var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse //create the wrapper around the form elements, including permissions @@ -1013,7 +1012,7 @@ Metamaps.SynapseCard = { //$('#edit_synapse_name input').focus(); $('#edit_synapse').show(); - self.openSynapseCard = synapse.isNew() ? synapse.cid : synapse.id; + self.openSynapseCard = edge; }, hideCard: function () { @@ -1026,6 +1025,7 @@ Metamaps.SynapseCard = { self.add_synapse_count(edge); self.add_desc_form(synapse); + self.add_drop_down(edge, synapse); self.add_user_info(synapse); self.add_perms_form(synapse); self.add_direction_form(synapse); @@ -1067,7 +1067,48 @@ Metamaps.SynapseCard = { Metamaps.Visualize.mGraph.plot(); }); }, + add_drop_down: function (edge, synapse) { + var list, i, synapses, l; + synapses = edge.getData("synapses"); + l = synapses.length; + + if (l > 1) { + // append the element that you click to show dropdown select + $('#editSynUpperBar').append(''); + $('#dropdownSynapses').click(function(e){ + e.preventDefault(); + e.stopPropagation(); // stop it from immediately closing it again + $('#switchSynapseList').toggle(); + }); + // hide the dropdown again if you click anywhere else on the synapse card + $('#edit_synapse').click(function(){ + $('#switchSynapseList').hide(); + }); + + // generate the list of other synapses + list = '' + // add the list of the other synapses + $('#editSynLowerBar').append(list); + + // attach click listeners to list items that + // will cause it to switch the displayed synapse + // when you click it + $('#switchSynapseList li').click(function(e){ + e.stopPropagation(); + var index = parseInt($(this).attr('data-synapse-index')); + edge.setData('displayIndex', index); + Metamaps.Visualize.mGraph.plot(); + Metamaps.SynapseCard.showCard(edge, false); + }); + } + }, add_user_info: function (synapse) { var u = '
'; u += '' @@ -2296,14 +2337,19 @@ Metamaps.Control = { Metamaps.Control.hideEdge(edge); } - var synapse = edge.getData("synapses")[0]; - var mapping = edge.getData("mappings")[0]; + var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; + + var synapse = edge.getData("synapses")[index]; + var mapping = edge.getData("mappings")[index]; synapse.destroy(); // the server will destroy the mapping, we just need to remove it here Metamaps.Mappings.remove(mapping); - edge.getData("mappings").splice(0, 1); - edge.getData("synapses").splice(0, 1); + edge.getData("mappings").splice(index, 1); + edge.getData("synapses").splice(index, 1); + if (edge.getData("displayIndex")) { + delete edge.data.$displayIndex; + } }, removeSelectedEdges: function () { var l = Metamaps.Selected.Edges.length, @@ -2326,14 +2372,19 @@ Metamaps.Control = { Metamaps.Control.hideEdge(edge); } - var synapse = edge.getData("synapses")[0]; - var mapping = edge.getData("mappings")[0]; + var index = edge.getData("displayIndex") ? edge.getData("displayIndex") : 0; + + var synapse = edge.getData("synapses")[index]; + var mapping = edge.getData("mappings")[index]; mapping.destroy(); Metamaps.Synapses.remove(synapse); - edge.getData("mappings").splice(0, 1); - edge.getData("synapses").splice(0, 1); + edge.getData("mappings").splice(index, 1); + edge.getData("synapses").splice(index, 1); + if (edge.getData("displayIndex")) { + delete edge.data.$displayIndex; + } }, hideSelectedEdges: function () { var edge, diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index b5341deb..28244194 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -67,6 +67,7 @@ background-image: url(edit.png); background-repeat: no-repeat; background-position: bottom right; + cursor: text; } .best_in_place_name textarea, .best_in_place_name input { @@ -136,6 +137,7 @@ background: none; background-image: url(edit.png); background-position: top right; background-repeat: no-repeat; + cursor: text; } #edit_synapse .best_in_place_desc { @@ -587,12 +589,19 @@ font-family: 'din-regular', helvetica, sans-serif; #edit_synapse_desc { font-size: 14px; font-family: 'din-regular', helvetica, sans-serif; - padding: 8px 32px 8px 4px; + padding: 8px 38px 8px 4px; display: table-cell; vertical-align: middle; line-height: 16px; } +.canEdit #edit_synapse_desc:hover { + background-image: url(edit.png); + background-repeat: no-repeat; + background-position: 164px center; + cursor: text; +} + #edit_synapse .best_in_place_desc textarea { font-family: 'din-regular', sans-serif; color: #424242; @@ -608,6 +617,40 @@ font-family: 'din-regular', helvetica, sans-serif; resize: none; } +#dropdownSynapses { + position: absolute; + width: 24px; + height: 24px; + top: 12px; + right: 8px; + background-image: url(arrowdown_sprite.png); + background-repeat: no-repeat; + background-position: 4px -12px; +} +#dropdownSynapses:hover { + background-position: 4px -28px; + cursor: pointer; +} +#switchSynapseList { + display: none; + list-style: none; + width: 270px; + position: absolute; + z-index: 1; + background: #FFFFFF; + border-bottom: 1px solid #BBBBBB; +} +#switchSynapseList li { + padding: 8px; + cursor: pointer; + font-family: 'din-regular'; + font-size: 14px; + line-height: 16px; +} +#switchSynapseList li:hover { + background: #E0E0E0; +} + #edgeUser { display:inline-block; position: relative;