QUICK TIPS: Window Events


#1

Hi All,

I’ve gotten some questions about how to handle events in the Window system for OS.js and thought I’d write a short article to introduce you to how it is done (the simplest way).

Ref: https://os.js.org/doc/client/global.html#WindowEvent

Ref: https://os.js.org/doc/client/OSjs.Core.Window.html

The API methods used below was introduced in the latest build. The old method names _addHook() is now deprecated

Events

This is the list of available internal events (name, description and what arguments you get back):

 inited        When has been inited and rendered         => ()
 focus         When window gets focus                    => ()
 blur          When window loses focus                   => ()
 destroy       When window is closed                     => ()
 maximize      When window is maxmimized                 => ()
 minimize      When window is minimized                  => ()
 restore       When window is restored                   => ()
 resize        When window is resized                    => (w, h)
 resized       Triggers after window is resized          => (w, h)
 move          When window is moved                      => (x, y)
 moved         Triggers after window is moved            => (x, y)
 keydown       When keydown                              => (ev, keyCode, shiftKey, ctrlKey, altKey)
 keyup         When keyup                                => (ev, keyCode, shiftKey, ctrlKey, altKey)
 keypress      When keypress                             => (ev, keyCode, shiftKey, ctrlKey, altKey)
 drop          When a drop event occurs                  => (ev, type, item, args)
 drop:upload   When a upload file was dropped            => (ev, <File>, args)
 drop:file     When a internal file object was dropped   => (ev, VFS.File, args)


Note: this is the Window instance.

Binding Events

// 'win' would be 'this' in most cases

win._on('blur', function() {
  console.log('Window was blured')
});

win._on('keydown', function(ev, keyCode, shiftKey, ctrlKey, altKey) {
  if ( keyCode === Utils.Keys.A && shiftKey ) {
    console.log('SHIFT + A pressed');
  }
});

Custom Events

// 'win' would be 'this' in most cases

win._on('something', function(foo) { 
  console.log(foo); // => "bar"
});

win._emit('something', ['bar']);

Using prototype chain

You can also use the prototype chain and override the internal methods to do this. See the API documentation for Window for more information on this (linked in the top).


QUICK TIPS: Application Events\Messages
QUICK TIPS: Drag-and-drop
UPDATE: Version bump - alpha76