simpleWebSlides.js

   1 /*
   2   Namespace object.
   3 */
   4
   5 var SWS = {};
   6
   7
   8
   9 SWS.Utils = new function () {
  10     var self = this;
  11
  12     self.isUndefined = function (o) { return typeof o == "undefined"; };
  13     self.push2 = function (t, i, v) {
  14         if ((typeof t[i]) == 'undefined') {
  15             t[i] = new Array();
  16         };
  17         var l = t[i].length;
  18         t[i][l] = v;
  19     };
  20
  21     self.isEmpty = function (o) {
  22         for(var _ in o) return false;
  23         return true;
  24     };
  25
  26     self.parseFrameSpec = function (s) {
  27         var elems = s.split("_");
  28         var result = {};
  29         var min_last = 10000;
  30         var max_value = -1;
  31         for(var i = 0; i < elems.length; i++){
  32             var bounds = elems[i].split("-");
  33             if (bounds.length > 2 || bounds.length == 0) return {};
  34             if (bounds.length == 1) bounds[1] = bounds[0];
  35             var a = parseInt(bounds[0]);
  36             var b = parseInt(bounds[1])
  37             if (!isFinite(a) || !isFinite(b)) return {};
  38             a = Math.min(a, 1000); // don't allow more than 1000 frames/slide
  39             b = Math.min(b, 1000);
  40             if (b > max_value) max_value = b;
  41             for (var j = a; j <= b; j++)
  42                 result[j] = true;
  43         };
  44         return result;
  45     };
  46
  47
  48 };
  49
  50
  51
  52
  53 SWS.Templates = new function () {
  54     var self = this;
  55     self.slideActivate = function (o) {
  56         if (!(o.hasClass("sws-active-slide"))){
  57             o.removeClass("sws-inactive-slide").addClass("sws-active-slide");
  58         };
  59     };
  60
  61     self.slideDeactivate = function (o) {
  62         if (!(o.hasClass("sws-inactive-slide"))){
  63             o.removeClass("sws-active-slide").addClass("sws-inactive-slide");
  64         };
  65     };
  66
  67     self.slideChange = function (from, to) {
  68         var canvas = $(".sws-canvas");
  69         self.slideDeactivate($(canvas[from]));
  70         self.slideActivate($(canvas[to]));
  71     };
  72
  73     self.objectActivate = function (o) {
  74         if (!(o.hasClass("sws-active-object"))){
  75             o.removeClass("sws-inactive-object").addClass("sws-active-object");
  76             o.css({'visibility':'visible'});
  77             return true;
  78         };
  79         return false;
  80     };
  81
  82     self.objectDeactivate = function (o) {
  83         if (!(o.hasClass("sws-inactive-object"))){
  84             o.addClass("sws-inactive-object").removeClass("sws-active-object");
  85             return true;
  86         };
  87         return false;
  88     };
  89
  90     self.updateFooter = function (o) {
  91         var footer = o.find(".sws-footer");
  92         if (footer.length && (footer.children("*").length == 0)) {
  93             var i = SWS.Presentation.getCurrentSlide();
  94             var cur = $( "<span class='sws-current-slide-number'>"
  95                          + (i + 1)
  96                          +"</span>");
  97             var sep = $( "<span class='sws-slide-num-sep' />");
  98             var tot = $( "<span class='sws-current-slide-number'>"
  99                          + (SWS.Presentation.getNumSlides())
 100                          +"</span>");
 101             footer.append(cur).append(sep).append(tot);
 102         };
 103     };
 104     self.updateHeader = function (o) {};
 105 };
 106 SWS.ConfigBuilder = function () {
 107     var self = this;
 108     self['sws-object-activate'] = SWS.Templates.objectActivate;
 109     self['sws-object-deactivate'] = SWS.Templates.objectDeactivate;
 110     self['sws-slide-change'] = SWS.Templates.slideChange;
 111     self['sws-update-footer'] = SWS.Templates.updateFooter;
 112     self['sws-update-header'] = SWS.Templates.updateHeader;
 113 };
 114
 115 SWS.Defaults = new SWS.ConfigBuilder ();
 116
 117 SWS.Config = new SWS.ConfigBuilder ();
 118
 119
 120 SWS.Effects = new function () {
 121     var self = this;
 122
 123     self.objectDeactivateFadeOut = function (o) {
 124         o.animate({'opacity': '0'}, 150,
 125                   function () { SWS.Templates.objectDeactivate(o)});
 126     };
 127
 128     self.objectActivateFadeIn = function (o) {
 129
 130         if (SWS.Templates.objectActivate(o)){
 131             o.animate({'opacity': '1' }, 150);
 132         };
 133
 134     };
 135
 136     self.slideChangeHorizontalFlip = function (from, to){
 137         var f = SWS.Presentation.getSlide(from);
 138         var t = SWS.Presentation.getSlide(to);
 139         f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0' }, 150,
 140                   function  () {
 141                       SWS.Templates.slideDeactivate(f);
 142                       f.css({'left':'0%', 'width': '100%'});
 143                       t.css({ 'left': '50%', 'width': '0pt','opacity':'0' });
 144                       SWS.Templates.slideActivate(t);
 145                       t.animate({'left':'0%', 'width': '100%','opacity':'1'});
 146                   });
 147     };
 148     self.slideChangeFadeOutIn = function (from, to) {
 149         var f = SWS.Presentation.getSlide(from);
 150         var t = SWS.Presentation.getSlide(to);
 151         f.animate({ 'opacity': '0'}, 150,
 152                   function () { SWS.Templates.slideDeactivate(f);
 153                                 SWS.Templates.slideActivate(t);
 154                                 t.css('opacity', '0');
 155                                 t.animate({ 'opacity': '1'}, 150);
 156                               });
 157     };
 158     self.slideChangeHorizontalSlide = function (from, to) {
 159         var f = SWS.Presentation.getSlide(from);
 160         var t = SWS.Presentation.getSlide(to);
 161         if (from < to) {
 162             t.css('left', '100%');
 163             SWS.Templates.slideActivate(t);
 164             f.animate({ 'left': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
 165             t.animate({ 'left': '0%' }, 250);
 166         } else {
 167             t.css('left', '-100%');
 168             SWS.Templates.slideActivate(t);
 169             f.animate({ 'left': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
 170             t.animate({ 'left': '0%' }, 250);
 171         };
 172     };
 173
 174
 175     self.slideChangeVerticalSlide = function (from, to) {
 176         var f = SWS.Presentation.getSlide(from);
 177         var t = SWS.Presentation.getSlide(to);
 178         if (from < to) {
 179             t.css('top', '100%');
 180             SWS.Templates.slideActivate(t);
 181             f.animate({ 'top': '-100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
 182             t.animate({ 'top': '0%' }, 250);
 183         } else {
 184             t.css('top', '-100%');
 185             SWS.Templates.slideActivate(t);
 186             f.animate({ 'top': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
 187             t.animate({ 'top': '0%' }, 250);
 188         };
 189     };
 190
 191 };
 192
 193 SWS.Presentation = new function () {
 194
 195
 196     var self = this;
 197
 198     //TODO move outside of the Presentation object
 199
 200
 201     var _total_slides;
 202     var _initialized = false;
 203     var _disable_input_events = false;
 204
 205     var _slide_callbacks = new Array ();
 206
 207
 208     self.getNumSlides = function () { return _total_slides; };
 209
 210     self.getSlide = function(i) {
 211         return $($(".sws-canvas")[i]);
 212     };
 213
 214     self.registerCallback = function (i, f) {
 215         if (_initialized) return;
 216         //jQuery does not seem to work well
 217         //on a partial DOM
 218
 219         var slide_num = $(".sws-slide").length - 1;
 220
 221         SWS.Utils.push2(_slide_callbacks, slide_num,{ 'fn': f, 'frame': i });
 222
 223     };
 224
 225     if (typeof(Storage)!=="undefined"){
 226         self.getCurrentSlide = function () {
 227             //unary + casts to integer
 228             var i = +(sessionStorage.current_slide);
 229             if (!(i >= 0 && i < self.getNumSlides())){
 230                 return 0;
 231             } else {
 232                 return i;
 233             };
 234         };
 235
 236         self.setCurrentSlide = function (i) {
 237             sessionStorage.current_slide = i;
 238         };
 239
 240     } else {
 241         var _current_slide = 0;
 242         self.getCurrentSlide = function () { return _current_slide; };
 243         self.setCurrentSlide = function (i) { _current_slide = i; };
 244
 245     };
 246     self.firstSlide = function () { return 0; };
 247     self.lastSlide = function () { return self.getNumSlides() - 1; };
 248
 249     self.refresh = function () {
 250         /* block upcoming input event until all animations are finished */
 251         _disable_input_events = true;
 252
 253         var canvas = $(".sws-canvas");
 254         var from_slide_num = canvas.index($(".sws-active-slide"));
 255         var to_slide_num = self.getCurrentSlide();
 256         var watch_slide_anim = false;
 257         var to_slide = $(canvas[to_slide_num]);
 258         var slide_change = (from_slide_num != to_slide_num);
 259
 260         var info = to_slide.data("sws-frame-info");
 261         if (slide_change) {
 262             //Launch a slide transition:
 263             SWS.Config['sws-slide-change'](from_slide_num, to_slide_num);
 264             watch_slide_anim = true;
 265             SWS.Config['sws-update-header'](to_slide);
 266             SWS.Config['sws-update-footer'](to_slide);
 267             for (var i = 0; i < info.callbacks.at_slide.length;i++){
 268                 info.callbacks.at_slide[i](to_slide);
 269             };
 270         };
 271
 272
 273         var cur = info.current;
 274         var custom = info.custom;
 275         var real_slide = to_slide.children(".sws-slide");
 276
 277         to_slide.children(".sws-slide").find("*").andSelf().each(function (i){
 278             var frameset = $(this).data("sws-frame-set") || {};
 279             if (frameset[cur])
 280                 SWS.Config['sws-object-activate']($(this));
 281             else
 282                 SWS.Config['sws-object-deactivate']($(this));
 283         });
 284
 285         var callbacks;
 286         if (callbacks = info.callbacks.at_frame[self.getCurrentFrame()]){
 287             for (var k = 0; k < callbacks.length; k++)
 288                 callbacks[k]($(to_slide));
 289         };
 290
 291         var to_watch = $(to_slide).find("*");
 292         if (watch_slide_anim) {
 293             to_watch = to_watch.add(to_slide).add($(canvas[from_slide_num]));
 294         };
 295
 296         to_watch.find("*").promise().done(function() {
 297             _disable_input_events = false;
 298         });
 299     };
 300
 301     self.nextSlide = function () {
 302         self.setCurrentSlide(Math.min(self.getCurrentSlide()+1,
 303                                       self.lastSlide()));
 304     };
 305
 306     self.previousSlide = function () {
 307         self.setCurrentSlide(Math.max(self.getCurrentSlide()-1,
 308                                       self.firstSlide()));
 309     };
 310
 311     self.getFrameInfo = function () {
 312
 313         var i = self.getCurrentSlide();
 314         var canvas = $($(".sws-canvas")[i]);
 315         var infos = canvas.data("sws-frame-info");
 316         return infos;
 317     };
 318     self.getCurrentFrame = function () { return self.getFrameInfo().current; };
 319     self.setCurrentFrame = function (i) { self.getFrameInfo().current = i; };
 320     self.firstFrame = function () { return 0; };
 321     self.lastFrame = function () { return self.getFrameInfo().last; };
 322
 323     self.nextFrame = function () {
 324         self.setCurrentFrame(Math.min(self.getCurrentFrame()+1,
 325                                       self.lastFrame()));
 326
 327     };
 328     self.previousFrame = function () {
 329         self.setCurrentFrame(Math.max(self.getCurrentFrame()-1,
 330                                        self.firstFrame()));
 331     };
 332
 333     self.next = function () {
 334         var i = self.getCurrentFrame();
 335         if (i == self.lastFrame())
 336             self.nextSlide();
 337         else
 338             self.nextFrame();
 339     };
 340
 341     self.previous = function () {
 342         var i = self.getCurrentFrame();
 343         if (i == self.firstFrame()){
 344             self.previousSlide();
 345             self.setCurrentFrame(self.lastFrame());
 346         }
 347         else
 348             self.previousFrame();
 349     };
 350
 351     self.inputHandler = function (event) {
 352         if (_disable_input_events) return;
 353         switch (event.which) {
 354         case 36:/* Home */
 355             self.setCurrentSlide(self.firstSlide());
 356             break;
 357
 358         case 35:/* End */
 359             self.setCurrentSlide(self.lastSlide());
 360             break;
 361
 362         case 32: /* space */
 363         case 39: /* -> */
 364         case 1: /* mouse button 1 */
 365             self.next();
 366             break;
 367         case 34: /* PgDown */
 368         case 78: /* n */
 369             self.nextSlide();
 370             break;
 371         case 8: /* backspace */
 372         case 37: /* <-   */
 373             self.previous();
 374             break;
 375         case 33: /* PgUp */
 376         case 80: /* p */
 377             self.previousSlide();
 378             break;
 379         default:
 380             return;
 381         };
 382         self.refresh();
 383     };
 384
 385
 386
 387     function init_canvas(canvas, custom) {
 388         var cur_frame = 0;
 389         var last_frame = canvas.find(".sws-pause").length;
 390         //Add all regular elements to the frame list
 391         var slide = $(canvas.children(".sws-slide")[0]);
 392
 393         var callbacks = { at_slide : new Array(),
 394                           at_frame : new Array() }
 395
 396         if (SWS.Utils.isUndefined(custom)) {
 397             custom = new Array ();
 398         };
 399
 400         for (var i = 0; i < custom.length; i++) {
 401             if (isFinite(custom[i].frame)){
 402                 var num = +(custom[i].frame);
 403                 if (num > last_frame) last_frame = num;
 404                 SWS.Utils.push2(callbacks.at_frame, num, custom[i].fn);
 405             } else if (custom[i].frame == "slide")
 406                 callbacks.at_slide.push(custom[i].fn);
 407             else {
 408                 var frame_set = SWS.Utils.parseFrameSpec(custom[i].frame);
 409                 for(var f in frame_set){
 410                     if (f > last_frame) last_frame = f;
 411                     SWS.Utils.push2(callbacks.at_frame, +(f), custom[i].fn);
 412                 };
 413             }
 414         };
 415
 416         var specials = slide.find('*[class*="sws-onslide-"]').find("*").andSelf();
 417         specials.each(function(i) {
 418             var cls = $(this).attr('class');
 419             var idx = cls.indexOf("sws-onslide-");
 420             if (idx >= 0) {
 421                 var end = cls.indexOf(" ", idx);
 422                 end = (end == -1) ? cls.length : end;
 423                 var spec = cls.substring(idx+12, end);
 424                 var o = SWS.Utils.parseFrameSpec(spec);
 425                 for(var f in o)
 426                     if (f > last_frame) last_frame = f;
 427
 428                 if (!SWS.Utils.isEmpty(o))
 429                     $(this).data("sws-frame-set", o);
 430             };
 431         });
 432
 433         slide.find("*").andSelf().not(specials).each(function(i) {
 434             if ($(this).hasClass("sws-pause"))  cur_frame++;
 435             var o = {};
 436             for (var j = cur_frame; j <= last_frame; j++)
 437                 o[ j ] = true;
 438             if (!SWS.Utils.isEmpty(o))
 439                 $(this).data("sws-frame-set", o);
 440         });
 441
 442         canvas.data("sws-frame-info", { current: 0,
 443                                         last: last_frame,
 444                                         callbacks: callbacks
 445                                       });
 446
 447     };
 448
 449     function init () {
 450
 451         _total_slides = $(".sws-slide").length;
 452
 453         $(document).keydown(self.inputHandler);
 454         $(document).mousedown(self.inputHandler);
 455
 456         var cur = self.getCurrentSlide();
 457         $(".sws-slide").each (function (i) {
 458             var par = $(this).parent();
 459
 460             $(this).remove();
 461             var canvas = $('<div class="sws-canvas"/>');
 462
 463             if (!($(this).hasClass("sws-option-noheader"))) {
 464                 canvas.append($('<div class="sws-header"/>'));
 465             };
 466             $(this).find('script[type="text/javascript"]').remove();
 467             canvas.append($(this));
 468             if (!($(this).hasClass("sws-option-nofooter"))) {
 469                 canvas.append($('<div class="sws-footer"/>'));
 470             };
 471             par.append(canvas);
 472
 473             if (i == cur) {
 474                 canvas
 475                     .addClass("sws-active-slide")
 476                     .removeClass("sws-inacitve-slide");
 477             } else {
 478                 canvas
 479                     .addClass("sws-inactive-slide")
 480                     .removeClass("sws-active-slide");
 481             };
 482             init_canvas(canvas,_slide_callbacks[i]);
 483
 484         });
 485         _slide_callbacks = null; /* avoid a leak */
 486         self.refresh();
 487         _initialized = true;
 488
 489     };
 490
 491     self.init = function () {
 492         $(document).ready(init);
 493     };
 494
 495
 496
 497
 498 };