diff options
author | Yaroslav Brustinov <ybrustin@cisco.com> | 2016-11-07 10:36:10 +0200 |
---|---|---|
committer | Yaroslav Brustinov <ybrustin@cisco.com> | 2016-11-07 10:36:10 +0200 |
commit | 93dc74335a8082e0f54b1da7f6fc6e43ff3c10ee (patch) | |
tree | 3befab98de04fdbb63807c6db1844028ae50d8b6 /doc/backends/deckjs/deck.js/extensions/navigation | |
parent | bdd1dea5e21a00b6af1b0ded09e7d528485d5196 (diff) | |
parent | 5925379b5fb30e548f1ba4e804af9865de8903ae (diff) |
Add 'doc/' from commit '5925379b5fb30e548f1ba4e804af9865de8903ae'
git-subtree-dir: doc
git-subtree-mainline: bdd1dea5e21a00b6af1b0ded09e7d528485d5196
git-subtree-split: 5925379b5fb30e548f1ba4e804af9865de8903ae
Diffstat (limited to 'doc/backends/deckjs/deck.js/extensions/navigation')
4 files changed, 185 insertions, 0 deletions
diff --git a/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.css b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.css new file mode 100644 index 00000000..02ff7188 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.css @@ -0,0 +1,42 @@ +.deck-prev-link, .deck-next-link { + display: none; + position: absolute; + z-index: 3; + top: 50%; + width: 32px; + height: 32px; + margin-top: -16px; + font-size: 20px; + font-weight: bold; + line-height: 32px; + vertical-align: middle; + text-align: center; + text-decoration: none; + color: #fff; + background: #888; + border-radius: 16px; +} +.deck-prev-link:hover, .deck-prev-link:focus, .deck-prev-link:active, .deck-prev-link:visited, .deck-next-link:hover, .deck-next-link:focus, .deck-next-link:active, .deck-next-link:visited { + color: #fff; +} + +.deck-prev-link { + left: 8px; +} + +.deck-next-link { + right: 8px; +} + +.deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link { + display: block; +} +.deck-container:hover .deck-prev-link.deck-nav-disabled, .touch .deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link.deck-nav-disabled, .touch .deck-container:hover .deck-next-link { + display: none; +} + +@media print { + .deck-prev-link, .deck-next-link { + display: none !important; + } +} diff --git a/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.html b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.html new file mode 100644 index 00000000..5237f4ae --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.html @@ -0,0 +1,5 @@ +<!-- Place the following snippet at the bottom of the deck container. --> +<div aria-role="navigation"> + <a href="#" class="deck-prev-link" title="Previous">←</a> + <a href="#" class="deck-next-link" title="Next">→</a> +</div> diff --git a/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.js b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.js new file mode 100644 index 00000000..7dc95107 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.js @@ -0,0 +1,94 @@ +/*! +Deck JS - deck.navigation +Copyright (c) 2011-2014 Caleb Troughton +Dual licensed under the MIT license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +*/ + +/* +This module adds clickable previous and next links to the deck. +*/ +(function($, undefined) { + var $document = $(document); + + /* Updates link hrefs, and disabled states if last/first slide */ + var updateButtons = function(event, from, to) { + var options = $.deck('getOptions'); + var lastIndex = $.deck('getSlides').length - 1; + var $prevSlide = $.deck('getSlide', to - 1); + var $nextSlide = $.deck('getSlide', to + 1); + var hrefBase = window.location.href.replace(/#.*/, ''); + var prevId = $prevSlide ? $prevSlide.attr('id') : undefined; + var nextId = $nextSlide ? $nextSlide.attr('id') : undefined; + var $prevButton = $(options.selectors.previousLink); + var $nextButton = $(options.selectors.nextLink); + + $prevButton.toggleClass(options.classes.navDisabled, to === 0); + $prevButton.attr('aria-disabled', to === 0); + $prevButton.attr('href', hrefBase + '#' + (prevId ? prevId : '')); + $nextButton.toggleClass(options.classes.navDisabled, to === lastIndex); + $nextButton.attr('aria-disabled', to === lastIndex); + $nextButton.attr('href', hrefBase + '#' + (nextId ? nextId : '')); + }; + + /* + Extends defaults/options. + + options.classes.navDisabled + This class is added to a navigation link when that action is disabled. + It is added to the previous link when on the first slide, and to the + next link when on the last slide. + + options.selectors.nextLink + The elements that match this selector will move the deck to the next + slide when clicked. + + options.selectors.previousLink + The elements that match this selector will move to deck to the previous + slide when clicked. + */ + $.extend(true, $.deck.defaults, { + classes: { + navDisabled: 'deck-nav-disabled' + }, + + selectors: { + nextLink: '.deck-next-link', + previousLink: '.deck-prev-link' + } + }); + + $document.bind('deck.init', function() { + var options = $.deck('getOptions'); + var slides = $.deck('getSlides'); + var $current = $.deck('getSlide'); + var $prevButton = $(options.selectors.previousLink); + var $nextButton = $(options.selectors.nextLink); + var index; + + // Setup prev/next link events + $prevButton.unbind('click.decknavigation'); + $prevButton.bind('click.decknavigation', function(event) { + $.deck('prev'); + event.preventDefault(); + }); + + $nextButton.unbind('click.decknavigation'); + $nextButton.bind('click.decknavigation', function(event) { + $.deck('next'); + event.preventDefault(); + }); + + // Find where we started in the deck and set initial states + $.each(slides, function(i, $slide) { + if ($slide === $current) { + index = i; + return false; + } + }); + updateButtons(null, index, index); + }); + + $document.bind('deck.change', updateButtons); +})(jQuery); + diff --git a/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.scss b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.scss new file mode 100755 index 00000000..6c397746 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.scss @@ -0,0 +1,44 @@ +.deck-prev-link, .deck-next-link { + display:none; + position:absolute; + z-index:3; + top:50%; + width:32px; + height:32px; + margin-top:-16px; + font-size:20px; + font-weight:bold; + line-height:32px; + vertical-align:middle; + text-align:center; + text-decoration:none; + color:#fff; + background:#888; + border-radius:16px; + + &:hover, &:focus, &:active, &:visited { + color:#fff; + } +} + +.deck-prev-link { + left:8px; +} + +.deck-next-link { + right:8px; +} + +.deck-container:hover .deck-prev-link, .deck-container:hover .deck-next-link { + display:block; + + &.deck-nav-disabled, .touch & { + display:none; + } +} + +@media print { + .deck-prev-link, .deck-next-link { + display:none !important; + } +} |