How to add context menu for ListBox(SUI) or TreeView(SUI) in indesign javascript plugin

Question

collegues

I'm developing indesign plugin on javascript. In plugin exist window, on it placed ListBox component. How I can add context menu to my ListBox component?

Answer 1

Ok so here is an approach. I think it's a good starting point:

//A sugar to color groups
var o = {
 paintItem:function(o,c){
   var r = (c && c.r) || Math.round ( Math.random()*10 )/10;
   var g  = (c && c.g) || Math.round ( Math.random()*10 )/10;
   var b = (c && c.b) || Math.round ( Math.random()*10 )/10;
   var a = (c && c.a) || 1;
   o.graphics.backgroundColor = o.graphics.newBrush(o.graphics.BrushType.SOLID_COLOR,[r,g,b], a);
  },
}

//Main routine
var main = function() {
 
 var w = new Window( "dialog", "testingRightClickMenu" ),
 g = w.add('group'),
 btn = g.add('button', undefined, "Cancel" );
 
 //Calling our rightClickMenu "factory"
 var rightClickMenu = rightClickWindow(w);
 rightClickMenu.visible = false;
 rightClickMenu.alignment = ["left","top"] ;
 
 //Mouse click events handler
 var handler = function(evt) {
  
  var screenX = evt.screenX;
  var screenY = evt.screenY;
  var fb = w.bounds;
  var x = screenX- fb[0]+2;
  var y = screenY- fb[1]+2;
  
  //If button click is actually a right click event
  if ( evt.button==2 ) {
   
   //Displaying the right click menu to position x,y
   rightClickMenu.visible = true;
   rightClickMenu.location = [x,y];
  }
 }

 //Setting some UI properties
 w.orientation = 'stack';
 w.preferredSize = [500, 300];
 g.alignment = ["fill","fill"];
 
 //adding mouse click listener
 w.addEventListener ("click", handler, true);
 
 //HACK
 //adding listeners to sub level elements ended with bad behaviors
 //Instead we look at mouse pointer location
 //and hide right click menu if needed
 w.addEventListener ( "mouseout", function(evt) {
  var x1 = rightClickMenu.location[0];
  var x2 = x1+rightClickMenu.size.width;
  var y1 = rightClickMenu.location[1];
  var y2 = y1+rightClickMenu.size.height;
  if ( !rightClickMenu.visible ) return;
  var mouseX = evt.screenX-w.bounds[0];
  var mouseY = evt.screenY-w.bounds[1];
  
  //basicallly checking if the pointer is somewhere else but over the right click menu
  if ( mouseX<x1 
  ||
  mouseX > x2
  ||
  mouseY < y1
  ||
  mouseY > y2 ) rightClickMenu.hide();
  
 });
 w.show();
}

//Some color settings
var colors = {
 grey : {r:240/255,g:240/255,b:240/255},
 blue: {r:79/255,g:157/255,b:251/255},
 transparent:{r:1,g:1,b:1, a:0},
}

//Our pseudo factory for the right click menu
var rightClickWindow = function(p) {

 //Our pseudo "factory" for teh menu Items
 var getMenuItem = function(p, label){
  var menuItem = p.add('group'),
  menuLabel = menuItem.add('statictext', undefined, label );
  menuItem.alignment = "fill";
  
  //Dealing with mouse events
  menuItem.addEventListener ( "mouseover", function() {
   o.paintItem ( menuItem, colors.blue );
   menuLabel.graphics.foregroundColor = menuLabel.graphics.newPen (menuLabel.graphics.PenType.SOLID_COLOR, [1, 1, 1], 1);
  });
  menuItem.addEventListener ( "mouseout", function() {
   o.paintItem ( menuItem, colors.grey);
   menuLabel.graphics.foregroundColor = menuLabel.graphics.newPen (menuLabel.graphics.PenType.SOLID_COLOR, [0, 0, 0], 1);
  });
  menuItem.addEventListener ( "mousedown", function() {
   rightClickMenu.hide();
   alert("You chose "+label );
  });
  o.paintItem ( menuItem, colors.grey);
  return menuItem;
 }

 //menu construction
 var rightClickMenu = p.add('group'),
 menuItem1 = getMenuItem(rightClickMenu, "MenuItem A" );
 menuItem2 = getMenuItem(rightClickMenu, "MenuItem B" );
 menuItem3 = getMenuItem(rightClickMenu, "MenuItem C" );
 rightClickMenu.maximumSize = [100,150];
 
 //Menu UI properties
 rightClickMenu.orientation = "column";
 rightClickMenu.alignment = "fill";
 rightClickMenu.alignChildren = ["fill", "top"];
 rightClickMenu.margins = 5;
 o.paintItem ( rightClickMenu,  colors.grey );
 

 return rightClickMenu;
}

//Running UI
try {
 main();
}
catch(err) {
 alert( err.line+"//"+err.message );
}