What is it?

- SimpleWebSlides is an HTML5 framework that allows - you to build presentation slides: + SimpleWebSlides is simple tool that allows + you to build funky presentations:

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

diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 8aad753..04636bc 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -6,6 +6,14 @@ overflow:hidden; } + .sws-active-slide { + display: block; + } + + .sws-inactive-slide { + display: none; + } + .sws-active-frame { visibility: visible; } @@ -30,13 +38,15 @@ border-width: 0cm; border-style: none; margin:0pt 0pt 0pt 0pt; - page-break-after:always; + page-break-after:auto; width: 297mm; height: 209.8mm; /* not 210 due to rounding errors */ padding:0pt; } - - .sws-active-frame .sws-inactive-frame { + .sws-active-slide, .sws-inactive-slide { + display: block; + } + .sws-active-frame, .sws-inactive-frame { visibility: visible; } diff --git a/simpleWebSlides.js b/simpleWebSlides.js index b526992..26ea8e2 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -1,11 +1,62 @@ -var SimpleWebSlides = new function () { +/* + Namespace object. +*/ - var _self = this; +var SWS = {}; + +/* Utility functions */ +SWS.isUndefined = function (o) { return typeof o == "undefined"; }; + +/* + Representation of intervals of positive integers. + +SWS.Interval = new function (init) { + + var self = this; + self.data = new Array(); + self.parseString(s) { + var elems = s.split("_"); + for(var i = 0; i < elems.length; i++){ + var bounds = elems[i].split("-"); + if (bounds.length > 2) continue; + if (SWS.isUndefined(bounds[1])) bounds[1] = bounds[0]; + if (!(isFinite(bounds[0]) && isFinite(bounds[1]))) continue; + + self.add(+(bounds[0]), +(bounds[1])); + }; + + }; + self.add(x, y) { + if (SWS.isUndefined(y) && isFinite(x)) self.add(x,x); + + + + + }; +5B + + + }; +}; +*/ + +SWS.Presentation = new function () { + + + var self = this; + + var templates = {}; + + //TODO: clean-up; var _total_slides; var _defered_custom = new Array(); var _initialized = false; var _animations_running = false; + //Utility functions + + + function push_following(t, i, v) { if ((typeof t[i]) == 'undefined') { t[i] = new Array(); @@ -26,27 +77,38 @@ var SimpleWebSlides = new function () { function init_canvas(canvas) { - var frames = new Array (); 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).hasClass("sws-pause")) cur_frame++; - push_following(frames, cur_frame, $(this)); - + 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-frames", { frames: frames, - current: 0, + + canvas.data("sws-frame-info", { current: 0, + last: last_frame, custom: new Array() }); }; - _self.getNumSlides = function () { return _total_slides; }; + //Public methods + self.setTemplate = function (tn, fn) { templates[tn] = fn; }; + + self.getNumSlides = function () { return _total_slides; }; - _self.registerCustom = function (i, f) { + + self.registerCustom = function (i, f) { if (_initialized) return; //jQuery does not seem to work well - //on partial doms + //on partal doms + var scripts = document.getElementsByTagName("script"); var current = scripts[scripts.length-1]; @@ -63,167 +125,199 @@ var SimpleWebSlides = new function () { }; 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())){ + if (!(i >= 0 && i < self.getNumSlides())){ return 0; } else { return i; }; }; - _self.setCurrentSlide = function (i) { + self.setCurrentSlide = function (i) { sessionStorage.current_slide = i; }; } else { var _current_slide = 0; - _self.getCurrentSlide = function () { return current_slide; }; - _self.setCurrentSlide = function (i) { _current_slide = i; }; + 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(); - $(".sws-canvas").each (function (i) { - if (i == cur){ - $(this).removeClass("sws-inactive-slide").addClass("sws-active-slide"); - var info = $(this).data("sws-frames"); - var frames = info.frames; - var upto = info.current; - var custom = info.custom; - for(var j = 0; j < Math.max(frames.length, custom.length); j++) { - for (var k = 0; k < frames[j].length; k++) { - if (j <= upto || frames[j][k].hasClass("sws-footer")){ - - frames[j][k] - .removeClass("sws-inactive-frame") - .addClass("sws-active-frame"); - } else { - frames[j][k] - .removeClass("sws-active-frame") + self.firstSlide = function () { return 0; }; + 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 (_){ + }); + }); + + }; + var info = $(to_slide).data("sws-frame-info"); + var cur = info.current; + var custom = info.custom; + + $(to_slide).find("*").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"); - }; - }; - var callbacks; - if (j == upto && (callbacks = custom[j])) { - for (var k = 0; k < callbacks.length; k++) - callbacks[k]($(this)); - }; + }); + }; - _animation_running = true; - $(this).find("*").promise().done(function() { - _animation_running = false; - }); - } else if ($(this).hasClass("sws-active-slide")) { - $(this).removeClass("sws-active-slide").addClass("sws-inactive-slide"); + }; + }); + _animation_running = true; + var callbacks; + if (callbacks = custom[self.getCurrentFrame()]){ + for (var k = 0; k < callbacks.length; k++) + callbacks[k]($(to_slide)); + }; + $(to_slide).find("*").promise().done(function() { + _animation_running = 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.previousSlide = function () { - _self.setCurrentSlide(Math.max(_self.getCurrentSlide()-1, - _self.firstSlide())); + self.previousSlide = function () { + self.setCurrentSlide(Math.max(self.getCurrentSlide()-1, + self.firstSlide())); }; - _self.getFrameInfo = function () { + self.getFrameInfo = function () { - var i = _self.getCurrentSlide(); + var i = self.getCurrentSlide(); var canvas = $($(".sws-canvas")[i]); - var infos = canvas.data("sws-frames"); + 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(); + self.next = function () { + var i = self.getCurrentFrame(); + if (i == self.lastFrame()) + self.nextSlide(); else - _self.nextFrame(); + 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(); else - _self.previousFrame(); + self.previousFrame(); }; - - _self.keyboardHandler = function (event) { + self.inputHandler = function (event) { if (_animation_running) return; switch (event.which) { case 36:/* Home */ - _self.firstSlide(); + self.firstSlide(); break; case 35:/* End */ - _self.lastSlide(); + self.lastSlide(); break; case 32: /* space */ case 39: /* -> */ case 1: /* mouse button 1 */ - _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; default: return; }; - _self.refresh(); + self.refresh(); }; - var _init = 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 () { + _total_slides = $(".sws-slide").length; - $(document).keydown(_self.keyboardHandler); - $(document).mousedown(_self.keyboardHandler); + $(document).keydown(self.inputHandler); + $(document).mousedown(self.inputHandler); - var cur = _self.getCurrentSlide(); + var cur = self.getCurrentSlide(); $(".sws-slide").each (function (i) { - var elem = ''; if (!($(this).hasClass("sws-option-nofooter"))) { - $(this).append($(elem)); + $(this).append(templates['sws-template-footer']()); }; var par = $(this).parent(); $(this).remove(); @@ -249,19 +343,17 @@ var SimpleWebSlides = new function () { if (canvas.length == 0) continue; canvas = $(canvas[0]); - var info = canvas.data("sws-frames"); + var info = canvas.data("sws-frame-info"); push(info.custom, custom.frame, custom.fn); }; - _self.refresh(); + self.refresh(); _initialized = true; }; - _self.init = function () { - $(document).ready(_init); + self.init = function () { + $(document).ready(init); }; }; - -SimpleWebSlides.init(); \ No newline at end of file diff --git a/themes/webTwoPointO.css b/themes/webTwoPointO.css index 240660f..7fd3d32 100644 --- a/themes/webTwoPointO.css +++ b/themes/webTwoPointO.css @@ -79,14 +79,3 @@ span.sws-slide-num-sep:after { text-align: center; } -@media screen { -.sws-inactive-slide { - opacity: 0.0; - transition: opacity 0.25s ease-in; -} - -.sws-active-slide { - opacity: 1.0; - transition: opacity 0.25s ease-out 0.25s; -} -} \ No newline at end of file -- 2.17.1