I need to be able to store the UI state, so it can be restored at a later point in time. I was successful in restoring the state of by subscribing to the redux store, and saving ixSession.eventState
which I restored later by iterating over each item with store.dispatch(actions.eventStateChanged(key, value));
I tried to look through the ix2
implementation and it looks like the only way to invoke renderHTMLElement
is by calling Webflow.require('ix2').actions.instanceAdded()
.
at first I thought I could extract the view state from ixElements[elementId].refState
, but that’s impractical to convert it to the format that’s required for instanceAdded
but that seems impractical as with the smallest change to the ix2
api it might break.
(here is the best of my progress so far, which does not work as it saves the html that does not preserve the click listeners that’s referenced in the state)
$(() => {
const ix2 = Webflow.require('ix2');
const store = ix2.store;
const eventStateStr = window.localStorage.getItem('eventState');
const html = window.localStorage.getItem('html');
if (eventStateStr && html) {
const eventState = JSON.parse(eventStateStr);
for(let key in eventState) {
if (eventState.hasOwnProperty(key)) {
const value = eventState[key];
const actions = ix2.actions;
store.dispatch(actions.eventStateChanged(key, value));
}
}
document.documentElement.innerHTML = html;
window.Webflow && window.Webflow.require( 'ix2' ).init();
document.dispatchEvent( new Event( 'readystatechange' ) );
}
let oldEventState;
store.subscribe(() => {
const ixSession = store.getState().ixSession;
const eventState = ixSession.eventState;
if (oldEventState !== eventState) {
JSON.stringify(eventState)
oldEventState = eventState;
}
});
let oldIxInstances;
store.subscribe(() => {
const ixInstances = store.getState().ixInstances;
if (oldIxInstances !== ixInstances) {
oldIxInstances = ixInstances;
if (Object.keys(ixInstances).length === 0) {
window.localStorage.setItem('eventState', JSON.stringify(oldEventState));
window.localStorage.setItem('html', document.documentElement.innerHTML);
}
}
});
});