summaryrefslogtreecommitdiff
path: root/deck.js/extensions/status
diff options
context:
space:
mode:
Diffstat (limited to 'deck.js/extensions/status')
-rw-r--r--deck.js/extensions/status/deck.status.css25
-rw-r--r--deck.js/extensions/status/deck.status.html6
-rw-r--r--deck.js/extensions/status/deck.status.js120
-rwxr-xr-xdeck.js/extensions/status/deck.status.scss22
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;
+ }
+}