1.1 --- a/README Thu Aug 26 22:10:08 2010 +0300
1.2 +++ b/README Thu Sep 02 00:27:59 2010 +0300
1.3 @@ -1,21 +1,35 @@
1.4 {{{
1.5 -This ReadMe is for a Python HTML5 Slideshow.
1.6 -
1.7 -The code parses wiki markup and directory hierarchies to produce a slideshow, like that ones at http://slides.html5rocks.com, for navigation, and at http://smoothgallery.jondesign.net/showcase/gallery-set/ for timed transition. It ought not to matter that the document is HTML4.01).
1.8 +This ReadMe is for Python-based combined-output documentation tool. Python code parses wiki text to the listed multi-formatted output, in one file:
1.9 +- text --search the web for ready libs that do wiki text->plaintext
1.10 +- HTML4 basic content --This wiki does wiki text->HTML4
1.11 +- HTML5 basic content --search the web for ready libs that do wiki text->HTML5
1.12 + ?? http://hg.moinmo.in/moin/2.0-dev
1.13 +- HTML5 simplified slideshow --combine and simplify, moinmoin's own with s5 and html5rocks to run a timed slideshow with inline SVG, audio and video
1.14
1.15 -Use cases: Family album, Business analysis portfolio, File system navigation, Blender presentation
1.16 +The standalone documentation file's HTML4 basic content is the fallback format. Javascript determines and offers available formats for the client. A 'try' function in Javascript allows graceful fallback error messages.
1.17
1.18 -Current activity
1.19 - Python: Map files below "./", generating slide content from file and directory meta-information and then from wiki text file content. Put the result in a HTML 5 slideshow template.
1.20 +The code parses wiki markup and directory hierarchies:
1.21 + produce a documentation or a slideshow with notes, ease and speed up file system navigation,
1.22 +
1.23 +Do timed transition later.
1.24 +
1.25 +It supplements Google-Chrome's view of a single directory listing to become a slideshow that details text content, metadata and, if applicable, header and/or mime info.
1.26
1.27 -Next
1.28 - Python: Read wiki text files and parse their content into one or more slides subordinate to the meta-information slide.
1.29 + References:
1.30 +http://code.google.com/
1.31 +view-source:file:/// (in google-chrome)
1.32 +http://slides.html5rocks.com
1.33 +http://smoothgallery.jondesign.net/showcase/gallery-set/
1.34 +http://docs.python.org/py3k/library/html.parser.html#module-html.parser
1.35
1.36 - Javascript: Implement the current transition model but in the vertical, not the horizontal.
1.37 - Javascript: Edit Spacebar, right cursor action (go to next-sibling file or directory slide)
1.38 - Javascript: Edit left cursor action (go to previous-sibling file or directory slide)
1.39 - Javascript: Add up cursor key action (go to parent directory or ../first-child slide).
1.40 - Javascript: Add down cursor key action (go to ./first-child-directory slide).
1.41 - Javascript: Add Home key action (go to ./first-sibling slide||./root-level-ancestor slide||root slide).
1.42 - Javascript: Add Home key action (go to ./last-sibling).
1.43 + Use cases:
1.44 +File system navigation, Employment, CV, Family album, Business analysis, Blender presentation
1.45 +
1.46 + Tasks
1.47 +
1.48 +Simplify Javascript and presentation code. Remove eye-candy, focus on navigability.
1.49 +Python: Read wiki text files and parse their content into one or more slides subordinate to the meta-information slide.
1.50 +Python: Map files below "./", put the result in a HTML 5 slideshow template.
1.51 +CSS/Javascript: Implement the current transition model but in the vertical, not the horizontal.
1.52 +Python: Generate slide content from file and directory meta-information and then from wiki text file content.
1.53 }}}
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
2.2 +++ b/chrome-directory-listing.html Thu Sep 02 00:27:59 2010 +0300
2.3 @@ -0,0 +1,272 @@
2.4 +<!DOCTYPE html>
2.5 +
2.6 +<html>
2.7 +
2.8 +<head>
2.9 +
2.10 +<script>
2.11 +function addRow(name, url, isdir, size, date_modified) {
2.12 + if (name == ".")
2.13 + return;
2.14 +
2.15 + var root = "" + document.location;
2.16 + if (root.substr(-1) !== "/")
2.17 + root += "/";
2.18 +
2.19 + var table = document.getElementById("table");
2.20 + var row = document.createElement("tr");
2.21 + var file_cell = document.createElement("td");
2.22 + var link = document.createElement("a");
2.23 +
2.24 + link.className = isdir ? "icon dir" : "icon file";
2.25 +
2.26 + if (name == "..") {
2.27 + link.href = root + "..";
2.28 + link.innerText = document.getElementById("parentDirText").innerText;
2.29 + link.className = "icon up";
2.30 + size = "";
2.31 + date_modified = "";
2.32 + } else {
2.33 + if (isdir) {
2.34 + name = name + "/";
2.35 + url = url + "/";
2.36 + size = "";
2.37 + }
2.38 + link.innerText = name;
2.39 + link.href = root + url;
2.40 + }
2.41 + file_cell.appendChild(link);
2.42 +
2.43 + row.appendChild(file_cell);
2.44 + row.appendChild(createCell(size));
2.45 + row.appendChild(createCell(date_modified));
2.46 +
2.47 + table.appendChild(row);
2.48 +}
2.49 +
2.50 +function createCell(text) {
2.51 + var cell = document.createElement("td");
2.52 + cell.setAttribute("class", "detailsColumn");
2.53 + cell.innerText = text;
2.54 + return cell;
2.55 +}
2.56 +
2.57 +function start(location) {
2.58 + var header = document.getElementById("header");
2.59 + header.innerText = header.innerText.replace("LOCATION", location);
2.60 +
2.61 + document.getElementById("title").innerText = header.innerText;
2.62 +}
2.63 +
2.64 +function onListingParsingError() {
2.65 + var box = document.getElementById("listingParsingErrorBox");
2.66 + box.innerHTML = box.innerHTML.replace("LOCATION", encodeURI(document.location)
2.67 + + "?raw");
2.68 + box.style.display = "";
2.69 +}
2.70 +</script>
2.71 +
2.72 +<style>
2.73 +
2.74 + h1 {
2.75 + border-bottom: 1px solid #c0c0c0;
2.76 + margin-bottom: 10px;
2.77 + padding-bottom: 10px;
2.78 + white-space: nowrap;
2.79 + }
2.80 +
2.81 + table {
2.82 + border-collapse: collapse;
2.83 + }
2.84 +
2.85 + tr.header {
2.86 + font-weight: bold;
2.87 + }
2.88 +
2.89 + td.detailsColumn {
2.90 + padding-left: 2em;
2.91 + text-align: right;
2.92 + white-space: nowrap;
2.93 + }
2.94 +
2.95 + a.icon {
2.96 + padding-left: 1.5em;
2.97 + text-decoration: none;
2.98 + }
2.99 +
2.100 + a.icon:hover {
2.101 + text-decoration: underline;
2.102 + }
2.103 +
2.104 + a.file {
2.105 + background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
2.106 + }
2.107 +
2.108 + a.dir {
2.109 + background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
2.110 + }
2.111 +
2.112 + a.up {
2.113 + background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
2.114 + }
2.115 +
2.116 + #listingParsingErrorBox {
2.117 + border: 1px solid black;
2.118 + background: #fae691;
2.119 + padding: 10px;
2.120 + display: none;
2.121 + }
2.122 +</style>
2.123 +
2.124 +<title id="title"></title>
2.125 +
2.126 +</head>
2.127 +
2.128 +<body>
2.129 +
2.130 +<div id="listingParsingErrorBox" i18n-values=".innerHTML:listingParsingErrorBoxText"></div>
2.131 +
2.132 +<span id="parentDirText" style="display:none" i18n-content="parentDirText"></span>
2.133 +
2.134 +<h1 id="header" i18n-content="header"></h1>
2.135 +
2.136 +<table id="table">
2.137 + <tr class="header">
2.138 + <td i18n-content="headerName"></td>
2.139 + <td class="detailsColumn" i18n-content="headerSize"></td>
2.140 + <td class="detailsColumn" i18n-content="headerDateModified"></td>
2.141 + </tr>
2.142 +</table>
2.143 +
2.144 +</body>
2.145 +
2.146 +</html>
2.147 +<script>var templateData = {"header":"Index of LOCATION","headerDateModified":"Date Modified","headerName":"Name","headerSize":"Size","listingParsingErrorBoxText":"Oh, no! This server is sending data Google Chrome can't understand. Please \u003Ca href=\"http://code.google.com/p/chromium/issues/entry\"\u003Ereport a bug\u003C/a\u003E, and include the \u003Ca href=\"LOCATION\"\u003Eraw listing\u003C/a\u003E.","parentDirText":"[parent directory]"};</script><script>/**
2.148 + * @fileoverview This is a simple template engine inspired by JsTemplates
2.149 + * optimized for i18n.
2.150 + *
2.151 + * It currently supports two handlers:
2.152 + *
2.153 + * * i18n-content which sets the textContent of the element
2.154 + *
2.155 + * <span i18n-content="myContent"></span>
2.156 + * i18nTemplate.process(element, {'myContent': 'Content'});
2.157 + *
2.158 + * * i18n-values is a list of attribute-value or property-value pairs.
2.159 + * Properties are prefixed with a '.' and can contain nested properties.
2.160 + *
2.161 + * <span i18n-values="title:myTitle;.style.fontSize:fontSize"></span>
2.162 + * i18nTemplate.process(element, {
2.163 + * 'myTitle': 'Title',
2.164 + * 'fontSize': '13px'
2.165 + * });
2.166 + */
2.167 +
2.168 +var i18nTemplate = (function() {
2.169 + /**
2.170 + * This provides the handlers for the templating engine. The key is used as
2.171 + * the attribute name and the value is the function that gets called for every
2.172 + * single node that has this attribute.
2.173 + * @type {Object}
2.174 + */
2.175 + var handlers = {
2.176 + /**
2.177 + * This handler sets the textContent of the element.
2.178 + */
2.179 + 'i18n-content': function(element, attributeValue, obj) {
2.180 + element.textContent = obj[attributeValue];
2.181 + },
2.182 +
2.183 + /**
2.184 + * This is used to set HTML attributes and DOM properties,. The syntax is:
2.185 + * attributename:key;
2.186 + * .domProperty:key;
2.187 + * .nested.dom.property:key
2.188 + */
2.189 + 'i18n-values': function(element, attributeValue, obj) {
2.190 + var parts = attributeValue.replace(/\s/g, '').split(/;/);
2.191 + for (var j = 0; j < parts.length; j++) {
2.192 + var a = parts[j].match(/^([^:]+):(.+)$/);
2.193 + if (a) {
2.194 + var propName = a[1];
2.195 + var propExpr = a[2];
2.196 +
2.197 + // Ignore missing properties
2.198 + if (propExpr in obj) {
2.199 + var value = obj[propExpr];
2.200 + if (propName.charAt(0) == '.') {
2.201 + var path = propName.slice(1).split('.');
2.202 + var object = element;
2.203 + while (object && path.length > 1) {
2.204 + object = object[path.shift()];
2.205 + }
2.206 + if (object) {
2.207 + object[path] = value;
2.208 + // In case we set innerHTML (ignoring others) we need to
2.209 + // recursively check the content
2.210 + if (path == 'innerHTML') {
2.211 + process(element, obj);
2.212 + }
2.213 + }
2.214 + } else {
2.215 + element.setAttribute(propName, value);
2.216 + }
2.217 + } else {
2.218 + console.warn('i18n-values: Missing value for "' + propExpr + '"');
2.219 + }
2.220 + }
2.221 + }
2.222 + }
2.223 + };
2.224 +
2.225 + var attributeNames = [];
2.226 + for (var key in handlers) {
2.227 + attributeNames.push(key);
2.228 + }
2.229 + var selector = '[' + attributeNames.join('],[') + ']';
2.230 +
2.231 + /**
2.232 + * Processes a DOM tree with the {@code obj} map.
2.233 + */
2.234 + function process(node, obj) {
2.235 + var elements = node.querySelectorAll(selector);
2.236 + for (var element, i = 0; element = elements[i]; i++) {
2.237 + for (var j = 0; j < attributeNames.length; j++) {
2.238 + var name = attributeNames[j];
2.239 + var att = element.getAttribute(name);
2.240 + if (att != null) {
2.241 + handlers[name](element, att, obj);
2.242 + }
2.243 + }
2.244 + }
2.245 + }
2.246 +
2.247 + return {
2.248 + process: process
2.249 + };
2.250 +})();
2.251 +</script><script>i18nTemplate.process(document, templateData);</script><script>start("/");</script>
2.252 +<script>addRow("..","..",1,"4 kB","7/30/10 6:25:53 PM");</script>
2.253 +<script>addRow("bin","bin",1,"4 kB","8/25/10 9:08:24 PM");</script>
2.254 +<script>addRow("boot","boot",1,"4 kB","8/20/10 7:35:54 AM");</script>
2.255 +<script>addRow("cdrom","cdrom",1,"4 kB","6/15/10 1:04:24 PM");</script>
2.256 +<script>addRow("dev","dev",1,"3.4 kB","8/31/10 9:24:04 AM");</script>
2.257 +<script>addRow("etc","etc",1,"4 kB","8/31/10 10:27:20 AM");</script>
2.258 +<script>addRow("home","home",1,"4 kB","6/15/10 2:15:44 PM");</script>
2.259 +<script>addRow("lib","lib",1,"12 kB","7/8/10 11:49:18 PM");</script>
2.260 +<script>addRow("lost+found","lost+found",1,"16 kB","6/15/10 1:04:14 PM");</script>
2.261 +<script>addRow("media","media",1,"4 kB","8/31/10 6:47:29 AM");</script>
2.262 +<script>addRow("mnt","mnt",1,"4 kB","1/25/10 5:41:51 AM");</script>
2.263 +<script>addRow("opt","opt",1,"4 kB","6/17/10 12:34:02 PM");</script>
2.264 +<script>addRow("p10n","p10n",1,"4 kB","6/15/10 1:04:20 PM");</script>
2.265 +<script>addRow("proc","proc",1,"0 B","8/31/10 6:45:25 AM");</script>
2.266 +<script>addRow("root","root",1,"4 kB","8/6/10 2:28:32 PM");</script>
2.267 +<script>addRow("sbin","sbin",1,"4 kB","6/28/10 1:50:36 PM");</script>
2.268 +<script>addRow("selinux","selinux",1,"4 kB","9/16/08 9:38:17 AM");</script>
2.269 +<script>addRow("srv","srv",1,"4 kB","6/15/10 1:04:23 PM");</script>
2.270 +<script>addRow("sys","sys",1,"0 B","8/31/10 6:45:25 AM");</script>
2.271 +<script>addRow("tmp","tmp",1,"20 kB","8/31/10 1:47:28 PM");</script>
2.272 +<script>addRow("usr","usr",1,"4 kB","6/15/10 1:47:54 PM");</script>
2.273 +<script>addRow("var","var",1,"4 kB","6/15/10 2:09:44 PM");</script>
2.274 +<script>addRow("initrd.img","initrd.img",0,"5.9 MB","8/20/10 7:35:54 AM");</script>
2.275 +<script>addRow("vmlinuz","vmlinuz",0,"1472 kB","8/19/10 10:28:33 AM");</script>
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
3.2 +++ b/generated_slides Thu Sep 02 00:27:59 2010 +0300
3.3 @@ -0,0 +1,647 @@
3.4 +<!DOCTYPE html>
3.5 +<HTML>
3.6 +<HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
3.7 + <META charset="UTF-8">
3.8 + <!--[if lt IE 9]>
3.9 +<!--handle whichever browser is running.-->
3.10 + <![endif]-->
3.11 + <TITLE>HTML5 presentation</TITLE>
3.12 + <STYLE>
3.13 + .sequencing { display:none; }
3.14 + .notes { display: none; }
3.15 + .presentation {
3.16 + position: absolute;
3.17 + height: 100%;
3.18 + width: 100%;
3.19 + left: 0px;
3.20 + top: 0px;
3.21 + display: block;
3.22 + overflow: hidden;
3.23 + background: #000;
3.24 + }
3.25 + .slides {
3.26 + width: 100%;
3.27 + height: 100%;
3.28 + /*
3.29 + overflow: hidden;
3.30 + */
3.31 + left: 0;
3.32 + top: 0;
3.33 + position: absolute;
3.34 + display: block;
3.35 + }
3.36 + .slide {
3.37 + display: none;
3.38 + position: absolute;
3.39 + overflow: hidden;
3.40 + width: 100%;/*900px;*/
3.41 + height: 100%;/*700px;*/
3.42 + left: 0%;
3.43 + top: 0%;
3.44 + margin-top: -0px;
3.45 + background-color: #111;
3.46 + }
3.47 + p {
3.48 + font-size: 20px;
3.49 + }
3.50 + .force-render {
3.51 + display: block;
3.52 + margin-top: -1000px;
3.53 + }
3.54 + section.intro p {
3.55 + font-size: 35px;
3.56 + }
3.57 +.slide.far-past, .slide.past, .slide.future, .slide.far-future, .slide.parent, slide.child { display: none; } /*margin-left: -2400px;*/
3.58 +/* {display: block; margin-left: -1400px;}*/
3.59 +/* {display: block; margin-left: 1500px;}*/
3.60 +/* {display: block; margin-left: 2500px;}*/
3.61 +/* {display: block; margin-top: -400px; margin-left: 0px;}*/
3.62 +.slide.current { display: block; margin-top: 0px; margin-left: 0px; }
3.63 +/* {display: block; margin-top: 500px; margin-left: 0px;}*/
3.64 + body.three-d div.presentation {
3.65 + /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */
3.66 + }
3.67 +
3.68 + body.three-d div.slides {
3.69 + -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
3.70 + -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
3.71 + -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
3.72 + transform: translateX(50px) scale(0.8) rotateY(10deg);
3.73 + }
3.74 + </STYLE>
3.75 + </HEAD>
3.76 + <BODY>
3.77 + <DIV class="presentation">
3.78 + <DIV class="slides">
3.79 +<!--NEW SLIDES-->
3.80 +
3.81 +<DIV class="directory" id="./">./
3.82 + <DIV class="subdirectory" id="HTML5 presentation_files">./HTML5 presentation_files</DIV>
3.83 + <DIV class="subdirectory" id=".hg">./.hg</DIV>
3.84 + <DIV class="subdirectory" id="HTML5Rocks - Home_files">./HTML5Rocks - Home_files</DIV>
3.85 + <DIV class="file" id="README">./README</DIV>
3.86 + <DIV class="file" id="walkfs-writemarkup.py">./walkfs-writemarkup.py</DIV>
3.87 + <DIV class="file" id="README~">./README~</DIV>
3.88 + <DIV class="file" id="HTML5 presentation_template.html~">./HTML5 presentation_template.html~</DIV>
3.89 + <DIV class="file" id="HTML5 presentation.html">./HTML5 presentation.html</DIV>
3.90 + <DIV class="file" id="HTML5Rocks - Home.html">./HTML5Rocks - Home.html</DIV>
3.91 + <DIV class="file" id="h5p10n.py~">./h5p10n.py~</DIV>
3.92 + <DIV class="file" id="H5p10n (Finnish Language).html">./H5p10n (Finnish Language).html</DIV>
3.93 + <DIV class="file" id="generated_slides~">./generated_slides~</DIV>
3.94 + <DIV class="file" id="generated_slides">./generated_slides</DIV>
3.95 + <DIV class="file" id="h5p10n.pyc">./h5p10n.pyc</DIV>
3.96 + <DIV class="file" id="h5p10n.py">./h5p10n.py</DIV>
3.97 + <DIV class="file" id="template_H5p10n.html">./template_H5p10n.html</DIV>
3.98 + <DIV class="file" id="_states_py">./_states_py</DIV>
3.99 + <DIV class="file" id="template_H5p10n.html~">./template_H5p10n.html~</DIV>
3.100 + <DIV class="file" id="HTML5 presentation_template.html">./HTML5 presentation_template.html</DIV>
3.101 + <DIV class="file" id="walkfs-writemarkup.py~">./walkfs-writemarkup.py~</DIV>
3.102 + <DIV class="file" id="H5p10n (Finnish Language etc).html">./H5p10n (Finnish Language etc).html</DIV>
3.103 + <DIV class="file" id="minimumWorking_H5p10n.html">./minimumWorking_H5p10n.html</DIV>
3.104 +</DIV>
3.105 +<DIV class="directory" id="./">./
3.106 + <DIV class="subdirectory" id="HTML5 presentation_files">./HTML5 presentation_files</DIV>
3.107 + <DIV class="subdirectory" id=".hg">./.hg</DIV>
3.108 + <DIV class="subdirectory" id="HTML5Rocks - Home_files">./HTML5Rocks - Home_files</DIV>
3.109 + <DIV class="file" id="README">./README</DIV>
3.110 + <DIV class="file" id="walkfs-writemarkup.py">./walkfs-writemarkup.py</DIV>
3.111 + <DIV class="file" id="README~">./README~</DIV>
3.112 + <DIV class="file" id="HTML5 presentation_template.html~">./HTML5 presentation_template.html~</DIV>
3.113 + <DIV class="file" id="HTML5 presentation.html">./HTML5 presentation.html</DIV>
3.114 + <DIV class="file" id="HTML5Rocks - Home.html">./HTML5Rocks - Home.html</DIV>
3.115 + <DIV class="file" id="h5p10n.py~">./h5p10n.py~</DIV>
3.116 + <DIV class="file" id="H5p10n (Finnish Language).html">./H5p10n (Finnish Language).html</DIV>
3.117 + <DIV class="file" id="generated_slides~">./generated_slides~</DIV>
3.118 + <DIV class="file" id="generated_slides">./generated_slides</DIV>
3.119 + <DIV class="file" id="h5p10n.pyc">./h5p10n.pyc</DIV>
3.120 + <DIV class="file" id="h5p10n.py">./h5p10n.py</DIV>
3.121 + <DIV class="file" id="template_H5p10n.html">./template_H5p10n.html</DIV>
3.122 + <DIV class="file" id="_states_py">./_states_py</DIV>
3.123 + <DIV class="file" id="template_H5p10n.html~">./template_H5p10n.html~</DIV>
3.124 + <DIV class="file" id="HTML5 presentation_template.html">./HTML5 presentation_template.html</DIV>
3.125 + <DIV class="file" id="walkfs-writemarkup.py~">./walkfs-writemarkup.py~</DIV>
3.126 + <DIV class="file" id="H5p10n (Finnish Language etc).html">./H5p10n (Finnish Language etc).html</DIV>
3.127 + <DIV class="file" id="minimumWorking_H5p10n.html">./minimumWorking_H5p10n.html</DIV>
3.128 +</DIV>
3.129 +<DIV class="directory" id="./HTML5 presentation_files">./HTML5 presentation_files
3.130 + <DIV class="file" id="outOfReach__context.js">./HTML5 presentation_files/outOfReach__context.js</DIV>
3.131 + <DIV class="file" id="outOfReach__points.js">./HTML5 presentation_files/outOfReach__points.js</DIV>
3.132 + <DIV class="file" id="outOfReach__utilities.js">./HTML5 presentation_files/outOfReach__utilities.js</DIV>
3.133 + <DIV class="file" id="outOfReach__san_angeles.html">./HTML5 presentation_files/outOfReach__san_angeles.html</DIV>
3.134 + <DIV class="file" id="outOfReach__css">./HTML5 presentation_files/outOfReach__css</DIV>
3.135 + <DIV class="file" id="7.jpg">./HTML5 presentation_files/7.jpg</DIV>
3.136 + <DIV class="file" id="8.jpg">./HTML5 presentation_files/8.jpg</DIV>
3.137 + <DIV class="file" id="outOfReach__index.html">./HTML5 presentation_files/outOfReach__index.html</DIV>
3.138 + <DIV class="file" id="outOfReach__annealing.js">./HTML5 presentation_files/outOfReach__annealing.js</DIV>
3.139 + <DIV class="file" id="outOfReach__matrix4x4.js">./HTML5 presentation_files/outOfReach__matrix4x4.js</DIV>
3.140 + <DIV class="file" id="9.jpg">./HTML5 presentation_files/9.jpg</DIV>
3.141 + <DIV class="file" id="magpie.png">./HTML5 presentation_files/magpie.png</DIV>
3.142 + <DIV class="file" id="outOfReach__canvasElement.js">./HTML5 presentation_files/outOfReach__canvasElement.js</DIV>
3.143 + <DIV class="file" id="outOfReach__canvasImg.js">./HTML5 presentation_files/outOfReach__canvasImg.js</DIV>
3.144 + <DIV class="file" id="outOfReach__demo.js">./HTML5 presentation_files/outOfReach__demo.js</DIV>
3.145 + <DIV class="file" id="outOfReach__ViewportInfoService.GetViewportInfo">./HTML5 presentation_files/outOfReach__ViewportInfoService.GetViewportInfo</DIV>
3.146 + <DIV class="file" id="outOfReach__angeles.js">./HTML5 presentation_files/outOfReach__angeles.js</DIV>
3.147 + <DIV class="file" id="outOfReach__ga.js">./HTML5 presentation_files/outOfReach__ga.js</DIV>
3.148 + <DIV class="file" id="outOfReach__{controls}.js">./HTML5 presentation_files/outOfReach__{controls}.js</DIV>
3.149 + <DIV class="file" id="outOfReach__AuthenticationService.Authenticate">./HTML5 presentation_files/outOfReach__AuthenticationService.Authenticate</DIV>
3.150 + <DIV class="file" id="ourOfReach__main.js">./HTML5 presentation_files/ourOfReach__main.js</DIV>
3.151 + <DIV class="file" id="transparent.png">./HTML5 presentation_files/transparent.png</DIV>
3.152 + <DIV class="file" id="refresh.png">./HTML5 presentation_files/refresh.png</DIV>
3.153 + <DIV class="file" id="dwd1.png">./HTML5 presentation_files/dwd1.png</DIV>
3.154 + <DIV class="file" id="outOfReach__js">./HTML5 presentation_files/outOfReach__js</DIV>
3.155 + <DIV class="file" id="outOfReach__{common,map,util,marker}.js">./HTML5 presentation_files/outOfReach__{common,map,util,marker}.js</DIV>
3.156 + <DIV class="file" id="bg.jpg">./HTML5 presentation_files/bg.jpg</DIV>
3.157 +</DIV>
3.158 +<DIV class="directory" id="./HTML5 presentation_files">./HTML5 presentation_files
3.159 + <DIV class="file" id="outOfReach__context.js">./HTML5 presentation_files/outOfReach__context.js</DIV>
3.160 + <DIV class="file" id="outOfReach__points.js">./HTML5 presentation_files/outOfReach__points.js</DIV>
3.161 + <DIV class="file" id="outOfReach__utilities.js">./HTML5 presentation_files/outOfReach__utilities.js</DIV>
3.162 + <DIV class="file" id="outOfReach__san_angeles.html">./HTML5 presentation_files/outOfReach__san_angeles.html</DIV>
3.163 + <DIV class="file" id="outOfReach__css">./HTML5 presentation_files/outOfReach__css</DIV>
3.164 + <DIV class="file" id="7.jpg">./HTML5 presentation_files/7.jpg</DIV>
3.165 + <DIV class="file" id="8.jpg">./HTML5 presentation_files/8.jpg</DIV>
3.166 + <DIV class="file" id="outOfReach__index.html">./HTML5 presentation_files/outOfReach__index.html</DIV>
3.167 + <DIV class="file" id="outOfReach__annealing.js">./HTML5 presentation_files/outOfReach__annealing.js</DIV>
3.168 + <DIV class="file" id="outOfReach__matrix4x4.js">./HTML5 presentation_files/outOfReach__matrix4x4.js</DIV>
3.169 + <DIV class="file" id="9.jpg">./HTML5 presentation_files/9.jpg</DIV>
3.170 + <DIV class="file" id="magpie.png">./HTML5 presentation_files/magpie.png</DIV>
3.171 + <DIV class="file" id="outOfReach__canvasElement.js">./HTML5 presentation_files/outOfReach__canvasElement.js</DIV>
3.172 + <DIV class="file" id="outOfReach__canvasImg.js">./HTML5 presentation_files/outOfReach__canvasImg.js</DIV>
3.173 + <DIV class="file" id="outOfReach__demo.js">./HTML5 presentation_files/outOfReach__demo.js</DIV>
3.174 + <DIV class="file" id="outOfReach__ViewportInfoService.GetViewportInfo">./HTML5 presentation_files/outOfReach__ViewportInfoService.GetViewportInfo</DIV>
3.175 + <DIV class="file" id="outOfReach__angeles.js">./HTML5 presentation_files/outOfReach__angeles.js</DIV>
3.176 + <DIV class="file" id="outOfReach__ga.js">./HTML5 presentation_files/outOfReach__ga.js</DIV>
3.177 + <DIV class="file" id="outOfReach__{controls}.js">./HTML5 presentation_files/outOfReach__{controls}.js</DIV>
3.178 + <DIV class="file" id="outOfReach__AuthenticationService.Authenticate">./HTML5 presentation_files/outOfReach__AuthenticationService.Authenticate</DIV>
3.179 + <DIV class="file" id="ourOfReach__main.js">./HTML5 presentation_files/ourOfReach__main.js</DIV>
3.180 + <DIV class="file" id="transparent.png">./HTML5 presentation_files/transparent.png</DIV>
3.181 + <DIV class="file" id="refresh.png">./HTML5 presentation_files/refresh.png</DIV>
3.182 + <DIV class="file" id="dwd1.png">./HTML5 presentation_files/dwd1.png</DIV>
3.183 + <DIV class="file" id="outOfReach__js">./HTML5 presentation_files/outOfReach__js</DIV>
3.184 + <DIV class="file" id="outOfReach__{common,map,util,marker}.js">./HTML5 presentation_files/outOfReach__{common,map,util,marker}.js</DIV>
3.185 + <DIV class="file" id="bg.jpg">./HTML5 presentation_files/bg.jpg</DIV>
3.186 +</DIV>
3.187 +<DIV class="directory" id="./.hg">./.hg
3.188 + <DIV class="subdirectory" id="store">./.hg/store</DIV>
3.189 + <DIV class="file" id="undo.dirstate">./.hg/undo.dirstate</DIV>
3.190 + <DIV class="file" id="requires">./.hg/requires</DIV>
3.191 + <DIV class="file" id="branch.cache">./.hg/branch.cache</DIV>
3.192 + <DIV class="file" id="dirstate">./.hg/dirstate</DIV>
3.193 + <DIV class="file" id="undo.branch">./.hg/undo.branch</DIV>
3.194 + <DIV class="file" id="00changelog.i">./.hg/00changelog.i</DIV>
3.195 +</DIV>
3.196 +<DIV class="directory" id="./.hg">./.hg
3.197 + <DIV class="subdirectory" id="store">./.hg/store</DIV>
3.198 + <DIV class="file" id="undo.dirstate">./.hg/undo.dirstate</DIV>
3.199 + <DIV class="file" id="requires">./.hg/requires</DIV>
3.200 + <DIV class="file" id="branch.cache">./.hg/branch.cache</DIV>
3.201 + <DIV class="file" id="dirstate">./.hg/dirstate</DIV>
3.202 + <DIV class="file" id="undo.branch">./.hg/undo.branch</DIV>
3.203 + <DIV class="file" id="00changelog.i">./.hg/00changelog.i</DIV>
3.204 +</DIV>
3.205 +<DIV class="directory" id="./.hg/store">./.hg/store
3.206 + <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
3.207 + <DIV class="file" id="undo">./.hg/store/undo</DIV>
3.208 + <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
3.209 + <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
3.210 +</DIV>
3.211 +<DIV class="directory" id="./.hg/store">./.hg/store
3.212 + <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
3.213 + <DIV class="file" id="undo">./.hg/store/undo</DIV>
3.214 + <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
3.215 + <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
3.216 +</DIV>
3.217 +<DIV class="directory" id="./.hg/store">./.hg/store
3.218 + <DIV class="subdirectory" id="data">./.hg/store/data</DIV>
3.219 + <DIV class="file" id="undo">./.hg/store/undo</DIV>
3.220 + <DIV class="file" id="00manifest.i">./.hg/store/00manifest.i</DIV>
3.221 + <DIV class="file" id="00changelog.i">./.hg/store/00changelog.i</DIV>
3.222 +</DIV>
3.223 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
3.224 + <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
3.225 + <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
3.226 + <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
3.227 + <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
3.228 +</DIV>
3.229 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
3.230 + <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
3.231 + <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
3.232 + <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
3.233 + <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
3.234 +</DIV>
3.235 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
3.236 + <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
3.237 + <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
3.238 + <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
3.239 + <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
3.240 +</DIV>
3.241 +<DIV class="directory" id="./.hg/store/data">./.hg/store/data
3.242 + <DIV class="file" id="template___h5p10n.html.i">./.hg/store/data/template___h5p10n.html.i</DIV>
3.243 + <DIV class="file" id="_r_e_a_d_m_e.i">./.hg/store/data/_r_e_a_d_m_e.i</DIV>
3.244 + <DIV class="file" id="minimum_working___h5p10n.html.i">./.hg/store/data/minimum_working___h5p10n.html.i</DIV>
3.245 + <DIV class="file" id="walkfs-writemarkup.py.i">./.hg/store/data/walkfs-writemarkup.py.i</DIV>
3.246 +</DIV>
3.247 +<DIV class="directory" id="./HTML5Rocks - Home_files">./HTML5Rocks - Home_files
3.248 + <DIV class="file" id="html5rocks-presentation.png">./HTML5Rocks - Home_files/html5rocks-presentation.png</DIV>
3.249 + <DIV class="file" id="modernizr-1.1.min.js">./HTML5Rocks - Home_files/modernizr-1.1.min.js</DIV>
3.250 + <DIV class="file" id="html5rocks-playground.png">./HTML5Rocks - Home_files/html5rocks-playground.png</DIV>
3.251 + <DIV class="file" id="css">./HTML5Rocks - Home_files/css</DIV>
3.252 + <DIV class="file" id="google_logo_small.png">./HTML5Rocks - Home_files/google_logo_small.png</DIV>
3.253 + <DIV class="file" id="html5rocks-tutorials.png">./HTML5Rocks - Home_files/html5rocks-tutorials.png</DIV>
3.254 + <DIV class="file" id="prettify.js">./HTML5Rocks - Home_files/prettify.js</DIV>
3.255 + <DIV class="file" id="ga.js">./HTML5Rocks - Home_files/ga.js</DIV>
3.256 +</DIV>
3.257 +<DIV class="directory" id="./HTML5Rocks - Home_files">./HTML5Rocks - Home_files
3.258 + <DIV class="file" id="html5rocks-presentation.png">./HTML5Rocks - Home_files/html5rocks-presentation.png</DIV>
3.259 + <DIV class="file" id="modernizr-1.1.min.js">./HTML5Rocks - Home_files/modernizr-1.1.min.js</DIV>
3.260 + <DIV class="file" id="html5rocks-playground.png">./HTML5Rocks - Home_files/html5rocks-playground.png</DIV>
3.261 + <DIV class="file" id="css">./HTML5Rocks - Home_files/css</DIV>
3.262 + <DIV class="file" id="google_logo_small.png">./HTML5Rocks - Home_files/google_logo_small.png</DIV>
3.263 + <DIV class="file" id="html5rocks-tutorials.png">./HTML5Rocks - Home_files/html5rocks-tutorials.png</DIV>
3.264 + <DIV class="file" id="prettify.js">./HTML5Rocks - Home_files/prettify.js</DIV>
3.265 + <DIV class="file" id="ga.js">./HTML5Rocks - Home_files/ga.js</DIV>
3.266 +</DIV>
3.267 + </DIV> <!-- slides -->
3.268 +
3.269 + </DIV> <!-- presentation -->
3.270 +
3.271 + <SCRIPT>
3.272 + (function() {
3.273 + // bail in IE
3.274 + var doc = document;
3.275 + if (doc.all) { return; }
3.276 +
3.277 + var disableBuilds = true; //true;
3.278 +
3.279 + var ctr = 0;
3.280 + var spaces = /\s+/, a1 = [""];
3.281 +
3.282 + var toArray = function(list) {
3.283 + return Array.prototype.slice.call(list||[], 0);
3.284 + };
3.285 +
3.286 + var byId = function(id) {
3.287 + if (typeof id == "string") { return doc.getElementById(id); }
3.288 + return id;
3.289 + };
3.290 +
3.291 + var query = function(query, root) {
3.292 + if (!query) { return []; }
3.293 + if (typeof query != "string") { return toArray(query); }
3.294 + if (typeof root == "string"){
3.295 + root = byId(root);
3.296 + if(!root){ return []; }
3.297 + }
3.298 +
3.299 + root = root||document;
3.300 + var rootIsDoc = (root.nodeType == 9);
3.301 + var doc = rootIsDoc ? root : (root.ownerDocument||document);
3.302 +
3.303 + // rewrite the query to be ID rooted
3.304 + if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {
3.305 + root.id = root.id||("qUnique"+(ctr++));
3.306 + query = "#"+root.id+" "+query;
3.307 + }
3.308 + // don't choke on something like ".yada.yada >"
3.309 + if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }
3.310 +
3.311 + return toArray(doc.querySelectorAll(query));
3.312 + };
3.313 +
3.314 + var strToArray = function(s) {
3.315 + if (typeof s == "string" || s instanceof String) {
3.316 + if (s.indexOf(" ") < 0) {
3.317 + a1[0] = s;
3.318 + return a1;
3.319 + } else {
3.320 + return s.split(spaces);
3.321 + }
3.322 + }
3.323 + return s;
3.324 + };
3.325 +
3.326 + var trim = function(str) {
3.327 + return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
3.328 + };
3.329 +
3.330 + var addClass = function(node, classStr) {
3.331 + classStr = strToArray(classStr);
3.332 + var cls = " " + node.className + " ";
3.333 + for (var i = 0, len = classStr.length, c; i < len; ++i) {
3.334 + c = classStr[i];
3.335 + if (c && cls.indexOf(" " + c + " ") < 0) {
3.336 + cls += c + " ";
3.337 + }
3.338 + }
3.339 + node.className = trim(cls);
3.340 + };
3.341 +
3.342 + var removeClass = function(node, classStr) {
3.343 + var cls;
3.344 + if (classStr !== undefined) {
3.345 + classStr = strToArray(classStr);
3.346 + cls = " " + node.className + " ";
3.347 + for (var i = 0, len = classStr.length; i < len; ++i) {
3.348 + cls = cls.replace(" " + classStr[i] + " ", " ");
3.349 + }
3.350 + cls = trim(cls);
3.351 + } else {
3.352 + cls = "";
3.353 + }
3.354 + if (node.className != cls) {
3.355 + node.className = cls;
3.356 + }
3.357 + };
3.358 +
3.359 + var toggleClass = function(node, classStr) {
3.360 + var cls = " " + node.className + " ";
3.361 + if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {
3.362 + removeClass(node, classStr);
3.363 + } else {
3.364 + addClass(node, classStr);
3.365 + }
3.366 + };
3.367 +
3.368 + var ua = navigator.userAgent;
3.369 + var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;
3.370 + var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;
3.371 + var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;
3.372 +
3.373 + var canTransition = (function() {
3.374 + var ver = parseFloat(ua.split("Version/")[1]) || undefined;
3.375 + // test to determine if this browser can handle CSS transitions.
3.376 + var cachedCanTransition =
3.377 + (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
3.378 + return function() { return cachedCanTransition; }
3.379 + })();
3.380 +
3.381 + //
3.382 + // Slide class
3.383 + //
3.384 + var Slide = function(node, idx) {
3.385 + this._node = node;
3.386 + if (idx >= 0) {
3.387 + this._count = idx+1;
3.388 + }
3.389 + if (this._node) {
3.390 + addClass(this._node, "slide distant-future");
3.391 + }
3.392 + this._makeCounter();
3.393 + this._makeBuildList();
3.394 + };
3.395 +
3.396 + Slide.prototype = {
3.397 + _node: null,
3.398 + _count: 0,
3.399 + _buildList: [],
3.400 + _visited: false,
3.401 + _currentState: "",
3.402 + _states: [ "distant-past", "far-past",
3.403 + "past", "current", "future",
3.404 + "far-future", "distant-future" ],
3.405 + setState: function(state) {
3.406 + if (typeof state != "string") {
3.407 + state = this._states[state];
3.408 + }
3.409 + if (state == "current" && !this._visited) {
3.410 + this._visited = true;
3.411 + this._makeBuildList();
3.412 + }
3.413 + removeClass(this._node, this._states);
3.414 + addClass(this._node, state);
3.415 + this._currentState = state;
3.416 +
3.417 + // delay first auto run. Really wish this were in CSS.
3.418 + /*
3.419 + this._runAutos();
3.420 + */
3.421 + var _t = this;
3.422 + setTimeout(function(){ _t._runAutos(); } , 400);
3.423 + },
3.424 + _makeCounter: function() {
3.425 + if(!this._count || !this._node) { return; }
3.426 + var c = doc.createElement("span");
3.427 + c.innerHTML = this._count;
3.428 + c.className = "counter";
3.429 + this._node.appendChild(c);
3.430 + },
3.431 + _makeBuildList: function() {
3.432 + this._buildList = [];
3.433 + if (disableBuilds) { return; }
3.434 + if (this._node) {
3.435 + this._buildList = query("[data-build] > *", this._node);
3.436 + }
3.437 + this._buildList.forEach(function(el) {
3.438 + addClass(el, "to-build");
3.439 + });
3.440 + },
3.441 + _runAutos: function() {
3.442 + if (this._currentState != "current") {
3.443 + return;
3.444 + }
3.445 + // find the next auto, slice it out of the list, and run it
3.446 + var idx = -1;
3.447 + this._buildList.some(function(n, i) {
3.448 + if (n.hasAttribute("data-auto")) {
3.449 + idx = i;
3.450 + return true;
3.451 + }
3.452 + return false;
3.453 + });
3.454 + if (idx >= 0) {
3.455 + var elem = this._buildList.splice(idx, 1)[0];
3.456 + var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");
3.457 + var _t = this;
3.458 + if (canTransition()) {
3.459 + var l = function(evt) {
3.460 + elem.parentNode.removeEventListener(transitionEnd, l, false);
3.461 + _t._runAutos();
3.462 + };
3.463 + elem.parentNode.addEventListener(transitionEnd, l, false);
3.464 + removeClass(elem, "to-build");
3.465 + } else {
3.466 + setTimeout(function() {
3.467 + removeClass(elem, "to-build");
3.468 + _t._runAutos();
3.469 + }, 400);
3.470 + }
3.471 + }
3.472 + },
3.473 + buildNext: function() {
3.474 + if (!this._buildList.length) {
3.475 + return false;
3.476 + }
3.477 + removeClass(this._buildList.shift(), "to-build");
3.478 + return true;
3.479 + },
3.480 + };
3.481 +
3.482 + //
3.483 + // SlideShow class
3.484 + //
3.485 + var SlideShow = function(slides) {
3.486 + this._slides = (slides||[]).map(function(el, idx) {
3.487 + return new Slide(el, idx);
3.488 + });
3.489 +
3.490 + var h = window.location.hash;
3.491 + try {
3.492 + this.current = parseInt(h.split('#slide')[1], 10);
3.493 + }catch (e) { /* squeltch */ }
3.494 + this.current = isNaN(this.current) ? 1 : this.current;
3.495 + var _t = this;
3.496 + doc.addEventListener('keydown',
3.497 + function(e) { _t.handleKeys(e); }, false);
3.498 + doc.addEventListener('mousewheel',
3.499 + function(e) { _t.handleWheel(e); }, false);
3.500 + doc.addEventListener('DOMMouseScroll',
3.501 + function(e) { _t.handleWheel(e); }, false);
3.502 + doc.addEventListener('touchstart',
3.503 + function(e) { _t.handleTouchStart(e); }, false);
3.504 + doc.addEventListener('touchend',
3.505 + function(e) { _t.handleTouchEnd(e); }, false);
3.506 + window.addEventListener('popstate',
3.507 + function(e) { _t.go(e.state); }, false);
3.508 + this._update();
3.509 +
3.510 + // hide those slides we forced to render on load time for positioning purposes
3.511 + [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){
3.512 + setTimeout(function() {
3.513 + removeClass(elem, 'force-render');
3.514 + }, 2000);
3.515 + });
3.516 + };
3.517 +
3.518 + SlideShow.prototype = {
3.519 + _slides: [],
3.520 + _update: function(dontPush) {
3.521 + if (history.pushState) {
3.522 + if (!dontPush) {
3.523 + history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);
3.524 + }
3.525 + } else {
3.526 + window.location.hash = "slide" + this.current;
3.527 + }
3.528 + for (var x = this.current-1; x < this.current+7; x++) {
3.529 + if (this._slides[x-4]) {
3.530 + this._slides[x-4].setState(Math.max(0, x-this.current));
3.531 + }
3.532 + }
3.533 + },
3.534 +
3.535 + current: 0,
3.536 + next: function() {
3.537 + if (!this._slides[this.current-1].buildNext()) {
3.538 + //if _slide is not one index less than the current, build the next indexed slide
3.539 +
3.540 + this.current = Math.min(this.current+1, this._slides.length);
3.541 + //current index number = add 1 unless we reached the last slide index
3.542 +
3.543 + this._update();
3.544 + }
3.545 + },
3.546 + prev: function() {
3.547 + this.current = Math.max(this.current -1, 1);//
3.548 + this._update();
3.549 + },
3.550 + generation: function() {//may want to rename this child node?
3.551 + alert(document.getElementsByTagName('DIV')[0].innerHTML);
3.552 +// so we have the inner content: now get the first node ID attribute/make it display the subnode.
3.553 + if (n>0) {this.current = 0;};//move to child node
3.554 +//document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
3.555 +
3.556 + if (n<0) {};//move to parent node
3.557 + if (this.current != 1) this.prev();//if not slide #1, go back 1
3.558 + this._update();//update the viewer.
3.559 + },
3.560 +
3.561 + go: function(num) {
3.562 + if (history.pushState && this.current != num) {
3.563 + history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
3.564 + }
3.565 + this.current = num;
3.566 + this._update(true);
3.567 + },
3.568 +
3.569 + _notesOn: false,
3.570 + showNotes: function() {
3.571 + var isOn = this._notesOn = !this._notesOn;
3.572 + query(".notes").forEach(function(el) {
3.573 + el.style.display = (notesOn) ? "block" : "none";
3.574 + });
3.575 + },
3.576 + switch3D: function() {
3.577 + toggleClass(document.body, "three-d");
3.578 + },
3.579 + handleWheel: function(e) {
3.580 + var delta = 0;
3.581 + if (e.wheelDelta) {
3.582 + delta = e.wheelDelta/120;
3.583 + if (isOpera) {
3.584 + delta = -delta;
3.585 + }
3.586 + } else if (e.detail) {
3.587 + delta = -e.detail/3;
3.588 + }
3.589 +
3.590 + if (delta > 0 ) {
3.591 + this.prev();
3.592 + return;
3.593 + }
3.594 + if (delta < 0 ) {
3.595 + this.next();
3.596 + return;
3.597 + }
3.598 + },
3.599 + handleKeys: function(e) {
3.600 +
3.601 + if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
3.602 +
3.603 + switch (e.keyCode) {
3.604 +
3.605 + case 37: // left arrow: previous file or parent directory
3.606 + this.prev(); break;
3.607 + case 38: // up arrow/context by file links should work, but
3.608 + this.generation(); break;
3.609 + case 39: // right arrow: next file or subdirectory
3.610 + this.next(); break;
3.611 + case 40: // go to first child (subdirectory) in current directory
3.612 + this.generation(); break; //
3.613 + case 32: // space
3.614 + this.next(); break;
3.615 + case 50: // 2
3.616 + this.showNotes(); break;
3.617 + case 51: // 3
3.618 + this.switch3D(); break;
3.619 + }
3.620 + },
3.621 + _touchStartX: 0,
3.622 + handleTouchStart: function(e) {
3.623 + this._touchStartX = e.touches[0].pageX;
3.624 + },
3.625 + handleTouchEnd: function(e) {
3.626 + var delta = this._touchStartX - e.changedTouches[0].pageX;
3.627 + var SWIPE_SIZE = 150;
3.628 + if (delta > SWIPE_SIZE) {
3.629 + this.next();
3.630 + } else if (delta< -SWIPE_SIZE) {
3.631 + this.prev();
3.632 + }
3.633 + },
3.634 + };
3.635 +
3.636 + // Initialize
3.637 + var slideshow = new SlideShow(query(".slide"));
3.638 + })();
3.639 + </SCRIPT>
3.640 +
3.641 + <!--[if lt IE 9]>
3.642 + <script
3.643 + src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
3.644 + </script>
3.645 + <script>CFInstall.check({ mode: "overlay" });</script>
3.646 + <![endif]-->
3.647 +
3.648 + -->
3.649 +
3.650 +</BODY></HTML>
4.1 --- a/template_H5p10n.html Thu Aug 26 22:10:08 2010 +0300
4.2 +++ b/template_H5p10n.html Thu Sep 02 00:27:59 2010 +0300
4.3 @@ -3,32 +3,12 @@
4.4 <HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
4.5 <META charset="UTF-8">
4.6 <!--[if lt IE 9]>
4.7 - <meta http-equiv="X-UA-Compatible" content="chrome=1">
4.8 +<!--handle whichever browser is running.-->
4.9 <![endif]-->
4.10 -
4.11 <TITLE>HTML5 presentation</TITLE>
4.12 -<!-- <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">-->
4.13 -
4.14 - <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->
4.15 -
4.16 <STYLE>
4.17 .sequencing { display:none; }
4.18 .notes { display: none; }
4.19 - .stroke {
4.20 - -webkit-text-stroke-color: red;
4.21 - -webkit-text-stroke-width: 1px;
4.22 - } /* currently webkit-only */
4.23 -
4.24 - body {
4.25 - font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
4.26 - padding: 0;
4.27 - margin: 0;
4.28 - width: 100%;
4.29 - height: 100%;
4.30 - position: absolute;
4.31 - left: 0px; top: 0px;
4.32 - }
4.33 -
4.34 .presentation {
4.35 position: absolute;
4.36 height: 100%;
4.37 @@ -37,9 +17,8 @@
4.38 top: 0px;
4.39 display: block;
4.40 overflow: hidden;
4.41 - background: #778;
4.42 - }
4.43 -
4.44 + background: #000;
4.45 + }
4.46 .slides {
4.47 width: 100%;
4.48 height: 100%;
4.49 @@ -50,137 +29,35 @@
4.50 top: 0;
4.51 position: absolute;
4.52 display: block;
4.53 - -webkit-transition: -webkit-transform 1s ease-in-out;
4.54 - -moz-transition: -moz-transform 1s ease-in-out;
4.55 - -o-transition: -o-transform 1s ease-in-out;
4.56 - transition: transform 1s ease-in-out;
4.57 }
4.58 -
4.59 .slide {
4.60 display: none;
4.61 position: absolute;
4.62 overflow: hidden;
4.63 width: 100%;/*900px;*/
4.64 - height: 700px;
4.65 + height: 100%;/*700px;*/
4.66 left: 0%;
4.67 top: 0%;
4.68 margin-top: -0px;
4.69 - background-color: #eee;
4.70 - background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
4.71 - background: -moz-linear-gradient(bottom, #bbd, #fff);
4.72 - background: linear-gradient(bottom, #bbd, #fff);
4.73 - -webkit-transition: margin 1.4s ease-in-out;
4.74 - -moz-transition: margin 1.4s ease-in-out;
4.75 - -o-transition: margin 1.4s ease-in-out;
4.76 - transition: margin 1.4s ease-in-out;
4.77 + background-color: #111;
4.78 }
4.79 -
4.80 - .slide:nth-child(even) {
4.81 - border-radius: 20px 0; /* includes Opera 10.5+ */
4.82 - -moz-border-radius: 20px 0;
4.83 - -khtml-border-radius: 20px 0;
4.84 - -webkit-border-top-left-radius: 20px;
4.85 - -webkit-border-bottom-right-radius: 20px;
4.86 - }
4.87 -
4.88 - .slide:nth-child(odd) {
4.89 - border-radius: 0 20px;
4.90 - -moz-border-radius: 0 20px;
4.91 - -khtml-border-radius: 0 20px;
4.92 - -webkit-border-top-right-radius: 20px;
4.93 - -webkit-border-bottom-left-radius: 20px;
4.94 - }
4.95 -
4.96 - .slide p {
4.97 + p {
4.98 font-size: 20px;
4.99 }
4.100 -
4.101 - .slide .counter {
4.102 - color: #999999;
4.103 - position: absolute;
4.104 - left: 20px;
4.105 - bottom: 20px;
4.106 - display: block;
4.107 - font-size: 12px;
4.108 - }
4.109 -
4.110 - .slide.title > .counter,
4.111 - .slide.segue > .counter,
4.112 - .slide.mainTitle > .counter {
4.113 - display: none;
4.114 - }
4.115 -
4.116 .force-render {
4.117 display: block;
4.118 - margin-top: -10000px;
4.119 + margin-top: -1000px;
4.120 }
4.121 -
4.122 section.intro p {
4.123 font-size: 35px;
4.124 }
4.125 -
4.126 - button {
4.127 - font-size: 20px;
4.128 - }
4.129 -
4.130 - .summary {
4.131 - font-size: 30px;
4.132 - }
4.133 -
4.134 - .bullets {
4.135 - font-size: 40px;
4.136 - }
4.137 -
4.138 - .slide.far-past {
4.139 - display: block;
4.140 - margin-left: -2400px;
4.141 - }
4.142 -
4.143 - .slide.past {
4.144 - display: block;
4.145 - margin-left: -1400px;
4.146 - }
4.147 -
4.148 - .slide.current {
4.149 - display: block;
4.150 - margin-left: 0px;
4.151 - }
4.152 -
4.153 - .slide.future {
4.154 - display: block;
4.155 - margin-left: 1500px;
4.156 - }
4.157 -
4.158 - .slide.far-future {
4.159 - display: block;
4.160 - margin-left: 2500px;
4.161 - }
4.162 -
4.163 - .slide.grandparent {
4.164 - display: block;
4.165 - margin-top: -2400px;
4.166 - }
4.167 -
4.168 - .slide.parent {
4.169 - display: block;
4.170 - margin-top: -1400px;
4.171 - }
4.172 -
4.173 - .slide.current {
4.174 - display: block;
4.175 - margin-top: 0px;
4.176 - }
4.177 -
4.178 - .slide.first-child {
4.179 - display: block;
4.180 - margin-top: 1500px;
4.181 - }
4.182 -
4.183 - .slide.first-grandchild {
4.184 - display: block;
4.185 - margin-top: 2500px;
4.186 - }
4.187 -
4.188 +.slide.far-past, .slide.past, .slide.future, .slide.far-future, .slide.parent, slide.child { display: none; } /*margin-left: -2400px;*/
4.189 +/* {display: block; margin-left: -1400px;}*/
4.190 +/* {display: block; margin-left: 1500px;}*/
4.191 +/* {display: block; margin-left: 2500px;}*/
4.192 +/* {display: block; margin-top: -400px; margin-left: 0px;}*/
4.193 +.slide.current { display: block; margin-top: 0px; margin-left: 0px; }
4.194 +/* {display: block; margin-top: 500px; margin-left: 0px;}*/
4.195 body.three-d div.presentation {
4.196 /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000)); */
4.197 }
4.198 @@ -190,275 +67,10 @@
4.199 -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
4.200 -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
4.201 transform: translateX(50px) scale(0.8) rotateY(10deg);
4.202 - }
4.203 -
4.204 -
4.205 - /* Content */
4.206 -
4.207 - @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
4.208 - @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
4.209 -
4.210 - header {
4.211 - font-family: 'Droid Sans';
4.212 - font-weight: normal;
4.213 - font-size: 50px;
4.214 - letter-spacing: -.05em;
4.215 - color: white;
4.216 - color: black;
4.217 - text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
4.218 - position: absolute;
4.219 - left: 30px;
4.220 - top: 25px;
4.221 - margin: 0;
4.222 - padding: 0;
4.223 - }
4.224 -
4.225 - .intro h1 {
4.226 - color: black;
4.227 - padding: 0;
4.228 - margin: 0;
4.229 - letter-spacing: -2px;
4.230 - font-size: 96px;
4.231 - }
4.232 -
4.233 - .intro h2 {
4.234 - color: black;
4.235 - padding: 0;
4.236 - margin: 0;
4.237 - margin-top: -5px;
4.238 - font-size: 40px;
4.239 - letter-spacing: -1px;
4.240 - }
4.241 -
4.242 - h1 {
4.243 - display: inline;
4.244 - font-size: 100%;
4.245 - font-weight: normal;
4.246 - padding: 0;
4.247 - margin: 0;
4.248 - }
4.249 -
4.250 - h2 {
4.251 - font-family: 'Droid Sans';
4.252 - color: black;
4.253 - font-size: 20px;
4.254 - margin-left: 20px;
4.255 - margin-top: 50px;
4.256 - }
4.257 -
4.258 - h2:first-child {
4.259 - margin-top: 0;
4.260 - }
4.261 -
4.262 - section, footer {
4.263 - font-family: 'Droid Sans';
4.264 - font-size: 50px;
4.265 - color: #3f3f3f;
4.266 - text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
4.267 - margin-left: 30px;
4.268 - margin-right: 30px;
4.269 - margin-top: 100px;
4.270 - display: block;
4.271 - overflow: hidden;
4.272 - }
4.273 -
4.274 - footer { font-size: 12px; margin-top: 20px;}
4.275 -
4.276 - a {
4.277 - color: inherit;
4.278 - display: inline-block;
4.279 - text-decoration: none;
4.280 - line-height: 110%;
4.281 - border-bottom: 2px solid #3f3f3f;
4.282 - }
4.283 -
4.284 - #wmap a {
4.285 - line-height: 100%;
4.286 - border-bottom: none;
4.287 - }
4.288 -
4.289 - section.left {
4.290 - float: left;
4.291 - width: 390px;
4.292 - }
4.293 -
4.294 - section.small {
4.295 - font-size: 24px;
4.296 - }
4.297 -
4.298 - section.small ul {
4.299 - margin: 0 0 0 15px;
4.300 - padding: 0;
4.301 - }
4.302 -
4.303 - section.small li {
4.304 - padding-bottom: 0;
4.305 - }
4.306 -
4.307 - h2 {
4.308 - padding: 0;
4.309 - margin: 15px 0 5px 0;
4.310 -/* font-family: GG240;*/
4.311 - }
4.312 -
4.313 - section.center {
4.314 - line-height: 180%;
4.315 - text-align: center;
4.316 - display: table-cell;
4.317 - vertical-align: middle;
4.318 - height: 700px;
4.319 - width: 900px;
4.320 - }
4.321 -
4.322 - pre {
4.323 - text-align: left;
4.324 - font-size: 16px;
4.325 - font-family: 'Droid Sans Mono', Courier;
4.326 - padding-bottom: 10px;
4.327 -
4.328 - padding: 10px 20px;
4.329 - background: rgba(255, 0, 0, 0.05);
4.330 - border-radius: 8px;
4.331 - -webkit-border-radius: 8px;
4.332 - -khtml-border-radius: 8px;
4.333 - -moz-border-radius: 8px;
4.334 - border: 1px solid rgba(255, 0, 0, 0.2);
4.335 - }
4.336 - .two-column {
4.337 - -webkit-column-count: 2;
4.338 - -moz-column-count: 2;
4.339 - column-count: 2;
4.340 - }
4.341 -
4.342 - pre select {
4.343 - font-size: 16px;
4.344 - font-family: Monaco, Courier;
4.345 - border: 1px solid #c61800;
4.346 - }
4.347 -
4.348 - input {
4.349 - font-size: 16px;
4.350 - font-family: Helvetica;
4.351 - padding: 3px;
4.352 - }
4.353 - input[type="range"] {
4.354 - width: 100%;
4.355 - }
4.356 -
4.357 - button {
4.358 - font-family: Verdana;
4.359 - }
4.360 -
4.361 - button.large {
4.362 - font-size: 32px;
4.363 - }
4.364 -
4.365 - pre b {
4.366 - font-weight: normal;
4.367 - color: #c61800;
4.368 - text-shadow: #c61800 0 0 1px;
4.369 - /*letter-spacing: -1px;*/
4.370 - }
4.371 - pre em {
4.372 - font-weight: normal;
4.373 - font-style: normal;
4.374 - color: #18a600;
4.375 - text-shadow: #18a600 0 0 1px;
4.376 - }
4.377 - pre input[type="range"] {
4.378 - height: 6px;
4.379 - cursor: pointer;
4.380 - width: auto;
4.381 - }
4.382 - example {
4.383 - font-size: 16px;
4.384 - display: block;
4.385 - padding: 10px 20px;
4.386 - color: black;
4.387 - background: rgba(255, 255, 255, 0.4);
4.388 - border-radius: 8px;
4.389 - -webkit-border-radius: 8px;
4.390 - -khtml-border-radius: 8px;
4.391 - -moz-border-radius: 8px;
4.392 - margin-bottom: 10px;
4.393 - border: 1px solid rgba(0, 0, 0, 0.2);
4.394 - }
4.395 - video {
4.396 - border-radius: 8px;
4.397 - -moz-border-radius: 8px;
4.398 - -khtml-border-radius: 8px;
4.399 - -webkit-border-radius: 8px;
4.400 - border: 1px solid rgba(0, 0, 0, 0.2);
4.401 - }
4.402 -
4.403 - .css,
4.404 - .js,
4.405 - .html,
4.406 - .key {
4.407 - font-family: 'Droid Sans';
4.408 - color: black;
4.409 - display: inline-block;
4.410 - padding: 6px 10px 3px 10px;
4.411 - font-size: 25px;
4.412 - line-height: 30px;
4.413 - text-shadow: none;
4.414 - letter-spacing: 0;
4.415 - bottom: 10px;
4.416 - position: relative;
4.417 - border-radius: 10px;
4.418 - -moz-border-radius: 10px;
4.419 - -khtml-border-radius: 10px;
4.420 - -webkit-border-radius: 10px;
4.421 - background: white;
4.422 - box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
4.423 - -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
4.424 - -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
4.425 - -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
4.426 - }
4.427 -
4.428 - .key { font-family: Arial; }
4.429 -
4.430 - :not(header) > .css,
4.431 - :not(header) > .js,
4.432 - :not(header) > .html,
4.433 - :not(header) > .key {
4.434 - margin: 0 5px;
4.435 - bottom: 4px;
4.436 - }
4.437 -
4.438 - .css {
4.439 - background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));
4.440 - background-color: #ff4;
4.441 - background: -moz-linear-gradient(left top, #ff4, #ffa);
4.442 - }
4.443 - .js {
4.444 - background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));
4.445 - background-color: #4f4;
4.446 - background: -moz-linear-gradient(left top, #4f4, #afa);
4.447 - }
4.448 - .html {
4.449 - background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));
4.450 - background-color: #e88;
4.451 - background: -moz-linear-gradient(left top, #e88, #fee);
4.452 - }
4.453 -
4.454 - li {
4.455 - list-style: none;
4.456 - padding: 10px 0;
4.457 - }
4.458 -
4.459 - .summary li::before, .bullets li::before {
4.460 - content: 'ยท ';
4.461 - }
4.462 -
4.463 - info {
4.464 - display: block;
4.465 - font-size: 50%;
4.466 - text-align: center;
4.467 - }
4.468 -
4.469 + }
4.470 </STYLE>
4.471 - </HEAD><BODY>
4.472 + </HEAD>
4.473 + <BODY>
4.474 <DIV class="presentation">
4.475 <DIV class="slides">
4.476 <!--NEW SLIDES-->
4.477 @@ -734,27 +346,29 @@
4.478 current: 0,
4.479 next: function() {
4.480 if (!this._slides[this.current-1].buildNext()) {
4.481 + //if _slide is not one index less than the current, build the next indexed slide
4.482 +
4.483 this.current = Math.min(this.current+1, this._slides.length);
4.484 + //current index number = add 1 unless we reached the last slide index
4.485 +
4.486 this._update();
4.487 }
4.488 },
4.489 prev: function() {
4.490 - this.current = Math.max(this.current-1, 1);//this.current-1, 1);
4.491 + this.current = Math.max(this.current -1, 1);//
4.492 this._update();
4.493 },
4.494 - parent: function() {
4.495 - this.current = Math.max(this.current-1, 1);//this.current-1, 1);
4.496 - this._update();
4.497 + generation: function(n) {//may want to rename this child node?
4.498 + alert(document.getElementsByTagName('DIV')[0].innerHTML);
4.499 +// so we have the inner content: now get the first node ID attribute/make it display the subnode.
4.500 + if (n>0) {this.current = 0;};//move to child node
4.501 +//document.getElementById('div2').getElementsByTagNames('tr')[0].innerHTML='<td>Test</td>'; //does not work..
4.502 +
4.503 + if (n<0) {};//move to parent node
4.504 + if (this.current != 1) this.prev();//if not slide #1, go back 1
4.505 + this._update();//update the viewer.
4.506 },
4.507
4.508 - first_child: function() {
4.509 - this.current = Math.max(this.current-1, 1);//this.current-1, 1);
4.510 - this._update();
4.511 - },
4.512 -//
4.513 -//
4.514 -//
4.515 -//
4.516 go: function(num) {
4.517 if (history.pushState && this.current != num) {
4.518 history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);
4.519 @@ -798,15 +412,15 @@
4.520 if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
4.521
4.522 switch (e.keyCode) {
4.523 - case 37: // left arrow
4.524 +
4.525 + case 37: // left arrow: previous file or parent directory
4.526 this.prev(); break;
4.527 case 38: // up arrow/context by file links should work, but
4.528 - this.parent(); break; // linked p10ns must use a nest-level flag for back button=up cursor
4.529 - case 39: // right arrow
4.530 + this.generation(); break;
4.531 + case 39: // right arrow: next file or subdirectory
4.532 this.next(); break;
4.533 - case 40: // down arrow/what can we do with os.walk() here? This navigation should allow p10n tailoring to a given situation; link keys on a per-presentation basis for key slides will also be good.
4.534 - this.first_child(); break; // make the wiki bouncier.
4.535 -
4.536 + case 40: // go to first child (subdirectory) in current directory
4.537 + this.generation(); break; //
4.538 case 32: // space
4.539 this.next(); break;
4.540 case 50: // 2
5.1 --- a/walkfs-writemarkup.py Thu Aug 26 22:10:08 2010 +0300
5.2 +++ b/walkfs-writemarkup.py Thu Sep 02 00:27:59 2010 +0300
5.3 @@ -2,48 +2,36 @@
5.4 # -*- coding: utf-8 -*-
5.5
5.6 from os import walk, path, stat
5.7 -from sha import new
5.8 +#from sha import new
5.9 #from time import
5.10
5.11 -# Bug: Class attributes end up with white space (if filenames have them): this might be a bug or a feature, I suppose.
5.12 -
5.13 -# Put template loader from file minimumWorking... mod with %s at slide insertion point.
5.14 -# Setup a current slideset, current index display (re-add it modified from original).
5.15 -
5.16 -def makeSlides(root):
5.17 - defaultOrder, slideData = "", ""
5.18 +def directorySlides(root):
5.19 + content = ""
5.20 for current, directories, files in walk(root):
5.21 -# print current, directories, files
5.22 - classes = ""
5.23 - if directories != []:
5.24 - for directory in directories:
5.25 - try:
5.26 - fullpath = path.join(current, directory)
5.27 - uid = new(fullpath).hexdigest()
5.28 - metaInfo = stat(fullpath) # see http://wiki.forum.nokia.com/index.php/How_to_handle_file_metadata
5.29 - slideData += '\n<!-- directory --><DIV class="slide %s" id="%s">%s</DIV>' % ("defaultOrder", uid, metaInfo)
5.30 - defaultOrder += " " + uid
5.31 - except:
5.32 - pass
5.33 + for count in current.split("/"):
5.34 + content += '\n<DIV class="directory" id="%s">%s' % (current, current)
5.35 + if directories != []:
5.36 + for item in directories:
5.37 + fullpath = path.join(current, item)
5.38 + content += '\n <DIV class="subdirectory" id="%s">%s</DIV>' % (item, fullpath)
5.39 + else:
5.40 + print "No directories in %s" % current
5.41 +#No cnotent is shown for nested slides, and this is a big problem
5.42 + if files != []:
5.43 + for item in files:
5.44 + fullpath = path.join(current, item)
5.45 + content += '\n <DIV class="file" id="%s">%s</DIV>' % (item, fullpath)
5.46 + else:
5.47 + print "No files in %s" % current
5.48 + content += '\n</DIV>'
5.49
5.50 - if files != []:
5.51 - for filename in files:
5.52 - #classes stay the same for file slides as for directory slides for each path given.
5.53 - try:
5.54 - fullpath = path.join(current, filename)
5.55 - uid = new(fullpath).hexdigest()
5.56 - metaInfo = stat(fullpath)
5.57 - slideData += '\n<!-- filename --><DIV class="slide %s" id="%s">%s</DIV>' % ("defaultOrder", uid, metaInfo)
5.58 - defaultOrder += " " + uid
5.59 - except:
5.60 - pass
5.61 - slideOrder = '\n<!-- default order --><DIV class="%s">\n%s\n</DIV>' % ("sequencing defaultOrder", defaultOrder)
5.62 - slideData += slideOrder
5.63 + return content
5.64
5.65 - return slideData
5.66 -
5.67 -s = makeSlides('.')
5.68 -template = file("./template_H5p10n.html", "r").read()
5.69 -r = template.split("%s")
5.70 -t = r[0] + s + r[1]
5.71 -file("./generated_slides", "w").write(t)
5.72 +def main():
5.73 + s = directorySlides("./")
5.74 + template = file("./template_H5p10n.html", "r").read()
5.75 + r = template.split("%s")
5.76 + t = r[0] + s + r[1]
5.77 + file("./generated_slides", "w").write(t)
5.78 +
5.79 +activation = main()
