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 = '';
+ for (i = 0; i < l; i++) {
+ if (synapses[i] !== synapse) { // don't add the current one to the list
+ list += '- ' + synapses[i].get('desc') + '
';
+ }
+ }
+ 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;