-var SimpleWebSlides = new function () {
- var _self = this;
- var _total_slides;
+/*
+ Namespace object.
+*/
+
+var SWS = SWS || {};
+
+
+SWS.Utils = new function () {
+ var self = this;
- function push(t, i, v) {
+ self.isUndefined = function (o) { return typeof o == "undefined"; };
+ self.push2 = function (t, i, v) {
if ((typeof t[i]) == 'undefined') {
t[i] = new Array();
};
var l = t[i].length;
- if (l == 0 || !($.contains(t[i][l-1].get()[0], v.get()[0]))) {
- t[i][l] = v;
+ t[i][l] = v;
+ };
+
+ self.isEmpty = function (o) {
+ for(var _ in o) return false;
+ return true;
+ };
+
+ self.parseFrameSpec = function (s) {
+ var elems = s.split("_");
+ var result = {};
+ var min_last = 10000;
+ var max_value = -1;
+ for(var i = 0; i < elems.length; i++){
+ var bounds = elems[i].split("-");
+ if (bounds.length > 2 || bounds.length == 0) return {};
+ if (bounds.length == 1) bounds[1] = bounds[0];
+ var a = parseInt(bounds[0]);
+ var b = parseInt(bounds[1])
+ if (!isFinite(a) || !isFinite(b)) return {};
+ a = Math.min(a, 1000); // don't allow more than 1000 frames/slide
+ b = Math.min(b, 1000);
+ if (b > max_value) max_value = b;
+ for (var j = a; j <= b; j++)
+ result[j] = true;
};
+ return result;
};
- 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));
- });
- canvas.data("frames", { frames: frames, current: 0 });
+};
+
+
+
+
+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");
+ };
+ };
+
+ self.slideDeactivate = function (o) {
+ if (!(o.hasClass("sws-inactive-slide"))){
+ o.removeClass("sws-active-slide").addClass("sws-inactive-slide");
+ };
+ };
+
+ self.slideChange = function (from, to) {
+ var canvas = $(".sws-canvas");
+ self.slideDeactivate($(canvas[from]));
+ self.slideActivate($(canvas[to]));
+ };
+
+ self.objectActivate = function (o) {
+ if (!(o.hasClass("sws-active-object"))){
+ o.removeClass("sws-inactive-object").addClass("sws-active-object");
+ o.css({'visibility':'visible'});
+ return true;
+ };
+ return false;
+ };
+
+ self.objectDeactivate = function (o) {
+ if (!(o.hasClass("sws-inactive-object"))){
+ o.addClass("sws-inactive-object").removeClass("sws-active-object");
+ return true;
+ };
+ return false;
+ };
+
+ self.updateFooter = function (o) {
+ var footer = o.find(".sws-footer");
+ if (footer.length && (footer.children("*").length == 0)) {
+ var i = SWS.Presentation.getCurrentSlide();
+ var cur = $( "<span class='sws-current-slide-number'>"
+ + (i + 1)
+ +"</span>");
+ var sep = $( "<span class='sws-slide-num-sep' />");
+ var tot = $( "<span class='sws-last-slide-number'>"
+ + (SWS.Presentation.getNumSlides())
+ +"</span>");
+ footer.append(cur).append(sep).append(tot);
+ };
+ };
+ 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'}, 200,
+ function () { SWS.Templates.objectDeactivate(o)});
+ };
+
+ self.objectActivateFadeIn = function (o) {
+
+ if (SWS.Templates.objectActivate(o)){
+ o.animate({'opacity': '1' }, 200);
+ };
+
+ };
+
+ self.slideChangeHorizontalFlip = function (from, to){
+ var f = SWS.Presentation.getSlide(from);
+ var t = SWS.Presentation.getSlide(to);
+ f.animate({ 'left': '50%', 'width': '0pt', 'opacity':'0' }, 150,
+ function () {
+ SWS.Templates.slideDeactivate(f);
+ f.css({'left':'0%', 'width': '100%'});
+ t.css({ 'left': '50%', 'width': '0pt','opacity':'0' });
+ SWS.Templates.slideActivate(t);
+ t.animate({'left':'0%', 'width': '100%','opacity':'1'});
+ });
+ };
+ self.slideChangeFadeOutIn = function (from, to) {
+ var f = SWS.Presentation.getSlide(from);
+ var t = SWS.Presentation.getSlide(to);
+ f.animate({ 'opacity': '0'}, 150,
+ function () { SWS.Templates.slideDeactivate(f);
+ SWS.Templates.slideActivate(t);
+ t.css('opacity', '0');
+ t.animate({ 'opacity': '1'}, 150);
+ });
+ };
+ self.slideChangeHorizontalSlide = function (from, to) {
+ var f = SWS.Presentation.getSlide(from);
+ var t = SWS.Presentation.getSlide(to);
+ if (from < to) {
+ t.css('left', '100%');
+ 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.Templates.slideActivate(t);
+ f.animate({ 'left': '100%' }, 250, function () { SWS.Templates.slideDeactivate(f); });
+ t.animate({ 'left': '0%' }, 250);
+ };
+ };
+
+
+ self.slideChangeVerticalSlide = function (from, to) {
+ var f = SWS.Presentation.getSlide(from);
+ var t = SWS.Presentation.getSlide(to);
+ if (from < to) {
+ t.css('top', '100%');
+ 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.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 _total_slides;
+ var _initialized = false;
+ var _disable_input_events = false;
+
+ var _slide_callbacks = new Array ();
+
+
+ self.getNumSlides = function () { return _total_slides; };
+
+ self.getSlide = function(i) {
+ return $($(".sws-canvas")[i]);
};
+ self.registerCallback = function (i, f) {
+ if (_initialized) return;
+ //jQuery does not seem to work well
+ //on a partial DOM
+
+ var slide_num = $(".sws-slide").length - 1;
- _self.getNumSlides = function () { return _total_slides; };
+ SWS.Utils.push2(_slide_callbacks, slide_num,{ 'fn': f, 'frame': i });
+
+ };
if (typeof(Storage)!=="undefined"){
- _self.getCurrentSlide = function () {
+ self.getCurrentSlide = function () {
//unary + casts to integer
- var i = +(sessionStorage.current_slide);
- if (!(i >= 0 && i < _self.getNumSlides())){
+ var i = +(sessionStorage.getItem("current_slide"));
+ if (!(i >= 0 && i < self.getNumSlides())){
return 0;
} else {
return i;
};
};
- _self.setCurrentSlide = function (i) {
- sessionStorage.current_slide = i;
+ self.setCurrentSlide = function (i) {
+ sessionStorage.setItem("current_slide", i);
};
} else {
var _current_slide = 0;
- _self.getCurrentSlide = function () { return current_slide; };
- _self.setCurrentSlide = function (i) { _current_slide = i; };
-
- };
- _self.firstSlide = function () { return 0; };
- _self.lastSlide = function () { return _self.getNumSlides() - 1; };
- _self.refresh = function () {
- var cur = _self.getCurrentSlide();
- $(".canvas").each (function (i) {
- 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++) {
- 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');
- };
- };
+ self.getCurrentSlide = function () { return _current_slide; };
+ self.setCurrentSlide = function (i) { _current_slide = i; };
- } else if ($(this).hasClass("current_slide")) {
- $(this).removeClass("current_slide").addClass("other_slides");
+ };
+ 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;
+
+ var canvas = $(".sws-canvas");
+ var from_slide_num = canvas.index($(".sws-active-slide"));
+ var to_slide_num = self.getCurrentSlide();
+ var watch_slide_anim = false;
+ var to_slide = $(canvas[to_slide_num]);
+ 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:
+ SWS.Config['sws-slide-change'](from_slide_num, to_slide_num);
+ watch_slide_anim = true;
+ for (var i = 0; i < info.callbacks.at_slide.length;i++){
+ info.callbacks.at_slide[i](to_slide);
};
+ };
+
+
+ var cur = info.current;
+ var custom = info.custom;
+ var real_slide = to_slide.children(".sws-slide");
+
+ real_slide.find("*").andSelf().each(function (i){
+ var frameset = $(this).data("sws-frame-set") || {};
+ if (frameset[cur])
+ SWS.Config['sws-object-activate']($(this));
+ else
+ SWS.Config['sws-object-deactivate']($(this));
});
+ var callbacks;
+ if (callbacks = info.callbacks.at_frame[self.getCurrentFrame()]){
+ for (var k = 0; k < callbacks.length; k++)
+ callbacks[k]($(to_slide));
+ };
+
+ var to_watch = $(to_slide).find("*");
+ if (watch_slide_anim) {
+ to_watch = to_watch.add(to_slide).add($(canvas[from_slide_num]));
+ };
+
+ to_watch.find("*").promise().done(function() {
+ _disable_input_events = false;
+ });
};
- _self.nextSlide = function () {
- _self.setCurrentSlide(Math.min(_self.getCurrentSlide()+1,
- _self.lastSlide()));
+ 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.previousSlide = function () {
+ self.setCurrentSlide(Math.max(self.getCurrentSlide()-1,
+ self.firstSlide()));
+ self.setCurrentFrame(self.firstFrame());
};
- _self.getFrameInfo = function () {
+ self.getFrameInfo = function () {
- var i = _self.getCurrentSlide();
- var canvas = $($(".canvas")[i]);
- var infos = canvas.data("frames");
+ var i = self.getCurrentSlide();
+ var canvas = $($(".sws-canvas")[i]);
+ var infos = canvas.data("sws-frame-info");
return infos;
};
- _self.getCurrentFrame = function () { return _self.getFrameInfo().current; };
- _self.setCurrentFrame = function (i) { _self.getFrameInfo().current = i; };
- _self.firstFrame = function () { return 0; };
- _self.lastFrame = function () { return _self.getFrameInfo().frames.length-1; };
+ self.getCurrentFrame = function () { return self.getFrameInfo().current; };
+ self.setCurrentFrame = function (i) { self.getFrameInfo().current = i; };
+ self.firstFrame = function () { return 0; };
+ self.lastFrame = function () { return self.getFrameInfo().last; };
- _self.nextFrame = function () {
- _self.setCurrentFrame(Math.min(_self.getCurrentFrame()+1,
- _self.lastFrame()));
+ self.nextFrame = function () {
+ self.setCurrentFrame(Math.min(self.getCurrentFrame()+1,
+ self.lastFrame()));
};
- _self.previousFrame = function () {
- _self.setCurrentFrame(Math.max(_self.getCurrentFrame()-1,
- _self.firstFrame()));
+ self.previousFrame = function () {
+ self.setCurrentFrame(Math.max(self.getCurrentFrame()-1,
+ self.firstFrame()));
};
- _self.next = function () {
- var i = _self.getCurrentFrame();
- if (i == _self.lastFrame())
- _self.nextSlide();
- else
- _self.nextFrame();
+ self.next = function () {
+ var i = self.getCurrentFrame();
+ if (i == self.lastFrame()) {
+ self.nextSlide();
+ self.setCurrentFrame(self.firstFrame());
+ } else
+ self.nextFrame();
};
- _self.previous = function () {
- var i = _self.getCurrentFrame();
- if (i == _self.firstFrame())
- _self.previousSlide();
+ self.previous = function () {
+ var i = self.getCurrentFrame();
+ if (i == self.firstFrame()){
+ self.previousSlide();
+ self.setCurrentFrame(self.lastFrame());
+ }
else
- _self.previousFrame();
+ 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.keyboardHandler = function (event) {
+ 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) {
case 36:/* Home */
- _self.firstSlide();
+ self.setCurrentSlide(self.firstSlide());
break;
case 35:/* End */
- _self.lastSlide();
+ self.setCurrentSlide(self.lastSlide());
break;
case 32: /* space */
case 39: /* -> */
- _self.next();
+
+ self.next();
break;
case 34: /* PgDown */
case 78: /* n */
- _self.nextSlide();
+ self.nextSlide();
break;
case 8: /* backspace */
case 37: /* <- */
- _self.previous();
+ self.previous();
break;
case 33: /* PgUp */
case 80: /* p */
- _self.previousSlide();
+ self.previousSlide();
break;
+ case 83: /* s */
+ self.cycleStyle();
+ return;
+ case 67: /* c */
+ $("#sws-control-panel").toggle();
default:
return;
};
- _self.refresh();
+ self.refresh();
};
- _self.init = function () {
- _total_slides = $(".slide").length;
- $(document).keydown(_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">';
- elem += _self.getNumSlides() + '</span></div>';
- if (!($(this).hasClass("nofooter"))) {
- $(this).append($(elem));
+ function init_canvas(canvas, custom) {
+ var cur_frame = 0;
+ var last_frame = canvas.find(".sws-pause").length;
+ //Add all regular elements to the frame list
+ var slide = $(canvas.children(".sws-slide")[0]);
+
+ var callbacks = { at_slide : new Array(),
+ at_frame : new Array() }
+
+ if (SWS.Utils.isUndefined(custom)) {
+ custom = new Array ();
+ };
+
+ for (var i = 0; i < custom.length; i++) {
+ if (isFinite(custom[i].frame)){
+ var num = +(custom[i].frame);
+ if (num > last_frame) last_frame = num;
+ SWS.Utils.push2(callbacks.at_frame, num, custom[i].fn);
+ } else if (custom[i].frame == "slide")
+ callbacks.at_slide.push(custom[i].fn);
+ else {
+ var frame_set = SWS.Utils.parseFrameSpec(custom[i].frame);
+ for(var f in frame_set){
+ if (f > last_frame) last_frame = f;
+ SWS.Utils.push2(callbacks.at_frame, +(f), custom[i].fn);
+ };
+ }
+ };
+
+ var specials = null;
+
+ slide.find('*[class*="sws-onframe-"]').each(function(_){
+ var cls = $(this).attr('class');
+ var idx = cls.indexOf("sws-onframe-");
+ if (idx >= 0) {
+ var end = cls.indexOf(" ", idx);
+ end = (end == -1) ? cls.length : end;
+ var spec = cls.substring(idx+12, end);
+ var o = SWS.Utils.parseFrameSpec(spec);
+ for(var f in o)
+ if (f > last_frame) last_frame = f;
+ $(this).find("*").andSelf().each(function(_){
+ if (!SWS.Utils.isEmpty(o))
+ $(this).data("sws-frame-set", o);
+ if (specials)
+ specials.add($(this));
+ else
+ specials = $(this);
+ });
};
+ });
+
+ slide.find("*").andSelf().not(specials).each(function(i) {
+ if ($(this).hasClass("sws-pause")) cur_frame++;
+ var o = {};
+ for (var j = cur_frame; j <= last_frame; j++)
+ o[ j ] = true;
+ if (!SWS.Utils.isEmpty(o))
+ $(this).data("sws-frame-set", o);
+ });
+
+ canvas.data("sws-frame-info", { current: 0,
+ last: last_frame,
+ callbacks: callbacks
+ });
+
+ };
+
+ self.init = function () {
+ console.log("inited");
+ $(window).bind('storage', function (e) {
+ console.log(e);
+ });
+
+ _total_slides = $(".sws-slide").length;
+
+ $(document).keydown(self.inputHandler);
+ $("body").append($(SWS.Templates.controlPanel));
+ var cur = self.getCurrentSlide();
+ $(".sws-slide").each (function (i) {
var par = $(this).parent();
+
$(this).remove();
- var canvas = $('<div class="canvas"/>');
+ var canvas = $('<div class="sws-canvas"/>');
+
+ if (!($(this).hasClass("sws-option-noheader"))) {
+ canvas.append($('<div class="sws-header"/>'));
+ };
+ $(this).find('script[type="text/javascript"]').remove();
canvas.append($(this));
+ if (!($(this).hasClass("sws-option-nofooter"))) {
+ canvas.append($('<div class="sws-footer"/>'));
+ };
par.append(canvas);
+
if (i == cur) {
- canvas.addClass("current_slide").removeClass("other_slides");
+ canvas
+ .addClass("sws-active-slide")
+ .removeClass("sws-inactive-slide");
} else {
- canvas.addClass("other_slides").removeClass("current_slide");
+ canvas
+ .addClass("sws-inactive-slide")
+ .removeClass("sws-active-slide");
};
- init_canvas(canvas);
+ init_canvas(canvas,_slide_callbacks[i]);
});
- _self.refresh()
+ _slide_callbacks = null; /* avoid a leak */
+ self.refresh();
+ _initialized = true;
+
};
};
-
-
-$(document).ready(SimpleWebSlides.init);
projects / hacks / simpleWebSlides.git / blobdiff