Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
1132 lines (1018 sloc) 31.2 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>The Title Of Your Presentation</title>
<!-- Your Slides -->
<!-- One section is one slide -->
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<h1>Le cinéma de <strong>Christopher Nolan</strong></h1>
</figure>
<footer>Martin Richard<small>, PPH</small></footer>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Introduction</h2>
<p>Pourquoi ce sujet&nbsp;?</p>
<ul class="incremental inconset">
<li>Réalisateur prolifique qui a été capable de réaliser (plusieurs fois)
des films hollywoodiens originaux,</li>
<li>Qui m'ont marqué, d'une manière ou d'une autre.</li>
</ul>
</div>
</figure>
<details>pcq j'aime le ciné, et que Christopher Nolan a réalisé plusieurs films
hollywoodiens qui m'ont marqué, d'une manière ou d'une autre.</details>
</section>
<section>
<blockquote>
<img src="images/nolan_portrait1.jpg" style="float: right">
I think there's a vague sense out there that movies are becoming more and more unreal. I know I've felt it.
</blockquote>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Christopher Nolan</h2>
<ul class="incremental">
<li>Né le 20 juillet 1970 à Londres (double nationalité
Anglaise-Américaine)</li>
<li>diplomé de l'<em>University College of London (UCL)</em>, de
littérature anglaise.</li>
<li>Pas d'études de cinéma, mais membre du club de ciméma.</li>
<li>Marié a Emma Thomas, père de 4 enfants.</li>
</ul>
</div>
</figure>
<details>Just read the damn slide!</details>
</section>
<section>
<h2>Filmographie</h2>
<ul class="incremental">
<li>8 films et 3 court-métrages (connus).</li>
<li><strong>Tarantella (1989)</strong>, aujourd'hui introuvable</li>
<li><li><strong>Lacerny (1996)</strong>, également introuvable, réalisé
à l'UCL</li>
<li><strong>Doodlebug (1997)</strong>, il met en scène une personne
essayant de tuer un insecte avec une chaussure. Il est disponible sur
Youtube, par exemple.</li>
</ul>
</section>
<section>
<h2>Following (1998)</h2>
<img src="images/posters/following.jpg" class="poster">
<details>auto-financé, budget d'environ 5000 £. écrit, réalisé et monté, tourné
avec des amis de l'ULC pendant des week-ends. Il met en scène un auteur qui,
pour trouver l'inspiration, va suivre des gens dans la rue, choisit
aléatoirement. Un jour, il suit Cobb, un petit braqueur. Following a pour
particularité de ne pas être monté en respectant la temporalité de l'histoire.
</section>
<section>
<h2>Memento (2000)</h2>
<img src="images/posters/memento.jpg" class="poster">
<details>
scénario basé sur une idée de Jonathan Nolan. Met en scène Leonard Shelby, un
homme qui cherche à retrouver le meurtrier de sa femme. Victime d'une forme
d'amnésie qui l'empêche de former des souvenirs, il oublie alors pratiquement
instantanément tout ce qui se produit. Monté à l'envers, plaçant le spectateur
dans la situation du héros, et déjouant les codes narratifs du long-métrage
classique pour perturber et finalement piéger le spectateur.
</details>
</section>
<section>
<h2>Insomnia (2002)</h2>
<img src="images/posters/insomnia.jpg" class="poster">
<details>
CN signe avec la Warner pour réaliser le remake du film norvégien Insomnia.
Met en scène deux détectives de la police criminelle de Los Angeles contraints
d'enquêter sur le meutre d'une jeune fille. L'histoire se déroule dans une
petite ville d'Alaska, pendant la saison où la nuit ne tombe jamais, provoquant
des insomnies du personnage principal.
Le film se présente sous la forme d'un thriller assez conventionnel qui
respecte les codes du genre. On retrouve tout de même les astuces du
réalisateur, qui insiste sur la disparition des repères temporels, (concept
d'intensified continuity).
</details>
</section>
<section>
<h2>Batman Begins (2005)</h2>
<img src="images/posters/batmanbegins.jpg" class="poster">
<details>
n'osent plus l'exploiter depuis l'échec de Batman &amp; Robin. CN &amp; David S.
Goyer proposent un reboot. 1e blockbuster de CN. Concentré sur Bruce devenant
Batman, env contemporain réaliste. Original par rapport aux autres superhero
movies. mature, sobre et plus sérieux (cf James bond casino Royale). Peu de
CGI.
</details>
</section>
<section>
<h2>The Prestige (2006)</h2>
<img src="images/posters/theprestige.jpg" class="poster">
<details>
Adaptation du roman de Christopher Priest par CN et JN. Repose sur des
mécanismes de narration complexes : l'histoire est racontée à travers la
lecture du journal intime d'un des protagonistes, qui raconte ses recherches et
lit un journal volé à son rival. On lit un journal dans un journal. La
temporalité n'est donc pas linéaire, et le film contient plusieurs
changements de point de vue entre les deux personnages.
</details>
</section>
<section>
<h2>The Dark Knight (2008)</h2>
<img src="images/posters/tdk.jpg" class="poster">
<details>
Plus gros succès critique de CN, il est généralement considéré comme redéfinissant le genre des adaptations de Comic books au cinéma.
Influencé par les film néo-noirs. L'histoire repose sur l'idée que Batman
entraîne nécessairement des réactions violentes de la part des criminels de
Gotham City. Le joker impose des situations où ils devront faire des choix qui
mettront à mal leur éthique, leur morale et leur identité.</details>
</section>
<section>
<h2>Incetion (2010)</h2>
<img src="images/posters/inception.jpg" class="poster">
<details>
écrit, produit et réalisé par CN. C'est un film de science-fiction,
d'espionnage et de braquage. Il reprend également des codes du néo-noir.
Le film met en scène un braquage dans des rêves imbriqués, permettant
à CN d'utiliser l'idée d'un monde imaginaire pour manipuler l'espace, la
physique et le temps. comme Matrix, le scénario et la fin ouverte d'Inception
ont entraîné de nombreuses discussions, théories et analyses.
</details>
</section>
<section>
<h2>The Dark Knight Rises (2012)</h2>
<img src="images/posters/tdkr.jpg" class="poster">
<details>
Dernier batman de Nolan, marqué par l'actualité tragique à la sortie du film.
Succès commercial, mais qui n'atteint pas le succès critique du précédent. J'en
parlerai pas, parce j'ai pas eu le temps de me renseigner suffisament (vu que
3 fois hein ^^).
</details>
</section>
<section>
<blockquote>
Because you want to be fooled
<img
src="images/inception-diagram.jpg"
style="position: absolute; display: block; left:
75px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Construction d'un scénario</h2>
<ul class="incremental">
<li>Les personnages</li>
<li>Le script (ce qu'il se passe)</li>
<li>La narration (comment est raconté ce qu'il se passe)</li>
</ul>
<ul class="incremental">
<li><p>La règle des 2/3</p></li>
</ul>
</div>
</figure>
<details>Développer deux aspects, garder le troisième simple.</details>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Scénario de Nolan&nbsp;?</h2>
<ul class="incremental">
<li>Nolan choisit un script riche et une narration complexe.</li>
<li>Les personnages ont des intentions pratiquement
universelles&nbsp;:</li>
</ul>
<ul class="incremental iconset">
<li><img src="images/icons/heart.svg" width="80" height="80"></li>
<li><img src="images/icons/crown.svg" width="80" height="80"></li>
<li><img src="images/icons/police.svg" width="80" height="80"></li>
</ul>
</div>
</figure>
<details>amour, quête du pouvoir, sécurité</details>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Narration non linéaire</h2>
<ul class="incremental">
<li>linéraire = labyrinthe scénaristique,</li>
<li>empeche le spectateur d'analyser, et accentue l'effet de
vraissemblance</li>
<li>L’exception&nbsp;: <em>Insomnia</em>, personnages développés et
narration traditionnelle.</li>
</ul>
</div>
</figure>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Les personnages</h2>
<ul class="incremental">
<li>Doit toujours avancer pour atteindre son but</li>
<li>La réalité est un concept flou, voire abstrait</li>
<li>Invariablement intègre, il ne cesse de poursuivre son objectif</li>
<li>Absorbe et internalise le monde dans lequel il évolue</li>
<li>solipsisme, néo-noir</li>
</ul>
</div>
</figure>
</section>
<section>
<blockquote>You put the subject into that dream
<img
src="images/inception.jpg"
style="display: block; position: absolute; left: 45px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/inception-squared.jpg">
<div class="inception">
<h2>Inception</h2>
<ul class="incremental">
<li>Dom Cobb&nbsp;: solipsisme</li>
<li>Heist movie&nbsp;: one last job, exposition.</li>
<li>Fin ouverte</li>
</ul>
</div>
</figure>
<details>
Expo: mode de discours, explication de ce qui va se produire, découverte de la
science du rêve, du contenu de la mission pendant qu'elle se déroule. Possible
car les rêves s'influencent mutuellement.
</details>
</section>
<section>
<blockquote>Ah, now there's a Batman.
<img src="images/tdk.jpg" style="display: block; position: absolute; left:
60px;"></blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/tdk-squared.jpg">
<div class="inception">
<h2>The Dark Knight</h2>
<ul class="incremental">
<li>Suite de Batman Begins, budget important</li>
<li>Plus proche du thriller bandit-policier que du film de super-héros</li>
<li>Discours politique rappellant les USA selon George W. Bush</li>
<li>Le Joker représente le terrorisme</li>
</ul>
</div>
</figure>
</section>
<section>
<blockquote>Now you're looking for the secret. But you won't find it because of
course, you're not really looking.
<img src="images/theprestige.jpg" style="display: block; position: absolute;
left: 60px;"></blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/prestige-squared.jpg">
<div class="inception">
<h2>The Prestige</h2>
<ul class="incremental">
<li>Narration complexe (histoires emboîtées)</li>
<li>Analogie entre le cinéma et l'illusionisme</li>
<li>Capter l'attention du spectateur, ne pas le laisser questionner la
fiction</li>
<li>Mise en abyme entre les illusions des personnages et l'illusion opérée
par Nolan</li>
</ul>
</div>
</figure>
<details>// avec 6e sens</details>
</section>
<section>
<blockquote>
It's not who I am underneath, but what I <em>do</em> that defines me.
<img src="images/batmanbegins.jpg" style="display: block; position:
absolute; left: 60px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/batmanbegins-squared.jpg">
<div class="inception">
<h2>Batman Begins</h2>
<ul class="incremental">
<li><em>Reboot</em> de la franchise, après les précédents échecs</li>
<li>Concentré sur le personnage de Bruce Wayne, il manque un <em>vrai</em>
villain.</li>
<li>Thèmes matures&nbsp;: vengence contre violence, corruption d'un
système.</li>
<li>À Hollywood, chaque période a son genre, ici le film de super-héros est
affirmé comme un genre mature.</li>
</ul>
</div>
</figure>
<details></details>
</section>
<section>
<blockquote>
Let me sleep.
<img src="images/insomnia.png" style="display: block; position:
absolute; left: 60px; padding-top: 15px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/insomnia-squared.jpg">
<div class="inception">
<h2>Insomnia</h2>
<ul class="incremental">
<li>Explotation de la continuité intensifiée pour développer la
subjectivité des personnages</li>
<li>Tournage pratiquement pas <em>story-boardé</em></li>
<li>Produit par Steven Soderberg</li>
<li>Film "commande", qui permet de tester un réalisateur.</li>
</ul>
</div>
</figure>
<details>= plein de petits plans</details>
</section>
<section>
<blockquote>I can say whatever the fuck I want, and you won't remember.
<img src="images/insomnia.png" style="display: block; position:
absolute; left: 60px; padding-top: 15px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/memento-squared.jpg">
<div class="inception">
<h2>Memento</h2>
<ul class="incremental">
<li>Néo-noir</li>
<li>Représentation absolue du solipsisme&nbsp;: le personnage n'a pas de
mémoire immédiate</li>
<li>Monté à l'envers, pour que le spectateur soit dans la situation du
personnage principal</li>
<li>Mise en échec du spectateur&nbsp;: affirmation d'une fin alors qu'il
a appris à douter des faits exposés.</li>
</ul>
</div>
</figure>
<details>= plein de petits plans</details>
</section>
<section>
<blockquote>
You take it away, and you show them what they got.
<img src="images/following.jpg" style="display: block; position:
absolute; left: 60px; padding-top: 15px;">
</blockquote>
</section>
<section>
<figure>
<img src="images/backdrops/following-squared.jpg">
<div class="inception">
<h2>Following</h2>
<ul class="incremental">
<li>Néo-noir</li>
<li>Réalisé sans moyens, utilisation massive de la <em>voix-off</em></li>
<li>Subjectivité, narration fracturée, le spectateur n'en sais pas plus que
le personnage principal</li>
<li>Thriller qui confirme que Nolan privilégie l'histoire (le
<em>storytelling</em>) à la technique.</li>
</ul>
</div>
</figure>
<details>= plein de petits plans</details>
</section>
<section>
<blockquote>
There are points where you worry that you might be putting too much in and alienating the audience.
</blockquote>
</section>
<section>
<figure>
<img src="images/inception-background-squared.jpg">
<div>
<h2>Conclusion</h2>
<ul class="incremental inconset">
<li>Capable de manipuler intelligemment les codes du cinéma Néo-noir sur le
fond comme sur la forme.</li>
<li>Cinéma innovant dans le <em>storytelling</em>, mais dont la technique
est parfois pauvre.</li>
<li>Devenu un réalisateur <em>star</em>, dont on va voir le film pour son
réalisateur.</em></li>
<li>Méta-genre, mise en abyme</li>
</ul>
</div>
</figure>
</section>
<!-- Your Style -->
<!-- Define the style of your presentation -->
<style>
@font-face {
font-family: "Lucida Sans Unicode";
src: url('fonts/lsansuni.ttf');
}
@font-face {
font-family: "Gotham Black";
src: url('fonts/Gotham/Gotham-Black.ttf');
}
@font-face {
font-family: "Gotham Thin";
src: url('fonts/Gotham/Gotham-Thin.ttf');
}
@font-face {
font-family: "Inception";
src: url('fonts/inception-webfont.eot');
src: url('fonts/inception-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/inception-webfont.woff') format('woff'),
url('fonts/inception.ttf') format('truetype'),
url('fonts/inception-webfont.svg#InceptionRegular') format('svg');
}
html, .view body { background-color: black; counter-reset: slideidx; }
body, .view section { background-color: white; border-radius: 12px }
/* A section is a slide. It's size is 800x600, and this will never change */
section, .view head > title {
font-family: "Lucida Sans Unicode", arial, serif;
font-size: 25px;
}
.view section:after {
counter-increment: slideidx;
content: counter(slideidx, decimal-leading-zero);
position: absolute; bottom: -80px; right: 100px;
color: white;
}
.view head > title {
color: white;
text-align: center;
margin: 1em 0 1em 0;
}
h1, h2, h3 {
letter-spacing: .5em;
text-transform: uppercase;
}
h1 {
text-align: center;
line-height: 35px;
width: 100%;
font-size: 30px;
margin-top: 150px;
}
h1 > strong {
display: block;
font-family: "Gotham Black","Lucida Sans Unicode";
letter-spacing: normal;
font-weight: 100;
display: block;
font-size: 60px;
text-shadow: 0px 3px rgb(255, 255, 255);
}
h2 {
margin-top: 5px;
text-align: center;
font-size: 35px;
}
h3 {
margin: 100px 0 50px 100px;
}
ul {
margin: 40px 80px;
}
ul.incremental > li {
list-style: none;
margin: 15px 0;
}
ul.iconset { text-align: center; }
ul.iconset li { display: inline; padding: 0 15px; }
img.poster {
margin: 50px auto;
display: block;
}
p {
margin: 25px;
font-size: 30px;
text-align: center;
}
blockquote {
height: 100%;
background-color: black;
color: white;
font-size: 40px;
padding: 50px;
}
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
/* Figures are displayed full-page, with the caption
on top of the image/video */
figure {
background-color: black;
width: 100%;
height: 100%;
}
figure > * {
position: absolute;
}
figure > img, figure > video {
width: 100%; height: 100%;
}
figcaption {
margin: 70px;
font-size: 50px;
}
.inception {
color: white;
}
footer {
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
font-size: 16px;
font-weight: bold;
padding: 10px;
text-align: right;
color: rgb(159, 168, 176);
background: -moz-linear-gradient(center top , rgb(61, 72, 80) 3%, rgb(49, 61, 69) 4%, rgb(35, 43, 48) 100%) repeat scroll 0% 0% transparent;
box-shadow: 0px 0px 10px rgb(51, 51, 51);
opacity: 0.95;
}
/* Transition effect */
/* Feel free to change the transition effect for original
animations. See here:
https://developer.mozilla.org/en/CSS/CSS_transitions
How to use CSS3 Transitions: */
section {
-moz-transition: left 400ms linear 0s;
-webkit-transition: left 400ms linear 0s;
-ms-transition: left 400ms linear 0s;
transition: left 400ms linear 0s;
}
.view section {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.view section[aria-selected] {
border: 5px red solid;
}
/* Before */
section { left: -150%; }
/* Now */
section[aria-selected] { left: 0; }
/* After */
section[aria-selected] ~ section { left: +150%; }
/* Incremental elements */
/* By default, visible */
.incremental > * { opacity: 1; }
/* The current item */
.incremental > *[aria-selected] { opacity: 1; }
/* The items to-be-selected */
.incremental > *[aria-selected] ~ * { opacity: 0; }
/* The progressbar, at the bottom of the slides, show the global
progress of the presentation. */
#progress-bar {
height: 2px;
background: #AAA;
}
</style>
<!-- {{{{ dzslides core
#
#
# __ __ __ . __ ___ __
# | \ / /__` | | | \ |__ /__`
# |__/ /_ .__/ |___ | |__/ |___ .__/ core :€
#
#
# The following block of code is not supposed to be edited.
# But if you want to change the behavior of these slides,
# feel free to hack it!
#
-->
<div id="progress-bar"></div>
<!-- Default Style -->
<style>
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
details { display: none; }
body {
width: 800px; height: 600px;
margin-left: -400px; margin-top: -300px;
position: absolute; top: 50%; left: 50%;
overflow: hidden;
display: none;
}
.view body {
position: static;
margin: 0; padding: 0;
width: 100%; height: 100%;
display: inline-block;
overflow: visible; overflow-x: hidden;
/* undo Dz.onresize */
transform: none !important;
-moz-transform: none !important;
-webkit-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
}
.view head, .view head > title { display: block }
section {
position: absolute;
pointer-events: none;
width: 100%; height: 100%;
}
.view section {
pointer-events: auto;
position: static;
width: 800px; height: 600px;
margin: -150px -200px;
float: left;
transform: scale(.4);
-moz-transform: scale(.4);
-webkit-transform: scale(.4);
-o-transform: scale(.4);
-ms-transform: scale(.4);
}
.view section > * { pointer-events: none; }
section[aria-selected] { pointer-events: auto; }
html { overflow: hidden; }
html.view { overflow: visible; }
body.loaded { display: block; }
.incremental {visibility: hidden; }
.incremental[active] {visibility: visible; }
#progress-bar{
bottom: 0;
position: absolute;
-moz-transition: width 400ms linear 0s;
-webkit-transition: width 400ms linear 0s;
-ms-transition: width 400ms linear 0s;
transition: width 400ms linear 0s;
}
.view #progress-bar {
display: none;
}
</style>
<script>
var Dz = {
remoteWindows: [],
idx: -1,
step: 0,
html: null,
slides: null,
progressBar : null,
params: {
autoplay: "1"
}
};
Dz.init = function() {
document.body.className = "loaded";
this.slides = Array.prototype.slice.call($$("body > section"));
this.progressBar = $("#progress-bar");
this.html = document.body.parentNode;
this.setupParams();
this.onhashchange();
this.setupTouchEvents();
this.onresize();
this.setupView();
}
Dz.setupParams = function() {
var p = window.location.search.substr(1).split('&');
p.forEach(function(e, i, a) {
var keyVal = e.split('=');
Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
});
// Specific params handling
if (!+this.params.autoplay)
$$.forEach($$("video"), function(v){ v.controls = true });
}
Dz.onkeydown = function(aEvent) {
// Don't intercept keyboard shortcuts
if (aEvent.altKey
|| aEvent.ctrlKey
|| aEvent.metaKey
|| aEvent.shiftKey) {
return;
}
if ( aEvent.keyCode == 37 // left arrow
|| aEvent.keyCode == 38 // up arrow
|| aEvent.keyCode == 33 // page up
) {
aEvent.preventDefault();
this.back();
}
if ( aEvent.keyCode == 39 // right arrow
|| aEvent.keyCode == 40 // down arrow
|| aEvent.keyCode == 34 // page down
) {
aEvent.preventDefault();
this.forward();
}
if (aEvent.keyCode == 35) { // end
aEvent.preventDefault();
this.goEnd();
}
if (aEvent.keyCode == 36) { // home
aEvent.preventDefault();
this.goStart();
}
if (aEvent.keyCode == 32) { // space
aEvent.preventDefault();
this.toggleContent();
}
if (aEvent.keyCode == 70) { // f
aEvent.preventDefault();
this.goFullscreen();
}
if (aEvent.keyCode == 79) { // o
aEvent.preventDefault();
this.toggleView();
}
}
/* Touch Events */
Dz.setupTouchEvents = function() {
var orgX, newX;
var tracking = false;
var db = document.body;
db.addEventListener("touchstart", start.bind(this), false);
db.addEventListener("touchmove", move.bind(this), false);
function start(aEvent) {
aEvent.preventDefault();
tracking = true;
orgX = aEvent.changedTouches[0].pageX;
}
function move(aEvent) {
if (!tracking) return;
newX = aEvent.changedTouches[0].pageX;
if (orgX - newX > 100) {
tracking = false;
this.forward();
} else {
if (orgX - newX < -100) {
tracking = false;
this.back();
}
}
}
}
Dz.setupView = function() {
document.body.addEventListener("click", function ( e ) {
if (!Dz.html.classList.contains("view")) return;
if (!e.target || e.target.nodeName != "SECTION") return;
Dz.html.classList.remove("view");
Dz.setCursor(Dz.slides.indexOf(e.target) + 1);
}, false);
}
/* Adapt the size of the slides to the window */
Dz.onresize = function() {
var db = document.body;
var sx = db.clientWidth / window.innerWidth;
var sy = db.clientHeight / window.innerHeight;
var transform = "scale(" + (1/Math.max(sx, sy)) + ")";
db.style.MozTransform = transform;
db.style.WebkitTransform = transform;
db.style.OTransform = transform;
db.style.msTransform = transform;
db.style.transform = transform;
}
Dz.getDetails = function(aIdx) {
var s = $("section:nth-of-type(" + aIdx + ")");
var d = s.$("details");
return d ? d.innerHTML : "";
}
Dz.onmessage = function(aEvent) {
var argv = aEvent.data.split(" "), argc = argv.length;
argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
var win = aEvent.source;
if (argv[0] === "REGISTER" && argc === 1) {
this.remoteWindows.push(win);
this.postMsg(win, "REGISTERED", document.title, this.slides.length);
this.postMsg(win, "CURSOR", this.idx + "." + this.step);
return;
}
if (argv[0] === "BACK" && argc === 1)
this.back();
if (argv[0] === "FORWARD" && argc === 1)
this.forward();
if (argv[0] === "START" && argc === 1)
this.goStart();
if (argv[0] === "END" && argc === 1)
this.goEnd();
if (argv[0] === "TOGGLE_CONTENT" && argc === 1)
this.toggleContent();
if (argv[0] === "SET_CURSOR" && argc === 2)
window.location.hash = "#" + argv[1];
if (argv[0] === "GET_CURSOR" && argc === 1)
this.postMsg(win, "CURSOR", this.idx + "." + this.step);
if (argv[0] === "GET_NOTES" && argc === 1)
this.postMsg(win, "NOTES", this.getDetails(this.idx));
}
Dz.toggleContent = function() {
// If a Video is present in this new slide, play it.
// If a Video is present in the previous slide, stop it.
var s = $("section[aria-selected]");
if (s) {
var video = s.$("video");
if (video) {
if (video.ended || video.paused) {
video.play();
} else {
video.pause();
}
}
}
}
Dz.setCursor = function(aIdx, aStep) {
// If the user change the slide number in the URL bar, jump
// to this slide.
aStep = (aStep != 0 && typeof aStep !== "undefined") ? "." + aStep : ".0";
window.location.hash = "#" + aIdx + aStep;
}
Dz.onhashchange = function() {
var cursor = window.location.hash.split("#"),
newidx = 1,
newstep = 0;
if (cursor.length == 2) {
newidx = ~~cursor[1].split(".")[0];
newstep = ~~cursor[1].split(".")[1];
if (newstep > Dz.slides[newidx - 1].$$('.incremental > *').length) {
newstep = 0;
newidx++;
}
}
this.setProgress(newidx, newstep);
if (newidx != this.idx) {
this.setSlide(newidx);
}
if (newstep != this.step) {
this.setIncremental(newstep);
}
for (var i = 0; i < this.remoteWindows.length; i++) {
this.postMsg(this.remoteWindows[i], "CURSOR", this.idx + "." + this.step);
}
}
Dz.back = function() {
if (this.idx == 1 && this.step == 0) {
return;
}
if (this.step == 0) {
this.setCursor(this.idx - 1,
this.slides[this.idx - 2].$$('.incremental > *').length);
} else {
this.setCursor(this.idx, this.step - 1);
}
}
Dz.forward = function() {
if (this.idx >= this.slides.length &&
this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
return;
}
if (this.step >= this.slides[this.idx - 1].$$('.incremental > *').length) {
this.setCursor(this.idx + 1, 0);
} else {
this.setCursor(this.idx, this.step + 1);
}
}
Dz.goStart = function() {
this.setCursor(1, 0);
}
Dz.goEnd = function() {
var lastIdx = this.slides.length;
var lastStep = this.slides[lastIdx - 1].$$('.incremental > *').length;
this.setCursor(lastIdx, lastStep);
}
Dz.toggleView = function() {
this.html.classList.toggle("view");
if (this.html.classList.contains("view")) {
$("section[aria-selected]").scrollIntoView(true);
}
}
Dz.setSlide = function(aIdx) {
this.idx = aIdx;
var old = $("section[aria-selected]");
var next = $("section:nth-of-type("+ this.idx +")");
if (old) {
old.removeAttribute("aria-selected");
var video = old.$("video");
if (video) {
video.pause();
}
}
if (next) {
next.setAttribute("aria-selected", "true");
if (this.html.classList.contains("view")) {
next.scrollIntoView();
}
var video = next.$("video");
if (video && !!+this.params.autoplay) {
video.play();
}
} else {
// That should not happen
this.idx = -1;
// console.warn("Slide doesn't exist.");
}
}
Dz.setIncremental = function(aStep) {
this.step = aStep;
var old = this.slides[this.idx - 1].$('.incremental > *[aria-selected]');
if (old) {
old.removeAttribute('aria-selected');
}
var incrementals = $$('.incremental');
if (this.step <= 0) {
$$.forEach(incrementals, function(aNode) {
aNode.removeAttribute('active');
});
return;
}
var next = this.slides[this.idx - 1].$$('.incremental > *')[this.step - 1];
if (next) {
next.setAttribute('aria-selected', true);
next.parentNode.setAttribute('active', true);
var found = false;
$$.forEach(incrementals, function(aNode) {
if (aNode != next.parentNode)
if (found)
aNode.removeAttribute('active');
else
aNode.setAttribute('active', true);
else
found = true;
});
} else {
setCursor(this.idx, 0);
}
return next;
}
Dz.goFullscreen = function() {
var html = $('html'),
requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
if (requestFullscreen) {
requestFullscreen.apply(html);
}
}
Dz.setProgress = function(aIdx, aStep) {
var slide = $("section:nth-of-type("+ aIdx +")");
if (!slide)
return;
var steps = slide.$$('.incremental > *').length + 1,
slideSize = 100 / (this.slides.length - 1),
stepSize = slideSize / steps;
this.progressBar.style.width = ((aIdx - 1) * slideSize + aStep * stepSize) + '%';
}
Dz.postMsg = function(aWin, aMsg) { // [arg0, [arg1...]]
aMsg = [aMsg];
for (var i = 2; i < arguments.length; i++)
aMsg.push(encodeURIComponent(arguments[i]));
aWin.postMessage(aMsg.join(" "), "*");
}
function init() {
Dz.init();
window.onkeydown = Dz.onkeydown.bind(Dz);
window.onresize = Dz.onresize.bind(Dz);
window.onhashchange = Dz.onhashchange.bind(Dz);
window.onmessage = Dz.onmessage.bind(Dz);
}
window.onload = init;
</script>
<script> // Helpers
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
// closest thing possible to the ECMAScript 5 internal IsCallable
// function
if (typeof this !== "function")
throw new TypeError(
"Function.prototype.bind - what is trying to be fBound is not callable"
);
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply( this instanceof fNOP ? this : oThis || window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
var $ = (HTMLElement.prototype.$ = function(aQuery) {
return this.querySelector(aQuery);
}).bind(document);
var $$ = (HTMLElement.prototype.$$ = function(aQuery) {
return this.querySelectorAll(aQuery);
}).bind(document);
$$.forEach = function(nodeList, fun) {
Array.prototype.forEach.call(nodeList, fun);
}
</script>
<!-- vim: set fdm=marker: }}} -->