glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Metamaps.SynapseCard

Browse source
This commit is contained in:
Devin Howard 2016-04-24 12:42:36 +08:00
parent e8e866c196
commit c668c774dd
3 changed files with 289 additions and 286 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/application.js
View file

@ -25,6 +25,7 @@
//= require ./src/views/room
//= require ./src/JIT
//= require ./src/Metamaps
//= require ./src/Metamaps.SynapseCard
//= require ./src/Metamaps.Visualize
//= require ./src/Metamaps.Util
//= require ./src/Metamaps.Realtime

288
app/assets/javascripts/src/Metamaps.SynapseCard.js Normal file
View 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

286
app/assets/javascripts/src/Metamaps.js.erb
View file

@ -1302,289 +1302,3 @@ Metamaps.TopicCard = {
return nodeValues;
}
}; // 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