Page MenuHomeWolfplex
Files F408456

No OneTemporary
Actions

View Options

diff --git a/css/theme/wolfplex.css b/css/theme/wolfplex.css
new file mode 100644
index 0000000..c50c1fa
--- /dev/null
+++ b/css/theme/wolfplex.css
@@ -0,0 +1,213 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+@import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
+
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2013 Sébastien Santoro aka Dereckson
+ */
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+ background: #111111;
+ background-color: #111111; }
+
+.reveal {
+ font-family: "Open Sans", sans-serif;
+ font-size: 30px;
+ font-weight: 400;
+ letter-spacing: -0.02em;
+ color: #eeeeee; }
+
+::selection {
+ color: white;
+ background: #e7ad52;
+ text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+ margin: 0 0 20px 0;
+ color: #eeeeee;
+ font-family: "Ubuntu", sans-serif;
+ font-weight: 300;
+ line-height: 0.9em;
+ letter-spacing: -0.03em;
+ text-transform: none;
+ text-shadow: none; }
+
+.reveal h1 {
+ text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+
+/*********************************************
+ * DARK
+ *********************************************/
+.dark h1, .dark h2, .dark h3, .dark h3, .dark p {
+ color: black;
+}
+
+/*********************************************
+ * Slides
+ *********************************************/
+#stats .container, #what .container {
+ height: 520px;
+}
+
+#stats strong {
+ font-weight: inherit;
+ color: gold;
+}
+
+#printer3D .container {
+ width: 480px;
+}
+
+#printer3D h2 {
+ margin-top: 0.5em;
+ color: #162635;
+}
+
+.opaque-bg {
+ background-color: rgba(0,0,0,0.35);
+}
+
+#objects .container {
+ width: 740px;
+ margin-left: 380px;
+}
+
+#objects h2 {
+ margin-top: 0.5em;
+ color: #0a2239;
+}
+
+#openknowledge h2 {
+ margin-top: 0.5em;
+ color: #354247;
+}
+
+#colophon {
+ font-size-adjust: 0.3;
+}
+
+ul.double {
+ width: 760px;
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+}
+
+.double li {
+ float: left;
+}
+
+.double li { width: 50%; }
+
+input {
+ background-color: rgba(0, 0, 0, 0.4);
+ border: none;
+ color: white;
+ font-family: "Open Sans";
+ font-weight: 700;
+}
+
+#mail {
+ height: 2em;
+ padding: 0.5em;
+}
+
+#ok {
+ height: 3em;
+}
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+ color: #e7ad52;
+ text-decoration: none;
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ -ms-transition: color .15s ease;
+ -o-transition: color .15s ease;
+ transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+ color: #f3d7ac;
+ text-shadow: none;
+ border: none; }
+
+.reveal .roll span:after {
+ color: #fff;
+ background: #d08a1d; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+ margin: 15px 0px;
+ background: rgba(255, 255, 255, 0.12);
+ border: 4px solid #eeeeee;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ -ms-transition: all .2s linear;
+ -o-transition: all .2s linear;
+ transition: all .2s linear; }
+
+.reveal a:hover img {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: #e7ad52;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+ border-right-color: #e7ad52; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+ border-left-color: #e7ad52; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+ border-bottom-color: #e7ad52; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+ border-top-color: #e7ad52; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+ border-right-color: #f3d7ac; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+ border-left-color: #f3d7ac; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+ border-bottom-color: #f3d7ac; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+ border-top-color: #f3d7ac; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+ background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+ background: #e7ad52;
+ -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
diff --git a/img/Code.png b/img/Code.png
new file mode 100644
index 0000000..1b64f75
Binary files /dev/null and b/img/Code.png differ
diff --git a/img/Hackerspaces.png b/img/Hackerspaces.png
new file mode 100644
index 0000000..115ec4e
Binary files /dev/null and b/img/Hackerspaces.png differ
diff --git a/img/MakerBot.jpg b/img/MakerBot.jpg
new file mode 100644
index 0000000..b00e100
Binary files /dev/null and b/img/MakerBot.jpg differ
diff --git a/img/NYCR_USB_deaddrop.jpg b/img/NYCR_USB_deaddrop.jpg
new file mode 100644
index 0000000..82a73c3
Binary files /dev/null and b/img/NYCR_USB_deaddrop.jpg differ
diff --git a/img/OSM.jpg b/img/OSM.jpg
new file mode 100644
index 0000000..a158434
Binary files /dev/null and b/img/OSM.jpg differ
diff --git a/img/Quinoa.jpg b/img/Quinoa.jpg
new file mode 100644
index 0000000..2013ea7
Binary files /dev/null and b/img/Quinoa.jpg differ
diff --git a/img/RaumZeitLabor.jpg b/img/RaumZeitLabor.jpg
new file mode 100644
index 0000000..92950f8
Binary files /dev/null and b/img/RaumZeitLabor.jpg differ
diff --git a/img/Sketchy.jpg b/img/Sketchy.jpg
new file mode 100644
index 0000000..03a7bcd
Binary files /dev/null and b/img/Sketchy.jpg differ
diff --git a/img/SpaceDog.jpg b/img/SpaceDog.jpg
new file mode 100644
index 0000000..d860240
Binary files /dev/null and b/img/SpaceDog.jpg differ
diff --git a/img/TunnelMetroFantome.jpg b/img/TunnelMetroFantome.jpg
new file mode 100644
index 0000000..3800f01
Binary files /dev/null and b/img/TunnelMetroFantome.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ead8977
--- /dev/null
+++ b/index.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+
+ <title>Wolfplex Hackerspace - Créer un hackerspace à Charleroi</title>
+
+ <meta name="description" content="Présentation du projet de création d'un hackerspace à Charleroi">
+ <meta name="author" content="Sébastien Santoro aka Dereckson, Wolfplex Hackerspace">
+
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+ <link rel="stylesheet" href="css/reveal.min.css">
+ <link rel="stylesheet" href="css/theme/wolfplex.css" id="theme">
+
+ <!--[if lt IE 9]>
+ <script src="lib/js/html5shiv.js"></script>
+ <![endif]-->
+ </head>
+ <body>
+ <div class="reveal">
+ <div class="slides">
+ <section id="welcome" data-background="img/TunnelMetroFantome.jpg">
+ <h1>Wolfplex<br />Hackerspace</h1>
+ <p style="height: 9em;">&nbsp;</p>
+ <h3>Créer un hackerspace à Charleroi</h3>
+ <p>
+ <small>Bienvenue dans notre présentation du projet.<br /><a href="http://irc.lc/wolfplex">Discuter en live</a> (<a href="irc://irc.freenode.net/wolfplex">Freenode #wolfplex</a>)</small>
+ </p>
+ <p><small>[ <a href="#/place">START</a> ]</small></p>
+ </section>
+
+ <section id="place" data-background="img/RaumZeitLabor.jpg" class="opaque-bg">
+ <h2>Un hackerspace c'est …</h2>
+ <p>Un espace pour se rencontrer</p>
+ <p>Un espace pour créer</p>
+ <p>Un espace pour échanger</p>
+ <p>&nbsp;</p>
+ <p>Quelque chose comme sur cette photo.</p>
+ </section>
+
+ <section id="stats" data-background="img/Hackerspaces.png">
+ <div class="container">
+ <p>Dans plus de <strong>52 pays</strong>.</p>
+ <p>De <strong>Berlin</strong> à <strong>New York</strong> en passant par <strong>Bruxelles</strong>.</p>
+ <p>Et maintenant, un à <strong>Charleroi</strong>.</p>
+ </div>
+ </section>
+
+ <section id="what" data-background="img/Hackerspaces.png">
+ <div class="container">
+ <h1>Qu'y fait-on ?</h1>
+ </div>
+ </section>
+
+ <section id="objects" data-background="img/Sketchy.jpg">
+ <div class="container">
+ <h1>Objets créatifs</h1>
+ <h2>Voici Sketchy</h2>
+ <p>Né au hackerspace de Bristol, <strong>Sketchy</strong> est<br />un <strong>robot delta</strong> capable de dessiner.</p>
+ <h2>Au hackerspace</h2>
+ <p>Notre espace contiendra des composants, des breadboards, un poste à souder, un multimètre.</p>
+ <p>Et surtout, d'autres passionnés<br /> d'Arduino, de robotique ou d'électronique.</p>
+ </div>
+ </section>
+
+ <section id="printer3D" data-background="img/MakerBot.jpg">
+ <div class="container">
+ <h1>Fablab</h1>
+ <h2>Création d'objets</h2>
+ <p>Des outils et du matériel pour créer de nouveaux objets.</p>
+ <h2>Impression 3D</h2>
+ <p>À partir d'un modèle 3D, imprimer des objets en plastique.</p>
+ <h2>Futur équipement</h2>
+ <ul>
+ <li>Découpeuse laser</li>
+ <li>Machine CNC (fraisage, tournage)</li>
+ <li>PCB milling (circuits imprimés)</li>
+ </ul>
+ </div>
+ </section>
+
+ <section id="code" data-background="img/Code.png">
+ <h2>Développement logiciel</h2>
+ <p>Programmer mieux, apprendre de nouveaux langages.</p>
+ <p>Collaborer à des projets open source.</p>
+ <p>Des workgroups PHP, Python et C#.</p>
+ <p>&nbsp;</p>
+ <h2>Mais aussi …</h2>
+ <p>Des workshops, présentations ou talks sur un tas de sujets.</p>
+ <p>De l'administration système.</p>
+ <p>De la sécurité.</p>
+ </section>
+
+ <section id="openknowledge" data-background="img/OSM.jpg" data-state="" class="opaque-bg">
+ <p>Open data • cartographie libre • connaissance libre</p>
+ <h2>OpenStreetMap</h2>
+ <p>Une carte librement modifiable et open source.</p>
+ <p>À l'arrière-plan, Montigny-le-Tilleul.</p>
+
+ <h2>Open data</h2>
+ <p>Si chaque donnée est réellement libre,<br />l'on peut créer une infinité d'applications.</p>
+ <h2>Projets Wikimedia</h2>
+ <p>Des projets comme Wikipédia assurent<br />la transmission du savoir humain.</p>
+ </section>
+
+ <section id="music" data-background="img/SpaceDog.jpg" class="opaque-bg">
+ <h2>Un hackerspace, c'est aussi</h2>
+
+ <h3>Des événements originaux.</h3>
+ <p>Ici Space Dog, groupe alliant musique<br />et créations robotiques.</p>
+ <p>Wolfplex organisera également des projections<br />de films sous licence CC ou alternatifs.</p>
+
+ <h3></h3>
+ </section>
+
+ <section id="publicspace" data-background="img/NYCR_USB_deaddrop.jpg">
+ <h2>Des interactions avec l'espace public</h2>
+ <p>&nbsp;</p>
+ <p>&nbsp;</p>
+ <p>Cette prise USB encastrée dans un mur<br />est une réalisation de NYC Resistor.</p>
+ <p>En écho avec le concept de Sneakernet, elle<br />permet de placer ou de prendre des données.</p>
+ <p>D'autres idées consistent en une boîte à lire ou<br />à des collaborations avec des projets d'artistes.</p>
+ </section>
+
+ <section id="saveTheWorld" data-background="img/Quinoa.jpg" class="opaque-bg">
+ <h2>Créer un monde meilleur</h2>
+ <p>Notre espace est ouvert à tous et à toutes.</p>
+ <p>Il est aussi ouvert aux idéalistes qui veulent œuvrer<br />pour un monde meilleur au travers de la technologie.</p>
+ <p>Culture organique • solutions écoresponsables • recyclage</p>
+ </section>
+
+ <section id="you">
+ <h1>YOU</h1>
+ <h4>« Dans un hackerspace, il n'y a pas de passagers,<br /> que des membres de l'équipage. »</h4>
+ <hr />
+ <p>Tu es le bienvenu pour rejoindre notre projet.</p>
+ <p>Intéressé ? Laisse-nous ton mail ici :
+ <form method="post" action="newsletter.php">
+ <input id="mail" name="mail" type="text" size=48 />
+ <input id="ok" type="submit" value="OK" />
+ </form>
+ </section>
+
+ <section id="colophon">
+ <h2>Colophon</h2>
+ <p>Cette présentation utilise <a href="http://lab.hakim.se/reveal-js">Reveal.js</a> de <a href="http://hakim.se/">Hakim El Hattab</a>.</p>
+ <p>Elle peut être <a href="https://github.com/wolfplex/web-campaigns-2013/">téléchargée sur GitHub</a>.</p>
+ <hr />
+ <h2>Crédits photographiques</h2>
+ <p>Les photos de cette présentation proviennent de Wikimedia Commons,<br />médiathèque de <em>18 millions</em> de médias dans le domaine public et sous licence libre.</p>
+ <ul class="double">
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:Tunnel_du_m%C3%A9tro_fant%C3%B4me_de_Charleroi.jpg">Tunnel du réseau fantôme</a> & <a href="https://commons.wikimedia.org/wiki/File:Code_presentation_background.png">Code background</a>
+ <br /><a href="http://www.dereckson.be/">Sébastien Santoro aka Dereckson</a> // <a rel="license" href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a>
+ </li>
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:Space_Dog_3,_Build_Brighton_Hackspace_Launch_Party,_October_2011.jpg">Space Dog at Build Brighton Hackspace launch party</a>
+ <br /><a href="http://www.flickr.com/people/12449419@N00">Miles Sabin</a> // <a rel="license" href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>
+ </li>
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:Sketchy,_portrait-drawing_delta_robot.jpg">Sketchy</a> &
+ <a href="https://commons.wikimedia.org/wiki/File:Makerbot_print_area.jpg">Makerbot print area</a><br />
+ Andy Dingley // <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>
+ </li>
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:NYCR_USB_deaddrop.jpg">NYC Resistor USB dead drop</a>
+ <br />Autopilot // <a rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>
+ </li>
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:Quinua.JPG">Quinoa</a>
+ <br />Maurice Chédel // placée dans le domaine public
+ </li>
+ <li>
+ <a href="https://commons.wikimedia.org/wiki/File:RaumZeitLabor_Stairs.jpg">RaumZeitLabor</a>
+ <br /><a href="http://www.flickr.com/people/windgeist/">Windgeist</a> // <a rel="license" href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>
+ </li>
+ </ul>
+ <p>La carte d'OpenStretMap est le fruit des contributeurs de ce projet. // <a rel="license" href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
+ </section>
+
+ <section id="end">
+ <h1>YOU</h1>
+ <h4>« Dans un hackerspace, il n'y a pas de passagers,<br /> que des membres de l'équipage. »</h4>
+ <hr />
+ <p>Tu es le bienvenu pour rejoindre notre projet.</p>
+ <p>Intéressé ? Laisse-nous ton mail ici :
+ <form method="post" action="newsletter.php">
+ <input id="mail" name="mail" type="text" size=48 />
+ <input id="ok" type="submit" value="OK" />
+ </form>
+ </section>
+
+ </div>
+ </div>
+
+ <script src="lib/js/head.min.js"></script>
+ <script src="js/reveal.min.js"></script>
+ <script>
+ Reveal.initialize({
+ controls: true,
+ progress: true,
+ history: true,
+ mouseWheel: true,
+ touch: true,
+ center: true,
+ theme: Reveal.getQueryHash().theme,
+ transition: Reveal.getQueryHash().transition || 'none',
+ dependencies: [
+ { src: 'plugin/zoom-js/zoom.js', async: true }
+ ]
+ });
+ </script>
+ </body>
+</html>
diff --git a/lib/js/head.min.js b/lib/js/head.min.js
new file mode 100644
index 0000000..6242b0f
--- /dev/null
+++ b/lib/js/head.min.js
@@ -0,0 +1,8 @@
+/**
+ Head JS The only script in your <HEAD>
+ Copyright Tero Piirainen (tipiirai)
+ License MIT / http://bit.ly/mit-license
+ Version 0.96
+
+ http://headjs.com
+*/(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:q(a),url:a};var d=h[b.name];if(d&&d.url===b.url)return d;h[b.name]=b;return b}function q(a){var b=a.split("/"),c=b[b.length-1],d=c.indexOf("?");return d!=-1?c.substring(0,d):c}function p(a){a._done||(a(),a._done=1)}var b=a.documentElement,c,d,e=[],f=[],g={},h={},i=a.createElement("script").async===!0||"MozAppearance"in a.documentElement.style||window.opera,j=window.head_conf&&head_conf.head||"head",k=window[j]=window[j]||function(){k.ready.apply(null,arguments)},l=1,m=2,n=3,o=4;i?k.js=function(){var a=arguments,b=a[a.length-1],c={};t(b)||(b=null),s(a,function(d,e){d!=b&&(d=r(d),c[d.name]=d,x(d,b&&e==a.length-2?function(){u(c)&&p(b)}:null))});return k}:k.js=function(){var a=arguments,b=[].slice.call(a,1),d=b[0];if(!c){f.push(function(){k.js.apply(null,a)});return k}d?(s(b,function(a){t(a)||w(r(a))}),x(r(a[0]),t(d)?d:function(){k.js.apply(null,b)})):x(r(a[0]));return k},k.ready=function(b,c){if(b==a){d?p(c):e.push(c);return k}t(b)&&(c=b,b="ALL");if(typeof b!="string"||!t(c))return k;var f=h[b];if(f&&f.state==o||b=="ALL"&&u()&&d){p(c);return k}var i=g[b];i?i.push(c):i=g[b]=[c];return k},k.ready(a,function(){u()&&s(g.ALL,function(a){p(a)}),k.feature&&k.feature("domloaded",!0)});if(window.addEventListener)a.addEventListener("DOMContentLoaded",z,!1),window.addEventListener("load",z,!1);else if(window.attachEvent){a.attachEvent("onreadystatechange",function(){a.readyState==="complete"&&z()});var A=1;try{A=window.frameElement}catch(B){}!A&&b.doScroll&&function(){try{b.doScroll("left"),z()}catch(a){setTimeout(arguments.callee,1);return}}(),window.attachEvent("onload",z)}!a.readyState&&a.addEventListener&&(a.readyState="loading",a.addEventListener("DOMContentLoaded",handler=function(){a.removeEventListener("DOMContentLoaded",handler,!1),a.readyState="complete"},!1)),setTimeout(function(){c=!0,s(f,function(a){a()})},300)})(document)
\ No newline at end of file
diff --git a/lib/js/html5shiv.js b/lib/js/html5shiv.js
new file mode 100644
index 0000000..50649b9
--- /dev/null
+++ b/lib/js/html5shiv.js
@@ -0,0 +1,7 @@
+document.createElement('header');
+document.createElement('nav');
+document.createElement('section');
+document.createElement('article');
+document.createElement('aside');
+document.createElement('footer');
+document.createElement('hgroup');
\ No newline at end of file
diff --git a/plugin/zoom-js/zoom.js b/plugin/zoom-js/zoom.js
new file mode 100644
index 0000000..b67ae16
--- /dev/null
+++ b/plugin/zoom-js/zoom.js
@@ -0,0 +1,256 @@
+// Custom reveal.js integration
+(function(){
+ var isEnabled = true;
+
+ document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
+ if( event.altKey && isEnabled ) {
+ event.preventDefault();
+ zoom.to({ element: event.target, pan: false });
+ }
+ } );
+
+ Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
+ Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
+})();
+
+/*!
+ * zoom.js 0.2 (modified version for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+var zoom = (function(){
+
+ // The current zoom level (scale)
+ var level = 1;
+
+ // The current mouse position, used for panning
+ var mouseX = 0,
+ mouseY = 0;
+
+ // Timeout before pan is activated
+ var panEngageTimeout = -1,
+ panUpdateInterval = -1;
+
+ var currentOptions = null;
+
+ // Check for transform support so that we can fallback otherwise
+ var supportsTransforms = 'WebkitTransform' in document.body.style ||
+ 'MozTransform' in document.body.style ||
+ 'msTransform' in document.body.style ||
+ 'OTransform' in document.body.style ||
+ 'transform' in document.body.style;
+
+ if( supportsTransforms ) {
+ // The easing that will be applied when we zoom in/out
+ document.body.style.transition = 'transform 0.8s ease';
+ document.body.style.OTransition = '-o-transform 0.8s ease';
+ document.body.style.msTransition = '-ms-transform 0.8s ease';
+ document.body.style.MozTransition = '-moz-transform 0.8s ease';
+ document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
+ }
+
+ // Zoom out if the user hits escape
+ document.addEventListener( 'keyup', function( event ) {
+ if( level !== 1 && event.keyCode === 27 ) {
+ zoom.out();
+ }
+ }, false );
+
+ // Monitor mouse movement for panning
+ document.addEventListener( 'mousemove', function( event ) {
+ if( level !== 1 ) {
+ mouseX = event.clientX;
+ mouseY = event.clientY;
+ }
+ }, false );
+
+ /**
+ * Applies the CSS required to zoom in, prioritizes use of CSS3
+ * transforms but falls back on zoom for IE.
+ *
+ * @param {Number} pageOffsetX
+ * @param {Number} pageOffsetY
+ * @param {Number} elementOffsetX
+ * @param {Number} elementOffsetY
+ * @param {Number} scale
+ */
+ function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
+
+ if( supportsTransforms ) {
+ var origin = pageOffsetX +'px '+ pageOffsetY +'px',
+ transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
+
+ document.body.style.transformOrigin = origin;
+ document.body.style.OTransformOrigin = origin;
+ document.body.style.msTransformOrigin = origin;
+ document.body.style.MozTransformOrigin = origin;
+ document.body.style.WebkitTransformOrigin = origin;
+
+ document.body.style.transform = transform;
+ document.body.style.OTransform = transform;
+ document.body.style.msTransform = transform;
+ document.body.style.MozTransform = transform;
+ document.body.style.WebkitTransform = transform;
+ }
+ else {
+ // Reset all values
+ if( scale === 1 ) {
+ document.body.style.position = '';
+ document.body.style.left = '';
+ document.body.style.top = '';
+ document.body.style.width = '';
+ document.body.style.height = '';
+ document.body.style.zoom = '';
+ }
+ // Apply scale
+ else {
+ document.body.style.position = 'relative';
+ document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
+ document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
+ document.body.style.width = ( scale * 100 ) + '%';
+ document.body.style.height = ( scale * 100 ) + '%';
+ document.body.style.zoom = scale;
+ }
+ }
+
+ level = scale;
+
+ if( level !== 1 && document.documentElement.classList ) {
+ document.documentElement.classList.add( 'zoomed' );
+ }
+ else {
+ document.documentElement.classList.remove( 'zoomed' );
+ }
+ }
+
+ /**
+ * Pan the document when the mosue cursor approaches the edges
+ * of the window.
+ */
+ function pan() {
+ var range = 0.12,
+ rangeX = window.innerWidth * range,
+ rangeY = window.innerHeight * range,
+ scrollOffset = getScrollOffset();
+
+ // Up
+ if( mouseY < rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
+ }
+ // Down
+ else if( mouseY > window.innerHeight - rangeY ) {
+ window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
+ }
+
+ // Left
+ if( mouseX < rangeX ) {
+ window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
+ }
+ // Right
+ else if( mouseX > window.innerWidth - rangeX ) {
+ window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
+ }
+ }
+
+ function getScrollOffset() {
+ return {
+ x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
+ y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
+ }
+ }
+
+ return {
+ /**
+ * Zooms in on either a rectangle or HTML element.
+ *
+ * @param {Object} options
+ * - element: HTML element to zoom in on
+ * OR
+ * - x/y: coordinates in non-transformed space to zoom in on
+ * - width/height: the portion of the screen to zoom in on
+ * - scale: can be used instead of width/height to explicitly set scale
+ */
+ to: function( options ) {
+ // Due to an implementation limitation we can't zoom in
+ // to another element without zooming out first
+ if( level !== 1 ) {
+ zoom.out();
+ }
+ else {
+ options.x = options.x || 0;
+ options.y = options.y || 0;
+
+ // If an element is set, that takes precedence
+ if( !!options.element ) {
+ // Space around the zoomed in element to leave on screen
+ var padding = 20;
+
+ options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
+ options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
+ options.x = options.element.getBoundingClientRect().left - padding;
+ options.y = options.element.getBoundingClientRect().top - padding;
+ }
+
+ // If width/height values are set, calculate scale from those values
+ if( options.width !== undefined && options.height !== undefined ) {
+ options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
+ }
+
+ if( options.scale > 1 ) {
+ options.x *= options.scale;
+ options.y *= options.scale;
+
+ var scrollOffset = getScrollOffset();
+
+ if( options.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
+
+ if( options.pan !== false ) {
+
+ // Wait with engaging panning as it may conflict with the
+ // zoom transition
+ panEngageTimeout = setTimeout( function() {
+ panUpdateInterval = setInterval( pan, 1000 / 60 );
+ }, 800 );
+
+ }
+ }
+
+ currentOptions = options;
+ }
+ },
+
+ /**
+ * Resets the document zoom state to its default.
+ */
+ out: function() {
+ clearTimeout( panEngageTimeout );
+ clearInterval( panUpdateInterval );
+
+ var scrollOffset = getScrollOffset();
+
+ if( currentOptions && currentOptions.element ) {
+ scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
+ }
+
+ magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
+
+ level = 1;
+ },
+
+ // Alias
+ magnify: function( options ) { this.to( options ) },
+ reset: function() { this.out() },
+
+ zoomLevel: function() {
+ return level;
+ }
+ }
+
+})();
+

File Metadata

Mime Type
text/x-diff
Expires
Mon, Jun 9, 2:55 PM (1 w, 2 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
46173
Default Alt Text
(30 KB)

Event Timeline