PythonSlideShow

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