Documentation Center

About the insert_menu function

Describes the main JavaScript function used when adding a pop-up menu.

  • First, we change the class of the div holding the buttons to dontShowMenuButton. This does nothing functionally for this issue, but it can be useful for debugging purposes.
  • Second we show an alert as needed for the node passed in when we defined the childNodeTypes variable. If node passed in does not have any legal children, an alert is shown and the function then exits.
  • Once we have an array-like list of possible children, we set up the new buttons in a menu div. Rather than create the anonymous function for the onclick inline, we call another function to create these. The reason for this is the way that anonymous functions are created inside loops: each time the loop iterates, the previous value is overwritten. By calling an external generator function to create the anonymous functions, we avoid this problem and the scope is correct. We finish up by appending the menu HTML to the container. The HTML div from the XSL now contains both the button as well as the menu HTML. The button is hidden by the className of the container.
  • So now, the menu is visible in the Content Editor WYSIWYG editing view. When someone clicks on one of the options, the insert_node function is called. Previously , in the get_insert_node function, this function was assigned to the onclick.
function insert_menu(element, node) 
{
  //container is the div from the XSL, we will be using it as a container
  var container = element.parentNode;  
  
  //hide the button that was clicked to show this menu
		//This can be useful for debugging purposes, otherwise a purely cosmetic change.
  container.className = "dontShowMenuButton";

  //get a list of allowed children for the node that was passed
  var childNodeTypes = node.
getAllowedChildren;
  if (childNodeTypes.
getLength() < 1) 
  {
    alert("No allowed children!");
    return false; 
  }

  //create a menu
  var menu = document.createElement("div");
  for (i=0; i < childNodeTypes.getLength(); i++) 
  {
    var buttonElement = document.createElement("button");

    //get the name of the allowed Node
    var nodeName = childNodeTypes.
getName(i);
    
    //assign a function to onclick 
    buttonElement.onclick = get_insert_node_function(buttonElement, node, nodeName);
    
    buttonElement.setAttribute("align", "left");
    
    //create a label for the button
    var label = document.createTextNode("Insert "+nodeName)
    buttonElement.appendChild(label);
    
    menu.appendChild(buttonElement); 
  }
    
  //insert the menu div to the container, making it visible
  container.appendChild(menu);

  return true; 
}

//this function returns a function, 
//thus allowing the scope of each of the parameters to be correct when the button
//is clicked
function get_insert_node_function(buttonElement, xopusNode, nodeName) 
{
   return function(){insert_node(buttonElement, xopusNode, nodeName)}; 
}