Create window-like menu on OS X

Question

I'd like to create a same sort of tray menu like this application. Because it is on the list of applications that use node-webkit/nw.js, I think it's possible. I have looked through all the documentation and couldn't find anything on how to achieve that. Searching Google also wasn't really fruitful.

Maybe one of you guys has done this before and could send me in the right direction?

Girhiny

Answer 1

First you need to prevent app appear in taskbar

{
    "name": "My App",
    "version": "1.0.0",
    "main": "app.html",
    "window": {
        "show": false,
        "show_in_taskbar": false
    }
}

Then you need to create tray (top bar) menu: (example from his source)

tray = new app.node.gui.Tray({
    title: '',
    icon: 'assets/css/images/menu_icon.png',
    alticon: 'assets/css/images/menu_alticon.png',
    iconsAreTemplates: false
});

Then need create hidden window and show it on click in tray:

// create window
var params = {toolbar: app.devMode, frame: false, transparent: true, resizable: false, show: false};
window = app.node.gui.Window.open('templates/panel.html', params);

function showPopup (x, y) {
  window.on('document-end', function()
    window.moveTo(x - (window.window.width / 2) - 6, y);
    window.show();
    window.focus();
  });
}

// show panel when click in tray
tray.on('click', function (evt) {
  showPopup(evt.x, evt.y);
});

Birthwort

Be aware that this doesn't work on older version of node-webkit/nw.js. We are using version 0.8.6 because we run on a lot of native modules that require the use of nodeJS 0.10. In the earlier versions the click event for the Tray in OS X doesn't fire, it does in Windows and Linux though. As has been discussed in this issue. github.com/nwjs/nw.js/issues/1874#issuecomment-67249147 – Girhiny