summaryrefslogtreecommitdiff
path: root/deck.js/extensions/goto
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
committerChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
commit5a774ef6f3b38b19b26913a34b1388530c72334e (patch)
tree543127427771d75f652fc9e726cc39aa1a72571c /deck.js/extensions/goto
Initial Commit
Diffstat (limited to 'deck.js/extensions/goto')
-rw-r--r--deck.js/extensions/goto/deck.goto.css41
-rw-r--r--deck.js/extensions/goto/deck.goto.html7
-rw-r--r--deck.js/extensions/goto/deck.goto.js170
-rwxr-xr-xdeck.js/extensions/goto/deck.goto.scss46
4 files changed, 264 insertions, 0 deletions
diff --git a/deck.js/extensions/goto/deck.goto.css b/deck.js/extensions/goto/deck.goto.css
new file mode 100644
index 0000000..108e4f9
--- /dev/null
+++ b/deck.js/extensions/goto/deck.goto.css
@@ -0,0 +1,41 @@
+.deck-container .goto-form {
+ position: absolute;
+ z-index: 3;
+ bottom: 10px;
+ left: 50%;
+ height: 1.75em;
+ margin: 0 0 0 -9.125em;
+ line-height: 1.75em;
+ padding: 0.625em;
+ display: none;
+ background: #ccc;
+ overflow: hidden;
+}
+.borderradius .deck-container .goto-form {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}
+.deck-container .goto-form label {
+ font-weight: bold;
+}
+.deck-container .goto-form label, .deck-container .goto-form input {
+ display: inline-block;
+ font-family: inherit;
+}
+
+.deck-goto .goto-form {
+ display: block;
+}
+
+#goto-slide {
+ width: 8.375em;
+ margin: 0 0.625em;
+ height: 1.4375em;
+}
+
+@media print {
+ .goto-form, #goto-slide {
+ display: none !important;
+ }
+}
diff --git a/deck.js/extensions/goto/deck.goto.html b/deck.js/extensions/goto/deck.goto.html
new file mode 100644
index 0000000..e3b6a18
--- /dev/null
+++ b/deck.js/extensions/goto/deck.goto.html
@@ -0,0 +1,7 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<form action="." method="get" class="goto-form">
+ <label for="goto-slide">Go to slide:</label>
+ <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
+ <datalist id="goto-datalist"></datalist>
+ <input type="submit" value="Go">
+</form> \ No newline at end of file
diff --git a/deck.js/extensions/goto/deck.goto.js b/deck.js/extensions/goto/deck.goto.js
new file mode 100644
index 0000000..eedba10
--- /dev/null
+++ b/deck.js/extensions/goto/deck.goto.js
@@ -0,0 +1,170 @@
+/*!
+Deck JS - deck.goto
+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 the necessary methods and key bindings to show and hide a form
+for jumping to any slide number/id in the deck (and processes that form
+accordingly). The form-showing state is indicated by the presence of a class on
+the deck container.
+*/
+(function($, deck, undefined) {
+ var $d = $(document);
+
+ /*
+ Extends defaults/options.
+
+ options.classes.goto
+ This class is added to the deck container when showing the Go To Slide
+ form.
+
+ options.selectors.gotoDatalist
+ The element that matches this selector is the datalist element that will
+ be populated with options for each of the slide ids. In browsers that
+ support the datalist element, this provides a drop list of slide ids to
+ aid the user in selecting a slide.
+
+ options.selectors.gotoForm
+ The element that matches this selector is the form that is submitted
+ when a user hits enter after typing a slide number/id in the gotoInput
+ element.
+
+ options.selectors.gotoInput
+ The element that matches this selector is the text input field for
+ entering a slide number/id in the Go To Slide form.
+
+ options.keys.goto
+ The numeric keycode used to show the Go To Slide form.
+
+ options.countNested
+ If false, only top level slides will be counted when entering a
+ slide number.
+ */
+ $.extend(true, $[deck].defaults, {
+ classes: {
+ goto: 'deck-goto'
+ },
+
+ selectors: {
+ gotoDatalist: '#goto-datalist',
+ gotoForm: '.goto-form',
+ gotoInput: '#goto-slide'
+ },
+
+ keys: {
+ goto: 71 // g
+ },
+
+ countNested: true
+ });
+
+ /*
+ jQuery.deck('showGoTo')
+
+ Shows the Go To Slide form by adding the class specified by the goto class
+ option to the deck container.
+ */
+ $[deck]('extend', 'showGoTo', function() {
+ $[deck]('getContainer').addClass($[deck]('getOptions').classes.goto);
+ $($[deck]('getOptions').selectors.gotoInput).focus();
+ });
+
+ /*
+ jQuery.deck('hideGoTo')
+
+ Hides the Go To Slide form by removing the class specified by the goto class
+ option from the deck container.
+ */
+ $[deck]('extend', 'hideGoTo', function() {
+ $($[deck]('getOptions').selectors.gotoInput).blur();
+ $[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto);
+ });
+
+ /*
+ jQuery.deck('toggleGoTo')
+
+ Toggles between showing and hiding the Go To Slide form.
+ */
+ $[deck]('extend', 'toggleGoTo', function() {
+ $[deck]($[deck]('getContainer').hasClass($[deck]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo');
+ });
+
+ $d.bind('deck.init', function() {
+ var opts = $[deck]('getOptions'),
+ $datalist = $(opts.selectors.gotoDatalist),
+ slideTest = $.map([
+ opts.classes.before,
+ opts.classes.previous,
+ opts.classes.current,
+ opts.classes.next,
+ opts.classes.after
+ ], function(el, i) {
+ return '.' + el;
+ }).join(', '),
+ rootCounter = 1;
+
+ // Bind key events
+ $d.unbind('keydown.deckgoto').bind('keydown.deckgoto', function(e) {
+ var key = $[deck]('getOptions').keys.goto;
+
+ if (e.which === key || $.inArray(e.which, key) > -1) {
+ e.preventDefault();
+ $[deck]('toggleGoTo');
+ }
+ });
+
+ /* Populate datalist and work out countNested*/
+ $.each($[deck]('getSlides'), function(i, $slide) {
+ var id = $slide.attr('id'),
+ $parentSlides = $slide.parentsUntil(opts.selectors.container, slideTest);
+
+ if (id) {
+ $datalist.append('<option value="' + id + '">');
+ }
+
+ if ($parentSlides.length) {
+ $slide.removeData('rootIndex');
+ }
+ else if (!opts.countNested) {
+ $slide.data('rootIndex', rootCounter);
+ ++rootCounter;
+ }
+ });
+
+ // Process form submittal, go to the slide entered
+ $(opts.selectors.gotoForm)
+ .unbind('submit.deckgoto')
+ .bind('submit.deckgoto', function(e) {
+ var $field = $($[deck]('getOptions').selectors.gotoInput),
+ ndx = parseInt($field.val(), 10);
+
+ if (!$[deck]('getOptions').countNested) {
+ if (ndx >= rootCounter) return false;
+ $.each($[deck]('getSlides'), function(i, $slide) {
+ if ($slide.data('rootIndex') === ndx) {
+ ndx = i + 1;
+ return false;
+ }
+ });
+ }
+
+ $[deck]('go', isNaN(ndx) ? $field.val() : ndx - 1);
+ $[deck]('hideGoTo');
+ $field.val('');
+
+ e.preventDefault();
+ });
+
+ // Dont let keys in the input trigger deck actions
+ $(opts.selectors.gotoInput)
+ .unbind('keydown.deckgoto')
+ .bind('keydown.deckgoto', function(e) {
+ e.stopPropagation();
+ });
+ });
+})(jQuery, 'deck');
+
diff --git a/deck.js/extensions/goto/deck.goto.scss b/deck.js/extensions/goto/deck.goto.scss
new file mode 100755
index 0000000..9170d5d
--- /dev/null
+++ b/deck.js/extensions/goto/deck.goto.scss
@@ -0,0 +1,46 @@
+.deck-container {
+ .goto-form {
+ position:absolute;
+ z-index:3;
+ bottom:10px;
+ left:50%;
+ height:1.75em;
+ margin:0 0 0 -9.125em;
+ line-height:1.75em;
+ padding:0.625em;
+ display:none;
+ background:#ccc;
+ overflow:hidden;
+
+ .borderradius & {
+ -webkit-border-radius:10px;
+ -moz-border-radius:10px;
+ border-radius:10px;
+ }
+
+ label {
+ font-weight:bold;
+ }
+
+ label, input {
+ display:inline-block;
+ font-family:inherit;
+ }
+ }
+}
+
+.deck-goto .goto-form {
+ display:block;
+}
+
+#goto-slide {
+ width:8.375em;
+ margin:0 0.625em;
+ height:1.4375em;
+}
+
+@media print {
+ .goto-form, #goto-slide {
+ display:none !important;
+ }
+} \ No newline at end of file