Trigger events

[Simon Boudrias]

You talk onEnter, onLeave and onResize events on your website. Yet, you only allow to register methods on a config hash.

It'd be great you allowed user to decentralize the use of the state events. If I have a header module managing my app header. I want this module to register for events on my app states, not having to register my chances when I config SSM.

An example API could be:

SSM.state('mobile').on('enter', function() {
  // change the header layout
});

[Jonathan Fielding]

This sounds like a good idea, will make it a priority,

[Jonathan Fielding]

In the meantime you can add new states at any time using addState so you could have multiple mobile states without an issue

[Andreas Schempp]

That's already easily possible.

ssm.getStates().forEach(function(state) {
    state.onEnter.push(...);
});

obviously, you can also use getState to only set it on one specific state. Be aware this is ES5 code.

[Jonathan Fielding]

Awesome thanks for the response, I will be doing native support in all this soon, been crazy busy but am going to be doing some big improvements to the project ASAP

[Will Lanni]

I'm curious if this was added? We're defining a global set of states, and we want to then hook into them in various pages and add specific functionality as needed, where we'd typically use the onEnter parameter when defining a state. For example, I define a state:

ssm.addStates([
    {
        id: 'sm-min',
        query: '(min-width:768px)',
    },
    {
        etc...
    }
]);

And then in a specific page, I'd love to do something similar to what @SBoudrias wrote out:

ssm.state('sm-min').on('enter', function() {
 // do something
});

I'm going to experiment in how to do it as is now, but maybe there already is a way?

[Will Lanni]

Ah. Looking at @aschempp 's example, I see how to add a function to a single state:

Assuming I have a state with an id 'xs-max':

ssm.getState('xs-max').options.onEnter.push(function() {console.log("hello")});

Thanks for that example, folks. Helped me out a lot.

[Will Lanni]

Hmm... actually when I push a function in using the above method, it doesn't run on load, I'm guessing because the state has been instantiated already, and pushing the function in later causes it to exist after page render. I can test this and see it's true by adding in a new function using that onEnter.push() from above; when I resize my browser and I get a match I see the console light up the "hello" statement. However, on load, that "hello" doesn't appear.

So, is there a way to add a new function and force SSM to execute immediately?

[Will Lanni]

OK, this has it autoexecute on my sm-min query match, but of course it then never executes again

ssm.getState('sm-min').options.onEnter.push(
    (function() {
        console.log('hello');
    })()
);

Anyone have any idea on how to push a function into a change state like onEnter, have it execute, and have it continue executing afterwards?

[Jonathan Fielding]

hey,

so the reason you can push into the onEnter is this feature was started as part of a refactor a while ago, the reason it was never completed was simply down to time and priorities,

Thanks

Jonathan

[Jonathan Fielding]

This functionality is added in 3.2.0 however it is undocumented. To use it

const state =  ssm.getState('stateid');
state.attachCallback('leave', () => {
    // callback code
});

[bw1984]

just implemented a basic example of this and can confirm what @wlanni said earlier, using the enter callback works when transitioning between states but doesnt fire onload, code i am using is as follows;

ssm.getState('desktop').attachCallback('enter', function() { console.log('hi'); });

any way to get it to fire onload also?

[Jonathan Fielding]

Ok so that a bug in my implementation BUT people might be using it the way it is so will add a flag,

[Jonathan Fielding]

new implementation

ssm.getState('desktop').attachCallback('enter', function() { console.log('hi'); }, true); 

[Jonathan Fielding]

This is now in master and released as 3.4.0

[Jonathan Fielding]

let me know if it works ok

[bw1984]

works like a charm. much appreciated