Added Grains Presenstation to Web server

lib/grains/endpoint.ex

@@ -9,7 +9,7 @@ defmodule Grains.Endpoint do
   # when deploying your static files in production.
   plug Plug.Static,
     at: "/", from: :grains, gzip: false,
-    only: ~w(css fonts images js favicon.ico robots.txt)
+    only: ~w(css fonts images js favicon.ico robots.txt index.html)
 
   # Code reloading can be explicitly enabled under the
   # :code_reloader configuration of your endpoint.

mix.exs

@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
 
   def project do
     [app: :grains,
-     version: "0.0.102",
+     version: "0.0.103",
      elixir: "~> 1.2",
      elixirc_paths: elixirc_paths(Mix.env),
      compilers: [:phoenix, :gettext] ++ Mix.compilers,

web/controllers/page_controller.ex

@@ -4,4 +4,5 @@ defmodule Grains.PageController do
   def index(conn, _params) do
     render conn, "index.html"
   end
+
 end

web/static/css/grains.css

+/* This file left intentionally (almost) blank
+
+   Landslide always adds a print.css and a screen.css, but they
+   are not needed in impress.js, so this theme leaves them blank,
+   except for hiding some things you want to hide.
+
+   You can modify these files in your own fork, or you can add
+   css-files in the landslide configuration file.
+   See https://github.com/adamzap/landslide#presentation-configuration
+
+*/
+
+@font-face {
+  font-family: 'Fredericka the Great';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(https://fonts.gstatic.com/s/frederickathegreat/v5/7Es8Lxoku-e5eOZWpxw18k-V1Rr5FrXsa4CVETJgBSz3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+
+.impress-supported .fallback-message,
+.step .notes {
+    display: none;
+}
+
+
+
+/* Help popup */
+
+#hovercraft-help {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    color: #EEEEEE;
+    font-size: 100%;
+    left: 2em;
+    bottom: 2em;
+    width: 26em;
+    border-radius: 1em;
+    padding: 1em;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    display: block;
+    font-family: Verdana, Arial, Sans;
+}
+
+.impress-enabled #hovercraft-help.hide {
+    display: none;
+}
+
+#hovercraft-help.disabled {
+    display: none;
+}
+
+body {
+    min-height: 740px;
+    color: black;
+    // background: #fff;
+
+    // background: rgb(230, 230, 230);
+    background: radial-gradient(rgb(250, 250, 250), rgb(210, 210, 210));
+}
+
+
+.step {
+    width: 900px;
+    padding: 20px;
+    margin: 20px auto;
+    font-size: 36px;
+    line-heigt: 1.5;
+
+}
+
+.impress-enabled .step {
+    margin: 0;
+    opacity: 0.1;
+
+    transition:         opacity 1s;
+}
+
+.impress-enabled .step.active { opacity: 1 }
+
+h1 {
+    font-family: 'Fredericka the Great', cursive;
+    font-weight: bold;
+}
+
+h2 {
+    font-family: 'Fredericka the Great', cursive;
+    font-weight: bold;
+}
+
+
+li {
+    line-height: 1.4em;
+}
+
+#title h1 {
+
+    font-size: 180px;
+    font-weight: bold;
+    line-height: 140px;
+}
+
+#title h2 {
+    font-size: 72px;
+    font-style: italic;
+
+}
+
+#title ul {
+    list-style: none;
+}

web/static/css/highlight.css

+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #408090; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #007020; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .cm { color: #408090; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #007020 } /* Comment.Preproc */
+.highlight .c1 { color: #408090; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #408090; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #303030 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0040D0 } /* Generic.Traceback */
+.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #007020 } /* Keyword.Pseudo */
+.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #902000 } /* Keyword.Type */
+.highlight .m { color: #208050 } /* Literal.Number */
+.highlight .s { color: #4070a0 } /* Literal.String */
+.highlight .na { color: #4070a0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.highlight .no { color: #60add5 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #007020 } /* Name.Exception */
+.highlight .nf { color: #06287e } /* Name.Function */
+.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #bb60d5 } /* Name.Variable */
+.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #208050 } /* Literal.Number.Float */
+.highlight .mh { color: #208050 } /* Literal.Number.Hex */
+.highlight .mi { color: #208050 } /* Literal.Number.Integer */
+.highlight .mo { color: #208050 } /* Literal.Number.Oct */
+.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
+.highlight .sc { color: #4070a0 } /* Literal.String.Char */
+.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
+.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
+.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #c65d09 } /* Literal.String.Other */
+.highlight .sr { color: #235388 } /* Literal.String.Regex */
+.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
+.highlight .ss { color: #517918 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
+.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
+.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
+.highlight .il { color: #208050 } /* Literal.Number.Integer.Long */
\ No newline at end of file

web/static/css/hovercraft.css

+/* This file left intentionally (almost) blank
+
+   Landslide always adds a print.css and a screen.css, but they
+   are not needed in impress.js, so this theme leaves them blank,
+   except for hiding some things you want to hide.
+
+   You can modify these files in your own fork, or you can add
+   css-files in the landslide configuration file.
+   See https://github.com/adamzap/landslide#presentation-configuration
+
+*/
+
+.impress-supported .fallback-message,
+.step .notes {
+    display: none;
+}
+
+.step {
+    width: 800px;
+}
+
+
+/* Help popup */
+
+#hovercraft-help {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
+    color: #EEEEEE;
+    font-size: 100%;
+    left: 2em;
+    bottom: 2em;
+    width: 26em;
+    border-radius: 1em;
+    padding: 1em;
+    position: fixed;
+    right: 0;
+    text-align: center;
+    z-index: 100;
+    display: block;
+    font-family: Verdana, Arial, Sans;
+}
+
+.impress-enabled #hovercraft-help.hide {
+    display: none;
+}
+
+#hovercraft-help.disabled {
+    display: none;
+}

web/static/css/impressConsole.css

+html#impressconsole {
+    height: 100%
+}
+
+#impressconsole body {
+    padding: 0;
+    margin: 20px;
+    font-family: verdana, arial, sans-serif;
+    font-size: 26px;
+    height: 92%;
+}
+
+div#console {
+    margin: 0;
+    height: 94%;
+}
+
+div#views {
+    float: left;
+    width: 16em;
+    margin-right: 1em;
+}
+
+div#blocker {
+    width: 17em;
+    height: 20em;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: blocker;
+}
+
+div#notes {
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 95%;
+}
+
+div#notes p {
+    margin-top: 0;
+}
+
+iframe#slideView {
+    width: 16em;
+    height: 12em;
+}
+
+iframe#preView {
+    width: 8em;
+    height: 6em;
+}
+
+div#controls {
+    margin: 0;
+    height: 6%;
+}
+
+div#prev {
+    float: left;
+}
+
+div#next {
+    float: right;
+}
+
+div#status {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: right;
+}
+
+div#clock {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: left;
+}
+
+div#timer {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+    float: left;
+}

web/static/js/hovercraft.js

+// Initialize impress.js
+impress().init();
+
+// Set up the help-box
+var helpdiv = window.document.getElementById('hovercraft-help');
+
+if (window.top!=window.self) {
+    // This is inside an iframe, so don't show the help.
+    helpdiv.className = "disabled";
+
+} else {
+    // Install a funtion to toggle help on and off.
+    var help = function() {
+        if(helpdiv.className == 'hide')
+            helpdiv.className = 'show';
+        else
+            helpdiv.className = 'hide';
+    };
+    impressConsole().registerKeyEvent([72], help, window);
+
+    // The help is by default shown. Hide it after five seconds.
+    setTimeout(function () {
+        var helpdiv = window.document.getElementById('hovercraft-help');
+        if(helpdiv.className != 'show')
+            helpdiv.className = 'hide';
+    }, 5000);
+}
+
+
+if (impressConsole) {
+    impressConsole().init(cssFile='css/impressConsole.css');
+
+    var impressattrs = document.getElementById('impress').attributes
+    if (impressattrs.hasOwnProperty('auto-console') && impressattrs['auto-console'].value.toLowerCase() === 'true') {
+        consoleWindow = console().open();
+    }
+}

web/static/js/impressConsole.js

+/**
+ * impressConsole.js
+ *
+ * Adds a presenter console to impress.js
+ *
+ * MIT Licensed, see license.txt.
+ *
+ * Copyright 2012, 2013 impress-console contributors (see README.txt)
+ *
+ * version: 1.2-dev
+ *
+ */
+
+(function ( document, window ) {
+    'use strict';
+
+    // This is the default template for the speaker console window
+    var consoleTemplate = '<!DOCTYPE html>' +
+        '<html id="impressconsole"><head>' +
+          '<link rel="stylesheet" type="text/css" media="screen" href="{{cssFile}}">' +
+        '</head><body>' +
+        '<div id="console">' +
+          '<div id="views">' +
+            '<iframe id="slideView" scrolling="no"></iframe>' +
+            '<iframe id="preView" scrolling="no"></iframe>' +
+            '<div id="blocker"></div>' +
+          '</div>' +
+          '<div id="notes"></div>' +
+        '</div>' +
+        '<div id="controls"> ' +
+          '<div id="prev"><a  href="#" onclick="impress().prev(); return false;" />Prev</a></div>' +
+          '<div id="next"><a  href="#" onclick="impress().next(); return false;" />Next</a></div>' +
+          '<div id="clock">00:00:00 AM</div>' +
+          '<div id="timer" onclick="timerReset()">00m 00s</div>' +
+          '<div id="status">Loading</div>' +
+        '</div>' +
+        '</body></html>';
+
+    // Default css location
+    var cssFile = "css/impressConsole.css";
+
+    // All console windows, so that you can call impressConsole() repeatedly.
+    var allConsoles = {};
+
+    var useAMPM = false;
+
+    // Zero padding helper function:
+    var zeroPad = function(i) {
+        return (i < 10 ? '0' : '') + i;
+    };
+
+    // The console object
+    var impressConsole = window.impressConsole = function (rootId) {
+
+        rootId = rootId || 'impress';
+
+        if (allConsoles[rootId]) {
+            return allConsoles[rootId];
+        }
+
+        // root presentation elements
+        var root = document.getElementById( rootId );
+
+        var consoleWindow = null;
+
+        var nextStep = function() {
+            var nextElement = document.querySelector('.active').nextElementSibling;
+            var classes = "";
+            while (nextElement) {
+                classes = nextElement.attributes['class'];
+                if (classes && classes.value.indexOf('step') !== -1) {
+                   return nextElement;
+                }
+                nextElement = nextElement.nextElementSibling;
+            }
+            // No next element. Pick the first
+            return document.querySelector('.step');
+        };
+
+        // Sync the notes to the step
+        var onStepLeave = function(){
+            if(consoleWindow) {
+                // Set notes to next steps notes.
+                var newNotes = document.querySelector('.active').querySelector('.notes');
+                if (newNotes) {
+                    newNotes = newNotes.innerHTML;
+                } else {
+                    newNotes = 'No notes for this step';
+                }
+                consoleWindow.document.getElementById('notes').innerHTML = newNotes;
+
+                // Set the views
+                var baseURL = document.URL.substring(0, document.URL.search('#/'));
+                var slideSrc = baseURL + '#' + document.querySelector('.active').id;
+                var preSrc = baseURL + '#' + nextStep().id;
+                var slideView = consoleWindow.document.getElementById('slideView');
+                // Setting them when they are already set causes glithes in Firefox, so we check first:
+                if (slideView.src !== slideSrc) {
+                    slideView.src = slideSrc;
+                }
+                var preView = consoleWindow.document.getElementById('preView');
+                if (preView.src !== preSrc) {
+                    preView.src = preSrc;
+                }
+
+                consoleWindow.document.getElementById('status').innerHTML = '<span style="color: red">Moving</span>';
+            }
+        };
+
+        // Sync the previews to the step
+        var onStepEnter = function(){
+            if(consoleWindow) {
+                // We do everything here again, because if you stopped the previos step to
+                // early, the onstepleave trigger is not called for that step, so
+                // we need this to sync things.
+                var newNotes = document.querySelector('.active').querySelector('.notes');
+                if (newNotes) {
+                    newNotes = newNotes.innerHTML;
+                } else {
+                    newNotes = 'No notes for this step';
+                }
+                var notes = consoleWindow.document.getElementById('notes');
+                notes.innerHTML = newNotes;
+                notes.scrollTop = 0;
+
+                // Set the views
+                var baseURL = document.URL.substring(0, document.URL.search('#/'));
+                var slideSrc = baseURL + '#' + document.querySelector('.active').id;
+                var preSrc = baseURL + '#' + nextStep().id;
+                var slideView = consoleWindow.document.getElementById('slideView');
+                // Setting them when they are already set causes glithes in Firefox, so we check first:
+                if (slideView.src !== slideSrc) {
+                    slideView.src = slideSrc;
+                }
+                var preView = consoleWindow.document.getElementById('preView');
+                if (preView.src !== preSrc) {
+                    preView.src = preSrc;
+                }
+
+                consoleWindow.document.getElementById('status').innerHTML = '<span style="color: green">Ready</span>';
+            }
+        };
+
+        var spaceHandler = function () {
+            var notes = consoleWindow.document.getElementById('notes');
+            if (notes.scrollTopMax - notes.scrollTop > 20) {
+               notes.scrollTop = notes.scrollTop + notes.clientHeight * 0.8;
+            } else {
+               impress().next();
+            }
+        };
+
+        var timerReset = function () {
+            consoleWindow.timerStart = new Date();
+        };
+
+        // Show a clock
+        var clockTick = function () {
+            var now = new Date();
+            var hours = now.getHours();
+            var minutes = now.getMinutes();
+            var seconds = now.getSeconds();
+            var ampm = '';
+
+            if (useAMPM) {
+                ampm = ( hours < 12 ) ? 'AM' : 'PM';
+                hours = ( hours > 12 ) ? hours - 12 : hours;
+                hours = ( hours === 0 ) ? 12 : hours;
+            }
+
+            // Clock
+            var clockStr = zeroPad(hours) + ':' + zeroPad(minutes) + ':' + zeroPad(seconds) + ' ' + ampm;
+            consoleWindow.document.getElementById('clock').firstChild.nodeValue = clockStr;
+
+            // Timer
+            seconds = Math.floor((now - consoleWindow.timerStart) / 1000);
+            minutes = Math.floor(seconds / 60);
+            seconds = Math.floor(seconds % 60);
+            consoleWindow.document.getElementById('timer').firstChild.nodeValue = zeroPad(minutes) + 'm ' + zeroPad(seconds) + 's';
+
+            if (!consoleWindow.initialized) {
+                // Nudge the slide windows after load, or they will scrolled wrong on Firefox.
+                consoleWindow.document.getElementById('slideView').contentWindow.scrollTo(0,0);
+                consoleWindow.document.getElementById('preView').contentWindow.scrollTo(0,0);
+                consoleWindow.initialized = true;
+            }
+        };
+
+        var registerKeyEvent = function(keyCodes, handler, window) {
+            if (window === undefined) {
+                window = consoleWindow;
+            }
+
+            // prevent default keydown action when one of supported key is pressed
+            window.document.addEventListener("keydown", function ( event ) {
+                if ( !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && keyCodes.indexOf(event.keyCode) !== -1) {
+                    event.preventDefault();
+                }
+            }, false);
+
+            // trigger impress action on keyup
+            window.document.addEventListener("keyup", function ( event ) {
+                if ( !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && keyCodes.indexOf(event.keyCode) !== -1) {
+                        handler();
+                        event.preventDefault();
+                }
+            }, false);
+        };
+
+        var open = function() {
+            if(top.isconsoleWindow){
+                return;
+            }
+
+            if (consoleWindow && !consoleWindow.closed) {
+                consoleWindow.focus();
+            } else {
+                consoleWindow = window.open();
+                // This sets the window location to the main window location, so css can be loaded:
+                consoleWindow.document.open();
+                // Write the template:
+                consoleWindow.document.write(consoleTemplate.replace("{{cssFile}}", cssFile));
+                consoleWindow.document.title = 'Speaker Console (' + document.title + ')';
+                consoleWindow.impress = window.impress;
+                // We set this flag so we can detect it later, to prevent infinite popups.