Clean-up the Demo.

Refactor the option & Template system.

diff --git a/doc/demo.xhtml b/doc/demo.xhtml
index c0e4c16..40322c2 100644 (file)
--- a/doc/demo.xhtml
+++ b/doc/demo.xhtml
@@ -11,37 +11,29 @@
     <meta name="copyright"
           content="Copyright &#169; 2013 Kim Nguyễn" />
 
+    <!-- Load jQuery -->
+    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+
+    <!-- Initialize the library -->
     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
           media="all" />
-    <!-- allows to switch themes in firefox -->
+    <script src="../simpleWebSlides.js" type="text/javascript" >
+    </script>
 
-    <link rel="stylesheet" title="Default" href="../themes/default.css"
-          type="text/css" />
-    <link rel="alternate stylesheet"  title="Web 2.0"
+    <!-- Load a custom Theme -->
+    <link rel="stylesheet"  title="Web 2.0"
           href="../themes/webTwoPointO.css"
           type="text/css" />
 
-    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
-    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
     <!-- Customize some templates and initialize -->
     <script type="text/javascript">
 /*
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeVerticalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalSlide);
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeFadeOutIn);
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeVerticalSlide;
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
 */
-      SWS.Presentation.setTemplate('sws-slide-change',
-      SWS.Effects.slideChangeHorizontalFlip);
-
-      SWS.Presentation.setTemplate('sws-object-deactivate',
-      SWS.Effects.objectDeactivateFadeOut);
-
-      SWS.Presentation.setTemplate('sws-object-activate',
-      SWS.Effects.objectActivateFadeIn);
-
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeHorizontalSlide;
+      SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
+      SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
 
       SWS.Presentation.init();
 
@@ -68,7 +60,7 @@
       </div>
     </div>
 
-
+    <!-- H1 below is hidden, used for table of content (TODO) -->
     <h1>Introduction</h1>
 
     <div class="sws-slide" >
@@ -81,7 +73,7 @@
         your <span style='font-size:larger'>❤</span>'s content
         with <em id="css">C S S</em>!</li>
         <li class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
-        <li class="sws-onslide-1_3_5_7">(I'm here every other frame)</li>
+        <li class="sws-onslide-1_3-5_7">(I'm here every other frame)</li>
       </ul>
         <script type="text/javascript">
           var zoom_title = function (canvas) {
@@ -90,7 +82,7 @@
           h1.animate({"font-size":"80pt" }, 300)
           .animate({"font-size":old_size }, 300);
           };
-          SWS.Presentation.registerCallback(3, zoom_title);
+          SWS.Presentation.registerCallback(6, zoom_title);
         </script>
     </div>
 

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index a10e2e4..90a6eb7 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -48,6 +48,7 @@
     }
     .sws-active-object, .sws-inactive-object {
         visibility: visible;
+
     }
 
 }

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 16de314..3e0faf6 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -44,6 +44,14 @@ SWS.Utils = new function () {
         return result;
     };
 
+
+};
+
+
+
+
+SWS.Templates = new function () {
+    var self = this;
     self.slideActivate = function (o) {
         if (!(o.hasClass("sws-active-slide"))){
             o.removeClass("sws-inactive-slide").addClass("sws-active-slide");
@@ -74,11 +82,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)) {
@@ -95,6 +103,18 @@ 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 () {
@@ -102,12 +122,12 @@ SWS.Effects = new function () {
 
     self.objectDeactivateFadeOut = function (o) {
         o.animate({'opacity': '0'}, 150,
-                  function () { SWS.Utils.objectDeactivate(o)});
+                  function () { SWS.Templates.objectDeactivate(o)});
     };
 
     self.objectActivateFadeIn = function (o) {
 
-        if (SWS.Utils.objectActivate(o)){
+        if (SWS.Templates.objectActivate(o)){
             o.animate({'opacity': '1' }, 150);
         };
 
@@ -118,10 +138,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 +149,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 +160,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 +177,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 +205,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) {
@@ -249,10 +260,10 @@ SWS.Presentation = new function () {
         var info = to_slide.data("sws-frame-info");
         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);
+            SWS.Config['sws-update-header'](to_slide);
+            SWS.Config['sws-update-footer'](to_slide);
             for (var i = 0; i < info.callbacks.at_slide.length;i++){
                 info.callbacks.at_slide[i](to_slide);
             };
@@ -266,9 +277,9 @@ SWS.Presentation = new function () {
         to_slide.children(".sws-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;
@@ -329,8 +340,10 @@ SWS.Presentation = new function () {
 
     self.previous = function () {
         var i = self.getCurrentFrame();
-        if (i == self.firstFrame())
+        if (i == self.firstFrame()){
             self.previousSlide();
+            self.setCurrentFrame(self.lastFrame());
+        }
         else
             self.previousFrame();
     };
@@ -481,10 +494,5 @@ SWS.Presentation = new function () {
 
 
 
-    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);
 
 };