hyla 1.0 → 1.0.1

data/lib/resources/deck.js/extensions/split/README.md

@@ -0,0 +1,30 @@
+
+deck.split.js
+==============
+
+`deck.split.js` is a deckjs extension that helps you split long slide into
+multiple small slides.
+
+
+Installation 
+------------
+
+Just drop the whole repo into deck.js's `extensions` directory, then include
+the script in your slide.
+
+
+Usage
+-----
+
+To split a long slide, you need to indicate position inside original slide by
+adding following line:
+
+```html
+<div style="page-break-after:always"></div>
+```
+
+Indeed, it could be any tag set with `page-break-after:always` style. Every
+time you add this line, a new slide with the same title will be created, so you
+can split your slide into pieces as much as you want.
+
+

data/lib/resources/deck.js/extensions/split/deck.split.js

@@ -0,0 +1,59 @@
+/*!
+Deck JS - deck.split
+Copyright (c) 2012 Qingping Hou <dave2008713@gmail.com>
+                   about.houqp.me
+Dual licensed under the MIT license and GPL license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
+*/
+
+/*
+This module splits a long slide into multiple slides.
+*/
+(function($, deck, undefined) {
+	var $d = $(document);
+
+	createEmptySlide = function(title_el) {
+		slide = $(document.createElement('section'));
+		slide.addClass('slide').append(title_el.clone());
+		return slide;
+	};
+
+	$d.bind('deck.beforeInit', function() {
+		$(".slide").each( function(i, slide) {
+			/* each slide */
+			var is_split = false,
+			prev_slide = $(slide),
+			/* extract title which will be added to each new slides */
+			title_el = prev_slide.children('h2'),
+			tmp_slide = createEmptySlide(title_el);
+
+			$(slide).children().each(function() {
+				/* for each element inside original slide */
+				var el = $(this);
+
+				if (el.css('page-break-after') == 'always') {
+					if (is_split) {
+						tmp_slide.insertAfter(prev_slide);
+						prev_slide = tmp_slide;
+						tmp_slide = createEmptySlide(title_el);
+					}
+					else {
+						/* find the first page break */
+						is_split = true;
+					}
+				}
+				else {
+					if (is_split) {
+						tmp_slide.append(el);
+					}
+				}
+			})
+			/* add remaining elements to a new slides */
+			if (is_split) {
+				tmp_slide.insertAfter(prev_slide);
+			}
+		});
+	})
+})(jQuery, 'deck');
+

data/lib/resources/deck.js/extensions/status/deck.status.css

@@ -0,0 +1,18 @@
+.deck-container .deck-status {
+  position: absolute;
+  bottom: 10px;
+  right: 5px;
+  color: #888;
+  z-index: 3;
+  margin: 0;
+}
+
+body.deck-container .deck-status {
+  position: fixed;
+}
+
+@media print {
+  .deck-status {
+    display: none;
+  }
+}

data/lib/resources/deck.js/extensions/status/deck.status.html

@@ -0,0 +1,6 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<p class="deck-status">
+	<span class="deck-status-current"></span>
+	/
+	<span class="deck-status-total"></span>
+</p>

data/lib/resources/deck.js/extensions/status/deck.status.js

@@ -0,0 +1,95 @@
+/*!
+Deck JS - deck.status
+Copyright (c) 2011 Caleb Troughton
+Dual licensed under the MIT license and GPL license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
+*/
+
+/*
+This module adds a (current)/(total) style status indicator to the deck.
+*/
+(function($, deck, undefined) {
+	var $d = $(document),
+	
+	updateCurrent = function(e, from, to) {
+		var opts = $[deck]('getOptions');
+		
+		$(opts.selectors.statusCurrent).text(opts.countNested ?
+			to + 1 :
+			$[deck]('getSlide', to).data('rootSlide')
+		);
+	};
+	
+	/*
+	Extends defaults/options.
+	
+	options.selectors.statusCurrent
+		The element matching this selector displays the current slide number.
+		
+	options.selectors.statusTotal
+		The element matching this selector displays the total number of slides.
+		
+	options.countNested
+		If false, only top level slides will be counted in the current and
+		total numbers.
+	*/
+	$.extend(true, $[deck].defaults, {
+		selectors: {
+			statusCurrent: '.deck-status-current',
+			statusTotal: '.deck-status-total'
+		},
+		
+		countNested: true
+	});
+	
+	$d.bind('deck.init', function() {
+		var opts = $[deck]('getOptions'),
+		slides = $[deck]('getSlides'),
+		$current = $[deck]('getSlide'),
+		ndx;
+		
+		// Set total slides once
+		if (opts.countNested) {
+			$(opts.selectors.statusTotal).text(slides.length);
+		}
+		else {
+			/* Determine root slides by checking each slide's ancestor tree for
+			any of the slide classes. */
+			var rootIndex = 1,
+			slideTest = $.map([
+				opts.classes.before,
+				opts.classes.previous,
+				opts.classes.current,
+				opts.classes.next,
+				opts.classes.after
+			], function(el, i) {
+				return '.' + el;
+			}).join(', ');
+			
+			/* Store the 'real' root slide number for use during slide changes. */
+			$.each(slides, function(i, $el) {
+				var $parentSlides = $el.parentsUntil(opts.selectors.container, slideTest);
+
+				$el.data('rootSlide', $parentSlides.length ?
+					$parentSlides.last().data('rootSlide') :
+					rootIndex++
+				);
+			});
+			
+			$(opts.selectors.statusTotal).text(rootIndex - 1);
+		}
+		
+		// Find where we started in the deck and set initial state
+		$.each(slides, function(i, $el) {
+			if ($el === $current) {
+				ndx = i;
+				return false;
+			}
+		});
+		updateCurrent(null, ndx, ndx);
+	})
+	/* Update current slide number with each change event */
+	.bind('deck.change', updateCurrent);
+})(jQuery, 'deck');
+

data/lib/resources/deck.js/extensions/toc/deck.toc.css

@@ -0,0 +1,40 @@
+.deck-container .deck-toc {
+  position: absolute;
+  z-index: 40;
+  top: 0px;
+  bottom: 0px;
+  left: 0;
+  right: 55%;
+  padding: 0.625em;
+  display: none;
+  background: #ccc;
+  overflow-y: auto;
+  overflow-x: auto;
+  background-color: #DDE4EB;
+  border-right: #A9A9A9 solid 1px;
+  width: 500px; }
+  .deck-container .deck-toc ul {
+    list-style: none;
+    margin: 0px;
+    padding: 0px;
+    font-size: 1em; }
+    .deck-container .deck-toc ul li {
+      white-space: nowrap;
+      padding-left: 1.5em;
+      font-weight: normal; }
+      .deck-container .deck-toc ul li#toc-0 {
+        font-weight: bold;
+        padding-bottom: 1em;
+        padding-left: 0px; }
+  .deck-container .deck-toc a {
+    width: 100%;
+    display: block !important;
+    text-decoration: none;
+    color: #595959 !important; }
+
+.deck-toc-frame .deck-toc {
+  display: block; }
+
+@media print {
+  .deck-toc {
+    display: none; } }

data/lib/resources/deck.js/extensions/toc/deck.toc.html

@@ -0,0 +1,12 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+
+<!-- this is for the toc panel -->
+<div class="deck-toc"></div>
+
+<!-- this is a toc status panel -->
+<table class="deck-toc-status">
+    <tr>
+        <td class="right deck-toc-h2">&nbsp;</td>
+        <td class="left deck-toc-h3">&nbsp;</td>
+    </tr>
+</table>

data/lib/resources/deck.js/extensions/toc/deck.toc.js

@@ -0,0 +1,271 @@
+/*!
+Deck JS - deck.toc
+Copyright (c) 2011 Remi BARRAQUAND
+Dual licensed under the MIT license and GPL license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
+*/
+
+/*
+This module provides a support for TOC to the deck.
+*/
+
+(function($, deck, undefined) {
+    var $d = $(document);
+    var $toc;
+        
+    /*
+	Extends defaults/options.
+	
+        options.classes.toc
+		This class is added to the deck container when showing the slide
+                toc.
+	
+	options.keys.toc
+		The numeric keycode used to toggle between showing and hiding 
+                the slide toc.
+    
+	options.selectors.toc
+		The element matching this selector displays the toc.
+    
+	options.selectors.tocTitle
+		The element matching this selector displays the current title
+                of the slide i.e the current h1.
+
+        options.selectors.tocSection
+		The element matching this selector displays the current section
+                of the slide i.e the current h2.
+	
+        options.selectors.tocSubSection
+		The element matching this selector displays the current 
+                subsection of the slide i.e the current h3.
+    
+        options.selectors.tocSubSubSection
+		The element matching this selector displays the current 
+                subsubsection of the slide i.e the current h4.
+	*/
+    $.extend(true, $[deck].defaults, {
+        classes: {
+            toc: 'deck-toc-frame'
+        },
+		
+        keys: {
+            toc: 84 // t
+        },
+                
+        selectors: {
+            toc: '.deck-toc',
+            tocTitle: '.deck-toc-h1',
+            tocSection: '.deck-toc-h2',
+            tocSubSection: '.deck-toc-h3',
+            tocSubSubSection: '.deck-toc-h4',
+            tocStatus: '.deck-toc-status'
+        }
+    });
+
+    /*
+	jQuery.deck('showToc')
+	
+	Shows the slide toc by adding the class specified by the toc class option
+	to the deck container.
+	*/
+    $[deck]('extend', 'showToc', function() {
+        $[deck]('getContainer').addClass($[deck]('getOptions').classes.toc);
+    });
+	
+    /*
+	jQuery.deck('hideToc')
+	
+	Hides the slide toc by removing the class specified by the toc class
+	option from the deck container.
+	*/
+    $[deck]('extend', 'hideToc', function() {
+        $[deck]('getContainer').removeClass($[deck]('getOptions').classes.toc);
+    });
+
+    /*
+	jQuery.deck('toggleToc')
+	
+	Toggles between showing and hiding the TOC.
+	*/
+    $[deck]('extend', 'toggleToc', function() {
+        $[deck]('getContainer').hasClass($[deck]('getOptions').classes.toc) ? 
+        $[deck]('hideToc') : $[deck]('showToc');
+    });
+        
+    /*
+        jQuery.deck('Init')
+        */
+    $d.bind('deck.init', function() {
+        var opts = $[deck]('getOptions');
+        var container = $[deck]('getContainer');
+        
+        /* Bind key events */
+        $d.unbind('keydown.decktoc').bind('keydown.decktoc', function(e) {
+            if (e.which === opts.keys.toc || $.inArray(e.which, opts.keys.toc) > -1) {
+                $[deck]('toggleToc');
+                e.preventDefault();
+            }
+        });
+        
+        /* Hide TOC panel when user click on container */
+        container.click(function(e){
+            $[deck]('hideToc');
+        });
+                
+        /* Init TOC and append it to the document */
+        $toc = new TOC();
+        $($[deck]('getOptions').selectors.toc).append($toc.root);
+                
+        /* Go through all slides */
+        $.each($[deck]('getSlides'), function(i, $el) {
+            var slide = $[deck]('getSlide',i);
+            //var tocElementFound = false;
+            
+            /* If there is a toc item, push it in the TOC */
+            for(var level=1; level<6; level++) {
+                if( slide.find("h"+level).length > 0) {
+                    var tocTitle = "";
+                    var $tocElement = slide.find("h"+level+":first");
+                    if( $tocElement.attr("title") != undefined && $tocElement.attr("title") != "") {
+                        tocTitle = $tocElement.attr("title");
+                    } else {
+                        tocTitle = $tocElement.text();
+                    }
+                    $toc.push(level, tocTitle, slide);
+                    $toc.tag(slide);
+                    //tocElementFound = true;
+                }
+            }
+            
+            /* Tag the slide with the current TOC level */
+            $toc.tag(slide);
+        });
+    })
+    /* Update current slide number with each change event */
+    .bind('deck.change', function(e, from, to) {
+        var opts = $[deck]('getOptions');
+        var slideTo = $[deck]('getSlide', to);
+        var container = $[deck]('getContainer');
+		
+        if (container.hasClass($[deck]('getOptions').classes.toc)) {
+            container.scrollTop(slideTo.offset().top);
+        }
+            
+        /* update toc status */
+        if( slideTo.data("toc") ) {
+            // reset
+            $(opts.selectors.tocTitle).text("");
+            $(opts.selectors.tocSection).text("");
+            $(opts.selectors.tocSubSection).text("");
+            $(opts.selectors.tocSubSubSection).text("");
+
+            if( slideTo.hasClass('hide-toc-status') ) {
+                $(opts.selectors.tocStatus).hide();
+            } else {
+                $(opts.selectors.tocStatus).show();
+                // update according to the current context
+                var $context = $toc.context(slideTo.data('toc'))            
+                for(var level=1; level<=$context.length; level++) {
+                    switch(level) {
+                        case 1: 
+                            $(opts.selectors.tocTitle).text($context[level-1]);
+                            break;
+                        case 2: 
+                            $(opts.selectors.tocSection).text($context[level-1]);
+                            break;
+                        case 3: 
+                            $(opts.selectors.tocSubSection).text($context[level-1]); 
+                            break;
+                        case 4: 
+                            $(opts.selectors.tocSubSubSection).text($context[level-1]); 
+                            break;
+                    }
+                }
+            } 
+        }
+    });
+        
+    /*
+        Simple TOC manager (must be improved)
+        */
+    var TOC = function() {
+        
+        this.root = $("<ul/>", {"class":"toc"});
+            
+        /* 
+            Push new item in the TOC 
+          
+            depth is the level (e.g. 1 for h1, 2 for h2, etc.)
+            title is the toc-item title
+            slide is the slide that provides the toc-element
+            */
+        this.push = function(depth,title,slide) {
+            inc(depth);
+                
+            /* Create toc element */
+            var $tocElm = $("<li />", {
+                id: "toc-"+($c.join('-'))
+            }).data({ // keep track of the slide in case...
+                slide: slide,
+                title: title
+            }).append($("<a />", { // create an hyperlink
+                href: "#"+$(slide).attr('id'),
+                text: title
+            })).append($("<ul />"));
+                                
+            /* insert it at the right place */
+            var $target = this.root;
+            if( depth > 1) {
+                $target = ($target.find("li#toc-"+($c.slice(0,$c.length-1).join('-')))).children("ul");
+            }
+            $tocElm.appendTo($target);
+        };
+        
+        /*
+            Tag the slide with the current TOC level.
+        
+            slide is the slide to tag
+            */
+        this.tag = function(slide) {
+            slide.data({
+                toc: $c.slice(0)
+            });
+        }
+        
+        /*
+            Get the current TOC context
+        
+            path is the current path in the TOC
+            */
+        this.context = function(path) {
+            $context = new Array();
+            var $target = this.root;
+            for(var depth=0; depth<path.length; depth++) {
+                var tocElm = $target.find("li#toc-"+(path.slice(0,depth+1).join('-')))
+                $context.push(tocElm.data('title'));
+                $target = (tocElm).children("ul");
+            }
+            
+            return $context;
+        }
+            
+        /* cursor */
+        var $c = [-1];
+        function inc(depth) {
+            var current_depth = $c.length;
+            if(depth>current_depth) {
+                for(i=current_depth;i<depth;i++) {
+                    $c.push(0);
+                }
+            } else if( current_depth>depth) {
+                for(i=depth;i<current_depth;i++) {
+                    $c.pop();
+                    $c[depth-1]++
+                }
+            } else {
+                $c[depth-1]++
+            }
+        }
+    }
+})(jQuery, 'deck');