Slip.js

Slip.js is a "slide" engine written in javascript.
Its goal is to keep the best from both worlds of:
- Beamer, its simplicity to create slides without worrying too much on presentation.
- Prezi, which moves/zoom on a canvas, making it nice/original/showing the structure...
This hybrid gives birth to the concept of slip.

A slip is a slide without inferior boundary (the view moving step by step to show it entirely).

Slip.js, it's slip party.

The basics

You need to write html. This is what a minimal slip presentation looks like:


<!doctype html>
<html>
    <head>
	<link rel="stylesheet" type="text/css" href="slides.css">
	<link rel="stylesheet" type="text/css" href="theorem.css">
    </head>
    <body>
	<div class="cpt-slip">0</div>
	<div class="presentation">
	    <div class="slide" id="id-slide-1"> ... </div>
	    <div class="slide" id="id-slide-2"> ... </div>
	</div>
    </body>
    <script src="slip.js"></script>
</html>

You can use http://choum.net/panglesd/slides/slip-js/ as a CDN for including css and javascript:

<link rel="stylesheet" type="text/css" href="http://choum.net/panglesd/slides/slip-js/slides.css">
<link rel="stylesheet" type="text/css" href="http://choum.net/panglesd/slides/slip-js/theorem.css">
...
<script src="http://choum.net/panglesd/slides/slip-js/slip.js"></script>

The past: slides

We list the "slides" behaviour that slip can also do:

We can make things appear step by step, with
```
chg-visib-at
```
. For instance, this bullet code is
```
<li chg-visib-at="0 1">...</li>
```
.
This bullet code is
```
<li chg-visib-at="0 2">...</li>
```
.
We hide an element by putting a number below or equal zero. This bullet code is
```
<li chg-visib-at="0 3 -4">...</li>
```
. Be careful, it will soon disappear.
We have a similar mechanism with
```
<span emphasize-at="...">...</span>
```
: emphasize-at="5", emphasize-at="6", emphasize-at="6 7"...

We also have environment for theorems/definitions/examples:

<div class="theorem" title="Slip's recursion theorem" chg-visib-at="0 8">
We also have environment for theorems/definitions/examples:
        ...
</div>

The

title

attribute allows to choose the title.

We can also write math with \(mathjax\). This amounts to most of the things done with slides.

The future: slips

Problem

The problems with slides are the following:

The elements appearing at the beginning of a slide stay much longer on screen than those appearing at the end.
From time to time, we would like to show something that is just slightly bigger than a slide, but does not fit, and separating it in two slides is not really possible.
The pdf format is very restricted on "interactivity".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum neque eu lectus euismod, eget congue massa ultrices. Integer et bibendum sem. Donec neque erat, laoreet et felis vitae, malesuada varius purus. Aenean lacinia tortor id justo consectetur, non volutpat est rhoncus. Praesent eget risus elit. Nullam tempus mi id erat aliquet, sit amet consequat erat volutpat. Phasellus elementum gravida nisl ut auctor. Donec quis massa a mauris tristique interdum gravida ac sem. Aliquam ligula massa, hendrerit et diam sit amet, vulputate consectetur ligula. Phasellus dictum nisl est, quis commodo nunc pellentesque vel. Nulla facilisi. Donec pharetra tellus ut auctor dignissim. Proin convallis ante in pellentesque consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi tempor sem a lectus ullamcorper fringilla. Maecenas tempor metus mauris, non tincidunt ligula placerat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum neque eu lectus euismod, eget congue massa ultrices. Integer et bibendum sem. Donec neque erat, laoreet et felis vitae, malesuada varius purus. Aenean lacinia tortor id justo consectetur, non volutpat est rhoncus. Praesent eget risus elit. Nullam tempus mi id erat aliquet, sit amet consequat erat volutpat. Phasellus elementum gravida nisl ut auctor. Donec quis massa a mauris tristique interdum gravida ac sem.

Solution!

Slips address this!

We can move the screen to see an element below with
```
down-at
```
. Here, we have
```
<li down-at="5">...</li>
```
.
Same, we can center on an element with
```
center-at
```
.
If we really don't want to see what was before, we can align an element with the top of the screen with
```
up-at
```
. Here, the first bullet code has in reality
```
<li down-at="5" up-at="7">...</li>
```
.

This is the concept of slip.js: a downward infinite slide. But slip.js is much more!

By default, slips are positioned on top of the "universe", from left to right. But we can specify their position, size, and the time taken to go to this slide.
```
<div class="slide" id="id" pos-x="3.5" pos-y="2.025" scale="0.25" delay="1"> ... </div>
```

We can use all JS/CSS/HTML power to make more or less useful stuff. The goal is of course to make the presentation clearer!
- Any javascript poorly written:
- Any HTML5 possibility:
- Any random CSS trick copy-pasted from the internet:

Slip.js advanced: fine control of events

When

slip.js

is loaded, several objects are defined:

A variable

engine

which allows to command the window showing the slides. It has the method

moveWindow(x, y, scale, rotate, delay)

,

moveWindowRelative(dx, dy, dscale, drotate, delay)

.

A variable

presentation

which allows to command the presentation. It has the method

next()

,

nextSlide()

,

gotoSlideIndex()

,

getCurrentSlide()

,

get/setSlides()

,

refresh()

.

An object

slide

correspond to an HTML element of class

slide

. It has the method

query(selector)

,

queryAll(selector)

,

next()

,

move{Up;Down;Center}To(selector, delay, offset)

,

{reveal;hide}{∅;All}(selector)

,

setAction(actionList)

,

setNthAction(n, action)

. An action is a function which takes a slide as input.

The best is to see an example:

let options = { init: (slide) => {}, firstVisit: (slide) => {}, whenLeaving: (slide) => {}};
// the "options" parameter allows to set function to call when document is ready, when entering slide for the first time and when leaving the slide

let intro = new Slide("intro", [], presentation, engine, options);
// We could have specified the actions in the instanciation (instead of [])
intro.setAction([
 (slide) => { engine.moveWindowRelative(0,0,1,0,1);
}, (slide) => { engine.moveWindowRelative(0,0,-1,0,1);
}, (slide) => { presentation.nextSlide();
}, (slide) => { slide.revealAll("*");
}]);

let devel = new Slide("devel", [], presentation, engine); // options is optionnal
// We can specify an action for the 5-th "next" of the slide.
devel.setNthAction(5, (slide) => { 
     slide.query(".random-number").innerText = Math.random();
});

// We can specify an order on slides
presentation.setSlides([intro, devel, intro]);

<div class="slide" id="intro">
  <div class="title">Introduction to the subject</div> <!-- for Beamer style title -->
  <div class="slide-body-container"> <!-- for Beamer style margin (remove for full-width slips) -->
      Blablabla
      <!-- avoid including JS in slides -->
  </div>
</div>  

<div class="slide" id="devel">
  <div class="title">Developping the subject</div>
  <div class="slide-body-container">
      <span class="random-number">Bliblibli</span>
  </div>
</div>