Working "pause" command.
authorKim Nguyễn <kn@lri.fr>
Mon, 25 Feb 2013 14:48:14 +0000 (15:48 +0100)
committerKim Nguyễn <kn@lri.fr>
Mon, 25 Feb 2013 14:48:14 +0000 (15:48 +0100)
doc/sample.xhtml
simpleWebSlides.js
themes/webTwoPointO.css

index 01a9d6d..6bc4546 100644 (file)
@@ -1,10 +1,10 @@
-<!DOCTYPE html ""
-[
-  <!ENTITY global-title "<h1>SimpleWebSlides</h1><h1>An HTML5 presentation framework</h1>">
-]>
-<html>
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
-    <title>&global-title;</title>
+    <title>SimpleWebSlides</title>
 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
     <meta name="copyright"
 
     <div class="slide cover nofooter">
       <div class="centerbox">
-        &global-title;
-        <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
+        <h1 class="pause" >SimpleWebSlides</h1>
+        <h1 class="pause" >An <em>HTML</em><img style="height:28pt"
+             src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
+          Presentation framework</h1>
+        <a class="pause" href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
       </div>
     </div>
 
 
     <h1>Introduction</h1>
 
-    <div class="slide" data-foo="44">
+    <div class="slide" >
       <h1>What is it?</h1>
       <em>SimpleWebSlides</em> is an HTML5 framework that allows
-      you to build presentation slides:<i class="pause"/>
+      you to build presentation slides:
       <ul>
         <li>Write your slides in HTML5!</li>
         <li>Script your slides with Javascript!</li>
index a80dfad..6158499 100644 (file)
@@ -1,6 +1,31 @@
 var SimpleWebSlides = new function () {
     var _self = this;
     var _total_slides;
+
+
+    function push(t, i, v) {
+        if ((typeof t[i]) == 'undefined') {
+            t[i] = new Array();
+        };
+        var l = t[i].length;
+        if (l == 0 || !($.contains(t[i][l-1].get()[0], v.get()[0]))) {
+            t[i][l] = v;
+        };
+    };
+
+    function init_canvas(canvas) {
+        var frames = new Array ();
+        var cur_frame = 0;
+        canvas.find("*").each(function(i) {
+            if ($(this).hasClass("pause"))  cur_frame++;
+            push(frames, cur_frame, $(this));
+
+        });
+        canvas.data("frames", { frames: frames, current: 0 });
+
+    };
+
+
     _self.getNumSlides = function () { return _total_slides; };
 
     if (typeof(Storage)!=="undefined"){
@@ -31,6 +56,19 @@ var SimpleWebSlides = new function () {
         $(".canvas").each (function (i) {
             if (i == cur){
                 $(this).removeClass("other_slides").addClass("current_slide");
+                var info = $(this).data("frames");
+                console.log(info);
+                var frames = info.frames;
+                var upto = info.current;
+                for(var j = 0; j < frames.length; j++) {
+                    for (var k = 0; k < frames[j].length; k++) {
+                        if (j <= upto)
+                            frames[j][k].css('visibility','visible');
+                        else
+                            frames[j][k].css('visibility','hidden');
+                    };
+                };
+
             } else if ($(this).hasClass("current_slide")) {
                 $(this).removeClass("current_slide").addClass("other_slides");
             };
@@ -47,7 +85,46 @@ var SimpleWebSlides = new function () {
         _self.setCurrentSlide(Math.max(_self.getCurrentSlide()-1,
                                       _self.firstSlide()));
     };
+
+    _self.getFrameInfo = function () {
+
+        var i = _self.getCurrentSlide();
+        var canvas = $($(".canvas")[i]);
+        var infos = canvas.data("frames");
+        return infos;
+    };
+    _self.getCurrentFrame = function () { return _self.getFrameInfo().current; };
+    _self.setCurrentFrame = function (i) { _self.getFrameInfo().current = i; };
+    _self.firstFrame = function () { return 0; };
+    _self.lastFrame = function () { return _self.getFrameInfo().frames.length-1; };
+
+    _self.nextFrame = function () {
+        _self.setCurrentFrame(Math.min(_self.getCurrentFrame()+1,
+                                       _self.lastFrame()));
+
+    };
+    _self.previousFrame = function () {
+        _self.setCurrentFrame(Math.max(_self.getCurrentFrame()-1,
+                                       _self.firstFrame()));
+    };
+
+    _self.next = function () {
+        var i = _self.getCurrentFrame();
+        if (i == _self.lastFrame())
+            _self.nextSlide();
+        else
+            _self.nextFrame();
+    };
+
+    _self.previous = function () {
+        var i = _self.getCurrentFrame();
+        if (i == _self.firstFrame())
+            _self.previousSlide();
+        else
+            _self.previousFrame();
+    };
+
+
     _self.keyboardHandler = function (event) {
 
         switch (event.which) {
@@ -60,14 +137,18 @@ var SimpleWebSlides = new function () {
             break;
 
         case 32: /* space */
-        case 34: /* PgDown */
         case 39: /* -> */
+            _self.next();
+            break;
+        case 34: /* PgDown */
         case 78: /* n */
             _self.nextSlide();
             break;
         case 8: /* backspace */
-        case 33: /* PgUp */
         case 37: /* <-   */
+            _self.previous();
+            break;
+        case 33: /* PgUp */
         case 80: /* p */
             _self.previousSlide();
             break;
@@ -100,8 +181,10 @@ var SimpleWebSlides = new function () {
             } else {
                 canvas.addClass("other_slides").removeClass("current_slide");
             };
+            init_canvas(canvas);
 
         });
+        _self.refresh()
     };
 
 };
index 45beaef..ad3082a 100644 (file)
@@ -1,4 +1,4 @@
-@import url(http://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext);
+@import url(https://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext);
 
 /* Default document properties */
 body {