IS Library

This library is for you. We kept the boring part for us so you can just have fun with your experiment! It will make your work easier and it will allow us to be sure that once we get your postcard through the website, there won't be any surprises. Here you can find an example of usage. Let's start with the documentation:

Getting started

Link the library in the head section of your page, an IS object will be exposed on the window.

<script type="text/javascript" src="https://isolation.api.lrnz.work"></script>

Initiate your experiment

Initiate your experiment calling IS.create(options):

IS.create({
  onInit: (data) => {},
  onChangeState: (data) => {},
  onResize: (data) => {},
  onTick: (data) => {},
  onPointerMove: (data) => {},
})

This method is responsible for the experiment bootstrap and for the communication with the website.
These are the supported events:

onInit

It's invoked once, when the experiment is fully loaded. It receive an object with this arguments:

parameter	type	description
`author`	String	experiment author
`title`	String	experiment title
`width`	Number	window width
`height`	Number	window height
`state`	Boolean	toggle button state

onChangeState

It's invoked each time the toggle button is clicked. It receives a single boolean:

parameter	type	description
`state`	Boolean	toggle button state

onResize

It's invoked on window resize. It receives an object with these arguments:

parameter	type	description
`x`	Number	mouse x position
`y`	Number	mouse y position
`width`	Number	window width
`height`	Number	window height
`isPointerInside`	Boolean	true if the cursor is inside the iframe
`state`	Boolean	toggle button state

onTick

Basically a request animation frame implementation. It receives an object with these arguments:

parameter	type	description
`x`	Number	mouse x position
`y`	Number	mouse y position
`width`	Number	window width
`height`	Number	window height
`timestamp`	Number	request animation frame timestamp
`isPointerInside`	Boolean	true if the cursor is inside the iframe
`state`	Boolean	toggle button state

onPointerMove

Basically a cross-device mousemove implementation. It receives an object with these arguments:

parameter	type	description
`x`	Number	mouse x position
`y`	Number	mouse y position
`width`	Number	window width
`height`	Number	window height
`isPointerInside`	Boolean	true if the cursor is inside the iframe
`state`	Boolean	toggle button state

In development mode, how can I reinitiate the experiment?

The method IS.create returns a dispose function. You can call it before recreate your experiment for kill all the existing listeners:

var dispose = IS.create(options);

dispose();

dispose = IS.create(options);

Can I use it outside the iframe?

Absolutely yes. You won't have to change anything. If used outside the iframe, the library will create a toggle button to simulate the final behavior. Happy c🏝ding!