PythonSlideShow

template_H5p10n.html

7:f1bd097f5297
2010-08-26 ink Missing up/down cursor calls because the tree navigation needs sorting. Added grandparent to grandchild relative generations' CSS rules. Next need to add these attributes to the correct slides and find a way to compute this with javascript (or python output). Changed template_H5p10n.html
     1 <!DOCTYPE html>     2 <HTML>     3 <HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">     4     <META charset="UTF-8">     5     <!--[if lt IE 9]>     6       <meta http-equiv="X-UA-Compatible" content="chrome=1">     7     <![endif]-->     8      9     <TITLE>HTML5 presentation</TITLE>    10 <!--    <LINK href="./HTML5 presentation_files/css" rel="stylesheet" type="text/css">-->    11         12     <!-- <link type="text/css" href="./src/scrollbar.css" rel="stylesheet"> -->    13         14     <STYLE>    15       .sequencing { display:none; }    16       .notes { display: none; }    17       .stroke {    18         -webkit-text-stroke-color: red;    19         -webkit-text-stroke-width: 1px;    20       } /* currently webkit-only */    21           22       body {    23         font: 14px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;    24         padding: 0;    25         margin: 0;    26         width: 100%;    27         height: 100%;    28         position: absolute;    29         left: 0px; top: 0px;    30       }    31           32       .presentation {    33         position: absolute;    34         height: 100%;    35         width: 100%;    36         left: 0px;    37         top: 0px;    38         display: block;    39         overflow: hidden;    40         background: #778;    41       }    42           43       .slides {    44         width: 100%;    45         height: 100%;    46         /*    47         overflow: hidden;    48         */    49         left: 0;    50         top: 0;    51         position: absolute;    52         display: block;    53         -webkit-transition: -webkit-transform 1s ease-in-out;    54         -moz-transition: -moz-transform 1s ease-in-out;    55         -o-transition: -o-transform 1s ease-in-out;    56         transition: transform 1s ease-in-out;    57       }    58     59       .slide {    60         display: none;    61         position: absolute;    62         overflow: hidden;    63         width: 100%;/*900px;*/    64         height: 700px;    65         left: 0%;    66         top: 0%;    67         margin-top: -0px;    68         background-color: #eee;    69         background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));    70         background: -moz-linear-gradient(bottom, #bbd, #fff);    71         background: linear-gradient(bottom, #bbd, #fff);    72         -webkit-transition: margin 0.60s ease-in-out;    73         -moz-transition: margin 0.60s ease-in-out;    74         -o-transition: margin 0.60s ease-in-out;    75         transition: margin 0.60s ease-in-out;    76       }    77           78       .slide:nth-child(even) {    79         border-radius: 20px 0; /* includes Opera 10.5+ */    80         -moz-border-radius: 20px 0;    81         -khtml-border-radius: 20px 0;    82         -webkit-border-top-left-radius: 20px;    83         -webkit-border-bottom-right-radius: 20px;    84       }    85           86       .slide:nth-child(odd) {    87         border-radius: 0 20px;    88         -moz-border-radius: 0 20px;    89         -khtml-border-radius: 0 20px;    90         -webkit-border-top-right-radius: 20px;    91         -webkit-border-bottom-left-radius: 20px;    92       }    93     94       .slide p {    95         font-size: 20px;    96       }    97     98       .slide .counter {    99         color: #999999;   100         position: absolute;   101         left: 20px;   102         bottom: 20px;   103         display: block;   104         font-size: 12px;   105       }   106    107       .slide.title > .counter,   108       .slide.segue > .counter,   109       .slide.mainTitle > .counter {   110         display: none;   111       }   112    113       .force-render {   114         display: block;   115         margin-top: -10000px;   116       }   117    118       section.intro p {   119         font-size: 35px;   120       }   121    122       button {   123         font-size: 20px;   124       }   125          126       .summary {   127        font-size: 30px;   128       }   129    130       .bullets {   131        font-size: 40px;   132       }   133    134       .slide.far-past {   135         display: block;   136         margin-left: -2400px;   137       }   138          139       .slide.past {   140         display: block;   141         margin-left: -1400px;   142       }   143          144       .slide.current {   145         display: block;   146         margin-left: 0px;   147       }   148          149       .slide.future {   150         display: block;   151         margin-left: 1500px;   152       }   153          154       .slide.far-future {   155         display: block;   156         margin-left: 2500px;   157       }   158    159       .slide.grandparent {   160         display: block;   161         margin-top: -2400px;   162       }   163          164       .slide.parent {   165         display: block;   166         margin-top: -1400px;   167       }   168          169       .slide.current {   170         display: block;   171         margin-top: 0px;   172       }   173          174       .slide.first-child {   175         display: block;   176         margin-top: 1500px;   177       }   178          179       .slide.first-grandchild {   180         display: block;   181         margin-top: 2500px;   182       }   183    184       body.three-d div.presentation {   185         /*background: -webkit-gradient(radial, 50% 50%, 10, 50% 50%, 1000, from(#333), to(#000));        */   186       }   187          188       body.three-d div.slides {   189         -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);   190         -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);   191         -o-transform: translateX(50px) scale(0.8) rotateY(10deg);   192         transform: translateX(50px) scale(0.8) rotateY(10deg);   193       }   194          195          196       /* Content */   197          198       @font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }   199       @font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }   200          201       header {   202         font-family: 'Droid Sans';   203         font-weight: normal;   204         font-size: 50px;   205         letter-spacing: -.05em;   206         color: white;   207         color: black;   208         text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;   209         position: absolute;   210         left: 30px;   211         top: 25px;   212         margin: 0;   213         padding: 0;   214       }   215          216       .intro h1 {   217         color: black;   218         padding: 0;   219         margin: 0;   220         letter-spacing: -2px;   221         font-size: 96px;   222       }   223          224       .intro h2 {   225         color: black;   226         padding: 0;   227         margin: 0;   228         margin-top: -5px;   229         font-size: 40px;   230         letter-spacing: -1px;   231       }   232          233       h1 {   234         display: inline;   235         font-size: 100%;   236       	font-weight: normal;   237       	padding: 0;   238       	margin: 0;   239       }   240          241       h2 {   242         font-family: 'Droid Sans';   243         color: black;   244         font-size: 20px;   245         margin-left: 20px;   246         margin-top: 50px;   247       }   248          249       h2:first-child {   250         margin-top: 0;   251       }   252    253       section, footer {   254         font-family: 'Droid Sans';   255         font-size: 50px;   256         color: #3f3f3f;   257         text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;   258         margin-left: 30px;   259         margin-right: 30px;   260         margin-top: 100px;   261         display: block;   262         overflow: hidden;   263       }   264          265       footer { font-size: 12px; margin-top: 20px;}   266    267       a {   268         color: inherit;   269         display: inline-block;   270         text-decoration: none;   271         line-height: 110%;   272         border-bottom: 2px solid #3f3f3f;   273       }   274    275       #wmap a {   276         line-height: 100%;   277         border-bottom: none;   278       }   279          280       section.left {   281         float: left;   282         width: 390px;   283       }   284          285       section.small {   286         font-size: 24px;   287       }   288          289       section.small ul {   290         margin: 0 0 0 15px;   291         padding: 0;   292       }   293          294       section.small li {   295         padding-bottom: 0;   296       }   297          298       h2 {   299         padding: 0;   300         margin: 15px 0 5px 0;   301 /*        font-family: GG240;*/   302       }   303          304       section.center {   305         line-height: 180%;   306         text-align: center;   307         display: table-cell;   308         vertical-align: middle;   309         height: 700px;   310         width: 900px;   311       }   312          313       pre {   314         text-align: left;   315         font-size: 16px;   316         font-family: 'Droid Sans Mono', Courier;   317         padding-bottom: 10px;   318            319         padding: 10px 20px;   320         background: rgba(255, 0, 0, 0.05);   321         border-radius: 8px;   322         -webkit-border-radius: 8px;   323         -khtml-border-radius: 8px;   324         -moz-border-radius: 8px;   325         border: 1px solid rgba(255, 0, 0, 0.2);   326       }   327       .two-column {   328         -webkit-column-count: 2;   329         -moz-column-count: 2;   330         column-count: 2;   331       }   332          333       pre select {   334         font-size: 16px;   335         font-family: Monaco, Courier;   336         border: 1px solid #c61800;   337       }   338            339       input {   340         font-size: 16px;   341         font-family: Helvetica;   342         padding: 3px;   343       }   344       input[type="range"] {   345         width: 100%;   346       }   347          348       button {   349         font-family: Verdana;   350       }   351          352       button.large {   353         font-size: 32px;   354       }   355            356       pre b {   357         font-weight: normal;   358         color: #c61800;   359         text-shadow: #c61800 0 0 1px;   360         /*letter-spacing: -1px;*/   361       }   362       pre em {   363         font-weight: normal;   364         font-style: normal;   365         color: #18a600;   366         text-shadow: #18a600 0 0 1px;   367       }   368       pre input[type="range"] {   369         height: 6px;   370         cursor: pointer;   371         width: auto;   372       }   373       example {   374         font-size: 16px;   375         display: block;   376         padding: 10px 20px;   377         color: black;   378         background: rgba(255, 255, 255, 0.4);   379         border-radius: 8px;   380         -webkit-border-radius: 8px;   381         -khtml-border-radius: 8px;   382         -moz-border-radius: 8px;   383         margin-bottom: 10px;   384         border: 1px solid rgba(0, 0, 0, 0.2);   385       }   386       video {   387         border-radius: 8px;   388         -moz-border-radius: 8px;   389         -khtml-border-radius: 8px;   390         -webkit-border-radius: 8px;   391         border: 1px solid rgba(0, 0, 0, 0.2);   392       }   393          394       .css,   395       .js,   396       .html,   397       .key {   398         font-family: 'Droid Sans';   399         color: black;   400         display: inline-block;   401         padding: 6px 10px 3px 10px;   402         font-size: 25px;   403         line-height: 30px;   404         text-shadow: none;   405         letter-spacing: 0;   406         bottom: 10px;   407         position: relative;   408         border-radius: 10px;   409         -moz-border-radius: 10px;   410         -khtml-border-radius: 10px;   411         -webkit-border-radius: 10px;   412         background: white;   413         box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   414         -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   415         -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   416         -o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;   417       }   418          419       .key { font-family: Arial; }   420          421       :not(header) > .css,   422       :not(header) > .js,   423       :not(header) > .html,   424       :not(header) > .key {   425         margin: 0 5px;   426         bottom: 4px;   427       }   428          429       .css {   430         background: -webkit-gradient(linear, left top, left bottom, from(#ff4), to(#ffa));   431         background-color: #ff4;   432         background: -moz-linear-gradient(left top, #ff4, #ffa);   433       }   434       .js {   435         background: -webkit-gradient(linear, left top, left bottom, from(#4f4), to(#afa));   436         background-color: #4f4;   437         background: -moz-linear-gradient(left top, #4f4, #afa);   438       }   439       .html {   440         background: -webkit-gradient(linear, left top, left bottom, from(#e88), to(#fee));   441         background-color: #e88;   442         background: -moz-linear-gradient(left top, #e88, #fee);   443       }   444          445       li {   446         list-style: none;   447         padding: 10px 0;   448       }   449          450       .summary li::before, .bullets li::before {   451         content: '?? ';   452       }   453          454       info {   455         display: block;   456         font-size: 50%;   457         text-align: center;   458       }   459          460     </STYLE>   461     </HEAD><BODY>   462     <DIV class="presentation">   463       <DIV class="slides">   464 <!--NEW SLIDES-->   465 %s   466       </DIV> <!-- slides -->   467           468     </DIV> <!-- presentation -->   469        470     <SCRIPT>   471       (function() {   472         // bail in IE   473         var doc = document;   474         if (doc.all) { return; }   475    476         var disableBuilds = true; //true;   477    478         var ctr = 0;   479         var spaces = /\s+/, a1 = [""];   480    481         var toArray = function(list) {   482           return Array.prototype.slice.call(list||[], 0);   483         };   484    485         var byId = function(id) {   486           if (typeof id == "string") { return doc.getElementById(id); }   487           return id;   488         };   489    490         var query = function(query, root) {   491           if (!query) { return []; }   492           if (typeof query != "string") { return toArray(query); }   493           if (typeof root == "string"){   494             root = byId(root);   495             if(!root){ return []; }   496           }   497    498           root = root||document;   499           var rootIsDoc = (root.nodeType == 9);   500           var doc = rootIsDoc ? root : (root.ownerDocument||document);   501    502           // rewrite the query to be ID rooted   503           if (!rootIsDoc || (">~+".indexOf(query.charAt(0)) >= 0)) {   504             root.id = root.id||("qUnique"+(ctr++));   505             query = "#"+root.id+" "+query;   506           }   507           // don't choke on something like ".yada.yada >"   508           if (">~+".indexOf(query.slice(-1)) >= 0) { query += " *"; }   509    510           return toArray(doc.querySelectorAll(query));   511         };   512    513         var strToArray = function(s) {   514           if (typeof s == "string" || s instanceof String) {   515             if (s.indexOf(" ") < 0) {   516               a1[0] = s;   517               return a1;   518             } else {   519               return s.split(spaces);   520             }   521           }   522           return s;   523         };   524    525         var trim = function(str) {   526           return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');   527         };   528    529         var addClass = function(node, classStr) {   530           classStr = strToArray(classStr);   531           var cls = " " + node.className + " ";   532           for (var i = 0, len = classStr.length, c; i < len; ++i) {   533             c = classStr[i];   534             if (c && cls.indexOf(" " + c + " ") < 0) {   535               cls += c + " ";   536             }   537           }   538           node.className = trim(cls);   539         };   540    541         var removeClass = function(node, classStr) {   542           var cls;   543           if (classStr !== undefined) {   544             classStr = strToArray(classStr);   545             cls = " " + node.className + " ";   546             for (var i = 0, len = classStr.length; i < len; ++i) {   547               cls = cls.replace(" " + classStr[i] + " ", " ");   548             }   549             cls = trim(cls);   550           } else {   551             cls = "";   552           }   553           if (node.className != cls) {   554             node.className = cls;   555           }   556         };   557    558         var toggleClass = function(node, classStr) {   559           var cls = " " + node.className + " ";   560           if (cls.indexOf(" " + trim(classStr) + " ") >= 0) {   561             removeClass(node, classStr);   562           } else {   563             addClass(node, classStr);   564           }   565         };   566    567         var ua = navigator.userAgent;   568         var isFF = parseFloat(ua.split("Firefox/")[1]) || undefined;   569         var isWK = parseFloat(ua.split("WebKit/")[1]) || undefined;   570         var isOpera = parseFloat(ua.split("Opera/")[1]) || undefined;   571    572         var canTransition = (function() {   573           var ver = parseFloat(ua.split("Version/")[1]) || undefined;   574           // test to determine if this browser can handle CSS transitions.   575           var cachedCanTransition =    576             (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));   577           return function() { return cachedCanTransition; }   578         })();   579    580         //   581         // Slide class   582         //   583         var Slide = function(node, idx) {   584           this._node = node;   585           if (idx >= 0) {   586             this._count = idx+1;   587           }   588           if (this._node) {   589             addClass(this._node, "slide distant-future");   590           }   591           this._makeCounter();   592           this._makeBuildList();   593         };   594    595         Slide.prototype = {   596           _node: null,   597           _count: 0,   598           _buildList: [],   599           _visited: false,   600           _currentState: "",   601           _states: [ "distant-past", "far-past",   602                      "past", "current", "future",   603                      "far-future", "distant-future" ],   604           setState: function(state) {   605             if (typeof state != "string") {   606               state = this._states[state];   607             }   608             if (state == "current" && !this._visited) {   609               this._visited = true;   610               this._makeBuildList();   611             }   612             removeClass(this._node, this._states);   613             addClass(this._node, state);   614             this._currentState = state;   615    616             // delay first auto run. Really wish this were in CSS.   617             /*   618             this._runAutos();   619             */   620             var _t = this;   621             setTimeout(function(){ _t._runAutos(); } , 400);   622           },   623           _makeCounter: function() {   624             if(!this._count || !this._node) { return; }   625             var c = doc.createElement("span");   626             c.innerHTML = this._count;   627             c.className = "counter";   628             this._node.appendChild(c);   629           },   630           _makeBuildList: function() {   631             this._buildList = [];   632             if (disableBuilds) { return; }   633             if (this._node) {   634               this._buildList = query("[data-build] > *", this._node);   635             }   636             this._buildList.forEach(function(el) {   637               addClass(el, "to-build");   638             });   639           },   640           _runAutos: function() {   641             if (this._currentState != "current") {   642               return;   643             }   644             // find the next auto, slice it out of the list, and run it   645             var idx = -1;   646             this._buildList.some(function(n, i) {   647               if (n.hasAttribute("data-auto")) {   648                 idx = i;   649                 return true;   650               }   651               return false;   652             });   653             if (idx >= 0) {   654               var elem = this._buildList.splice(idx, 1)[0];   655               var transitionEnd = isWK ? "webkitTransitionEnd" : (isFF ? "mozTransitionEnd" : "oTransitionEnd");   656               var _t = this;   657               if (canTransition()) {   658                 var l = function(evt) {   659                   elem.parentNode.removeEventListener(transitionEnd, l, false);   660                   _t._runAutos();   661                 };   662                 elem.parentNode.addEventListener(transitionEnd, l, false);   663                 removeClass(elem, "to-build");   664               } else {   665                 setTimeout(function() {   666                   removeClass(elem, "to-build");   667                   _t._runAutos();   668                 }, 400);   669               }   670             }   671           },   672           buildNext: function() {   673             if (!this._buildList.length) {   674               return false;   675             }   676             removeClass(this._buildList.shift(), "to-build");   677             return true;   678           },   679         };   680    681         //   682         // SlideShow class   683         //   684         var SlideShow = function(slides) {   685           this._slides = (slides||[]).map(function(el, idx) {   686             return new Slide(el, idx);   687           });   688    689           var h = window.location.hash;   690           try {   691             this.current = parseInt(h.split('#slide')[1], 10);   692           }catch (e) { /* squeltch */ }   693           this.current = isNaN(this.current) ? 1 : this.current;   694           var _t = this;   695           doc.addEventListener('keydown',    696               function(e) { _t.handleKeys(e); }, false);   697           doc.addEventListener('mousewheel',    698               function(e) { _t.handleWheel(e); }, false);   699           doc.addEventListener('DOMMouseScroll',    700               function(e) { _t.handleWheel(e); }, false);   701           doc.addEventListener('touchstart',    702               function(e) { _t.handleTouchStart(e); }, false);   703           doc.addEventListener('touchend',    704               function(e) { _t.handleTouchEnd(e); }, false);   705           window.addEventListener('popstate',    706               function(e) { _t.go(e.state); }, false);   707           this._update();   708              709           // hide those slides we forced to render on load time for positioning purposes   710           [].forEach.call(document.querySelectorAll('.force-render'), function(elem,i){   711             setTimeout(function() {   712               removeClass(elem, 'force-render');   713             }, 2000);   714           });   715         };   716    717         SlideShow.prototype = {   718           _slides: [],   719           _update: function(dontPush) {   720             if (history.pushState) {   721               if (!dontPush) {   722                 history.pushState(this.current, "Slide " + this.current, "#slide" + this.current);   723               }   724             } else {   725               window.location.hash = "slide" + this.current;   726             }   727             for (var x = this.current-1; x < this.current+7; x++) {   728               if (this._slides[x-4]) {   729                 this._slides[x-4].setState(Math.max(0, x-this.current));   730               }   731             }   732           },   733    734           current: 0,   735           next: function() {   736             if (!this._slides[this.current-1].buildNext()) {   737               this.current = Math.min(this.current+1, this._slides.length);   738               this._update();   739             }   740           },   741           prev: function() {   742             this.current = Math.max(this.current-1, 1);//this.current-1, 1);   743             this._update();   744           },   745    746 //   747 //   748 //   749 //   750           go: function(num) {   751             if (history.pushState && this.current != num) {   752               history.replaceState(this.current, "Slide " + this.current, "#slide" + this.current);   753             }   754             this.current = num;   755             this._update(true);   756           },   757    758           _notesOn: false,   759           showNotes: function() {   760             var isOn = this._notesOn = !this._notesOn;   761             query(".notes").forEach(function(el) {   762               el.style.display = (notesOn) ? "block" : "none";   763             });   764           },   765           switch3D: function() {   766             toggleClass(document.body, "three-d");   767           },   768           handleWheel: function(e) {   769             var delta = 0;   770             if (e.wheelDelta) {   771               delta = e.wheelDelta/120;   772               if (isOpera) {   773                 delta = -delta;   774               }   775             } else if (e.detail) {   776               delta = -e.detail/3;   777             }   778    779             if (delta > 0 ) {   780               this.prev();   781               return;   782             }   783             if (delta < 0 ) {   784               this.next();   785               return;   786             }   787           },   788           handleKeys: function(e) {   789                790             if (/^(input|textarea)$/i.test(e.target.nodeName)) return;   791                792             switch (e.keyCode) {   793               case 37: // left arrow   794                 this.prev(); break;   795               case 38: // up arrow/context by file links should work, but   796                 this.parent(); break; // linked p10ns must use a nest-level flag for back button=up cursor                 797               case 39: // right arrow   798                 this.next(); break;   799               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.   800                 this.first_child(); break; // make the wiki bouncier.   801    802               case 32: // space   803                 this.next(); break;   804               case 50: // 2   805                 this.showNotes(); break;   806               case 51: // 3   807                 this.switch3D(); break;   808             }   809           },   810           _touchStartX: 0,   811           handleTouchStart: function(e) {   812             this._touchStartX = e.touches[0].pageX;   813           },   814           handleTouchEnd: function(e) {   815             var delta = this._touchStartX - e.changedTouches[0].pageX;   816             var SWIPE_SIZE = 150;   817             if (delta > SWIPE_SIZE) {   818               this.next();   819             } else if (delta< -SWIPE_SIZE) {   820               this.prev();   821             }   822           },   823         };   824    825         // Initialize   826         var slideshow = new SlideShow(query(".slide"));   827       })();   828     </SCRIPT>   829    830     <!--[if lt IE 9]>   831     <script    832       src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">   833     </script>   834 		<script>CFInstall.check({ mode: "overlay" });</script>   835     <![endif]-->   836        837  -->   838    839 </BODY></HTML>