Context Menu Script

I wrote this context menu script that enables the developer to add a context menu to any element, launched by any action the developer specify.

One can add it to the page embbed or via a link:

function initContextMenu() {
  document.write('<div id="contextmenu" class="contextmenu"></div>');
}

function writeContextMenu(content) {
  var contextMenu = document.getElementById("contextmenu");
  contextMenu.innerHTML = content; 
}

function showContextMenu(e) {
  var contextMenu = document.getElementById("contextmenu");
  
  var frameWidth, frameHeight, pageOffsetX, pageOffsetY;
  
  if (self.clientWidth) {
    frameWidth = self.innerWidth;
        frameHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientWidth) {
    frameWidth = document.documentElement.clientWidth;
        frameHeight = document.documentElement.clientHeight;
  } else if (document.body) {
    frameWidth = document.body.clientWidth;
        frameHeight = document.body.clientHeight;
  }
  
  if (self.pageXOffset) {
    pageOffsetX = self.pageXOffset;
    pageOffsetY = self.pageYOffset;
  } else if (document.documentElement && document.documentElement.scrollLeft) {
    pageOffsetX = document.documentElement.scrollLeft;
    pageOffsetY = document.documentElement.scrollTop;
  } else if (document.body) {
    pageOffsetX = document.body.scrollLeft;
    pageOffsetY = document.body.scrollTop;
  }

  if ((frameWidth - e.clientX) < contextMenu.offsetWidth) {
    contextMenu.style.left = (pageOffsetX + e.clientX - contextMenu.offsetWidth) + "px";
  } else {
    contextMenu.style.left = e.clientX + "px";
  }

  if ((frameHeight - e.clientY) < contextMenu.offsetHeight) {
    contextMenu.style.top = (pageOffsetY + e.clientY - contextMenu.offsetHeight) + "px";
  } else {
    contextMenu.style.top = e.clientY + "px";
  }

  contextMenu.style.visibility = "visible";
}

function hideContextMenu() {
  if (document.getElementById("contextmenu")) document.getElementById("contextmenu").style.visibility = "hidden";
}

// Write the menu to page
initContextMenu();

// Set the click handler for the page
if (!document.addEventListener){
  document.attachEvent("onclick", hideContextMenu);
} else {
  document.addEventListener("click", hideContextMenu, false);
}

One should add some CSS styling for the context menu box element:

div.contextmenu {
  background-color: #d0d0d0;
  border: 2px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 600;
}

div.contextmenu a.menuItem {
  color: #000000;
  cursor: default;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;
}

div.contextmenu a.menuItem:hover, div.menu a.menuItemHighlight {
  background-color: #000080;
  color: #ffffff;
}

div.contextmenu div.menuItemSep {
  border-top: 1px solid #909090;
  border-bottom: 1px solid #f0f0f0;
  margin: 4px 2px;
}

Here is an example of how one can implement it on an ActiveWidgets Version 1 grid:

// set row template
var row = new Active.Templates.Row;
grid.setTemplate("row", row);

// set the contextmenu handler
row.setEvent("oncontextmenu", function(){this.action("contextmenu")});
grid.setAction("contextmenu", function(src){
  grid.setProperty("selection/index",src.getProperty("item/index"));
  
  var contextMenuContent = '';
  
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+src.getProperty("item/index")+')"><strong>Custom Function A</strong></a>';
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
  contextMenuContent += '<div class="menuItemSep"></div>';
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';
  
  writeContextMenu(contextMenuContent);
  showContextMenu(event);
}
);

It would be appreciated if someone could post an example of how to implement it on a row in an ActiveWidgets Version 2 grid

Here follows an example on how to implement it in Version 2:

function raiseMenuEvent(event){
    this.raiseEvent("onRowContextMenu", event, this.$0);
}

grid.getRowTemplate().setEvent("oncontextmenu", raiseMenuEvent);

grid.onRowContextMenu = function(event, row){
    grid.setRowSelected(row);

    var contextMenuContent = '';
  
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionA('+row+')"><strong>Custom Function A</strong></a>';
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionB()">Custom Function B</a>';
  contextMenuContent += '<div class="menuItemSep"></div>';
  contextMenuContent += '<a class="menuItem" href="javascript:customFunctionC()">Custom Function C</a>';
  
  writeContextMenu(contextMenuContent);
  showContextMenu(event);

}