slideoff 0.1

data/themes/shower/js/script.js

@@ -0,0 +1,325 @@
+(function () {
+	var url = window.location,
+		body = document.body,
+		slides = document.querySelectorAll('div.slide'),
+		progress = document.querySelector('div.progress div'),
+		slideList = [],
+		l = slides.length, i;
+
+	for (i = 0; i < l; i++) {
+		slideList.push({
+			id: slides[i].id,
+			hasInnerNavigation: null !== slides[i].querySelector('.inner')
+		});
+	}
+
+	function getTransform() {
+		var denominator = Math.max(
+			body.clientWidth / window.innerWidth,
+			body.clientHeight / window.innerHeight
+		);
+
+		return 'scale(' + (1 / denominator) + ')';
+	}
+
+	function applyTransform(transform) {
+		body.style.WebkitTransform = transform;
+		body.style.MozTransform = transform;
+		body.style.msTransform = transform;
+		body.style.OTransform = transform;
+		body.style.transform = transform;
+	}
+
+	function enterSlideMode() {
+		body.className = 'full';
+		applyTransform(getTransform());
+	}
+
+	function enterListMode() {
+		body.className = 'list';
+		applyTransform('none');
+	}
+
+	function getCurrentSlideNumber() {
+		var i, l = slideList.length,
+			currentSlideId = url.hash.substr(1);
+
+		for (i = 0; i < l; ++i) {
+			if (currentSlideId === slideList[i].id) {
+				return i;
+			}
+		}
+
+		return -1;
+	}
+
+	function scrollToSlide(slideNumber) {
+		if (-1 === slideNumber ) { return; }
+
+		var currentSlide = document.getElementById(slideList[slideNumber].id);
+
+		if (null != currentSlide) {
+			window.scrollTo(0, currentSlide.offsetTop);
+		}
+	}
+
+	function isListMode() {
+		return 'full' !== url.search.substr(1);
+	}
+
+	function normalizeSlideNumber(slideNumber) {
+		if (0 > slideNumber) {
+			return slideList.length - 1;
+		} else if (slideList.length <= slideNumber) {
+			return 0;
+		} else {
+			return slideNumber;
+		}
+	}
+
+	function updateProgress(slideNumber) {
+		if (null === progress) { return; }
+		progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
+	}
+
+	function getSlideHash(slideNumber) {
+		return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
+	}
+
+	function goToSlide(slideNumber) {
+		url.hash = getSlideHash(slideNumber);
+
+		if (!isListMode()) {
+			updateProgress(slideNumber);
+		}
+	}
+
+	function getContainingSlideId(el) {
+		var node = el;
+		while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
+			if (node.classList.contains('slide')) {
+				return node.id;
+			} else {
+				node = node.parentNode;
+			}
+		}
+
+		return '';
+	}
+
+	function dispatchSingleSlideMode(e) {
+		var slideId = getContainingSlideId(e.target);
+
+		if ('' !== slideId && isListMode()) {
+			e.preventDefault();
+
+			// NOTE: we should update hash to get things work properly
+			url.hash = '#' + slideId;
+			history.replaceState(null, null, url.pathname + '?full#' + slideId);
+			enterSlideMode();
+
+			updateProgress(getCurrentSlideNumber());
+		}
+	}
+
+	// Increases inner navigation by adding 'active' class to next inactive inner navigation item
+	function increaseInnerNavigation(slideNumber) {
+		// Shortcut for slides without inner navigation
+		if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
+
+		var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
+			// NOTE: we assume there is no other elements in inner navigation
+			node = activeNodes[activeNodes.length - 1].nextElementSibling;
+
+		if (null !== node) {
+			node.classList.add('active');
+			return activeNodes.length + 1;
+		} else {
+			return -1;
+		}
+	}
+
+	function startEventSourceHandler (uri) {
+    if (window['EventSource'] == undefined) return ;
+
+    var source = new EventSource(uri);
+		var currentSlideNumber = getCurrentSlideNumber();
+
+    source.onmessage = function(e) {
+      switch(e.data){
+        case 'next':
+          currentSlideNumber++;
+          goToSlide(currentSlideNumber);
+          break;
+        case 'prev':
+          currentSlideNumber--;
+          goToSlide(currentSlideNumber);
+          break;
+        case 'up':
+          if (!isListMode()) {
+            e.preventDefault();
+
+            history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
+            enterListMode();
+            scrollToSlide(currentSlideNumber);
+          }
+          break;
+        case 'down':
+          if (isListMode()) {
+            e.preventDefault();
+
+            history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
+            enterSlideMode();
+
+            updateProgress(currentSlideNumber);
+          }
+          break;
+        default:
+          console.log(e);
+      };
+    };
+	}
+
+	// Event handlers
+
+	window.addEventListener('DOMContentLoaded', function () {
+		if (!isListMode()) {
+			// "?full" is present without slide hash, so we should display first slide
+			if (-1 === getCurrentSlideNumber()) {
+				history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
+			}
+
+			enterSlideMode();
+			updateProgress(getCurrentSlideNumber());
+		}
+	}, false);
+
+	window.addEventListener('popstate', function (e) {
+		if (isListMode()) {
+			enterListMode();
+			scrollToSlide(getCurrentSlideNumber());
+		} else {
+			enterSlideMode();
+		}
+	}, false);
+
+	window.addEventListener('resize', function (e) {
+		if (!isListMode()) {
+			applyTransform(getTransform());
+		}
+	}, false);
+
+	document.addEventListener('keydown', function (e) {
+		// Shortcut for alt, shift and meta keys
+		if (e.altKey || e.ctrlKey || e.metaKey) { return; }
+
+		var currentSlideNumber = getCurrentSlideNumber();
+
+		switch (e.which) {
+			case 116: // F5
+			case 13: // Enter
+				if (isListMode() && -1 !== currentSlideNumber) {
+					e.preventDefault();
+
+					history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
+					enterSlideMode();
+
+					updateProgress(currentSlideNumber);
+				}
+			break;
+
+			case 27: // Esc
+				if (!isListMode()) {
+					e.preventDefault();
+
+					history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
+					enterListMode();
+					scrollToSlide(currentSlideNumber);
+				}
+			break;
+
+			case 33: // PgUp
+			case 38: // Up
+			case 37: // Left
+			case 72: // h
+			case 75: // k
+				e.preventDefault();
+
+				currentSlideNumber--;
+				goToSlide(currentSlideNumber);
+			break;
+
+			case 34: // PgDown
+			case 40: // Down
+			case 39: // Right
+			case 76: // l
+			case 74: // j
+				e.preventDefault();
+
+				// Only go to next slide if current slide have no inner
+				// navigation or inner navigation is fully shown
+				// NOTE: But first of all check if there is no current slide
+				if (
+					-1 === currentSlideNumber ||
+					!slideList[currentSlideNumber].hasInnerNavigation ||
+					-1 === increaseInnerNavigation(currentSlideNumber)
+				) {
+					currentSlideNumber++;
+					goToSlide(currentSlideNumber);
+				}
+			break;
+
+			case 36: // Home
+				e.preventDefault();
+
+				currentSlideNumber = 0;
+				goToSlide(currentSlideNumber);
+			break;
+
+			case 35: // End
+				e.preventDefault();
+
+				currentSlideNumber = slideList.length - 1;
+				goToSlide(currentSlideNumber);
+			break;
+
+			case 9: // Tab = +1; Shift + Tab = -1
+			case 32: // Space = +1; Shift + Space = -1
+				e.preventDefault();
+
+				currentSlideNumber += e.shiftKey ? -1 : 1;
+				goToSlide(currentSlideNumber);
+			break;
+
+			default:
+				// Behave as usual
+		}
+	}, false);
+
+	document.addEventListener('click', dispatchSingleSlideMode, false);
+	document.addEventListener('touchend', dispatchSingleSlideMode, false);
+
+	document.addEventListener('touchstart', function (e) {
+		if (!isListMode()) {
+			var currentSlideNumber = getCurrentSlideNumber(),
+				x = e.touches[0].pageX;
+			if (x > window.innerWidth / 2) {
+				currentSlideNumber++;
+			} else {
+				currentSlideNumber--;
+			}
+
+			goToSlide(currentSlideNumber);
+		}
+	}, false);
+
+	document.addEventListener('touchmove', function (e) {
+		if (!isListMode()) {
+			e.preventDefault();
+		}
+	}, false);
+
+	window.setTimeout(function() {
+		startEventSourceHandler('/remote/sub/events');
+	}, 100);
+}());

data/themes/template/README

@@ -0,0 +1,5 @@
+This theme is just a template for creating new ones:
+
+1. Edit the html markup in `index.erb`
+2. Place your stylesheet in the `css` directory
+3. Place your javascript in the `js`  directory

data/themes/template/css/reset.css

@@ -0,0 +1,42 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin:0;
+	padding:0;
+	border:0;
+	font-size:100%;
+	font:inherit;
+	vertical-align:baseline;
+	}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display:block;
+	}
+body {
+	line-height:1;
+	}
+ol, ul {
+	list-style:none;
+	}
+blockquote, q {
+	quotes:none;
+	}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content:'';
+	content:none;
+	}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+	}

data/themes/template/index.erb

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <title><%= meta.title %></title>
+    <% (theme.css + meta.css).each do |css| %>
+      <link rel="stylesheet" href="<%= css%>">
+    <% end %>
+    <link rel="stylesheet" href="css/pygments/solarized.css">
+  </head>
+  <body data-duration="<%= meta.duration %>">
+    <section>
+      <header class="slide">
+        <h1><%= meta.title %></h1>
+        <h2><%= meta.author %></h2>
+      </header>
+    </section>
+    <% sections.each do |section| %>
+      <section>
+        <header class="slide">
+          <h1><%= section.title %></h1>
+        </header>
+        <% section.slides.each do |slide| %>
+          <section class="slide <%= slide.classes %>">
+            <%= slide.html %>
+          </section>
+        <% end %>
+      </section>
+    <% end %>
+    <% (theme.js + meta.js).each do |js| %>
+      <script src="<%= js %>"></script>
+    <% end %>
+  </body>
+</html>

data/themes/template/js/prefixfree.min.js

@@ -0,0 +1,13 @@
+// StyleFix 1.0.2 + PrefixFree 1.0.6 / Lea Verou / MIT license
+(function(){function h(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){try{if("stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(b){return}var c=a.href||a.getAttribute("data-href"),f=c.replace(/[^\/]+$/,""),i=a.parentNode,d=new XMLHttpRequest,g;d.onreadystatechange=function(){4===d.readyState&&g()};g=function(){var b=d.responseText;if(b&&a.parentNode&&(!d.status||400>d.status||600<d.status)){b=e.fix(b,
+!0,a);f&&(b=b.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(a,b,c){return!/^([a-z]{3,10}:|\/|#)/i.test(c)?'url("'+f+c+'")':a}),b=b.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+f,"gi"),"$1"));var c=document.createElement("style");c.textContent=b;c.media=a.media;c.disabled=a.disabled;c.setAttribute("data-href",a.getAttribute("href"));i.insertBefore(c,a);i.removeChild(a);c.media=a.media}};try{d.open("GET",c),d.send(null)}catch(k){"undefined"!=typeof XDomainRequest&&(d=new XDomainRequest,d.onerror=
+d.onprogress=function(){},d.onload=g,d.open("GET",c),d.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b=a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){h('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);h("style").forEach(StyleFix.styleElement);h("[style]").forEach(StyleFix.styleAttribute)},
+register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b){for(var c=0;c<e.fixers.length;c++)a=e.fixers[c](a,b)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,c){return c.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){setTimeout(function(){h('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",
+StyleFix.process,!1)})()}})();
+(function(h){function e(b,c,f,i,d){b=a[b];b.length&&(b=RegExp(c+"("+b.join("|")+")"+f,"gi"),d=d.replace(b,i));return d}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,c){var f=a.prefix,b=e("functions","(\\s|:|,)","\\s*\\(","$1"+f+"$2(",b),b=e("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+f+"$2$3",b),b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+f+"$2:",b);if(a.properties.length)var i=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi"),b=e("valueProperties","\\b",
+":(.+?);",function(a){return a.replace(i,f+"$1")},b);c&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+f+"$1",b));return b=b.replace(RegExp("-"+f,"g"),"-")},property:function(b){return(a.properties.indexOf(b)?a.prefix:"")+b},value:function(b){b=e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);return b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b)},prefixSelector:function(b){return b.replace(/^:{1,2}/,function(b){return b+a.prefix})},prefixProperty:function(b,
+c){var f=a.prefix+b;return c?StyleFix.camelCase(f):f}};(function(){var b={},c=[],f=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,d=function(a){if("-"===a.charAt(0)){c.push(a);var a=a.split("-"),d=a[1];for(b[d]=++b[d]||1;3<a.length;)a.pop(),d=a.join("-"),StyleFix.camelCase(d)in i&&-1===c.indexOf(d)&&c.push(d)}};if(0<f.length)for(var g=0;g<f.length;g++)d(f[g]);else for(var e in f)d(StyleFix.deCamelCase(e));var g=0,j,h;for(h in b)f=b[h],g<f&&(j=h,g=f);a.prefix=
+"-"+j+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<c.length;g++)e=c[g],0===e.indexOf(a.prefix)&&(j=e.slice(a.prefix.length),StyleFix.camelCase(j)in i||a.properties.push(j));"Ms"==a.Prefix&&(!("transform"in i)&&!("MsTransform"in i)&&"msTransform"in i)&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var c={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",
+params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};c["repeating-linear-gradient"]=c["repeating-radial-gradient"]=c["radial-gradient"]=c["linear-gradient"];var f={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,d;for(d in c){var g=
+c[d],h=g.property,g=d+"("+g.params+")";!b(g,h)&&b(a.prefix+g,h)&&a.functions.push(d)}for(var j in f)h=f[j],!b(j,h)&&b(a.prefix+j,h)&&a.keywords.push(j)})();(function(){function b(a){e.textContent=a+"{}";return!!e.sheet.cssRules.length}var c={":read-only":null,":read-write":null,":any-link":null,"::selection":null},f={keyframes:"name",viewport:null,document:'regexp(".")'};a.selectors=[];a.atrules=[];var e=h.appendChild(document.createElement("style")),d;for(d in c){var g=d+(c[d]?"("+c[d]+")":"");!b(g)&&
+b(a.prefixSelector(g))&&a.selectors.push(d)}for(var k in f)g=k+" "+(f[k]||""),!b("@"+g)&&b("@"+a.prefix+g)&&a.atrules.push(k);h.removeChild(e)})();a.valueProperties=["transition","transition-property"];h.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);