diff options
Diffstat (limited to 'deck.js/extensions/status')
-rw-r--r-- | deck.js/extensions/status/deck.status.css | 25 | ||||
-rw-r--r-- | deck.js/extensions/status/deck.status.html | 6 | ||||
-rw-r--r-- | deck.js/extensions/status/deck.status.js | 120 | ||||
-rwxr-xr-x | deck.js/extensions/status/deck.status.scss | 22 |
4 files changed, 173 insertions, 0 deletions
diff --git a/deck.js/extensions/status/deck.status.css b/deck.js/extensions/status/deck.status.css new file mode 100644 index 0000000..1188905 --- /dev/null +++ b/deck.js/extensions/status/deck.status.css @@ -0,0 +1,25 @@ +.deck-container .deck-status { + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + color: #f0f; + z-index: 3; + margin: 0; + padding: 4px; + padding-top: 8px; + border-top: 1px solid #eee; + background-color: #000; + font-weight: 700; + font-size: 1.0em; +} + +body.deck-container .deck-status { + position: fixed; +} + +@media print { + .deck-status { + display: none; + } +} diff --git a/deck.js/extensions/status/deck.status.html b/deck.js/extensions/status/deck.status.html new file mode 100644 index 0000000..310a025 --- /dev/null +++ b/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>
\ No newline at end of file diff --git a/deck.js/extensions/status/deck.status.js b/deck.js/extensions/status/deck.status.js new file mode 100644 index 0000000..9513c67 --- /dev/null +++ b/deck.js/extensions/status/deck.status.js @@ -0,0 +1,120 @@ +/*! +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', + statusFakeEnd: '.deck-status-fake-end', + statusFullTotal: '.deck-status-full-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) { + var notfound = 1000000; + var fakeEnd = notfound; + $.each(slides, function(i, $el) { + if (fakeEnd > i) { + if ($el.filter(opts.selectors.statusFakeEnd).length) { + fakeEnd = i; + } + } + }); + $(opts.selectors.statusTotal).text(fakeEnd == notfound ? slides.length : fakeEnd+1); + $(opts.selectors.statusFullTotal).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++ + ); + }); + + var notfound = 1000000; + var fakeEnd = notfound; + var rootOfFakeEnd = null; + $.each(slides, function(i, $el) { + if (fakeEnd > i) { + if ($el.filter(opts.selectors.statusFakeEnd).length) { + fakeEnd = i; + rootOfFakeEnd = $el.data('rootSlide'); + } + } + }); + + $(opts.selectors.statusTotal).text(fakeEnd == notfound ? rootIndex - 1 : rootOfFakeEnd); + $(opts.selectors.statusFullTotal).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'); + diff --git a/deck.js/extensions/status/deck.status.scss b/deck.js/extensions/status/deck.status.scss new file mode 100755 index 0000000..d57af24 --- /dev/null +++ b/deck.js/extensions/status/deck.status.scss @@ -0,0 +1,22 @@ +.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; + } +} |