/* * @file * There is a lot of code that goes into creating the "label" of a node * This includes editable cards with all node details, and some controls * onCreateLabelHandler is the main function of this file, and the file * also contains a bunch of helper functions * * html and littleHTML are potentially confusing variables * html is the contents of the card shown when you click on a node's label. * littleHTML creates little controls for removing/hiding nodes from the canvas * * This function features PHP-style variable substitution because the strings * are so damn long. Values are identified by $_id_$, and then a regular * expression is substituted in later (for html, in a separate function). */ function onCreateLabelHandler(domElement, node) { var html = generateShowcardHTML(); html = replaceVariables(html, node); var showCard = document.createElement('div'); showCard.className = 'showcard topic_' + node.id; if (authorizeToEdit(node)) { var perm = document.createElement('div'); perm.className = 'permission canEdit'; perm.innerHTML = html; showCard.appendChild(perm); } else { showCard.innerHTML = html; } showCard.style.display = "none"; domElement.appendChild(showCard); // Create a 'name' button and add it to the main node label var nameContainer = document.createElement('span'), style = nameContainer.style; nameContainer.className = 'name topic_' + node.id; nameContainer.id = 'topic_' + node.id + '_label'; nameContainer.innerHTML = generateLittleHTML (node); domElement.appendChild(nameContainer); style.fontSize = "0.9em"; style.color = "#222222"; bindCallbacks(showCard, nameContainer, node); } function generateShowcardHTML() { return ' \
\

$_metacode_$

\ $_metacode_$ \
\
\ $_mk_permission_$ \
\ $_edit_permission_$ \
\ \ $_name_$ \ \ \ \
\
\
\ Added by: $_username_$ \ \
\
\
\ $_desc_$ \
\
\
\ \
\
'; }//generateShowcardHTML function replaceVariables(html, node) { //link is rendered differently if user is logged out or in var go_link, a_tag, close_a_tag; if (! authorizeToEdit(node)) { go_link = ''; if (node.getData("link") != "") { a_tag = ''; close_a_tag = ''; } else { a_tag = ''; close_a_tag = ''; } } else { go_link = '[go]'; a_tag = ''; close_a_tag = ''; } //create metacode_choices array from imgArray var metacodes = new Array(); for (var key in imgArray) { if (imgArray.hasOwnProperty(key)) { if (key != node.getData("metacode")) { metacodes.push(key); } } } //Arrange it how we want it metacodes.sort(); metacodes.unshift(node.getData("metacode")); var metacode_choices = "'["; for (var i in metacodes) { metacode_choices += '["' + metacodes[i] + '","' + metacodes[i] + '"],'; } //remove trailing comma and add ] metacode_choices = metacode_choices.slice(0, -1); metacode_choices += "]'"; var desc_nil = "Click to add description."; var link_nil = "Click to add link."; var edit_perm = ''; if (userid == node.getData("userid")) { edit_perm = ' \
\
\ Permissions:  \ \ \ $_permission_$ \ \ \
\
\
'; } var permissions = ['commons','public','private']; var permission_choices = "'["; for (var i in permissions) { permission_choices += '["' + permissions[i] + '","' + permissions[i] + '"],'; } //remove trailing comma and add ] permission_choices = permission_choices.slice(0, -1); permission_choices += "]'"; edit_perm = edit_perm.replace(/\$_permission_choices_\$/g, permission_choices); html = html.replace(/\$_edit_permission_\$/g, edit_perm); html = html.replace(/\$_permission_\$/g, node.getData("permission")); html = html.replace(/\$_mk_permission_\$/g, mk_permission(node)); html = html.replace(/\$_id_\$/g, node.id); html = html.replace(/\$_metacode_\$/g, node.getData("metacode")); html = html.replace(/\$_imgsrc_\$/g, imgArray[node.getData("metacode")].src); html = html.replace(/\$_name_\$/g, node.name); html = html.replace(/\$_userid_\$/g, node.getData("userid")); html = html.replace(/\$_username_\$/g, node.getData("username")); html = html.replace(/\$_metacode_choices_\$/g, metacode_choices); html = html.replace(/\$_go_link_\$/g, go_link); html = html.replace(/\$_a_tag_\$/g, a_tag); html = html.replace(/\$_close_a_tag_\$/g, close_a_tag); html = html.replace(/\$_link_nil_\$/g, link_nil); if (node.getData("link") == "" && authorizeToEdit(node)) { html = html.replace(/\$_link_\$/g, link_nil); } else { html = html.replace(/\$_link_\$/g, node.getData("link")); } html = html.replace(/\$_desc_nil_\$/g, desc_nil); if (node.getData("desc") == "" && authorizeToEdit(node)) { //logged in but desc isn't there so it's invisible html = html.replace(/\$_desc_\$/g, desc_nil); } else { html = html.replace(/\$_desc_\$/g, node.getData("desc")); } return html; } function generateLittleHTML(node) { var littleHTML = ' \
$_name_$
\
'; if (userid == null || mapid == null || !mapperm) { //unauthenticated, not on a map: can remove from canvas littleHTML += ' \ \ '; } else if (mapperm) { //permission to remove nodes from the map littleHTML += ' \ \ \ \ '; } if (userid == node.getData('userid')) { //logged in, and owner of the topic, thus permission to delete littleHTML += ' \ \ '; } littleHTML += '
'; littleHTML = littleHTML.replace(/\$_id_\$/g, node.id); littleHTML = littleHTML.replace(/\$_mapid_\$/g, mapid); littleHTML = littleHTML.replace(/\$_name_\$/g, node.name); return littleHTML; } function hideCurrentCard() { if (MetamapsModel.showcardInUse) { var node = Mconsole.graph.getNode(MetamapsModel.showcardInUse); hideCard(node); } } function hideCard(node) { var card = '.showcard'; if (node != null) { card += '.topic_' + node.id; } $(card).fadeOut('fast', function(){ node.setData('dim', 25, 'current'); $('.name.topic_' + node.id).show(); Mconsole.plot(); }); MetamapsModel.showcardInUse = null; } function bindCallbacks(showCard, nameContainer, node) { // add some events to the label $(showCard).find('img.icon').click(function(){ hideCard(node); }); $(showCard).find('.scroll').mCustomScrollbar(); // add some events to the label $(nameContainer).find('.label').click(function(e){ $('.name').css('display','block'); $('.name.topic_' + node.id).css('display','none'); $('.showcard.topic_' + node.id).fadeIn('fast'); $('.showcard.topic_' + node.id).find('.scroll').mCustomScrollbar("update"); node.setData('dim', 1, 'current'); hideCurrentCard(); MetamapsModel.showcardInUse = node.id; Mconsole.plot(); }); nameContainer.onmouseover = function(){ $('.name.topic_' + node.id + ' .nodeOptions').css('display','block'); } nameContainer.onmouseout = function(){ $('.name.topic_' + node.id + ' .nodeOptions').css('display','none'); } //bind best_in_place ajax callbacks $(showCard).find('.best_in_place_metacode').bind("ajax:success", function() { var metacode = $(this).html(); //changing img alt, img src for top card (topic view page) //and on-canvas card. Also changing image of node $(showCard).find('img.icon').attr('alt', metacode); $(showCard).find('img.icon').attr('src', imgArray[metacode].src); node.setData("metacode", metacode); Mconsole.plot(); }); $(showCard).find('.best_in_place_name').bind("ajax:success", function() { var name = $(this).html(); $(nameContainer).find('.label').html(name); }); $(showCard).find('.best_in_place_desc').bind("ajax:success", function() { $(showCard).find('.scroll').mCustomScrollbar("update"); }); $(showCard).find('.best_in_place_link').bind("ajax:success", function() { var link = $(this).html(); $(showCard).find('.go-link').attr('href', link); }); $(showCard).find(".permActivator").bind('mouseover', function () { clearTimeout(MetamapsModel.topicPermTimer2); that = this; MetamapsModel.topicPermTimer1 = setTimeout(function() { if (! MetamapsModel.topicPermSliding) { MetamapsModel.topicPermSliding = true; $(that).animate({ width: '203px', height: '37px' }, 300, function() { MetamapsModel.topicPermSliding = false; }); } }, 300); }); $(showCard).find(".permActivator").bind('mouseout', function () { clearTimeout(MetamapsModel.topicPermTimer1); that = this; MetamapsModel.topicPermTimer2 = setTimeout(function() { if (! MetamapsModel.topicPermSliding) { MetamapsModel.topicPermSliding = true; $(that).animate({ height: '16px', width: '16px' }, 300, function() { MetamapsModel.topicPermSliding = false; }); } },800); } ); //bind best_in_place ajax callbacks $(showCard).find('.best_in_place_permission').bind("ajax:success", function() { var permission = $(this).html(); var el = $(this).parents('.cardSettings').find('.mapPerm'); el.attr('title', permission); if (permission == "commons") el.html("co"); else if (permission == "public") el.html("pu"); else if (permission == "private") el.html("pr"); }); }