diff --git a/app/assets/javascripts/src/Metamaps.JIT.js b/app/assets/javascripts/src/Metamaps.JIT.js
index 73ffa823..d2449fc2 100644
--- a/app/assets/javascripts/src/Metamaps.JIT.js
+++ b/app/assets/javascripts/src/Metamaps.JIT.js
@@ -99,6 +99,9 @@ Metamaps.JIT = {
var synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse
+ if (!synapse) return; // this means there are no corresponding synapses for
+ // this edge, don't render it
+
var directionCat = synapse.get("category");
//label placement on edges
@@ -1095,7 +1098,7 @@ Metamaps.JIT = {
//The test synapse was selected!
- // make sure the edge hasn't been hidden temporarily
+ // make sure the edge hasn't been hidden from the page
var node1id = synapse.get('edge').nodeFrom.id;
var node2id = synapse.get('edge').nodeTo.id;
var edge = Metamaps.Visualize.mGraph.graph.getAdjacence(node1id, node2id);
@@ -1244,17 +1247,7 @@ Metamaps.JIT = {
// delete the selected things from the database
$('.rc-delete').click(function () {
$('.rightclickmenu').remove();
- var n = Metamaps.Selected.Nodes.length;
- var e = Metamaps.Selected.Edges.length;
- var ntext = n == 1 ? "1 topic" : n + " topics";
- var etext = e == 1 ? "1 synapse" : e + " synapses";
- var text = "You have " + ntext + " and " + etext + " selected. ";
-
- var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
- if (r == true) {
- Metamaps.Control.deleteSelectedEdges();
- Metamaps.Control.deleteSelectedNodes();
- }
+ Metamaps.Control.deleteSelected();
});
// remove the selected things from the map
@@ -1388,17 +1381,7 @@ Metamaps.JIT = {
// delete the selected things from the database
$('.rc-delete').click(function () {
$('.rightclickmenu').remove();
- var n = Metamaps.Selected.Nodes.length;
- var e = Metamaps.Selected.Edges.length;
- var ntext = n == 1 ? "1 topic" : n + " topics";
- var etext = e == 1 ? "1 synapse" : e + " synapses";
- var text = "You have " + ntext + " and " + etext + " selected. ";
-
- var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
- if (r == true) {
- Metamaps.Control.deleteSelectedEdges();
- Metamaps.Control.deleteSelectedNodes();
- }
+ Metamaps.Control.deleteSelected();
});
// remove the selected things from the map
diff --git a/app/assets/javascripts/src/Metamaps.js b/app/assets/javascripts/src/Metamaps.js
index a8df6bfe..7f57adc5 100644
--- a/app/assets/javascripts/src/Metamaps.js
+++ b/app/assets/javascripts/src/Metamaps.js
@@ -703,7 +703,7 @@ Metamaps.TopicCard = {
var setMapperImage = function (mapper) {
$('.contributorIcon').attr('src', mapper.get('image'));
};
- Metamaps.Mapper.get(topic.get('user_id'), setMapperImage)
+ Metamaps.Mapper.get(topic.get('user_id'), setMapperImage);
// starting embed.ly
var resetFunc = function () {
@@ -970,9 +970,11 @@ Metamaps.TopicCard = {
*/
Metamaps.SynapseCard = {
openSynapseCard: null,
- showCard: function (edge, e) {
+ showCard: function (edge, e, synapseIndex) {
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');
@@ -981,11 +983,12 @@ Metamaps.SynapseCard = {
//so label is missing while editing
Metamaps.Control.deselectEdge(edge);
- var synapse = edge.getData('synapses')[0]; // for now, just get the first synapse
+ var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
//create the wrapper around the form elements, including permissions
//classes to make best_in_place happy
var edit_div = document.createElement('div');
+ edit_div.innerHTML = '
';
edit_div.setAttribute('id', 'edit_synapse');
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
edit_div.className = 'permission canEdit';
@@ -993,9 +996,9 @@ Metamaps.SynapseCard = {
} else {
edit_div.className = 'permission cannotEdit';
}
- $('.main .wrapper').append(edit_div);
+ $('#wrapper').append(edit_div);
- self.populateShowCard(synapse);
+ self.populateShowCard(edge, synapse);
//drop it in the right spot, activate it
$('#edit_synapse').css('position', 'absolute');
@@ -1018,39 +1021,42 @@ Metamaps.SynapseCard = {
Metamaps.SynapseCard.openSynapseCard = null;
},
- populateShowCard: function (synapse) {
+ populateShowCard: function (edge, synapse) {
var self = Metamaps.SynapseCard;
- self.add_name_form(synapse);
+ self.add_synapse_count(edge);
+ self.add_desc_form(synapse);
self.add_user_info(synapse);
self.add_perms_form(synapse);
- if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
- self.add_direction_form(synapse);
- }
+ self.add_direction_form(synapse);
},
+ add_synapse_count: function (edge) {
+ var count = edge.getData("synapses").length;
- add_name_form: function (synapse) {
+ $('#editSynUpperBar').append('
' + count + '
')
+ },
+ add_desc_form: function (synapse) {
var data_nil = 'Click to add description.';
// TODO make it so that this would work even in sandbox mode,
// currently with Best_in_place it won't
- //name editing form
- $('#edit_synapse').append('');
- $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc');
- $('#edit_synapse_name').attr('data-object', 'synapse');
- $('#edit_synapse_name').attr('data-attribute', 'desc');
- $('#edit_synapse_name').attr('data-type', 'textarea');
- $('#edit_synapse_name').attr('data-nil', data_nil);
- $('#edit_synapse_name').attr('data-url', '/synapses/' + synapse.id);
- $('#edit_synapse_name').html(synapse.get("desc"));
+ //desc editing form
+ $('#editSynUpperBar').append('');
+ $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc');
+ $('#edit_synapse_desc').attr('data-object', 'synapse');
+ $('#edit_synapse_desc').attr('data-attribute', 'desc');
+ $('#edit_synapse_desc').attr('data-type', 'textarea');
+ $('#edit_synapse_desc').attr('data-nil', data_nil);
+ $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id);
+ $('#edit_synapse_desc').html(synapse.get("desc"));
//if edge data is blank or just whitespace, populate it with data_nil
- if ($('#edit_synapse_name').html().trim() == '') {
- $('#edit_synapse_name').html(data_nil);
+ if ($('#edit_synapse_desc').html().trim() == '') {
+ $('#edit_synapse_desc').html(data_nil);
}
- $('#edit_synapse_name').bind("ajax:success", function () {
+ $('#edit_synapse_desc').bind("ajax:success", function () {
var desc = $(this).html();
if (desc == data_nil) {
synapse.set("desc", '');
@@ -1064,13 +1070,20 @@ Metamaps.SynapseCard = {
add_user_info: function (synapse) {
var u = '
';
+ u += ''
u += '
Created by ' + synapse.get("user_name") + '
';
- $('#edit_synapse').append(u);
+ $('#editSynLowerBar').append(u);
+
+ // get mapper image
+ var setMapperImage = function (mapper) {
+ $('#edgeUser img').attr('src', mapper.get('image'));
+ };
+ Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage);
},
add_perms_form: function (synapse) {
//permissions - if owner, also allow permission editing
- $('#edit_synapse').append('');
+ $('#editSynLowerBar').append('');
// ability to change permission
var selectingPermission = false;
@@ -1107,10 +1120,8 @@ Metamaps.SynapseCard = {
add_direction_form: function (synapse) {
//directionality checkboxes
- $('#edit_synapse').append('');
- $('#edit_synapse').append('');
- $('#edit_synapse').append('');
- $('#edit_synapse').append('');
+ $('#editSynLowerBar').append('');
+ $('#editSynLowerBar').append('');
var edge = synapse.get('edge');
@@ -1119,11 +1130,11 @@ Metamaps.SynapseCard = {
if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
- var left = edge.nodeTo;
- var right = edge.nodeFrom;
+ var left = edge.nodeTo.getData("topic");
+ var right = edge.nodeFrom.getData("topic");
} else {
- var left = edge.nodeFrom;
- var right = edge.nodeTo;
+ var left = edge.nodeFrom.getData("topic");
+ var right = edge.nodeTo.getData("topic");
}
/*
@@ -1134,42 +1145,48 @@ Metamaps.SynapseCard = {
var directionCat = synapse.get('category'); //both, none, from-to
if (directionCat == 'from-to') {
- var from_to = synapse.getDirection();
+ var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
if (from_to[0] == left.id) {
//check left checkbox
- $('#edit_synapse_left').prop('checked', true);
+ $('#edit_synapse_left').addClass('checked');
} else {
//check right checkbox
- $('#edit_synapse_right').prop('checked', true);
+ $('#edit_synapse_right').addClass('checked');
}
} else if (directionCat == 'both') {
//check both checkboxes
- $('#edit_synapse_left').prop('checked', true);
- $('#edit_synapse_right').prop('checked', true);
+ $('#edit_synapse_left').addClass('checked');
+ $('#edit_synapse_right').addClass('checked');
}
- $('#edit_synapse_left, #edit_synapse_right').click(function () {
- var leftChecked = $('#edit_synapse_left').is(':checked');
- var rightChecked = $('#edit_synapse_right').is(':checked');
- var dir = synapse.getDirection();
- var dirCat = 'none';
- if (leftChecked && rightChecked) {
- dirCat = 'both';
- } else if (!leftChecked && rightChecked) {
- dirCat = 'from-to';
- dir = [right.id, left.id];
- } else if (leftChecked && !rightChecked) {
- dirCat = 'from-to';
- dir = [left.id, right.id];
- }
+ if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+ $('#edit_synapse_left, #edit_synapse_right').click(function () {
+
+ $(this).toggleClass('checked');
- synapse.save({
- category: dirCat,
- node1_id: dir[0],
- node2_id: dir[1]
+ var leftChecked = $('#edit_synapse_left').is('.checked');
+ var rightChecked = $('#edit_synapse_right').is('.checked');
+
+ var dir = synapse.getDirection();
+ var dirCat = 'none';
+ if (leftChecked && rightChecked) {
+ dirCat = 'both';
+ } else if (!leftChecked && rightChecked) {
+ dirCat = 'from-to';
+ dir = [right.id, left.id];
+ } else if (leftChecked && !rightChecked) {
+ dirCat = 'from-to';
+ dir = [left.id, right.id];
+ }
+
+ synapse.save({
+ category: dirCat,
+ node1_id: dir[0],
+ node2_id: dir[1]
+ });
+ Metamaps.Visualize.mGraph.plot();
});
- Metamaps.Visualize.mGraph.plot();
- });
+ } // if
} //add_direction_form
}; // end Metamaps.SynapseCard
@@ -1501,7 +1518,7 @@ Metamaps.Realtime = {
});
$('body').click(self.close);
- self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
+ self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); // io.connect('http://localhost:5001');
self.startActiveMap();
},
toggleBox: function (event) {
@@ -2135,6 +2152,19 @@ Metamaps.Control = {
Metamaps.Selected.Nodes.splice(
Metamaps.Selected.Nodes.indexOf(node), 1);
},
+ deleteSelected: function () {
+ var n = Metamaps.Selected.Nodes.length;
+ var e = Metamaps.Selected.Edges.length;
+ var ntext = n == 1 ? "1 topic" : n + " topics";
+ var etext = e == 1 ? "1 synapse" : e + " synapses";
+ var text = "You have " + ntext + " and " + etext + " selected. ";
+
+ var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
+ if (r == true) {
+ Metamaps.Control.deleteSelectedEdges();
+ Metamaps.Control.deleteSelectedNodes();
+ }
+ },
deleteSelectedNodes: function () { // refers to deleting topics permanently
var l = Metamaps.Selected.Nodes.length;
for (var i = l - 1; i >= 0; i -= 1) {
@@ -2262,9 +2292,18 @@ Metamaps.Control = {
// TODO make it so that you select which one, of multiple possible synapses you want to delete
- //var id = edge.getData("id");
- //Metamaps.Synapses.get(id).destroy();
- //Metamaps.Control.hideEdge(edge);
+ if (edge.getData("synapses").length - 1 === 0) {
+ Metamaps.Control.hideEdge(edge);
+ }
+
+ var synapse = edge.getData("synapses")[0];
+ var mapping = edge.getData("mappings")[0];
+ 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);
},
removeSelectedEdges: function () {
var l = Metamaps.Selected.Edges.length,
@@ -2283,9 +2322,18 @@ Metamaps.Control = {
// TODO make it so that you select which one, of multiple possible synapses you want
- //var mappingid = edge.getData("mappingid");
- //Metamaps.Mappings.get(mappingid).destroy();
- //Metamaps.Control.hideEdge(edge);
+ if (edge.getData("mappings").length - 1 === 0) {
+ Metamaps.Control.hideEdge(edge);
+ }
+
+ var synapse = edge.getData("synapses")[0];
+ var mapping = edge.getData("mappings")[0];
+ mapping.destroy();
+
+ Metamaps.Synapses.remove(synapse);
+
+ edge.getData("mappings").splice(0, 1);
+ edge.getData("synapses").splice(0, 1);
},
hideSelectedEdges: function () {
var edge,
@@ -2768,18 +2816,17 @@ Metamaps.Listeners = {
break;
case 82: //if r or R is pressed
case 114:
- if (e.ctrlKey){
+ /*if (e.ctrlKey){
e.preventDefault();
Metamaps.Control.removeSelectedNodes();
- console.log('Once function works, selected nodes will be removed');
- }
+ Metamaps.Control.removeSelectedEdges();
+ }*/
break;
case 68: //if d or D is pressed
case 100:
if (e.ctrlKey){
e.preventDefault();
- Metamaps.Control.deleteSelectedNodes();
- console.log('Once function works, selected nodes will be deleted');
+ Metamaps.Control.deleteSelected();
}
break;
case 72: //if h or H is pressed
@@ -2787,7 +2834,7 @@ Metamaps.Listeners = {
if (e.ctrlKey){
e.preventDefault();
Metamaps.Control.hideSelectedNodes();
- console.log('Once function works, selected nodes will be hidden');
+ Metamaps.Control.hideSelectedEdges();
}
break;
default:
@@ -3329,7 +3376,7 @@ Metamaps.Synapse = {
topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
node1 = topic1.get('node');
- topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+ topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
node2 = topic2.get('node');
Metamaps.Create.newSynapse.hide();
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f7a3ba5a..81701ed4 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2351,15 +2351,6 @@ float: left;
height: 100%;
}
-
-#edit_synapse label,
-#edit_synapse_left,
-#edit_synapse_right {
- display: inline-block;
-}
-#edit_synapse label.left {
- margin-right: 0.5em;
-}
.templates {
display: none;
}
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index e59634af..b5341deb 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -219,7 +219,7 @@ background: none;
.linkItem.synapseCount:hover .synapseCountIcon {
background-position: 0 -32px;
}
-.linkItem.mapPerm {
+.mapPerm {
width: 32px;
height: 32px;
padding: 0;
@@ -228,22 +228,22 @@ background: none;
background-image: url(permissions32_sprite.png);
background-position: 0 0;
}
-.linkItem.mapPerm.co {
+.mapPerm.co {
background-position: 0 0;
}
-.linkItem.mapPerm.pu {
+.mapPerm.pu {
background-position: -64px 0;
}
-.linkItem.mapPerm.pr {
+.mapPerm.pr {
background-position: -32px 0;
}
-.showcard .yourTopic .mapPerm:hover {
+.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
background-image: url(arrowperms_sprite.png);
background-position-x: -32px;
cursor:pointer;
}
-.showcard .yourTopic .mapPerm.minimize {
+.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
background-image: url(arrowperms_sprite.png) !important;
background-position-x: 0px;
cursor: pointer;
@@ -555,69 +555,66 @@ font-family: 'din-regular', helvetica, sans-serif;
display: inline-block;
}
-.permActivator {
- width: 16px;
- height: 16px;
- background: url('settings.png') no-repeat 0 0;
- overflow:hidden;
- position: absolute;
- left: 0px;
- top: 30px;
-}
-
-#edit_synapse .mapPerm,
-#edit_synapse .permActivator {
- position: static;
- display: inline-block;
- color: #000;
-}
-
-#edit_synapse .mapPerm {
- width: 20px;
- height:20px;
- background-repeat: no-repeat;
- background-size: 20px 20px;
- margin: 10px 12px 0 12px;
-}
-#edit_synapse .mapPerm.co {
- background-image: url("CO32.png");
-}
-#edit_synapse .mapPerm.pu {
- background-image: url("PU32.png");
-}
-#edit_synapse .mapPerm.pr {
- background-image: url("PR32.png");
-}
-
-#edit_synapse .permActivator {
- position: absolute;
- margin-top: -1.3em;
-}
-
#edit_synapse {
- background: url("synapse32.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
- border-radius: 5px;
- padding: 5px 5px 5px 30px;
- color: #000;
+ border-radius: 2px;
+ width: 270px;
+ box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
}
-#edit_synapse_name {
- margin-left: 0.4em;
- border-bottom: 1px solid black;
- text-align:center;
- max-width: 160px;
+#editSynUpperBar {
+ background: #FFFFFF url(synapse32.png) no-repeat 8px center;
+ min-height: 48px;
+ border-bottom: 1px solid #222222;
+ display: table;
+ width: 100%;
+}
+
+#editSynLowerBar {
+ background-color: #E0E0E0;
+ height: 48px;
+ position: relative;
+}
+
+#synapseCardCount {
+ font-size: 18px;
+ display: table-cell;
+ vertical-align: middle;
+ padding-left: 44px;
+ width: 20px;
+ line-height: 18px;
+}
+
+#edit_synapse_desc {
+ font-size: 14px;
+ font-family: 'din-regular', helvetica, sans-serif;
+ padding: 8px 32px 8px 4px;
+ display: table-cell;
+ vertical-align: middle;
+ line-height: 16px;
+}
+
+#edit_synapse .best_in_place_desc textarea {
+ font-family: 'din-regular', sans-serif;
+ color: #424242;
+ font-size: 14px;
+ line-height: 16px;
+ width: 100%;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+ background: none;
+ resize: none;
}
#edgeUser {
display:inline-block;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: 20px 20px;
- height: 20px;
- min-width: 20px;
position: relative;
- background-image: url("MMCCicon_mapper_black.png");
- margin: 10px 0 0 10px;
+ margin: 12px 0 0 11px;
+}
+#edgeUser img {
+ border-radius: 12px;
}
#edgeUser.hoverForTip:hover .tip {
display:block;
@@ -637,39 +634,36 @@ font-family: 'din-regular', helvetica, sans-serif;
z-index: 100;
}
-#edit_synapse .click-to-edit {
- margin-left: 0.3em;
+#edit_synapse .mapPerm {
+ position: absolute;
+ top: 0px;
+ left: 40px;
}
-#edit_synapse.yourEdge .mapPerm:hover {
- background-image: url(MMCCicon_maximize_arrow_black.png);
- background-size: 24px 17px;
- background-position: 0px 2px;
- cursor:pointer;
-}
-#edit_synapse.yourEdge .mapPerm.minimize {
- background-image: url(MMCCicon_minimize_arrow_black.png) !important;
- background-size: 24px 17px;
- background-position: 0px 2px;
- cursor: pointer;
-}
-#edit_synapse .mapPerm .permissionSelect {
- list-style: none;
- width: 26px;
- height: 52px;
- position: relative;
- top: 20px;
- left:-3px;
-}
-#edit_synapse .mapPerm .permissionSelect li {
- width: 26px;
- height: 26px;
+#edit_synapse_left, #edit_synapse_right {
+ position: absolute;
+ height: 24px;
+ width: 24px;
+ top: 12px;
background-repeat: no-repeat;
- background-position: center center;
- background-size: 20px 20px;
- background-color:white;
}
-
+#edit_synapse_right {
+ background-image: url(synapsedirectionright_sprite.png);
+ right: 16px;
+}
+#edit_synapse_left {
+ background-image: url(synapsedirectionleft_sprite.png);
+ right: 56px;
+}
+#edit_synapse_left.checked, #edit_synapse_right.checked {
+ background-position-y: -48px;
+}
+.canEdit #edit_synapse_left, .canEdit #edit_synapse_right {
+ cursor: pointer;
+}
+.canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover {
+ background-position-y: -24px;
+}
/* Map Cards */
diff --git a/app/controllers/synapses_controller.rb b/app/controllers/synapses_controller.rb
index f30fa3d5..c048627c 100644
--- a/app/controllers/synapses_controller.rb
+++ b/app/controllers/synapses_controller.rb
@@ -54,10 +54,7 @@ class SynapsesController < ApplicationController
@synapse.mappings.each do |m|
m.map.touch(:updated_at)
-
- #push notify to anyone viewing same map in realtime (see mapping.rb to understand the 'message' action)
- m.message 'destroy',@current.id
-
+
m.delete
end
diff --git a/public/404.html b/public/404.html
index ae2713cb..0cc86728 100644
--- a/public/404.html
+++ b/public/404.html
@@ -45,13 +45,14 @@
margin-bottom: 24px;
}
div.dialog {
- width: 500px;
+ width: 380px;
border: 0px;
border-right-color: #999;
border-bottom-color: #999;
float: left;
- margin-right: 100px;
- padding-top: 150px;
+ margin-right: 50px;
+ padding-top: 70px;
+ padding-bottom: 70px;
}
.picture {
width: 450px;
@@ -64,12 +65,12 @@
float: left;
background-position:50% 20%;
background-size: 100%;
- margin-top: 162px;
+ margin-top: 110px;
}
.wrapper {
margin: 0 auto;
- width: 1100px;
+ width: 900px;
}
.button {