Skip to content

Drop menus

Giorgio Garofalo edited this page Jan 22, 2021 · 2 revisions

It's easy to work with drop-menus in Chorus. An example of drop-menu is the main one, accessible by either right-clicking or by pressing CTRL+space, which looks like this:

Main drop-menu

Changes to drop-menus can be done from the onDropMenuOpen(type, menu) event.

  • type refers to a unique string identifier of the opened menu; Chorus' built-in menu types are main, insert, show and previews.
  • menu refers to the actual menu instance.

We can create a new simple button by simply checking the type and calling menu.addButton(text, action):

function onDropMenuOpen(type, menu) {
    if(type == 'main') {
        menu.addButton('Print something', (area, x, y) => {
            alert('Hello, world!');
        })
    }
}

area, x and y refer respectively to the current editor area (it will be explained later), and to the coordinates of the menu.

Custom drop-menu 1

Custom drop-menu

It is possible to create menus by calling the createDropMenu(type, buttons) function, preferably in onInit(). It returns the instance of the menu, but we will not use it.

buttons is an array of text-action pairs. A menu example is the following:

function onInit() {
    createDropMenu('my_menu', {
            'Button1': (area, x, y) => alert('Button1 pressed'),
            'Button2': (area, x, y) => alert('Button2 pressed')
        }
    );
}

Once we've our menu, we can add buttons to access it, inside the onDropMenu(type, menu) event, which use the built-in newMenuAction(type):

function onDropMenuOpen(type, menu) {
    if(type == 'main') {
        menu.addButton('Open my menu...', newMenuAction('my_menu'))
    }
}

In this example, a button called "Open my menu..." is added to the main menu, which, when activated, will show two buttons: Button1 and Button2, both executing a print action.

NOTE! For convention, a button that opens a new sub-menu should have name ending with 3 dots.
NOTE! The API contains a openDropMenu(type, x, y) function (type can be both a string id and a menu instance), but newMenuAction(type) is preferred for opening sub-menus as it will pass several information to the new menu.