<script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
<script src="../simpleWebSlides.js" type="text/javascript" ></script>
+ <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.init();
+
+ </script>
</head>
<body>
<div class="sws-slide" >
<h1>What is it?</h1>
- <em>SimpleWebSlides</em> is an HTML5 framework that allows
- you to build presentation slides:
+ <em>SimpleWebSlides</em> is simple tool that allows
+ you to build funky presentations:
<ul>
- <li class="sws-pause" >Write your slides in HTML5!</li>
- <li class="sws-pause" >Theme your slides with <em>CSS</em>!</li>
- <li class="sws-pause" >Script your slides with Javascript!</li>
+ <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 id="foo" class="sws-pause" >Create animations using Javascript & jQuery!</li>
<script type="text/javascript">
- SimpleWebSlides.registerCustom(3, function (canvas) {
+ SWS.Presentation.registerCustom(3, function (canvas) {
+
var h1 = canvas.find("h1");
- var old_color = h1.css('color');
var old_size = h1.css('font-size');
- h1.animate({"font-size":"100pt" }, 500);
- h1.animate({"font-size":old_size }, 500);
+ h1.animate({"font-size":"100pt" }, 300)
+ .animate({"font-size":old_size }, 300);
});
</script>
</ul>
-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();
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];
};
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 = '<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 () {
+
_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 = '<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>';
if (!($(this).hasClass("sws-option-nofooter"))) {
- $(this).append($(elem));
+ $(this).append(templates['sws-template-footer']());
};
var par = $(this).parent();
$(this).remove();
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
projects / hacks / simpleWebSlides.git / commitdiff