<div class="slide cover nofooter">
<div class="centerbox">
- <h1 class="pause" >SimpleWebSlides</h1>
- <h1 class="pause" >An <em>HTML</em><img style="height:28pt"
+ <h1>SimpleWebSlides</h1>
+ <h1>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>
+ <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
</div>
</div>
<em>SimpleWebSlides</em> is an HTML5 framework that allows
you to build presentation slides:
<ul>
- <li>Write your slides in HTML5!</li>
- <li>Script your slides with Javascript!</li>
- <li>Theme your slides with CSS!</li>
+ <li class="pause" >Write your slides in HTML5!</li>
+ <li class="pause" >Theme your slides with <em>CSS</em>!</li>
+ <li class="pause" >Script your slides with Javascript!</li>
+ <script type="text/javascript">
+ SimpleWebSlides.registerCustom(3, function (canvas) {
+ console.log("calling callback");
+ var h1 = canvas.find("h1");
+ console.log(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);
+ });
+ </script>
</ul>
</div>
<div class="slide">
- <h1>Modalités de Contrôle des Connaissances (MCC)</h1>
- <ul>
- <li><em>Première session (100%)</em>
- <ul>
- <li>Un partiel (25%)</li>
- <li>Une ou deux interro. de TD/TP (25%)</li>
- <li>Un examen (50%)</li>
- </ul>
- </li>
- <li><em>Deuxième session (100%)</em></li>
- <li><em>Rappel</em>
- <blockquote><p>
- La défaillance fait obstacle au calcul de la moyenne
- et implique l'ajournement.<br/>
- La présence de l'étudiant étant obligatoire en TP […], plus
- d'une absence injustiée dans un enseignement peut entraîner
- la défaillance de l'étudiant dans l'enseignement concerné
- </p>
- </blockquote>
- </li>
- </ul>
+
</div>
-
- <div class="slide">
- <h1>Organisation</h1>
- <ul>
- <li>10 semaines de cours
- <ul>
- <li>17/9, 24/9, 1/10, _, 15/10, 22/10</li>
- <li>Partiel la semaine du 29/10</li>
- <li>5/11, 12/11, 19/11, 26/11, 3/12</li>
- </ul>
- </li>
- <li>Cours tous les lundi (~ 1h)</li>
- <li>TD tous les mardis</li>
- <li>TPs les mercredi/jeudi</li>
- </ul>
- </div>
- <div class="slide">
- <div class="toc"/>
- </div>
-
-
</body>
</html>
var SimpleWebSlides = new function () {
var _self = this;
var _total_slides;
+ var _defered_custom = new Array();
+ var _initialized = false;
-
- function push(t, i, v) {
+ function push_following(t, i, v) {
if ((typeof t[i]) == 'undefined') {
t[i] = new Array();
};
};
};
+ 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 frames = new Array ();
var cur_frame = 0;
canvas.find("*").each(function(i) {
+
if ($(this).hasClass("pause")) cur_frame++;
- push(frames, cur_frame, $(this));
+ push_following(frames, cur_frame, $(this));
});
- canvas.data("frames", { frames: frames, current: 0 });
+ canvas.data("frames", { frames: frames,
+ current: 0,
+ custom: new Array() });
};
-
_self.getNumSlides = function () { return _total_slides; };
+
+ _self.registerCustom = function (i, f) {
+ if (_initialized) return;
+ //jQuery does not seem to work well
+ //on partial doms
+ var scripts = document.getElementsByTagName("script");
+ var current = scripts[scripts.length-1];
+ console.log(current);
+ var slide = $(current).parents(".slide");
+ if (slide.length == 0) {
+ console.log("no parent ?");
+ return;
+ }
+ _defered_custom[_defered_custom.length] = { src: slide[0],
+ fn: f,
+ frame: i };
+ $(current).remove();
+
+ };
+
if (typeof(Storage)!=="undefined"){
_self.getCurrentSlide = function () {
//unary + casts to integer
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++) {
+ 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].css('visibility','visible');
- else
- frames[j][k].css('visibility','hidden');
+ if (j < upto || frames[j][k].hasClass("footer")){
+
+ frames[j][k].removeClass("inactive_frame").addClass("active_frame");
+
+ } else if (j == upto) {
+
+ frames[j][k].removeClass("inactive_frame").addClass("current_frame");
+
+ } else {
+ frames[j][k].removeClass("active_frame").removeClass("current_frame").addClass("inactive_frame");
+ };
+ };
+ var callbacks;
+ if (j == upto && (callbacks = custom[j])) {
+ for (var k = 0; k < callbacks.length; k++)
+ callbacks[k]($(this));
};
};
case 32: /* space */
case 39: /* -> */
+ case 1: /* mouse button 1 */
_self.next();
break;
case 34: /* PgDown */
_self.refresh();
};
- _self.init = function () {
+ var _init = function () {
_total_slides = $(".slide").length;
$(document).keydown(_self.keyboardHandler);
+ $(document).mousedown(_self.keyboardHandler);
var cur = _self.getCurrentSlide();
$(".slide").each (function (i) {
init_canvas(canvas);
});
- _self.refresh()
+ for (var i = 0; i < _defered_custom.length; i++){
+
+ var custom = _defered_custom[i];
+ var canvas = $(custom.src).parents(".canvas");
+ if (canvas.length == 0) continue;
+ canvas = $(canvas[0]);
+
+ var info = canvas.data("frames");
+
+ push(info.custom, custom.frame, custom.fn);
+ };
+ _self.refresh();
+ _initialized = true;
+
};
-};
+ _self.init = function () {
+ $(document).ready(_init);
+ };
+};
-$(document).ready(SimpleWebSlides.init);
+SimpleWebSlides.init();
\ No newline at end of file