-<!DOCTYPE html ""
-[
- <!ENTITY global-title "<h1>SimpleWebSlides</h1><h1>An HTML5 presentation framework</h1>">
-]>
-<html>
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+>
+<html xmlns="http://www.w3.org/1999/xhtml">
<head>
- <title>&global-title;</title>
+ <title>SimpleWebSlides</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="copyright"
<div class="slide cover nofooter">
<div class="centerbox">
- &global-title;
- <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
+ <h1 class="pause" >SimpleWebSlides</h1>
+ <h1 class="pause" >An <em>HTML</em><img style="height:28pt"
+ src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
+ Presentation framework</h1>
+ <a class="pause" href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
</div>
</div>
<h1>Introduction</h1>
- <div class="slide" data-foo="44">
+ <div class="slide" >
<h1>What is it?</h1>
<em>SimpleWebSlides</em> is an HTML5 framework that allows
- you to build presentation slides:<i class="pause"/>
+ you to build presentation slides:
<ul>
<li>Write your slides in HTML5!</li>
<li>Script your slides with Javascript!</li>
var SimpleWebSlides = new function () {
var _self = this;
var _total_slides;
+
+
+ function push(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 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 });
+
+ };
+
+
_self.getNumSlides = function () { return _total_slides; };
if (typeof(Storage)!=="undefined"){
$(".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');
+ };
+ };
+
} else if ($(this).hasClass("current_slide")) {
$(this).removeClass("current_slide").addClass("other_slides");
};
_self.setCurrentSlide(Math.max(_self.getCurrentSlide()-1,
_self.firstSlide()));
};
-
+
+ _self.getFrameInfo = function () {
+
+ var i = _self.getCurrentSlide();
+ var canvas = $($(".canvas")[i]);
+ var infos = canvas.data("frames");
+ 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.nextFrame = function () {
+ _self.setCurrentFrame(Math.min(_self.getCurrentFrame()+1,
+ _self.lastFrame()));
+
+ };
+ _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.previous = function () {
+ var i = _self.getCurrentFrame();
+ if (i == _self.firstFrame())
+ _self.previousSlide();
+ else
+ _self.previousFrame();
+ };
+
+
_self.keyboardHandler = function (event) {
switch (event.which) {
break;
case 32: /* space */
- case 34: /* PgDown */
case 39: /* -> */
+ _self.next();
+ break;
+ case 34: /* PgDown */
case 78: /* n */
_self.nextSlide();
break;
case 8: /* backspace */
- case 33: /* PgUp */
case 37: /* <- */
+ _self.previous();
+ break;
+ case 33: /* PgUp */
case 80: /* p */
_self.previousSlide();
break;
} else {
canvas.addClass("other_slides").removeClass("current_slide");
};
+ init_canvas(canvas);
});
+ _self.refresh()
};
};