slipshow
Version:
This is not another slide engine, but a slip engine.
358 lines (335 loc) • 20.1 kB
HTML
<html>
<head>
<title>Slip slip presentation</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="slipIntroduction.css">
<link rel="stylesheet" type="text/css" href="../css/slip.css">
<link rel="stylesheet" type="text/css" href="../css/theorem.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/panglesd/slip-js@gh-pages/css/slip.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/panglesd/slip-js@gh-pages/css/theorem.css"> -->
<!-- For the use of mathjax -->
<!-- <script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script> -->
<script type="text/javascript" id="MathJax-script"
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<!-- For the use of highlight.js -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">
<!-- Highlight.js does not support inline coloring, this is a work-around -->
<style>
.inline-code {
display: inline;
padding: 1px;
}
</style>
</head>
<body>
<slip-slipshow delay="1">
<!-- First slip, an introduction -->
<slip-slip id="intro">
<slip-title>Slip.js</slip-title> <!-- Beamer style title -->
<slip-body> <!-- Beamer style margin -->
<ul>
<li><span emphasize-at="0">Slip.js</span> is a "slide" engine written in javascript.</li>
<li pause>Its goal is to keep the best from both worlds of:
<ul>
<li><span emphasize-at="1">Beamer</span>, its simplicity to create slides without worrying too much on presentation.</li>
<li pause><span emphasize-at="2">Prezi</span>, which moves/zoom on a canvas, making it nice/original/showing the structure...</li>
</ul>
</li>
<li pause>This hybrid is the concept of <span emphasize-at="3">slip</span>.</li>
</ul>
<div class="definition" title="Slip" pause> <!-- Beamer style definition -->
A slip is a slide without inferior boundary (the view moving step by step to show it entirely).
</div>
<div class="theorem" title="Fundamental Theorem of slip" pause> <!-- Beamer style theorem -->
Slip.js, it's slip party.
</div>
</slip-body>
</slip-slip>
<!-- Second slip, the basics -->
<slip-slip id="base">
<slip-title>The basics</slip-title>
<slip-body>
You need to write html. This is what a minimal slip presentation looks like:
<!-- Sorry for the mess: including html into html is not very readable... -->
<pre><code class="html"><!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="slip.css">
<link rel="stylesheet" type="text/css" href="theorem.css">
</head>
<body>
<div class="cpt-slip">0</div>
<div class="presentation">
<div class="slip" id="id-slip-1"> ... </div>
<div class="slip" id="id-slip-2"> ... </div>
</div>
</body>
<script src="slip.js"></script>
</html></code></pre>
<div pause>
You can use <a href="http://choum.net/panglesd/slides/slip-js">http://choum.net/panglesd/slides/slip-js/</a> as a CDN for including css and javascript:
<pre><code><link rel="stylesheet" type="text/css" href="http://choum.net/panglesd/slides/slip-js/slip.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>
</code></pre>
</div>
</slip-body>
</slip-slip>
<!-- Third slip, the beamer part -->
<slip-slip id="beamer-part">
<slip-title>The slide part of Slip</slip-title>
<slip-body>
We list the "slides" behaviour that slip can also do:
<ul>
<!-- Highlight makes it unreadable, should be changed. -->
<li pause>
We can make things appear step by step<!-- , with <pre class="inline-code"><code class="html inline-code">chg-visib-at</code></pre>. For instance, this bullet code is <pre class="inline-code"><code class="html inline-code"><li chg-visib-at="1">...</li></code></pre> -->. This is made with the attributes <pre class="inline-code"><code class="html inline-code">chg-visib-at</code></pre>.
</li>
<li pause>
This bullet code is <pre class="inline-code"><code class="html inline-code"><li chg-visib-at="2">...</li></code></pre>.
</li>
<li chg-visib-at="3 -4">
We hide an element by putting a negative number. This bullet code is <pre class="inline-code"><code class="html inline-code"><li chg-visib-at="3 -4">...</li></code></pre>. Be careful, it will soon disappear.</li>
<li pause="2">
We can also emphasize at a specified step, using the attribute <pre class="inline-code"><code class="inline-code html">emphasize-at="..."</code></pre> : <span emphasize-at="5">Bli</span>, <span emphasize-at="6">Bla</span>, <span emphasize-at="6 7">Blu</span>...
</li>
</ul>
<div class="theorem" title="Slip's recursion theorem" chg-visib-at="8">
We also have environment for theorems/definitions/examples:
<pre><code class="html"><div class="theorem" title="Slip's recursion theorem" chg-visib-at="8">
We also have environment for theorems/definitions/examples:
...
</div></code></pre>
The <pre class="inline-code"><code class="inline-code">title</code></pre> attribute allows to choose the title.
</div>
<div chg-visib-at="9">We can also write math with \(mathjax\). This amounts to most of the things done with classic slides.</div>
</slip-body>
</slip-slip>
<!-- Fouth slip, the slip part -->
<slip-slip id="future">
<slip-title>The future: slips</slip-title>
<slip-body>
<h1>Problem</h1>
The problems with slides are the following:
<ul>
<li pause>The elements appearing at the beginning of a slide stay much longer on screen than those appearing at the end.</li>
<li pause>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.</li>
<li pause>The pdf format is very restricted on "interactivity".</li>
</ul>
<div pause class="block" title="A bit of latin">
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.
</div>
<h1 pause down-at-unpause="solution">Solution!</h1>
<div id="solution" class="theorem">
Slips address this!
</div>
<ul>
<li id="first-li" pause down-at-unpause>We can move the screen to see an element below with <pre class="inline-code"><code class="inline-code html">down-at</code></pre>. <!-- Here, we have <pre class="inline-code"><code class="inline-code html"><li down-at="5">...</li></code></pre>. --></li>
<li pause center-at-unpause>Same, we can center on an element with <pre class="inline-code"><code class="inline-code html">center-at</code></pre>.</li>
<li pause up-at-unpause="first-li">If we really don't want to see what was before, we can align an element with the top of the screen with <pre class="inline-code"><code class="inline-code html">up-at</code></pre>. Here, it is done with the first bullet.<!-- the first bullet code has in reality <pre class="inline-code"><code class="inline-code html"><li down-at="5" up-at="7">...</li></code></pre>. --></li>
<h3 pause>This is the concept of slip.js: a downward infinite slide. But slip.js is much more!</h3>
<li pause>All slips are placed on a big "universe". <span pause="2" emphasize-at="11">But they are just html elements and can be placed statically, relatively or absolutely. </span>
<pre pause><code class="html"><div style="display: flex; justify-content: space-around; margin:40px;">
<div class="slip" id="red" scale="0.25" delay="1"> ... </div>
<div class="slip" id="blue" scale="0.25" delay="1"> ... </div>
</div></code></pre>
</li>
<div style="display: flex; justify-content: space-around; margin:40px;">
<!-- <div> -->
<slip-slip auto-enter id="red" style="background-color:red" scale="0.25" delay="1"> <!-- enter-at="12" -->
<slip-title>Choose a color</slip-title>
<slip-body>
<div style="color:blue; font-size:5em;text-align:center">Blue Slip</div>
<div pause style="color:blue; font-size:2em;text-align:center">The presentation is structured as a tree rather than a linear presentation</div>
<div pause style="color:blue; font-size:2em;text-align:center">Press "t" to hide/see the table of content</div>
<div pause style="color:blue; font-size:2em;text-align:center">Click on a step or a slip to jump to it</div>
<div pause style="color:blue; font-size:2em;text-align:center">The counter bottom-left reflects the tree version of a presentation</div>
<div pause style="color:blue; font-size:5em;text-align:center">Blue Slip</div>
<div style="color:blue; font-size:5em;text-align:center">Blue Slip</div>
<div style="color:blue; font-size:5em;text-align:center">Blue Slip</div>
<div down-at="5" style="color:blue; font-size:2em;text-align:center">Remember: slips are not of fixed height!</div>
</slip-body>
</slip-slip>
<!-- </div>
<div> -->
<slip-slip auto-enter id="blue" style="background-color:blue" scale="0.25" delay="1"> <!-- enter-at="13" -->
<slip-title>Choose a color</slip-title>
<slip-body>
<div style="color:red; font-size:5em;text-align:center">Red Slip</div>
<div pause style="color:red; font-size:2em;text-align:center">You can navigate slip by slip with shift+left/right</div>
<div pause style="color:red; font-size:2em;text-align:center">You can restart a slip with "r"</div>
<div pause style="color:red; font-size:2em;text-align:center">Soon there will be more navigation fun!</div>
</slip-body>
</slip-slip>
<!-- </div> -->
</div>
<li pause down-at-unpause="js-example">
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!
<ul>
<li id="js-example"> Any javascript poorly written:
<div style="position: relative;padding: 5px;">
<input style="transition: left 1s; left:0px; font-size: 1.5em; visibility:hidden" type="button" id="mouseGhost" value="Click me!"/>
<input style="transition: left 1s; position:absolute; left:0px; font-size: 1.5em" type="button" id="mouse" value="Click me!"/>
</div>
</li>
<li down-at-unpause pause>
Any HTML5 possibility:
<div style="text-align: center"><iframe width="336" height="189" src="https://www.youtube.com/embed/qk00gbDwGqM" frameborder="0" allowfullscreen></iframe></div>
</li>
<li down-at-unpause pause>
Any random CSS trick copy-pasted from the internet:
<!-- Should certainly be in a separate file, but as it is random copy-pasted css, it is allowed here -->
<style>
#container {
height: 200px;
width: 200px;
position:relative;
display:inline-block;
}
.square{
height: 94%;
width: 94%;
background: white;
position: absolute;
top: 50%;
left: 50%;
margin: -47% 0 0 -47%;
}
.black{
background: black;
animation: rotate 10s infinite linear;
}
@keyframes rotate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
</style>
<div style="margin-top:50px; text-align: center">
<!-- Argh random copy-pasted html ... -->
<div id="container">
<div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"><div class="square"><div class="square black"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<!-- Still in the same slip, but somehow next part. Use of a usual html title (h1). -->
<h1 pause up-at-unpause>Slip.js advanced: fine control of events</h1>
<ul>
<li>You can annotate presentations: Press "w" to start annotating! Try it on the box below!</li>
<div style="border: 1px solid black; height: 100px">Whiteboard</div>
<li pause>You can choose the highlight tool by pressing "h"</li>
<li pause>You can choose the "erase pen" with "W" and the "erase highlighter" with "H"</li>
<li pause>You can stop annotating with "x" and clear annotations with "X"</li>
</ul>
<!-- Still in the same slip, but somehow next part. Use of a usual html title (h1). -->
<h1 pause up-at-unpause>Slip.js advanced: fine control of events</h1>
<ul>
<li pause>It is easy to define custom functions to be called at precise time of the presentation:
<ul>
<!-- highlight.js again messing with readability -->
<li>
At a given step of a slip,
</li>
<li pause>
When refreshing the slip,
</li>
<li pause>
When leaving or entering...
</li>
</ul>
</li>
<li pause>There are already some tools (such as a special querySelector which avoids querying inside subslips) and there will soon be many more!
</li>
<li pause>The project is open-source and will (soon) be well-documented!
</li>
</ul>
</slip-body>
</slip-slip>
<!-- The two small slips used to show slip placement -->
<!-- The last slip taking a step back and with links -->
<!-- <div class="slip" id="links" pos-x="2" pos-y="2" scale="4.3" delay="3">
<div chg-visib-at="0" class="c1" style="position:absolute; top: 30%; left: 10%;">Github: <a href="https://github.com/panglesd/slip-js">https://github.com/panglesd/slip-js</a>.</div>
<div chg-visib-at="0" class="c1" style="position:absolute; top: 40%; left: 10%;">An example (old version of the engine): <a href="https://choum.net/panglesd/slides/slides-js/slides.html">Slips</a>.</div>
</div> -->
<div chg-visib-at="4" class="c1" style="font-size: 170px;position:absolute; top: 30%; left: 5%; right: 5%; background-color: rgba(255,255,255,0.9); border-radius: 5%;">
<div style="margin: 100px">Github: <a href="https://github.com/panglesd/slip-js">https://github.com/panglesd/slip-js</a>.</div>
<div style="margin: 100px">An example (old version of the engine): <a href="https://choum.net/panglesd/slides/slides-js/slides.html">Slips</a>.</div>
</div>
</slip-slipshow>
<script src="../slipshow.cdn.min.js"></script>
<script>
let engine = new Slipshow.Engine(document.querySelector("slip-slipshow"));
window.engine = engine;
let rootSlip = engine.getRootSlip();
// let rootSlip = new Slip("rootSlip", [], engine, {});
engine.setRootSlip(rootSlip);
//rootSlip.setEngine(engine);
// We want a fine control, so we don't let the presentation order the slips by their order of appearance in the HTML file.
// (this is mostly because we want the slips "red" and "blue" in the middle of the slip "future")
// Creation of slips
let intro = new Slipshow.Slip("intro", "Slip Intro", [], engine, {});
window.intro = intro;
let base = new Slipshow.Slip("base", "Slip Basics", [], engine, {});
window.base = base;
let beamerPart = new Slipshow.Slip("beamer-part", "Boring part of Slip", [], engine, {});
window.beamerPart = beamerPart;
// All JS added must be done in the init or the firstVisit function
let future = new Slipshow.Slip("future", "Fun part of Slip", [], engine, {init: (slip) => { slip.delay = 0;}});
window.future = future;
future.setNthAction(0, (slip) => {
let but = slip.query("#mouse");
but.addEventListener("mouseenter", (ev) => {
but.style.left = (but.style.left == "0px" ? "80%" : "0px");
});
but.addEventListener("click", (ev) => {
alert("yo");
});
});
future.setNthAction(1, (slip) => {
slip.delay = 1;
});
// When we enter red, we want that when we go back to future we do that "smoothly" (in 1s)
let red = new Slipshow.Slip("red", "red Slip", [], engine, { firstVisit: (slip) => { future.delay = 1;}});
let blue = new Slipshow.Slip("blue", "blue Slip", [], engine, {});
// let scaleTest = new Slipshow.Slip("scale-test", [], presentation, engine, {});
// the "c1" elements have to be hidden for when "future" unzoom. They have to be shown as soon as we enter this slip.
// let links = new Slipshow.Slip("links", [], engine, {firstVisit: (slip) => {slip.revealAll(".c1");}});
// at step 9, future unzooms the window
future.setNthAction(10, (slip) => {
if(typeof slip.savedX == "undefined") {
slip.savedX = slip.currentX; // saving initial coordinates inside slip
slip.savedY = slip.currentY; // so that they are accessible in the next action
}
setTimeout(()=> {
slip.moveWindow(2,2,4,0,1);
}, 0);
});
future.setNthAction(11, (slip) => {
setTimeout(()=> {
slip.moveWindow(slip.savedX,slip.savedY,1,0,1); // recovering initial position
}, 0);
red.element.style.display = "inline-block";
blue.element.style.display = "inline-block";
});
rootSlip.setAction([
intro,
base,
beamerPart,
future,
]);
// let controller = new Controller(engine);
engine.start();
</script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>