summaryrefslogtreecommitdiffstats
path: root/doc/backends/deckjs/deck.js/extensions/navigation
diff options
context:
space:
mode:
authorYaroslav Brustinov <ybrustin@cisco.com>2016-11-07 10:36:10 +0200
committerYaroslav Brustinov <ybrustin@cisco.com>2016-11-07 10:36:10 +0200
commit93dc74335a8082e0f54b1da7f6fc6e43ff3c10ee (patch)
tree3befab98de04fdbb63807c6db1844028ae50d8b6 /doc/backends/deckjs/deck.js/extensions/navigation
parentbdd1dea5e21a00b6af1b0ded09e7d528485d5196 (diff)
parent5925379b5fb30e548f1ba4e804af9865de8903ae (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')
-rw-r--r--doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.css42
-rw-r--r--doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.html5
-rw-r--r--doc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.js94
-rwxr-xr-xdoc/backends/deckjs/deck.js/extensions/navigation/deck.navigation.scss44
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">&#8592;</a>
+ <a href="#" class="deck-next-link" title="Next">&#8594;</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;
+ }
+}