Ability To Pass In Custom Callbacks on Event

[sinanspd]

I am not sure if I have missed this in the documentation but it would be nice to be able to pass in a callback when the navigation is fired.

The main use case is to be able to use this with Angular (which seems to be getting requested).

Unfortunately the provided onmouseup binding is not able to recognize function defined in the Angular Components.

I tried to bind a custom event listener

document.getElementById('wheelnav-piemenu-slice-0').addEventListener('mouseup', (e) =>{ this.changeFanText("1")})

but for some reason there is a significant grace period where this binding misses the event fires. (For example: if you follow the navigation with an immediate click while the wheel is spinning "changeFanText" doesn't get hit)

The temporary work around I came up with is a messy one and is not very performant. I had to use MutationObservers and listen for class changes for each pie slice

var observer = new MutationObserver((event) => {
      this.handleMutationEvent(event, "1")   
})

var e1 = document.getElementById('wheelnav-piemenu-slice-0')

observer.observe(e1, {
      attributes: true, 
      attributeFilter: ['class'],
      childList: true, 
      characterData: true,
      subtree: true
})

The goal is to be able to callback to () => { someComponentMethod()} each time the navigate happens

[softwaretailoring]

There is a function reference for it in navItem: https://github.com/softwaretailoring/wheelnav/blob/v1.7.1/js/dist/wheelnav.js#L806

You can use it in this way: wheelnav.navItems[i].navigateFunction = function () { someComponentMethod(); };

Is it usable in Angular?

[sinanspd]

Looks like I missed this. This seems to work. I will write up a quick tutorial to get started with Angular and send it your way when I have some time!