<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-template-slide-deactivate', function (o, k) {
- o.animate({ 'opacity': 0, 'top':'-50%'},350, function () { k(o)});
- });
-
- SWS.Presentation.setTemplate('sws-template-slide-activate', function (o, k) {
- o.animate({ 'opacity': '1.0', 'top':'0pt'}, function () { k(o) });
- });
-
- SWS.Presentation.setTemplate('sws-template-frame-deactivate', function (o, k) {
- o.fadeOut(250, function () { k(o)});
- });
-
- SWS.Presentation.setTemplate('sws-template-frame-activate', function (o, k) {
- o.fadeIn(250, function () { k(o) });
- });
+ SWS.Presentation.setTemplate('sws-slide-change',
+ SWS.Effects.slideChangeVerticalSlide);
+ SWS.Presentation.setTemplate('sws-object-deactivate',
+ SWS.Effects.objectDeactivateFadeOut);
+ SWS.Presentation.setTemplate('sws-object-activate',
+ SWS.Effects.objectActivateFadeIn);
SWS.Presentation.init();
</script>
+ <style type="text/css">
+ #css {
+ display:inline-block;
+ font-size: larger;
+ font-weight: bolder;
+ -webkit-transform: rotate(-20deg);
+ -moz-transform: rotate(-20deg);
+ }
+ </style>
</head>
<body>
you to build funky presentations:
<ul>
<li class="sws-pause" >Write your presentations in (X)HTML5!</li>
- <li class="sws-pause" >Theme to your <span style='font-size:larger'>❤</span>'s content with <em>CSS</em>!</li>
+ <li class="sws-pause" >Theme to
+ your <span style='font-size:larger'>❤</span>'s content
+ with <em id="css">C S S</em>!</li>
<li id="foo" class="sws-pause" >Create animations using Javascript & jQuery!</li>
<script type="text/javascript">
- SWS.Presentation.registerCustom(3, function (canvas) {
-
+ var zoom_title = function (canvas) {
var h1 = canvas.find("h1");
var old_size = h1.css('font-size');
h1.animate({"font-size":"100pt" }, 300)
.animate({"font-size":old_size }, 300);
- });
+ };
+ SWS.Presentation.registerCallback(3, zoom_title);
+ </script>
+ </ul>
+ </div>
+
+ <div class="sws-slide">
+ <h1>What's wrong with Beamer/LateX/Tikz?</h1>
+ <ul>
+ <li class="sws-pause">Does not easily support smooth
+ animations</li>
+ <li class="sws-pause">Hard to program/script </li>
+ <li class="sws-pause">Using modern fonts and UTF-8 is a nightmare</li>
+ <li class="sws-pause">Slow compilation times</li>
+ <li class="sws-pause">Difficult to integrate several media
+ (videos, vector graphics, sounds,…)
+ </li>
+ <script type="text/javascript">
+ SWS.Presentation.registerCallback(2, zoom_title);
+ SWS.Presentation.registerCallback(3, zoom_title);
+ SWS.Presentation.registerCallback("slide", zoom_title);
</script>
+
+ <![CDATA[ ANCDE ]]>
</ul>
+
</div>
</body>
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 = $( "<span class='sws-current-slide-number'>"
+ + (i + 1)
+ +"</span>");
+ var sep = $( "<span class='sws-slide-num-sep' />");
+ var tot = $( "<span class='sws-current-slide-number'>"
+ + (SWS.Presentation.getNumSlides())
+ +"</span>");
+ 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.
self.add(+(bounds[0]), +(bounds[1]));
};
-
+7C
};
self.add(x, y) {
if (SWS.isUndefined(y) && isFinite(x)) self.add(x,x);
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 });
};
} else {
var _current_slide = 0;
- self.getCurrentSlide = function () { return current_slide; };
+ self.getCurrentSlide = function () { return _current_slide; };
self.setCurrentSlide = function (i) { _current_slide = i; };
};
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 () {
};
self.inputHandler = function (event) {
- if (_animation_running) return;
+ if (_animations_running) return;
switch (event.which) {
case 36:/* Home */
self.firstSlide();
};
- function default_footer_template() {
- var elem = '<div class="sws-footer"><span class="sws-current-slide-num">' + (i+1);
- elem += '</span><span class="sws-slide-num-sep"/><span class="sws-total-slide-num">';
- elem += self.getNumSlides() + '</span></div>';
- 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 () {
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 = $('<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("sws-active-slide")
.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;
$(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);
+
};
projects / hacks / simpleWebSlides.git / commitdiff