nic's presentation stuff

app.js

/*
 simple little javascript to make org-mode presentations

 export your org-mode to HTML with this at the end:

 #+HTML: <script src="app.js"></script>

 I also go to town and use a nice stylesheet.

 Publish it with elnode with M-x elnode-make-js-server
 */

var $ = require("jquery"); window.$=$;
var util = require("util");

$(function () {
  var imgShow = function (e)  {
    var img = $("img", e);
    if (img.length > 0) {
      $("body").css(
        "background", 
        util.format("url(%s) no-repeat center center fixed", img[0].src)
      ).css(
        "background-size", "cover"
      ).css(
        "-moz-background-size", "cover"
      );
    }
    else {
      $("body").css(
        "background-color", "#333333"
      ).css("background-image", "none");
    }
  };

  var slide = function (panel) {
    $(".displayed").removeClass("displayed");
    $(panel).addClass("displayed");
    imgShow(panel);
  };

  $(window).on("popstate", function (evt) {
    $("#_org").addClass("hidden");
    var loc = document.location.hash;
    if (loc == "") {
      $(".displayed").removeClass("displayed");
      var init = $($(".outline-2")[0]);
      init.addClass("displayed");
      imgShow(init);
    }
    else {
      slide ($(loc));
    }
  });

  var nextSlide = function () {
    var toShow = $(".displayed").next();
    if (toShow[0]) {
      history.pushState(
        {}, "", 
        document.location.protocol 
          +  "//" + document.location.host
          + document.location.pathname
          + "#" + toShow.attr("id")
      );
      slide(toShow);
    }
    return false;
  };

  // Add the events for nexting

  $("body").keydown(function (evt) { 
    if (String.fromCharCode(evt.which) == " ") {
      nextSlide();
    }
    if (String.fromCharCode(evt.which) == "O") {
      var object = $(".displayed")[0]; // capture so we could toggle. maybe.
      $(".displayed").removeClass("displayed");
      $("#_org").removeClass("hidden");
    }
  });

  // Make sure we can advance in other ways
  $(".title").after("<div id=\"next\"></div>");
  $("#next").text(">").click(nextSlide);

  // Initialize
  if (document.location.hash != "") {
    slide($(document.location.hash));
  }
  else {
    var init = $($(".outline-2")[0]);
    init.addClass("displayed");
    imgShow(init);
  }

  // Pull in the org source
  var orgHref = document.location.href.replace(/#.*/, "").replace(".html", ".org");
  console.log("org href:", orgHref);
  if ($("#_org")[0] == undefined) {
    $.ajax(orgHref, {
      dataType: "text",
      success: function (data) {
        $("body").append(
          util.format(
            "<pre class=\"hidden\" id=\"_org\">%s</pre>", 
            data.replace("<", "&amp;lt;"))
        );
      }
    });
  }
});

style.css

#table-of-contents {
    display: none;
}

.hidden {
    display: none;
}

body {
    font-family: sans-serif;
    height: 100%;
    max-width: 100%;
    background-color: #333333;
}

#postamble {
    display: none;
}

#content {
    min-height: 100%;
}

#content:after {
    display: block;
    height: 10em;
}

.outline-2 {
    display: none;
    min-height: 100%;
}

.displayed {
    display: block !important;
}

.outline-3 {
    min-height: 100%;
}

img {
    display: none;
    max-height: 100%;
    max-width: 100%;
    height: 80%;
    width: 100%;
}

.title {
    position: fixed;
    bottom: 0;
    right: 100px;
    color: #cccccc;
    text-shadow: -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}

#next {
    cursor: pointer;
    font-size: 80pt;
    color: #cccccc;
    text-shadow: -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
    position: fixed;
    top: 50%;
    right: 0;
}


.done {
    display: none;
}

h1 {
    font-size: 40pt;
}

h2, h3 {
    color: #dddddd;
    text-shadow: -2px -2px #000, 2px -2px #000, -2px 2px #000, 2px 2px #000;
}

h2 {
    font-size: 48pt;
}

h3 {
    font-size: 36pt;
}

h4 {
    font-size: 24pt;
}

pre {
    background-color: #111111;
    color: #333333;
    font-size: 18pt;
    line-height: 1.5em;
    opacity: 0.7;
}

pre.src-coreos-example {
    font-size: 6pt;
    background-color: #333333;
    color: #eeeeee;
    line-height: 0.9em;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

th {
    padding: 1em;
    font-size: 18pt;
    background-color: white;
    opacity: 0.7;
}

td {
    padding: 1em;
    font-size: 18pt;
    background-color: white;
    opacity: 0.7;
}