Working inline script.
authorKim Nguyễn <kn@lri.fr>
Mon, 25 Feb 2013 18:50:13 +0000 (19:50 +0100)
committerKim Nguyễn <kn@lri.fr>
Mon, 25 Feb 2013 18:50:13 +0000 (19:50 +0100)
doc/sample.xhtml
simpleWebSlides.js
simpleWebSlides_print.css
simpleWebSlides_screen.css

index 6bc4546..abc768d 100644 (file)
 
     <div class="slide cover nofooter">
       <div class="centerbox">
-        <h1 class="pause" >SimpleWebSlides</h1>
-        <h1 class="pause" >An <em>HTML</em><img style="height:28pt"
+        <h1>SimpleWebSlides</h1>
+        <h1>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>
+        <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
       </div>
     </div>
 
       <em>SimpleWebSlides</em> is an HTML5 framework that allows
       you to build presentation slides:
       <ul>
-        <li>Write your slides in HTML5!</li>
-        <li>Script your slides with Javascript!</li>
-        <li>Theme your slides with CSS!</li>
+        <li class="pause" >Write your slides in HTML5!</li>
+        <li class="pause" >Theme your slides with <em>CSS</em>!</li>
+        <li class="pause" >Script your slides with Javascript!</li>
+        <script type="text/javascript">
+          SimpleWebSlides.registerCustom(3, function (canvas) {
+          console.log("calling callback");
+          var h1 = canvas.find("h1");
+          console.log(h1);
+          var old_color = h1.css('color');
+          var old_size = h1.css('font-size');
+          h1.animate({"font-size":"100pt" }, 500);
+          h1.animate({"font-size":old_size }, 500); 
+          });
+        </script>
       </ul>
     </div>
 
     <div class="slide">
-      <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
-      <ul>
-        <li><em>Première session (100%)</em>
-        <ul>
-          <li>Un partiel (25%)</li>
-          <li>Une ou deux interro. de TD/TP (25%)</li>
-          <li>Un examen (50%)</li>
-        </ul>
-        </li>
-        <li><em>Deuxième session (100%)</em></li>
-        <li><em>Rappel</em>
-        <blockquote><p>
-          La défaillance fait obstacle au calcul de la moyenne
-          et implique l'ajournement.<br/>
-          La présence de l'étudiant étant obligatoire en TP […], plus
-          d'une absence injustiée dans un enseignement peut entraîner
-          la défaillance de l'étudiant dans l'enseignement concerné
-        </p>
-      </blockquote>
-        </li>
-      </ul>
+      
     </div>
 
-
-    <div class="slide">
-      <h1>Organisation</h1>
-      <ul>
-        <li>10 semaines de cours
-        <ul>
-          <li>17/9, 24/9, 1/10, _, 15/10, 22/10</li>
-          <li>Partiel la semaine du 29/10</li>
-          <li>5/11, 12/11, 19/11, 26/11, 3/12</li>
-        </ul>
-        </li>
-        <li>Cours tous les lundi (~ 1h)</li>
-        <li>TD tous les mardis</li>
-        <li>TPs les mercredi/jeudi</li>
-      </ul>
-    </div>
-    <div class="slide">
-      <div class="toc"/>
-    </div>
-
-
   </body>
 </html>
index 6158499..134369c 100644 (file)
@@ -1,9 +1,10 @@
 var SimpleWebSlides = new function () {
     var _self = this;
     var _total_slides;
+    var _defered_custom = new Array();
+    var _initialized = false;
 
-
-    function push(t, i, v) {
+    function push_following(t, i, v) {
         if ((typeof t[i]) == 'undefined') {
             t[i] = new Array();
         };
@@ -13,21 +14,52 @@ var SimpleWebSlides = new function () {
         };
     };
 
+    function push(t, i, v) {
+        if ((typeof t[i]) == 'undefined') {
+            t[i] = new Array();
+        };
+        var l = t[i].length;
+            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));
+            push_following(frames, cur_frame, $(this));
 
         });
-        canvas.data("frames", { frames: frames, current: 0 });
+        canvas.data("frames", { frames: frames,
+                                current: 0,
+                                custom: new Array() });
 
     };
 
-
     _self.getNumSlides = function () { return _total_slides; };
 
+
+    _self.registerCustom = function (i, f) {
+        if (_initialized) return;
+        //jQuery does not seem to work well
+        //on partial doms
+        var scripts = document.getElementsByTagName("script");
+        var current = scripts[scripts.length-1];
+        console.log(current);
+        var slide = $(current).parents(".slide");
+        if (slide.length == 0) {
+            console.log("no parent ?");
+            return;
+        }
+        _defered_custom[_defered_custom.length] = { src: slide[0],
+                                                    fn: f,
+                                                    frame: i };
+        $(current).remove();
+
+    };
+
     if (typeof(Storage)!=="undefined"){
         _self.getCurrentSlide = function () {
             //unary + casts to integer
@@ -57,15 +89,27 @@ var SimpleWebSlides = new function () {
             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++) {
+                var custom = info.custom;
+                for(var j = 0; j < Math.max(frames.length, custom.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');
+                        if (j < upto || frames[j][k].hasClass("footer")){
+
+                            frames[j][k].removeClass("inactive_frame").addClass("active_frame");
+
+                        } else if (j == upto) {
+
+                            frames[j][k].removeClass("inactive_frame").addClass("current_frame");
+
+                        } else {
+                            frames[j][k].removeClass("active_frame").removeClass("current_frame").addClass("inactive_frame");
+                        };
+                    };
+                    var callbacks;
+                    if (j == upto && (callbacks = custom[j])) {
+                        for (var k = 0; k < callbacks.length; k++)
+                            callbacks[k]($(this));
                     };
                 };
 
@@ -138,6 +182,7 @@ var SimpleWebSlides = new function () {
 
         case 32: /* space */
         case 39: /* -> */
+        case 1: /* mouse button 1 */
             _self.next();
             break;
         case 34: /* PgDown */
@@ -158,10 +203,11 @@ var SimpleWebSlides = new function () {
         _self.refresh();
     };
 
-    _self.init = function () {
+    var _init = function () {
         _total_slides = $(".slide").length;
 
         $(document).keydown(_self.keyboardHandler);
+        $(document).mousedown(_self.keyboardHandler);
 
         var cur = _self.getCurrentSlide();
         $(".slide").each (function (i) {
@@ -184,10 +230,26 @@ var SimpleWebSlides = new function () {
             init_canvas(canvas);
 
         });
-        _self.refresh()
+        for (var i = 0; i < _defered_custom.length; i++){
+
+            var custom = _defered_custom[i];
+            var canvas = $(custom.src).parents(".canvas");
+            if (canvas.length == 0) continue;
+            canvas = $(canvas[0]);
+
+            var info = canvas.data("frames");
+
+            push(info.custom, custom.frame, custom.fn);
+        };
+        _self.refresh();
+        _initialized = true;
+
     };
 
-};
+    _self.init = function () {
+        $(document).ready(_init);
+    };
 
+};
 
-$(document).ready(SimpleWebSlides.init);
+SimpleWebSlides.init();
\ No newline at end of file
index 862b455..0317966 100644 (file)
@@ -15,3 +15,7 @@ body {
     height: 209.8mm; /* not 210 due to rounding errors */
     padding:0pt;
 }
+
+.active_frame, .inactive_frame, .current_frame {
+    visibility: visible;
+}
index ea0a15c..b39b10f 100644 (file)
@@ -3,3 +3,11 @@
     width:100%;
     height:100%;
 }
+
+.active_frame, .current_frame {
+    visibility: visible;
+}
+
+.inactive_frame {
+    visibility: hidden;
+}
\ No newline at end of file