Rename the sample.xhtml file to demo.xhtml.
[hacks/simpleWebSlides.git] / simpleWebSlides.js
index 6158499..b526992 100644 (file)
@@ -1,9 +1,12 @@
 var SimpleWebSlides = new function () {
+
     var _self = this;
     var _total_slides;
+    var _defered_custom = new Array();
+    var _initialized = false;
+    var _animations_running = false;
 
-
-    function push(t, i, v) {
+    function push_following(t, i, v) {
         if ((typeof t[i]) == 'undefined') {
             t[i] = new Array();
         };
@@ -13,21 +16,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));
+
+            if ($(this).hasClass("sws-pause"))  cur_frame++;
+            push_following(frames, cur_frame, $(this));
 
         });
-        canvas.data("frames", { frames: frames, current: 0 });
+        canvas.data("sws-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];
+
+        var slide = $(current).parents(".sws-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
@@ -51,29 +85,47 @@ var SimpleWebSlides = new function () {
     };
     _self.firstSlide = function () { return 0; };
     _self.lastSlide = function () { return _self.getNumSlides() - 1; };
+
     _self.refresh = function () {
+
         var cur = _self.getCurrentSlide();
-        $(".canvas").each (function (i) {
+        $(".sws-canvas").each (function (i) {
             if (i == cur){
-                $(this).removeClass("other_slides").addClass("current_slide");
-                var info = $(this).data("frames");
-                console.log(info);
+                $(this).removeClass("sws-inactive-slide").addClass("sws-active-slide");
+                var info = $(this).data("sws-frames");
                 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("sws-footer")){
+
+                            frames[j][k]
+                                .removeClass("sws-inactive-frame")
+                                .addClass("sws-active-frame");
+                        } else {
+                            frames[j][k]
+                                .removeClass("sws-active-frame")
+                                .addClass("sws-inactive-frame");
+                        };
+                    };
+                    var callbacks;
+                    if (j == upto && (callbacks = custom[j])) {
+                        for (var k = 0; k < callbacks.length; k++)
+                            callbacks[k]($(this));
                     };
                 };
 
-            } else if ($(this).hasClass("current_slide")) {
-                $(this).removeClass("current_slide").addClass("other_slides");
+                _animation_running = true;
+                $(this).find("*").promise().done(function() {
+                    _animation_running = false;
+                });
+            } else if ($(this).hasClass("sws-active-slide")) {
+                $(this).removeClass("sws-active-slide").addClass("sws-inactive-slide");
             };
-        });
 
+
+        });
     };
 
     _self.nextSlide = function () {
@@ -89,8 +141,8 @@ var SimpleWebSlides = new function () {
     _self.getFrameInfo = function () {
 
         var i = _self.getCurrentSlide();
-        var canvas = $($(".canvas")[i]);
-        var infos = canvas.data("frames");
+        var canvas = $($(".sws-canvas")[i]);
+        var infos = canvas.data("sws-frames");
         return infos;
     };
     _self.getCurrentFrame = function () { return _self.getFrameInfo().current; };
@@ -126,7 +178,7 @@ var SimpleWebSlides = new function () {
 
 
     _self.keyboardHandler = function (event) {
-
+        if (_animation_running) return;
         switch (event.which) {
         case 36:/* Home */
             _self.firstSlide();
@@ -138,6 +190,7 @@ var SimpleWebSlides = new function () {
 
         case 32: /* space */
         case 39: /* -> */
+        case 1: /* mouse button 1 */
             _self.next();
             break;
         case 34: /* PgDown */
@@ -158,36 +211,57 @@ var SimpleWebSlides = new function () {
         _self.refresh();
     };
 
-    _self.init = function () {
-        _total_slides = $(".slide").length;
+    var _init = function () {
+        _total_slides = $(".sws-slide").length;
 
         $(document).keydown(_self.keyboardHandler);
+        $(document).mousedown(_self.keyboardHandler);
 
         var cur = _self.getCurrentSlide();
-        $(".slide").each (function (i) {
-            var elem = '<div class="footer"><span class="current_slide_num">' + (i+1);
-            elem += '</span><span class="slide_num_sep"/><span class="total_slide_num">';
+        $(".sws-slide").each (function (i) {
+            var elem = '<div class="sws-footer"><span class="sws-current-slide-num">' + (i+1);
+            elem += '</span><span class="sws-slide-num-sep"/><span class="sws-total-slide-num">';
             elem += _self.getNumSlides() + '</span></div>';
-            if (!($(this).hasClass("nofooter"))) {
+            if (!($(this).hasClass("sws-option-nofooter"))) {
                 $(this).append($(elem));
             };
             var par = $(this).parent();
             $(this).remove();
-            var canvas = $('<div class="canvas"/>');
+            var canvas = $('<div class="sws-canvas"/>');
             canvas.append($(this));
             par.append(canvas);
             if (i == cur) {
-                canvas.addClass("current_slide").removeClass("other_slides");
+                canvas
+                    .addClass("sws-active-slide")
+                    .removeClass("sws-inacitve-slide");
             } else {
-                canvas.addClass("other_slides").removeClass("current_slide");
+                canvas
+                    .addClass("sws-inactive-slide")
+                    .removeClass("sws-active-slide");
             };
             init_canvas(canvas);
 
         });
-        _self.refresh()
+        for (var i = 0; i < _defered_custom.length; i++){
+
+            var custom = _defered_custom[i];
+            var canvas = $(custom.src).parents(".sws-canvas");
+            if (canvas.length == 0) continue;
+            canvas = $(canvas[0]);
+
+            var info = canvas.data("sws-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