7

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?

Feanaro
  • 922
  • 3
  • 19
  • 35

1 Answers1

8

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);
});
Pavel Evstigneev
  • 4,918
  • 31
  • 21
  • 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. https://github.com/nwjs/nw.js/issues/1874#issuecomment-67249147 – Feanaro Mar 01 '15 at 10:21