PyConFR slides: First rehearsal

SimonSapin · Sep 14, 2012 · aa34eea · aa34eea
1 parent a74305b
commit aa34eea
Show file tree

Hide file tree

Showing 26 changed files with 2,287 additions and 2 deletions.
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/CSS21-intro.pdf b/exyr/pages/2012/weasyprint-at-pyconfr/CSS21-intro.pdf
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/Makefile b/exyr/pages/2012/weasyprint-at-pyconfr/Makefile
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/PyConFR_2012_schedule.pdf b/exyr/pages/2012/weasyprint-at-pyconfr/PyConFR_2012_schedule.pdf
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/build.py b/exyr/pages/2012/weasyprint-at-pyconfr/build.py
@@ -0,0 +1,14 @@
+import os
+from weasyprint import HTML
+from flask_frozen import Freezer
+from flask_weasyprint.test_app import app
+
+ROOT = os.path.dirname(os.path.abspath(__file__))
+os.chdir(ROOT)
+
+app.config['FREEZER_DESTINATION'] = os.path.join(ROOT, 'frozen_demo')
+app.config['FREEZER_RELATIVE_URLS'] = True
+Freezer(app).freeze()
+
+HTML('http://www.pycon.fr/2012/schedule/').write_pdf(
+    'PyConFR_2012_schedule.pdf', stylesheets=['print.css'])
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/embedder.html b/exyr/pages/2012/weasyprint-at-pyconfr/embedder.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+
+<meta charset="utf8">
+<title>...</title>
+
+<div id="slides">
+  <iframe allowfullscreen mozallowfullscreen webkitallowfullscreen></iframe>
+</div>
+<div id="controls">
+  <button title="prev" id="back" onclick="Dz.back()">&#9664;</button>
+  <button title="next" id="forward" onclick="Dz.forward()">&#9654;</button>
+  <div id="rightcontrols">
+    <input onchange="Dz.setCursor(this.value)" size="2" id="slideidx" value="0" />/<span id="slidecount">...</span>
+    <button title="Go fullscreen or open in a new window" id="fullscreen" onclick="Dz.goFullscreen()">&#8689;</button>
+  </div>
+</div>
+
+<style>
+  html { height: 100%;}
+  body {
+    margin: 0;
+    background-color: black;
+    height: 100%;
+    width: 100%;
+  }
+  #slides, #controls {
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+  #controls {
+    color: white;
+    font-family: monospace;
+    height: 30px;
+    line-height: 30px;
+    padding: 5px;
+  }
+  #slides {
+    bottom: 40px;
+    top: 0;
+  }
+  iframe {
+    border: none;
+    background-color: white;
+    height: 100%;
+    width: 100%;
+  }
+  #controls {
+    bottom: 0;
+    float: right;
+    font-size: 13px;
+    text-align: center;
+  }
+  #controls button[disabled] {color: #333;}
+  button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: #bbb;
+    padding: 0;
+    font-size: 20px;
+    line-height: 100%;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+    position: relative;
+  }
+  button:hover {
+    color: white;
+  }
+  button:active {
+    top: 1px;
+    left: 1px;
+  }
+  #slideidx {
+    border: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    color: white;
+    text-align: center;
+  }
+  #rightcontrols * { vertical-align: middle; }
+  #rightcontrols {
+    bottom: 4px;
+    position: absolute;
+    top: 4px;
+    right: 10px;
+  }
+  #fullscreen {-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);-ms-transform: scaleX(-1);transform: scaleX(-1);}
+</style>
+
+<script>
+  var Dz = {
+    view: null,
+    url: null,
+    idx: 1,
+    count: null,
+    iframe: null
+  };
+
+  Dz.init = function() {
+    this.loadIframe();
+  }
+
+  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();
+    }
+  }
+
+  Dz.onmessage = function(aEvent) {
+    if (aEvent.source === this.view) {
+      var argv = aEvent.data.split(" "), argc = argv.length;
+      argv.forEach(function(e, i, a) { a[i] = decodeURIComponent(e) });
+      if (argv[0] === "CURSOR" && argc === 2) {
+        var cursor = argv[1].split(".");
+        this.idx = ~~cursor[0];
+        this.step = ~~cursor[1];
+        $("#slideidx").value = this.idx;
+        $("#back").disabled = this.idx == 1;
+        $("#forward").disabled = this.idx == this.count;
+      }
+      if (argv[0] === "REGISTERED" && argc === 3) {
+        $("#slidecount").innerHTML = this.count = argv[2];
+        document.title = argv[1];
+      }
+    }
+  }
+
+  /* Get url from hash or prompt and store it */
+
+  Dz.getUrl = function() {
+    var u = window.location.hash.split("#")[1];
+    if (!u) {
+      u = window.prompt("What is the URL of the slides?");
+      if (u) {
+        window.location.hash = u.split("#")[0];
+        return u;
+      }
+      u = "<style>body{background-color:white;color:black}</style>";
+      u += "<strong>ERROR:</strong> No URL specified.<br>";
+      u += "Try<em>: " + document.location + "#yourslides.html</em>";
+      u = "data:text/html," + encodeURIComponent(u);
+    }
+    return u;
+  }
+
+  Dz.loadIframe = function() {
+    this.iframe = $("iframe");
+    this.iframe.src = this.url = this.getUrl();
+    this.iframe.onload = function() {
+      Dz.view = this.contentWindow;
+      Dz.postMsg(Dz.view, "REGISTER");
+    }
+  }
+
+  Dz.toggleContent = function() {
+    this.postMsg(this.view, "TOGGLE_CONTENT");
+  }
+
+  Dz.onhashchange = function() {
+    this.loadIframe();
+  }
+
+  Dz.back = function() {
+    this.postMsg(this.view, "BACK");
+  }
+
+  Dz.forward = function() {
+    this.postMsg(this.view, "FORWARD");
+  }
+
+  Dz.goStart = function() {
+    this.postMsg(this.view, "START");
+  }
+
+  Dz.goEnd = function() {
+    this.postMsg(this.view, "END");
+  }
+
+  Dz.setCursor = function(aCursor) {
+    this.postMsg(this.view, "SET_CURSOR", aCursor);
+  }
+
+  Dz.goFullscreen = function() {
+    var requestFullscreen = this.iframe.requestFullscreen || this.iframe.requestFullScreen || this.iframe.mozRequestFullScreen || this.iframe.webkitRequestFullScreen;
+    if (requestFullscreen) {
+      requestFullscreen.apply(this.iframe);
+    } else {
+      window.open(this.url + "#" + this.idx, '', 'width=800,height=600,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
+    }
+  }
+
+  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.onhashchange = Dz.loadIframe.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);
+
+</script>
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo.pdf b/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo.pdf
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo.png b/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo.png
diff --git a/...2012/weasyprint-at-pyconfr/frozen_demo/foo/graph_42:27.3:63_Lorem:ipsum:sit.svg b/...2012/weasyprint-at-pyconfr/frozen_demo/foo/graph_42:27.3:63_Lorem:ipsum:sit.svg
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo/index.html b/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/foo/index.html
@@ -0,0 +1,14 @@
+
+        <!doctype html>
+        <title>Test document</title>
+        <link rel=stylesheet href="../static/style.css" />
+        <body>
+        <section>
+            <h1><a href="http://packages.python.org/Flask-WeasyPrint/">
+                Flask-WeasyPrint</a> demo</h1>
+            <nav>Get this document <a href="../foo.pdf">as PDF</a> or
+                 <a href="../foo.png">as PNG</a>.</nav>
+            <p>This vector graph was generated dynamically:</p>
+            <img src="graph_42:27.3:63_Lorem:ipsum:sit.svg">
+        </section>
+
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/index.html b/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/index.html
@@ -0,0 +1,14 @@
+
+        <!doctype html>
+        <title>Test document</title>
+        <link rel=stylesheet href="../static/style.css" />
+        <body>
+        <section>
+            <h1><a href="http://packages.python.org/Flask-WeasyPrint/">
+                Flask-WeasyPrint</a> demo</h1>
+            <nav>Get this document <a href="../foo.pdf">as PDF</a> or
+                 <a href="../foo.png">as PNG</a>.</nav>
+            <p>This vector graph was generated dynamically:</p>
+            <img src="graph_42:27.3:63_Lorem:ipsum:sit.svg">
+        </section>
+
diff --git a/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/static/style.css b/exyr/pages/2012/weasyprint-at-pyconfr/frozen_demo/static/style.css
@@ -0,0 +1,10 @@
+
+    html { font-family: Fontin Sans, sans-serif }
+    section { width: 80%; margin: 2em auto }
+    a { color: inherit }
+    img { width: 100%; max-width: 600px; box-sizing: border-box;
+         border: 1px solid #888; }
+
+    /* Print-specific styles, ignored when rendering to screen: */
+    @page { size: A5; margin: 1cm }
+    @media print { nav { display: none } }