Metamaps.SynapseCard
This commit is contained in:
Devin Howard
parent
e8e866c196
commit
c668c774dd
3 changed files with 289 additions and 286 deletions
|
|
@ -25,6 +25,7 @@
|
||||||
//= require ./src/views/room
|
//= require ./src/views/room
|
||||||
//= require ./src/JIT
|
//= require ./src/JIT
|
||||||
//= require ./src/Metamaps
|
//= require ./src/Metamaps
|
||||||
|
//= require ./src/Metamaps.SynapseCard
|
||||||
//= require ./src/Metamaps.Visualize
|
//= require ./src/Metamaps.Visualize
|
||||||
//= require ./src/Metamaps.Util
|
//= require ./src/Metamaps.Util
|
||||||
//= require ./src/Metamaps.Realtime
|
//= require ./src/Metamaps.Realtime
|
||||||
|
|
|
||||||
288
app/assets/javascripts/src/Metamaps.SynapseCard.js
Normal file
288
app/assets/javascripts/src/Metamaps.SynapseCard.js
Normal file
|
|
@ -0,0 +1,288 @@
|
||||||
|
/* global Metamaps, $ */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Metamaps.SynapseCard.js
|
||||||
|
*
|
||||||
|
* Dependencies:
|
||||||
|
* - Metamaps.Active
|
||||||
|
* - Metamaps.Control
|
||||||
|
* - Metamaps.Mapper
|
||||||
|
* - Metamaps.Visualize
|
||||||
|
*/
|
||||||
|
Metamaps.SynapseCard = {
|
||||||
|
openSynapseCard: null,
|
||||||
|
showCard: function (edge, e) {
|
||||||
|
var self = Metamaps.SynapseCard
|
||||||
|
|
||||||
|
// 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')
|
||||||
|
$('#edit_synapse').remove()
|
||||||
|
|
||||||
|
// 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
|
||||||
|
// classes to make best_in_place happy
|
||||||
|
var edit_div = document.createElement('div')
|
||||||
|
edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>'
|
||||||
|
edit_div.setAttribute('id', 'edit_synapse')
|
||||||
|
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
||||||
|
edit_div.className = 'permission canEdit'
|
||||||
|
edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : ''
|
||||||
|
} else {
|
||||||
|
edit_div.className = 'permission cannotEdit'
|
||||||
|
}
|
||||||
|
$('#wrapper').append(edit_div)
|
||||||
|
|
||||||
|
self.populateShowCard(edge, synapse)
|
||||||
|
|
||||||
|
// drop it in the right spot, activate it
|
||||||
|
$('#edit_synapse').css('position', 'absolute')
|
||||||
|
if (e) {
|
||||||
|
$('#edit_synapse').css('left', e.clientX)
|
||||||
|
$('#edit_synapse').css('top', e.clientY)
|
||||||
|
} else {
|
||||||
|
$('#edit_synapse').css('left', myX)
|
||||||
|
$('#edit_synapse').css('top', myY)
|
||||||
|
}
|
||||||
|
// $('#edit_synapse_name').click() //required in case name is empty
|
||||||
|
// $('#edit_synapse_name input').focus()
|
||||||
|
$('#edit_synapse').show()
|
||||||
|
|
||||||
|
self.openSynapseCard = edge
|
||||||
|
},
|
||||||
|
|
||||||
|
hideCard: function () {
|
||||||
|
$('#edit_synapse').remove()
|
||||||
|
Metamaps.SynapseCard.openSynapseCard = null
|
||||||
|
},
|
||||||
|
|
||||||
|
populateShowCard: function (edge, synapse) {
|
||||||
|
var self = 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)
|
||||||
|
},
|
||||||
|
add_synapse_count: function (edge) {
|
||||||
|
var count = edge.getData('synapses').length
|
||||||
|
|
||||||
|
$('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
|
||||||
|
},
|
||||||
|
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
|
||||||
|
|
||||||
|
// desc editing form
|
||||||
|
$('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>')
|
||||||
|
$('#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_desc').html().trim() == '') {
|
||||||
|
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
||||||
|
$('#edit_synapse_desc').html(data_nil)
|
||||||
|
} else {
|
||||||
|
$('#edit_synapse_desc').html('(no description)')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#edit_synapse_desc').bind('ajax:success', function () {
|
||||||
|
var desc = $(this).html()
|
||||||
|
if (desc == data_nil) {
|
||||||
|
synapse.set('desc', '')
|
||||||
|
} else {
|
||||||
|
synapse.set('desc', desc)
|
||||||
|
}
|
||||||
|
synapse.trigger('saved')
|
||||||
|
Metamaps.Control.selectEdge(synapse.get('edge'))
|
||||||
|
Metamaps.Visualize.mGraph.plot()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
add_drop_down: function (edge, synapse) {
|
||||||
|
var list, i, synapses, l, desc
|
||||||
|
|
||||||
|
synapses = edge.getData('synapses')
|
||||||
|
l = synapses.length
|
||||||
|
|
||||||
|
if (l > 1) {
|
||||||
|
// append the element that you click to show dropdown select
|
||||||
|
$('#editSynUpperBar').append('<div id="dropdownSynapses"></div>')
|
||||||
|
$('#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 = '<ul id="switchSynapseList">'
|
||||||
|
for (i = 0; i < l; i++) {
|
||||||
|
if (synapses[i] !== synapse) { // don't add the current one to the list
|
||||||
|
desc = synapses[i].get('desc')
|
||||||
|
desc = desc === '' || desc === null ? '(no description)' : desc
|
||||||
|
list += '<li data-synapse-index="' + i + '">' + desc + '</li>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
list += '</ul>'
|
||||||
|
// 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 = '<div id="edgeUser" class="hoverForTip">'
|
||||||
|
u += '<a href="/explore/mapper/' + synapse.get('user_id') + '"> <img src="" width="24" height="24" /></a>'
|
||||||
|
u += '<div class="tip">' + synapse.get('user_name') + '</div></div>'
|
||||||
|
$('#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
|
||||||
|
$('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get('calculated_permission').substring(0, 2) + '"></div>')
|
||||||
|
|
||||||
|
// ability to change permission
|
||||||
|
var selectingPermission = false
|
||||||
|
var permissionLiClick = function (event) {
|
||||||
|
selectingPermission = false
|
||||||
|
var permission = $(this).attr('class')
|
||||||
|
synapse.save({
|
||||||
|
permission: permission,
|
||||||
|
defer_to_map_id: null
|
||||||
|
})
|
||||||
|
$('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2))
|
||||||
|
$('#edit_synapse .permissionSelect').remove()
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
|
||||||
|
var openPermissionSelect = function (event) {
|
||||||
|
if (!selectingPermission) {
|
||||||
|
selectingPermission = true
|
||||||
|
$(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
|
||||||
|
if ($(this).hasClass('co')) {
|
||||||
|
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
|
||||||
|
} else if ($(this).hasClass('pu')) {
|
||||||
|
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
|
||||||
|
} else if ($(this).hasClass('pr')) {
|
||||||
|
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
|
||||||
|
}
|
||||||
|
$('#edit_synapse .permissionSelect li').click(permissionLiClick)
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var hidePermissionSelect = function () {
|
||||||
|
selectingPermission = false
|
||||||
|
$('#edit_synapse.yourEdge .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
|
||||||
|
$('#edit_synapse .permissionSelect').remove()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
|
||||||
|
$('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect)
|
||||||
|
$('#edit_synapse').click(hidePermissionSelect)
|
||||||
|
}
|
||||||
|
}, // add_perms_form
|
||||||
|
|
||||||
|
add_direction_form: function (synapse) {
|
||||||
|
// directionality checkboxes
|
||||||
|
$('#editSynLowerBar').append('<div id="edit_synapse_left"></div>')
|
||||||
|
$('#editSynLowerBar').append('<div id="edit_synapse_right"></div>')
|
||||||
|
|
||||||
|
var edge = synapse.get('edge')
|
||||||
|
|
||||||
|
// determine which node is to the left and the right
|
||||||
|
// if directly in a line, top is left
|
||||||
|
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.getData('topic')
|
||||||
|
var right = edge.nodeFrom.getData('topic')
|
||||||
|
} else {
|
||||||
|
var left = edge.nodeFrom.getData('topic')
|
||||||
|
var right = edge.nodeTo.getData('topic')
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* One node is actually on the left onscreen. Call it left, & the other right.
|
||||||
|
* If category is from-to, and that node is first, check the 'right' checkbox.
|
||||||
|
* Else check the 'left' checkbox since the arrow is incoming.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var directionCat = synapse.get('category'); // both, none, from-to
|
||||||
|
if (directionCat == 'from-to') {
|
||||||
|
var from_to = [synapse.get('node1_id'), synapse.get('node2_id')]
|
||||||
|
if (from_to[0] == left.id) {
|
||||||
|
// check left checkbox
|
||||||
|
$('#edit_synapse_left').addClass('checked')
|
||||||
|
} else {
|
||||||
|
// check right checkbox
|
||||||
|
$('#edit_synapse_right').addClass('checked')
|
||||||
|
}
|
||||||
|
} else if (directionCat == 'both') {
|
||||||
|
// check both checkboxes
|
||||||
|
$('#edit_synapse_left').addClass('checked')
|
||||||
|
$('#edit_synapse_right').addClass('checked')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
||||||
|
$('#edit_synapse_left, #edit_synapse_right').click(function () {
|
||||||
|
$(this).toggleClass('checked')
|
||||||
|
|
||||||
|
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()
|
||||||
|
})
|
||||||
|
} // if
|
||||||
|
} // add_direction_form
|
||||||
|
}; // end Metamaps.SynapseCard
|
||||||
|
|
@ -1302,289 +1302,3 @@ Metamaps.TopicCard = {
|
||||||
return nodeValues;
|
return nodeValues;
|
||||||
}
|
}
|
||||||
}; // end Metamaps.TopicCard
|
}; // end Metamaps.TopicCard
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
*
|
|
||||||
* SYNAPSECARD
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
Metamaps.SynapseCard = {
|
|
||||||
openSynapseCard: null,
|
|
||||||
showCard: function (edge, e) {
|
|
||||||
var self = Metamaps.SynapseCard;
|
|
||||||
|
|
||||||
//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');
|
|
||||||
$('#edit_synapse').remove();
|
|
||||||
|
|
||||||
//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
|
|
||||||
//classes to make best_in_place happy
|
|
||||||
var edit_div = document.createElement('div');
|
|
||||||
edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>';
|
|
||||||
edit_div.setAttribute('id', 'edit_synapse');
|
|
||||||
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
|
||||||
edit_div.className = 'permission canEdit';
|
|
||||||
edit_div.className += synapse.authorizePermissionChange(Metamaps.Active.Mapper) ? ' yourEdge' : '';
|
|
||||||
} else {
|
|
||||||
edit_div.className = 'permission cannotEdit';
|
|
||||||
}
|
|
||||||
$('#wrapper').append(edit_div);
|
|
||||||
|
|
||||||
self.populateShowCard(edge, synapse);
|
|
||||||
|
|
||||||
//drop it in the right spot, activate it
|
|
||||||
$('#edit_synapse').css('position', 'absolute');
|
|
||||||
if (e) {
|
|
||||||
$('#edit_synapse').css('left', e.clientX);
|
|
||||||
$('#edit_synapse').css('top', e.clientY);
|
|
||||||
} else {
|
|
||||||
$('#edit_synapse').css('left', myX);
|
|
||||||
$('#edit_synapse').css('top', myY);
|
|
||||||
}
|
|
||||||
//$('#edit_synapse_name').click(); //required in case name is empty
|
|
||||||
//$('#edit_synapse_name input').focus();
|
|
||||||
$('#edit_synapse').show();
|
|
||||||
|
|
||||||
self.openSynapseCard = edge;
|
|
||||||
},
|
|
||||||
|
|
||||||
hideCard: function () {
|
|
||||||
$('#edit_synapse').remove();
|
|
||||||
Metamaps.SynapseCard.openSynapseCard = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
populateShowCard: function (edge, synapse) {
|
|
||||||
var self = 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);
|
|
||||||
},
|
|
||||||
add_synapse_count: function (edge) {
|
|
||||||
var count = edge.getData("synapses").length;
|
|
||||||
|
|
||||||
$('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
|
|
||||||
},
|
|
||||||
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
|
|
||||||
|
|
||||||
//desc editing form
|
|
||||||
$('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>');
|
|
||||||
$('#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_desc').html().trim() == '') {
|
|
||||||
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
|
||||||
$('#edit_synapse_desc').html(data_nil);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('#edit_synapse_desc').html("(no description)");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#edit_synapse_desc').bind("ajax:success", function () {
|
|
||||||
var desc = $(this).html();
|
|
||||||
if (desc == data_nil) {
|
|
||||||
synapse.set("desc", '');
|
|
||||||
} else {
|
|
||||||
synapse.set("desc", desc);
|
|
||||||
}
|
|
||||||
synapse.trigger('saved');
|
|
||||||
Metamaps.Control.selectEdge(synapse.get('edge'));
|
|
||||||
Metamaps.Visualize.mGraph.plot();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
add_drop_down: function (edge, synapse) {
|
|
||||||
var list, i, synapses, l, desc;
|
|
||||||
|
|
||||||
synapses = edge.getData("synapses");
|
|
||||||
l = synapses.length;
|
|
||||||
|
|
||||||
if (l > 1) {
|
|
||||||
// append the element that you click to show dropdown select
|
|
||||||
$('#editSynUpperBar').append('<div id="dropdownSynapses"></div>');
|
|
||||||
$('#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 = '<ul id="switchSynapseList">';
|
|
||||||
for (i = 0; i < l; i++) {
|
|
||||||
if (synapses[i] !== synapse) { // don't add the current one to the list
|
|
||||||
desc = synapses[i].get('desc');
|
|
||||||
desc = desc === "" || desc === null ? "(no description)" : desc;
|
|
||||||
list += '<li data-synapse-index="' + i + '">' + desc + '</li>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
list += '</ul>'
|
|
||||||
// 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 = '<div id="edgeUser" class="hoverForTip">';
|
|
||||||
u += '<a href="/explore/mapper/' + synapse.get("user_id") + '"> <img src="" width="24" height="24" /></a>'
|
|
||||||
u += '<div class="tip">' + synapse.get("user_name") + '</div></div>';
|
|
||||||
$('#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
|
|
||||||
$('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get("calculated_permission").substring(0, 2) + '"></div>');
|
|
||||||
|
|
||||||
// ability to change permission
|
|
||||||
var selectingPermission = false;
|
|
||||||
var permissionLiClick = function (event) {
|
|
||||||
selectingPermission = false;
|
|
||||||
var permission = $(this).attr('class');
|
|
||||||
synapse.save({
|
|
||||||
permission: permission,
|
|
||||||
defer_to_map_id: null
|
|
||||||
});
|
|
||||||
$('#edit_synapse .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2));
|
|
||||||
$('#edit_synapse .permissionSelect').remove();
|
|
||||||
event.stopPropagation();
|
|
||||||
};
|
|
||||||
|
|
||||||
var openPermissionSelect = function (event) {
|
|
||||||
if (!selectingPermission) {
|
|
||||||
selectingPermission = true;
|
|
||||||
$(this).addClass('minimize'); // this line flips the drop down arrow to a pull up arrow
|
|
||||||
if ($(this).hasClass('co')) {
|
|
||||||
$(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>');
|
|
||||||
} else if ($(this).hasClass('pu')) {
|
|
||||||
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>');
|
|
||||||
} else if ($(this).hasClass('pr')) {
|
|
||||||
$(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>');
|
|
||||||
}
|
|
||||||
$('#edit_synapse .permissionSelect li').click(permissionLiClick);
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var hidePermissionSelect = function () {
|
|
||||||
selectingPermission = false;
|
|
||||||
$('#edit_synapse.yourEdge .mapPerm').removeClass('minimize'); // this line flips the pull up arrow to a drop down arrow
|
|
||||||
$('#edit_synapse .permissionSelect').remove();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (synapse.authorizePermissionChange(Metamaps.Active.Mapper)) {
|
|
||||||
$('#edit_synapse.yourEdge .mapPerm').click(openPermissionSelect);
|
|
||||||
$('#edit_synapse').click(hidePermissionSelect);
|
|
||||||
}
|
|
||||||
}, //add_perms_form
|
|
||||||
|
|
||||||
add_direction_form: function (synapse) {
|
|
||||||
//directionality checkboxes
|
|
||||||
$('#editSynLowerBar').append('<div id="edit_synapse_left"></div>');
|
|
||||||
$('#editSynLowerBar').append('<div id="edit_synapse_right"></div>');
|
|
||||||
|
|
||||||
var edge = synapse.get('edge');
|
|
||||||
|
|
||||||
//determine which node is to the left and the right
|
|
||||||
//if directly in a line, top is left
|
|
||||||
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.getData("topic");
|
|
||||||
var right = edge.nodeFrom.getData("topic");
|
|
||||||
} else {
|
|
||||||
var left = edge.nodeFrom.getData("topic");
|
|
||||||
var right = edge.nodeTo.getData("topic");
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* One node is actually on the left onscreen. Call it left, & the other right.
|
|
||||||
* If category is from-to, and that node is first, check the 'right' checkbox.
|
|
||||||
* Else check the 'left' checkbox since the arrow is incoming.
|
|
||||||
*/
|
|
||||||
|
|
||||||
var directionCat = synapse.get('category'); //both, none, from-to
|
|
||||||
if (directionCat == 'from-to') {
|
|
||||||
var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
|
|
||||||
if (from_to[0] == left.id) {
|
|
||||||
//check left checkbox
|
|
||||||
$('#edit_synapse_left').addClass('checked');
|
|
||||||
} else {
|
|
||||||
//check right checkbox
|
|
||||||
$('#edit_synapse_right').addClass('checked');
|
|
||||||
}
|
|
||||||
} else if (directionCat == 'both') {
|
|
||||||
//check both checkboxes
|
|
||||||
$('#edit_synapse_left').addClass('checked');
|
|
||||||
$('#edit_synapse_right').addClass('checked');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
|
|
||||||
$('#edit_synapse_left, #edit_synapse_right').click(function () {
|
|
||||||
|
|
||||||
$(this).toggleClass('checked');
|
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
} // if
|
|
||||||
} //add_direction_form
|
|
||||||
}; // end Metamaps.SynapseCard
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue