Documentation Center

The insert_node function

Describes key parts of a function used when adding a pop-up menu.

Here is the definition of the function:
function insert_node(element, node, nodename) 
{
  var xopusDoc = node.
getOwnerDocument();
  var newNode = xopusDoc.
createElement(nodename);
  var result = node.
appendChild(newNode);
  node.
makeComplete();
  
  // find the container again
  var container = element.parentNode.parentNode;
  
  //show the original button
  container.className = "showMenuButton";

  //remove the menu
  container.removeChild(element.parentNode);
  return true ; 
}

//wrap the insert_node function, it will be executed asynchronously
insert_node = Editor.
wrapInTransaction(insert_node); 

insert_node is not complicated. It receives all the arguments it needs and returns:
  • the HTML element
  • the Xopus node
  • the name of the new node.

We use the Xopus node to get the overall Content Editor document, and use that to create a new node and then append it to the current node. As the previous function ensured that only valid node types were passed, we don't need to check if the node is allowed or not. The only thing left is to use makeComplete to insert any required sub-elements (list items for the two types of lists, a single row with a single cell for a table).

We then turn to the HTML code, change the class back to the original showMenuButton and remove the new buttons that were inserted in the previous function. Content Editor then takes care of rendering the new element and, at the same time, restores the original button as specified in the XSL.

Finally, since the insert_node function is being invoked asynchronously from buttons created via JavaScript we need to wrap it in a transaction. This is different from buttons created in the XSL, which are automatically wrapped in transactions.