About the insert_menu function
Describes the main JavaScript function used when adding a pop-up menu.
- First, we change the class of the
divholding the buttons todontShowMenuButton. 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
childNodeTypesvariable. 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 theonclickinline, 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 theclassNameof 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_nodefunction is called. Previously , in the get_insert_node function, this function was assigned to theonclick.
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)};
}