diff options
Diffstat (limited to 'doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js')
| -rw-r--r-- | doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js new file mode 100644 index 00000000..b16bd6a9 --- /dev/null +++ b/doc/backends/deckjs/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');
\ No newline at end of file |