While Polypane syncs all interaction events, there are some events we can't accurately sync:
- Closed root webcomponents, since they don't emit events beyond their own shadowRoot.
- Events on
canvaselements/where the exact x,y position is significant (transposing them won't always work, so we don't).
For these situations, you can use the Polypane Message Bus to communicate data to all other panes.
The Polypane Message Bus is only available in default mode.
Message Bug API
The Polypane Message Bus is available on
window.__PolypaneBus and features three functions:
- channel, string
Sends a message to all other panes.
- channel, string
- callback, function
- data, the data sent
This adds a listener on
channel that executes the
callback function with the received data as only argument every time the
send API is called in another pane.
The function returns a Symbol that you can store as a reference. You can add multiple listeners to a single channel.
- channel, string or Symbol
Use this to turn off all the listeners on a
channel when you use a string, or turn off a single listener if you use the Symbol returned by the
As mentioned at the top of this page, you can use this to sync state or events across panes for when these aren't already synced by Polypane.
You can sync DOM events, or their result, on closed web components so these can be tested across screen sizes quickly.
You can sync global game states between panes on change to keep e.g. canvas games in sync between panes while you test different devices.
Got a cool use case? let us know!
Only use the Message Bus in Polypane
There are various ways to detect Polypane, and of course the
__PolypaneBus API won't be available elsewhere.
You can use this to selectively sync events only in Polypane, or to remove these calls from your code during a build step.
Is your question not answered?
Ask via Twitter, Slack or our contact form