function editEdge(edge, e) { if (authorizeToEdit(edge)) { //reset so we don't interfere with other edges $('#edit_synapse').remove(); //so label is missing while editing deselectEdge(edge); //create the wrapper around the form elements, including permissions //classes to make best_in_place happy var edit_div = document.createElement('div'); edit_div.setAttribute('id', 'edit_synapse'); edit_div.className = 'permission canEdit'; $('.main .wrapper').append(edit_div); populateEditEdgeForm(edge); //drop it in the right spot, activate it $('#edit_synapse').css('position', 'absolute'); $('#edit_synapse').css('left', e.clientX); $('#edit_synapse').css('top', e.clientY); //$('#edit_synapse_name').click(); //required in case name is empty //$('#edit_synapse_name input').focus(); $('#edit_synapse').show(); } else if ((! authorizeToEdit(edge)) && userid) { alert("You don't have the permissions to edit this synapse."); } } function populateEditEdgeForm(edge) { add_name_form(edge); add_perms_form(edge); add_direction_form(edge); } function add_name_form(edge) { //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', 'input'); //TODO how to get blank data-nil $('#edit_synapse_name').attr('data-nil', ' '); $('#edit_synapse_name').attr('data-url', '/synapses/' + edge.getData("id")); $('#edit_synapse_name').html(edge.getData("desc")); $('#edit_synapse_name').bind("ajax:success", function() { var desc = $(this).html(); edge.setData("desc", desc); selectEdge(edge); Mconsole.plot(); }); } function add_perms_form(edge) { //permissions - if owner, also allow permission editing $('#edit_synapse').append(''); $('#edit_synapse .mapPerm').text(mk_permission(edge)); if (userid == edge.getData('userid')) { $('#edit_synapse').append(''); $('#edit_synapse .permActivator').append(''); $('#edit_synapse .editSettings').append('Permissions:'); $('#edit_synapse .editSettings').append(''); $('#edit_synapse .click-to-edit').attr('title', 'Click to Edit'); $('#edit_synapse .click-to-edit').append(best_in_place_perms(edge)); $('#edit_synapse .editSettings').append(''); $('#edit_synapse .permActivator').bind('mouseover', function() { clearTimeout(MetamapsModel.edgePermTimer2); that = this; MetamapsModel.edgePermTimer1 = setTimeout(function() { if (! MetamapsModel.edgePermSliding) { MetamapsModel.edgePermSliding = true; $(that).animate({ width: '203px', height: '37px' }, 300, function() { MetamapsModel.edgePermSliding = false; }); } }, 300); }); $('#edit_synapse .permActivator').bind('mouseout', function () { return; clearTimeout(MetamapsModel.edgePermTimer1); that = this; MetamapsModel.edgePermTimer2 = setTimeout(function() { if (! MetamapsModel.edgePermSliding) { MetamapsModel.edgePermSliding = true; $(that).animate({ height: '16px', width: '16px' }, 300, function() { MetamapsModel.edgePermSliding = false; }); } },800); } ); } }//add_perms_form function add_direction_form(edge) { //directionality checkboxes $('#edit_synapse').append(''); $('#edit_synapse').append(''); $('#edit_synapse').append(''); $('#edit_synapse').append(''); //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; var right = edge.nodeFrom; } else { var left = edge.nodeFrom; var right = edge.nodeTo; } /* * 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 = edge.getData('category'); //both, none, from-to if (directionCat == 'from-to') { var from_to = edge.getData('direction'); if (from_to[0] == left.id) { //check left checkbox $('#edit_synapse_left').prop('checked', true); } else { //check right checkbox $('#edit_synapse_right').prop('checked', true); } } else if (directionCat == 'both') { //check both checkboxes $('#edit_synapse_left').prop('checked', true); $('#edit_synapse_right').prop('checked', true); } $('edit_synapse_left, #edit_synapse_right').click(function() { var leftChecked = $('#edit_synapse_left').is(':checked'); var rightChecked = $('#edit_synapse_right').is(':checked'); var dir = edge.getData('direction'); var dirCat = 'none'; if (leftChecked && rightChecked) { dirCat = 'both'; } else if (!leftChecked && rightChecked) { dirCat = 'from-to'; dir = [left.id, right.id]; } else if (leftChecked && !rightChecked) { dirCat = 'from-to'; dir = [right.id, left.id]; } $.ajax({ 'type': 'PUT', 'url': '/synapses/' + edge.getData('id'), 'data': { synapse: { category:dirCat }, node1_id: { node1: dir[0] }, node2_id: { node2: dir[1] } }, 'success': function() { updateEdgeDisplay(edge, dir, dirCat); } }); }); }//add_direction_form function updateEdgeDisplay(edge, dir, dirCat) { edge.setData('category', dirCat); edge.setData('direction', dir); //render mid arrow renderEdgeArrows(null, edge); } function best_in_place_perms(edge) { var output = '