From: Kim Nguyễn Date: Tue, 26 Feb 2013 22:10:08 +0000 (+0100) Subject: Clean-up header and footer handling code. X-Git-Url: http://git.nguyen.vg/gitweb/?a=commitdiff_plain;h=ac79fe8adf86a2e4ddd1ddf2d16e4e8809d8ea58;p=hacks%2FsimpleWebSlides.git Clean-up header and footer handling code. Make it possible to run a callback at the beginig of a slide. --- diff --git a/doc/demo.xhtml b/doc/demo.xhtml index e64a846..51a77af 100644 --- a/doc/demo.xhtml +++ b/doc/demo.xhtml @@ -22,30 +22,31 @@ + + @@ -68,18 +69,42 @@ you to build funky presentations:

Write your presentations in (X)HTML5!
Theme to your â¤'s content with CSS!
Theme to + your â¤'s content + with C S S!
Create animations using Javascript & jQuery!

+ + +

+

What's wrong with Beamer/LateX/Tikz?

+

Does not easily support smooth + animations
Hard to program/script
Using modern fonts and UTF-8 is a nightmare
Slow compilation times
Difficult to integrate several media + (videos, vector graphics, sounds,â¦) +

+

diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 04636bc..a10e2e4 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -14,11 +14,11 @@ display: none; } - .sws-active-frame { + .sws-active-object { visibility: visible; } - .sws-inactive-frame { + .sws-inactive-object { visibility: hidden; } @@ -46,7 +46,7 @@ .sws-active-slide, .sws-inactive-slide { display: block; } - .sws-active-frame, .sws-inactive-frame { + .sws-active-object, .sws-inactive-object { visibility: visible; } diff --git a/simpleWebSlides.js b/simpleWebSlides.js index 26ea8e2..e592eb8 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -4,8 +4,115 @@ var SWS = {}; -/* Utility functions */ -SWS.isUndefined = function (o) { return typeof o == "undefined"; }; + + +SWS.Utils = new function () { + var self = this; + + 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; + t[i][l] = v; + }; + + + 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'}); + }; + }; + + self.objectDeactivate = function (o) { + o.css({'visibility':'hidden', 'display':''}); + if (!(o.hasClass("sws-inactive-object"))){ + o.addClass("sws-inactive-object").removeClass("sws-active-object"); + }; + }; + self.updateFooter = function (o) { + var footer = o.find(".sws-footer"); + if (footer.length && (footer.children("*").length == 0)) { + var i = SWS.Presentation.getCurrentSlide(); + var cur = $( "" + + (i + 1) + +""); + var sep = $( ""); + var tot = $( "" + + (SWS.Presentation.getNumSlides()) + +""); + footer.append(cur).append(sep).append(tot); + }; + }; + self.updateHeader = function (o) {}; +}; + + +SWS.Effects = new function () { + var self = this; + self.objectDeactivateFadeOut = function (o) { + o.fadeOut(150, function () { SWS.Utils.objectDeactivate(o)}); + }; + + self.objectActivateFadeIn = function (o) { + SWS.Utils.objectActivate(o); + o.fadeIn(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.Utils.slideActivate(t); + f.animate({ 'left': '-100%' }, 250, function () { SWS.Utils.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); }); + 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.Utils.slideActivate(t); + f.animate({ 'top': '-100%' }, 250, function () { SWS.Utils.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); }); + t.animate({ 'top': '0%' }, 250); + }; + }; + +}; /* Representation of intervals of positive integers. @@ -24,7 +131,7 @@ SWS.Interval = new function (init) { self.add(+(bounds[0]), +(bounds[1])); }; - +7C }; self.add(x, y) { if (SWS.isUndefined(y) && isFinite(x)) self.add(x,x); @@ -47,80 +154,36 @@ SWS.Presentation = new function () { var templates = {}; + //TODO: clean-up; var _total_slides; - var _defered_custom = new Array(); var _initialized = false; var _animations_running = false; - //Utility functions - + var _slide_callbacks = new Array (); - function push_following(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; - }; - }; - - 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 cur_frame = 0; - var last_frame = canvas.find(".sws-pause").length; - //Add all regular elements to the frame list - canvas.find("*").each(function(i) { - if ($(this).filter('*[class*="sws-onslide-"]').length) { - } else { - if ($(this).hasClass("sws-pause")) cur_frame++; - var o = {}; - for (var j = cur_frame; j <= last_frame; j++) - o[ "f" + j ] = true; - $(this).data("sws-frame-set", o); - }; - }); - - canvas.data("sws-frame-info", { current: 0, - last: last_frame, - custom: new Array() }); - - }; //Public methods - self.setTemplate = function (tn, fn) { templates[tn] = fn; }; + self.setTemplate = function (tn, fn) { + templates[tn] = fn; + }; self.getNumSlides = function () { return _total_slides; }; + self.getSlide = function(i) { + return $($(".sws-canvas")[i]); + }; - self.registerCustom = function (i, f) { + self.registerCallback = function (i, f) { if (_initialized) return; //jQuery does not seem to work well - //on partal doms + //on a partial DOM - var scripts = document.getElementsByTagName("script"); - var current = scripts[scripts.length-1]; + var slide_num = $(".sws-slide").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(); + SWS.Utils.push2(_slide_callbacks, slide_num,{ 'fn': f, 'frame': i }); }; @@ -141,7 +204,7 @@ SWS.Presentation = new function () { } else { var _current_slide = 0; - self.getCurrentSlide = function () { return current_slide; }; + self.getCurrentSlide = function () { return _current_slide; }; self.setCurrentSlide = function (i) { _current_slide = i; }; }; @@ -149,69 +212,60 @@ SWS.Presentation = new function () { self.lastSlide = function () { return self.getNumSlides() - 1; }; self.refresh = function () { - var to_slide = $(".sws-canvas")[self.getCurrentSlide()]; - var from_slide = $(".sws-active-slide")[0]; - - if (!(to_slide === from_slide)) { - templates['sws-template-slide-deactivate']( - $(from_slide), - function (o){ - o.removeClass("sws-active-slide") - .addClass("sws-inactive-slide"); - templates['sws-template-slide-activate']( - $(to_slide).removeClass("sws-inactive-slide") - .addClass("sws-active-slide"), - function (_){ - }); - }); - + /* block upcoming input event until all animation are finished */ + _animations_running = 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 = !_initialized || (from_slide_num != to_slide_num); + + 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); + 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); + }; }; - var info = $(to_slide).data("sws-frame-info"); + + var cur = info.current; var custom = info.custom; - - $(to_slide).find("*").each (function (i) { + var real_slide = to_slide.children(".sws-slide"); + real_slide.find("*").add(real_slide).each (function (i) { var fcur = "f" + cur; var frameset = $(this).data("sws-frame-set") || {}; - if (frameset[fcur]) { - if (!($(this).hasClass("sws-active-frame"))) { - templates['sws-template-frame-activate']( - $(this).removeClass("sws-inactive-frame") - .addClass("sws-active-frame"), - function (_){ }); - - }; - - } else { - if (!($(this).hasClass("sws-inactive-frame"))) { - templates['sws-template-frame-deactivate']( - $(this), - function (o){ - o.removeClass("sws-active-frame") - .addClass("sws-inactive-frame"); - }); - - }; - - - }; + if (frameset[fcur]) + templates['sws-object-activate']($(this)); + else + templates['sws-object-deactivate']($(this)); }); - _animation_running = true; - var callbacks; - if (callbacks = custom[self.getCurrentFrame()]){ + var callbacks; + if (callbacks = info.callbacks.at_frame[self.getCurrentFrame()]){ for (var k = 0; k < callbacks.length; k++) callbacks[k]($(to_slide)); }; - $(to_slide).find("*").promise().done(function() { - _animation_running = false; + 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() { + _animations_running = false; }); }; self.nextSlide = function () { self.setCurrentSlide(Math.min(self.getCurrentSlide()+1, - self.lastSlide())); + self.lastSlide())); }; self.previousSlide = function () { @@ -258,7 +312,7 @@ SWS.Presentation = new function () { }; self.inputHandler = function (event) { - if (_animation_running) return; + if (_animations_running) return; switch (event.which) { case 36:/* Home */ self.firstSlide(); @@ -292,20 +346,43 @@ SWS.Presentation = new function () { }; - function default_footer_template() { - var elem = ''; - return $(elem); - }; - self.setTemplate('sws-template-footer', function (x) { }); - self.setTemplate('sws-template-frame-activate', function (x, f) {f(x);}); - self.setTemplate('sws-template-frame-deactivate', function (x, f) {f(x);}); - self.setTemplate('sws-template-slide-activate', function (x, f) {f(x);}); - self.setTemplate('sws-template-slide-deactivate', function (x, f) {f(x);}); + 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)) + SWS.Utils.push2(callbacks.at_frame, +(custom[i].frame), custom[i].fn); + else if (custom[i].frame == "slide") + callbacks.at_slide.push(custom[i].fn); + }; + + slide.find("*").add(slide).each(function(i) { + if ($(this).filter('*[class*="sws-onslide-"]').length) { + } else { + if ($(this).hasClass("sws-pause")) cur_frame++; + var o = {}; + for (var j = cur_frame; j <= last_frame; j++) + o[ "f" + j ] = true; + $(this).data("sws-frame-set", o); + }; + }); + canvas.data("sws-frame-info", { current: 0, + last: last_frame, + callbacks: callbacks + }); + }; function init () { @@ -316,14 +393,21 @@ SWS.Presentation = new function () { var cur = self.getCurrentSlide(); $(".sws-slide").each (function (i) { - if (!($(this).hasClass("sws-option-nofooter"))) { - $(this).append(templates['sws-template-footer']()); - }; var par = $(this).parent(); + $(this).remove(); var canvas = $('

'); + + if (!($(this).hasClass("sws-option-noheader"))) { + canvas.append($('

')); + }; + $(this).find('script[type="text/javascript"]').remove(); canvas.append($(this)); + if (!($(this).hasClass("sws-option-nofooter"))) { + canvas.append($('

')); + }; par.append(canvas); + if (i == cur) { canvas .addClass("sws-active-slide") @@ -333,20 +417,10 @@ SWS.Presentation = new function () { .addClass("sws-inactive-slide") .removeClass("sws-active-slide"); }; - init_canvas(canvas); + init_canvas(canvas,_slide_callbacks[i]); }); - 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-frame-info"); - - push(info.custom, custom.frame, custom.fn); - }; + _slide_callbacks = null; /* avoid a leak */ self.refresh(); _initialized = true; @@ -356,4 +430,12 @@ SWS.Presentation = new 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); + }; diff --git a/themes/webTwoPointO.css b/themes/webTwoPointO.css index 7fd3d32..c1c06ec 100644 --- a/themes/webTwoPointO.css +++ b/themes/webTwoPointO.css @@ -77,5 +77,7 @@ span.sws-slide-num-sep:after { } .sws-footer { text-align: center; + position: absolute; + width: 100%; + bottom: 0pt; } -