From: Kim Nguyễn Date: Mon, 25 Feb 2013 14:48:14 +0000 (+0100) Subject: Working "pause" command. X-Git-Url: http://git.nguyen.vg/gitweb/?a=commitdiff_plain;h=e71a40fe6bcf8dc94f3135fa5a78878793ef2d63;p=hacks%2FsimpleWebSlides.git Working "pause" command. --- diff --git a/doc/sample.xhtml b/doc/sample.xhtml index 01a9d6d..6bc4546 100644 --- a/doc/sample.xhtml +++ b/doc/sample.xhtml @@ -1,10 +1,10 @@ -SimpleWebSlides

An HTML5 presentation framework

"> -]> - + + + - &global-title; + SimpleWebSlides
- &global-title; - kim@nguyen.vg +

SimpleWebSlides

+

An HTML5 + Presentation framework

+ kim@nguyen.vg

Introduction

-
+

What is it?

SimpleWebSlides is an HTML5 framework that allows - you to build presentation slides: + you to build presentation slides:
  • Write your slides in HTML5!
  • Script your slides with Javascript!
    • diff --git a/simpleWebSlides.js b/simpleWebSlides.js index a80dfad..6158499 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -1,6 +1,31 @@ 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"){ @@ -31,6 +56,19 @@ var SimpleWebSlides = new function () { $(".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"); }; @@ -47,7 +85,46 @@ var SimpleWebSlides = new function () { _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) { @@ -60,14 +137,18 @@ var SimpleWebSlides = new function () { 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; @@ -100,8 +181,10 @@ var SimpleWebSlides = new function () { } else { canvas.addClass("other_slides").removeClass("current_slide"); }; + init_canvas(canvas); }); + _self.refresh() }; }; diff --git a/themes/webTwoPointO.css b/themes/webTwoPointO.css index 45beaef..ad3082a 100644 --- a/themes/webTwoPointO.css +++ b/themes/webTwoPointO.css @@ -1,4 +1,4 @@ -@import url(http://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext); +@import url(https://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext); /* Default document properties */ body {