diff options
author | Christian Franke <nobody@nowhere.ws> | 2013-04-09 14:31:22 +0200 |
---|---|---|
committer | Christian Franke <nobody@nowhere.ws> | 2013-04-09 14:31:22 +0200 |
commit | 5a774ef6f3b38b19b26913a34b1388530c72334e (patch) | |
tree | 543127427771d75f652fc9e726cc39aa1a72571c /deck.js/extensions/goto |
Initial Commit
Diffstat (limited to 'deck.js/extensions/goto')
-rw-r--r-- | deck.js/extensions/goto/deck.goto.css | 41 | ||||
-rw-r--r-- | deck.js/extensions/goto/deck.goto.html | 7 | ||||
-rw-r--r-- | deck.js/extensions/goto/deck.goto.js | 170 | ||||
-rwxr-xr-x | deck.js/extensions/goto/deck.goto.scss | 46 |
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 |