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 isolation.is, 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://api.isolation.is"></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:

parametertypedescription
authorStringexperiment author
titleStringexperiment title
widthNumberwindow width
heightNumberwindow height
stateBooleantoggle button state

onChangeState

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

parametertypedescription
stateBooleantoggle button state

onResize

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

parametertypedescription
xNumbermouse x position
yNumbermouse y position
widthNumberwindow width
heightNumberwindow height
isPointerInsideBooleantrue if the cursor is inside the iframe
stateBooleantoggle button state

onTick

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

parametertypedescription
xNumbermouse x position
yNumbermouse y position
widthNumberwindow width
heightNumberwindow height
timestampNumberrequest animation frame timestamp
isPointerInsideBooleantrue if the cursor is inside the iframe
stateBooleantoggle button state

onPointerMove

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

parametertypedescription
xNumbermouse x position
yNumbermouse y position
widthNumberwindow width
heightNumberwindow height
isPointerInsideBooleantrue if the cursor is inside the iframe
stateBooleantoggle 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!

Manifesto
BACK H🏝ME
Submit
Contributors
About