Add key 's' for cycling through stylesheets.
[hacks/simpleWebSlides.git] / simpleWebSlides.js
index 16de314..10d5d03 100644 (file)
@@ -2,7 +2,7 @@
   Namespace object.
 */
 
-var SWS = {};
+var SWS = SWS || {};
 
 
 
@@ -44,6 +44,22 @@ SWS.Utils = new function () {
         return result;
     };
 
+
+};
+
+
+
+
+SWS.Templates = new function () {
+    var self = this;
+    self.controlPanel = "<div id='sws-control-panel'>\
+<a onclick='SWS.Presentation.goToSlide(SWS.Presentation.firstSlide());'>◀◀◀</a>\
+<a onclick='SWS.Presentation.previousSlide();SWS.Presentation.refresh();'>◀◀ </a>\
+<a onclick='SWS.Presentation.previous();SWS.Presentation.refresh();'>◀</a>\
+<a onclick='SWS.Presentation.next();SWS.Presentation.refresh();'>▶</a>\
+<a onclick='SWS.Presentation.nextSlide();SWS.Presentation.refresh();'>▶▶</a>\
+<a rel='Last slide' onclick='SWS.Presentation.goToSlide(SWS.Presentation.lastSlide());'>▶▶▶</a>\
+</div>";
     self.slideActivate = function (o) {
         if (!(o.hasClass("sws-active-slide"))){
             o.removeClass("sws-inactive-slide").addClass("sws-active-slide");
@@ -74,11 +90,11 @@ SWS.Utils = new function () {
     self.objectDeactivate = function (o) {
         if (!(o.hasClass("sws-inactive-object"))){
             o.addClass("sws-inactive-object").removeClass("sws-active-object");
-            o.css({'visibility':'hidden'});
             return true;
         };
         return false;
     };
+
     self.updateFooter = function (o) {
         var footer = o.find(".sws-footer");
         if (footer.length && (footer.children("*").length == 0)) {
@@ -87,7 +103,7 @@ SWS.Utils = new function () {
                          + (i + 1)
                          +"</span>");
             var sep = $( "<span class='sws-slide-num-sep' />");
-            var tot = $( "<span class='sws-current-slide-number'>"
+            var tot = $( "<span class='sws-last-slide-number'>"
                          + (SWS.Presentation.getNumSlides())
                          +"</span>");
             footer.append(cur).append(sep).append(tot);
@@ -95,20 +111,32 @@ SWS.Utils = new function () {
     };
     self.updateHeader = function (o) {};
 };
+SWS.ConfigBuilder = function () {
+    var self = this;
+    self['sws-object-activate'] = SWS.Templates.objectActivate;
+    self['sws-object-deactivate'] = SWS.Templates.objectDeactivate;
+    self['sws-slide-change'] = SWS.Templates.slideChange;
+    self['sws-update-footer'] = SWS.Templates.updateFooter;
+    self['sws-update-header'] = SWS.Templates.updateHeader;
+};
+
+SWS.Defaults = new SWS.ConfigBuilder ();
+
+SWS.Config = new SWS.ConfigBuilder ();
 
 
 SWS.Effects = new function () {
     var self = this;
 
     self.objectDeactivateFadeOut = function (o) {
-        o.animate({'opacity': '0'}, 150,
-                  function () { SWS.Utils.objectDeactivate(o)});
+        o.animate({'opacity': '0'}, 200,
+                  function () { SWS.Templates.objectDeactivate(o)});
     };
 
     self.objectActivateFadeIn = function (o) {
 
-        if (SWS.Utils.objectActivate(o)){
-            o.animate({'opacity': '1' }, 150);
+        if (SWS.Templates.objectActivate(o)){
+            o.animate({'opacity': '1' }, 200);
         };
 
     };
@@ -118,10 +146,10 @@ SWS.Effects = new function () {
         var t = SWS.Presentation.getSlide(to);
         f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0' }, 150,
                   function  () {
-                      SWS.Utils.slideDeactivate(f);
+                      SWS.Templates.slideDeactivate(f);
                       f.css({'left':'0%', 'width': '100%'});
                       t.css({ 'left': '50%', 'width': '0pt','opacity':'0' });
-                      SWS.Utils.slideActivate(t);
+                      SWS.Templates.slideActivate(t);
                       t.animate({'left':'0%', 'width': '100%','opacity':'1'});
                   });
     };
@@ -129,8 +157,8 @@ SWS.Effects = new function () {
         var f = SWS.Presentation.getSlide(from);
         var t = SWS.Presentation.getSlide(to);
         f.animate({ 'opacity': '0'}, 150,
-                  function () { SWS.Utils.slideDeactivate(f);
-                                SWS.Utils.slideActivate(t);
+                  function () { SWS.Templates.slideDeactivate(f);
+                                SWS.Templates.slideActivate(t);
                                 t.css('opacity', '0');
                                 t.animate({ 'opacity': '1'}, 150);
                               });
@@ -140,13 +168,13 @@ SWS.Effects = new function () {
         var t = SWS.Presentation.getSlide(to);
         if (from < to) {
             t.css('left', '100%');
-            SWS.Utils.slideActivate(t);
-            f.animate({ 'left': '-100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+            SWS.Templates.slideActivate(t);
+            f.animate({ 'left': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
             t.animate({ 'left': '0%' }, 250);
         } else {
             t.css('left', '-100%');
-            SWS.Utils.slideActivate(t);
-            f.animate({ 'left': '100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+            SWS.Templates.slideActivate(t);
+            f.animate({ 'left': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
             t.animate({ 'left': '0%' }, 250);
         };
     };
@@ -157,27 +185,25 @@ SWS.Effects = new function () {
         var t = SWS.Presentation.getSlide(to);
         if (from < to) {
             t.css('top', '100%');
-            SWS.Utils.slideActivate(t);
-            f.animate({ 'top': '-100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+            SWS.Templates.slideActivate(t);
+            f.animate({ 'top': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
             t.animate({ 'top': '0%' }, 250);
         } else {
             t.css('top', '-100%');
-            SWS.Utils.slideActivate(t);
-            f.animate({ 'top': '100%' }, 250, function () { SWS.Utils.slideDeactivate(f); });
+            SWS.Templates.slideActivate(t);
+            f.animate({ 'top': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
             t.animate({ 'top': '0%' }, 250);
         };
     };
 
 };
 
-
 SWS.Presentation = new function () {
 
 
     var self = this;
 
     //TODO move outside of the Presentation object
-    var templates = {};
 
 
     var _total_slides;
@@ -187,13 +213,6 @@ SWS.Presentation = new function () {
     var _slide_callbacks = new Array ();
 
 
-
-
-    //Public methods
-    self.setTemplate = function (tn, fn) {
-        templates[tn] = fn;
-    };
-
     self.getNumSlides = function () { return _total_slides; };
 
     self.getSlide = function(i) {
@@ -214,7 +233,7 @@ SWS.Presentation = new function () {
     if (typeof(Storage)!=="undefined"){
         self.getCurrentSlide = function () {
             //unary + casts to integer
-            var i = +(sessionStorage.current_slide);
+            var i = +(sessionStorage.getItem("current_slide"));
             if (!(i >= 0 && i < self.getNumSlides())){
                 return 0;
             } else {
@@ -223,7 +242,7 @@ SWS.Presentation = new function () {
         };
 
         self.setCurrentSlide = function (i) {
-            sessionStorage.current_slide = i;
+            sessionStorage.setItem("current_slide", i);
         };
 
     } else {
@@ -234,7 +253,6 @@ SWS.Presentation = new function () {
     };
     self.firstSlide = function () { return 0; };
     self.lastSlide = function () { return self.getNumSlides() - 1; };
-
     self.refresh = function () {
         /* block upcoming input event until all animations are finished */
         _disable_input_events = true;
@@ -247,12 +265,13 @@ SWS.Presentation = new function () {
         var slide_change = (from_slide_num != to_slide_num);
 
         var info = to_slide.data("sws-frame-info");
+        SWS.Config['sws-update-header'](to_slide);
+        SWS.Config['sws-update-footer'](to_slide);
+
         if (slide_change) {
             //Launch a slide transition:
-            templates['sws-slide-change'](from_slide_num, to_slide_num);
+            SWS.Config['sws-slide-change'](from_slide_num, to_slide_num);
             watch_slide_anim = true;
-            templates['sws-update-header'](to_slide);
-            templates['sws-update-footer'](to_slide);
             for (var i = 0; i < info.callbacks.at_slide.length;i++){
                 info.callbacks.at_slide[i](to_slide);
             };
@@ -263,12 +282,12 @@ SWS.Presentation = new function () {
         var custom = info.custom;
         var real_slide = to_slide.children(".sws-slide");
 
-        to_slide.children(".sws-slide").find("*").andSelf().each(function (i){
+        real_slide.find("*").andSelf().each(function (i){
             var frameset = $(this).data("sws-frame-set") || {};
             if (frameset[cur])
-                templates['sws-object-activate']($(this));
+                SWS.Config['sws-object-activate']($(this));
             else
-                templates['sws-object-deactivate']($(this));
+                SWS.Config['sws-object-deactivate']($(this));
         });
 
         var callbacks;
@@ -290,11 +309,13 @@ SWS.Presentation = new function () {
     self.nextSlide = function () {
         self.setCurrentSlide(Math.min(self.getCurrentSlide()+1,
                                       self.lastSlide()));
+        self.setCurrentFrame(self.firstFrame());
     };
 
     self.previousSlide = function () {
         self.setCurrentSlide(Math.max(self.getCurrentSlide()-1,
                                       self.firstSlide()));
+        self.setCurrentFrame(self.firstFrame());
     };
 
     self.getFrameInfo = function () {
@@ -321,20 +342,41 @@ SWS.Presentation = new function () {
 
     self.next = function () {
         var i = self.getCurrentFrame();
-        if (i == self.lastFrame())
+        if (i == self.lastFrame()) {
             self.nextSlide();
-        else
+            self.setCurrentFrame(self.firstFrame());
+        } else
             self.nextFrame();
     };
 
     self.previous = function () {
         var i = self.getCurrentFrame();
-        if (i == self.firstFrame())
+        if (i == self.firstFrame()){
             self.previousSlide();
+            self.setCurrentFrame(self.lastFrame());
+        }
         else
             self.previousFrame();
     };
 
+    self.goToSlide = function (s, f) {
+        if (SWS.Utils.isUndefined(f))
+            f = 0;
+        if (!(s >= self.firstSlide() && s <= self.lastSlide())) return;
+        self.setCurrentSlide(s);
+        if (!(f >= self.firstFrame() && f <= self.lastFrame())) f = 0;
+        self.setCurrentFrame(f);
+        self.refresh();
+    };
+
+    self.cycleStyle = function() {
+        var styles = $("head").children('link[rel$="stylesheet"][title]');
+        var j = styles.index(styles.filter(':not(:disabled)'));
+        styles[j].disabled = true;
+        if (++j == styles.length) j = 0;
+        styles[j].disabled = false;
+    };
+
     self.inputHandler = function (event) {
         if (_disable_input_events) return;
         switch (event.which) {
@@ -348,7 +390,7 @@ SWS.Presentation = new function () {
 
         case 32: /* space */
         case 39: /* -> */
-        case 1: /* mouse button 1 */
+
             self.next();
             break;
         case 34: /* PgDown */
@@ -363,6 +405,11 @@ SWS.Presentation = new function () {
         case 80: /* p */
             self.previousSlide();
             break;
+        case 83: /* s */
+            self.cycleStyle();
+            return;
+        case 67: /* c */
+            $("#sws-control-panel").toggle();
         default:
             return;
         };
@@ -400,10 +447,11 @@ SWS.Presentation = new function () {
             }
         };
 
-        var specials = slide.find('*[class*="sws-onslide-"]').find("*").andSelf();
-        specials.each(function(i) {
+        var specials = null;
+
+        slide.find('*[class*="sws-onframe-"]').each(function(_){
             var cls = $(this).attr('class');
-            var idx = cls.indexOf("sws-onslide-");
+            var idx = cls.indexOf("sws-onframe-");
             if (idx >= 0) {
                 var end = cls.indexOf(" ", idx);
                 end = (end == -1) ? cls.length : end;
@@ -411,9 +459,14 @@ SWS.Presentation = new function () {
                 var o = SWS.Utils.parseFrameSpec(spec);
                 for(var f in o)
                     if (f > last_frame) last_frame = f;
-
-                if (!SWS.Utils.isEmpty(o))
-                    $(this).data("sws-frame-set", o);
+                $(this).find("*").andSelf().each(function(_){
+                    if (!SWS.Utils.isEmpty(o))
+                        $(this).data("sws-frame-set", o);
+                    if (specials)
+                        specials.add($(this));
+                    else
+                        specials = $(this);
+                });
             };
         });
 
@@ -433,13 +486,16 @@ SWS.Presentation = new function () {
 
     };
 
-    function init () {
+    self.init = function () {
+        console.log("inited");
+        $(window).bind('storage', function (e) {
+            console.log(e);
+        });
 
         _total_slides = $(".sws-slide").length;
 
         $(document).keydown(self.inputHandler);
-        $(document).mousedown(self.inputHandler);
-
+        $("body").append($(SWS.Templates.controlPanel));
         var cur = self.getCurrentSlide();
         $(".sws-slide").each (function (i) {
             var par = $(this).parent();
@@ -460,7 +516,7 @@ SWS.Presentation = new function () {
             if (i == cur) {
                 canvas
                     .addClass("sws-active-slide")
-                    .removeClass("sws-inacitve-slide");
+                    .removeClass("sws-inactive-slide");
             } else {
                 canvas
                     .addClass("sws-inactive-slide")
@@ -475,16 +531,4 @@ SWS.Presentation = new function () {
 
     };
 
-    self.init = function () {
-        $(document).ready(init);
-    };
-
-
-
-    self.setTemplate('sws-object-activate', SWS.Utils.objectActivate);
-    self.setTemplate('sws-object-deactivate', SWS.Utils.objectDeactivate);
-    self.setTemplate('sws-slide-change', SWS.Utils.slideChange);
-    self.setTemplate('sws-update-footer', SWS.Utils.updateFooter);
-    self.setTemplate('sws-update-header', SWS.Utils.updateHeader);
-
 };