diff options
Diffstat (limited to 'doc/backends/deckjs/deck.js/extensions')
26 files changed, 1673 insertions, 0 deletions
diff --git a/doc/backends/deckjs/deck.js/extensions/deck.js-blank/README.md b/doc/backends/deckjs/deck.js/extensions/deck.js-blank/README.md new file mode 100644 index 00000000..0d5c882a --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/deck.js-blank/README.md @@ -0,0 +1,10 @@ +#deck.blank.js + +Deck.blank.js is an extension for the deck.js framework to allow blanking of the current slide, to draw the attention back to the presenter + +At the moment, the key 'b' is hardcoded to blank/unblank. + +##Todo + +- make the blanking key configurable +- make the background-color during blanking configurable
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/deck.js-blank/deck.blank.js b/doc/backends/deckjs/deck.js/extensions/deck.js-blank/deck.blank.js new file mode 100644 index 00000000..01955834 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/deck.js-blank/deck.blank.js @@ -0,0 +1,33 @@ +/*! +Deck JS - deck.blank - v1.0 +Copyright (c) 2012 Mike Kellenberger +*/ + +/* +This module adds the necessary methods and key bindings to blank/unblank the screen by pressing 'b'. +*/ +(function($, deck, undefined) { + var $d = $(document); + + $[deck]('extend', 'activateBlankScreen', function() { + $[deck]('getSlide').hide(); + }); + + $[deck]('extend', 'deactivateBlankScreen', function() { + $[deck]('getSlide').show(); + }); + + $[deck]('extend', 'blankScreen', function() { + $[deck]('getSlide').is(":visible") ? $[deck]('activateBlankScreen') : $[deck]('deactivateBlankScreen'); + }); + + $d.bind('deck.init', function() { + // Bind key events + $d.unbind('keydown.blank').bind('keydown.blank', function(e) { + if (e.which==66) { + $[deck]('blankScreen'); + e.preventDefault(); + } + }); + }); +})(jQuery, 'deck');
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.css b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.css new file mode 100644 index 00000000..935574a1 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.css @@ -0,0 +1,36 @@ +.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; + border-radius: 10px; +} +.goto-form label { + font-weight: bold; +} +.goto-form label, .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; + } +} diff --git a/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.html b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.html new file mode 100644 index 00000000..4b739982 --- /dev/null +++ b/doc/backends/deckjs/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/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js new file mode 100644 index 00000000..6a90f16c --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.js @@ -0,0 +1,190 @@ +/*! +Deck JS - deck.goto +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 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($, undefined) { + var $document = $(document); + var rootCounter; + + var bindKeyEvents = function() { + $document.unbind('keydown.deckgoto'); + $document.bind('keydown.deckgoto', function(event) { + var key = $.deck('getOptions').keys.goto; + if (event.which === key || $.inArray(event.which, key) > -1) { + event.preventDefault(); + $.deck('toggleGoTo'); + } + }); + }; + + var populateDatalist = function() { + var options = $.deck('getOptions'); + var $datalist = $(options.selectors.gotoDatalist); + + $.each($.deck('getSlides'), function(i, $slide) { + var id = $slide.attr('id'); + if (id) { + $datalist.append('<option value="' + id + '">'); + } + }); + }; + + var markRootSlides = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootCounter = 0; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + + if ($parentSlides.length) { + $slide.removeData('rootIndex'); + } + else if (!options.countNested) { + ++rootCounter; + $slide.data('rootIndex', rootCounter); + } + }); + }; + + var handleFormSubmit = function() { + var options = $.deck('getOptions'); + var $form = $(options.selectors.gotoForm); + + $form.unbind('submit.deckgoto'); + $form.bind('submit.deckgoto', function(event) { + var $field = $(options.selectors.gotoInput); + var indexOrId = $field.val(); + var index = parseInt(indexOrId, 10); + + if (!options.countNested) { + if (!isNaN(index) && index >= rootCounter) { + return false; + } + $.each($.deck('getSlides'), function(i, $slide) { + if ($slide.data('rootIndex') === index) { + index = i + 1; + return false; + } + }); + } + + $.deck('go', isNaN(index) ? indexOrId : index - 1); + $.deck('hideGoTo'); + $field.val(''); + event.preventDefault(); + }); + }; + + /* + 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() { + var options = $.deck('getOptions'); + $.deck('getContainer').addClass(options.classes.goto); + $(options.selectors.gotoForm).attr('aria-hidden', false); + $(options.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() { + var options = $.deck('getOptions'); + $(options.selectors.gotoInput).blur(); + $.deck('getContainer').removeClass(options.classes.goto); + $(options.selectors.gotoForm).attr('aria-hidden', true); + }); + + /* + jQuery.deck('toggleGoTo') + + Toggles between showing and hiding the Go To Slide form. + */ + $.deck('extend', 'toggleGoTo', function() { + var options = $.deck('getOptions'); + var hasGotoClass = $.deck('getContainer').hasClass(options.classes.goto); + $.deck(hasGotoClass ? 'hideGoTo' : 'showGoTo'); + }); + + $document.bind('deck.init', function() { + bindKeyEvents(); + populateDatalist(); + markRootSlides(); + handleFormSubmit(); + }); +})(jQuery); + diff --git a/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.scss b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.scss new file mode 100755 index 00000000..667219fa --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/goto/deck.goto.scss @@ -0,0 +1,39 @@ +.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; + border-radius:10px; + + label { + font-weight:bold; + } + + label, input { + display:inline-block; + font-family:inherit; + } + + .deck-goto & { + display:block; + } +} + +#goto-slide { + width:8.375em; + margin:0 0.625em; + height:1.4375em; +} + +@media print { + .goto-form, #goto-slide { + display:none; + } +}
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.css b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.css new file mode 100644 index 00000000..a0f4e007 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.css @@ -0,0 +1,45 @@ +.deck-menu { + overflow: auto; +} +.deck-menu .slide { + background: #eee; + position: relative; + left: 0; + top: 0; + visibility: visible; + cursor: pointer; +} +.no-csstransforms .deck-menu > .slide { + float: left; + width: 22%; + height: 22%; + min-height: 0; + margin: 1%; + font-size: 0.22em; + overflow: hidden; + padding: 0 0.5%; +} +.csstransforms .deck-menu > .slide { + -webkit-transform: scale(0.22) !important; + -ms-transform: scale(0.22) !important; + transform: scale(0.22) !important; + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; + overflow: hidden; + padding: 0 48px; + margin: 12px; +} +.deck-menu iframe, .deck-menu img, .deck-menu video { + max-width: 100%; +} +.deck-menu .deck-current, .no-touch .deck-menu .slide:hover { + background: #ddf; +} +.deck-menu.deck-container:hover .deck-prev-link, .deck-menu.deck-container:hover .deck-next-link { + display: none; +} diff --git a/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.js b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.js new file mode 100644 index 00000000..77cf8c55 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.js @@ -0,0 +1,225 @@ +/*! +Deck JS - deck.menu +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 the methods and key binding to show and hide a menu of all +slides in the deck. The deck menu state is indicated by the presence of a class +on the deck container. +*/ +(function($, undefined) { + var $document = $(document); + var $html = $('html'); + var rootSlides; + + var populateRootSlidesArray = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootSlides = []; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + if (!$parentSlides.length) { + rootSlides.push($slide); + } + }); + }; + + var bindKeyEvents = function() { + var options = $.deck('getOptions'); + $document.unbind('keydown.deckmenu'); + $document.bind('keydown.deckmenu', function(event) { + var isMenuKey = event.which === options.keys.menu; + isMenuKey = isMenuKey || $.inArray(event.which, options.keys.menu) > -1; + if (isMenuKey && !event.ctrlKey) { + $.deck('toggleMenu'); + event.preventDefault(); + } + }); + }; + + var bindTouchEvents = function() { + var $container = $.deck('getContainer'); + var options = $.deck('getOptions'); + var touchEndTime = 0; + var currentSlide; + + $container.unbind('touchstart.deckmenu'); + $container.bind('touchstart.deckmenu', function() { + currentSlide = $.deck('getSlide'); + }); + $container.unbind('touchend.deckmenu'); + $container.bind('touchend.deckmenu', function(event) { + var now = Date.now(); + var isDoubletap = now - touchEndTime < options.touch.doubletapWindow; + + // Ignore this touch event if it caused a nav change (swipe) + if (currentSlide !== $.deck('getSlide')) { + return; + } + if (isDoubletap) { + $.deck('toggleMenu'); + event.preventDefault(); + } + touchEndTime = now; + }); + }; + + var setupMenuSlideSelection = function() { + var options = $.deck('getOptions'); + + $.each($.deck('getSlides'), function(i, $slide) { + $slide.unbind('click.deckmenu'); + $slide.bind('click.deckmenu', function(event) { + if (!$.deck('getContainer').hasClass(options.classes.menu)) { + return; + } + $.deck('go', i); + $.deck('hideMenu'); + event.stopPropagation(); + event.preventDefault(); + }); + }); + }; + + /* + Extends defaults/options. + + options.classes.menu + This class is added to the deck container when showing the slide menu. + + options.keys.menu + The numeric keycode used to toggle between showing and hiding the slide + menu. + + options.touch.doubletapWindow + Two consecutive touch events within this number of milliseconds will + be considered a double tap, and will toggle the menu on touch devices. + */ + $.extend(true, $.deck.defaults, { + classes: { + menu: 'deck-menu' + }, + + keys: { + menu: 77 // m + }, + + touch: { + doubletapWindow: 400 + } + }); + + /* + jQuery.deck('showMenu') + + Shows the slide menu by adding the class specified by the menu class option + to the deck container. + */ + $.deck('extend', 'showMenu', function() { + var $container = $.deck('getContainer'); + var options = $.deck('getOptions'); + + if ($container.hasClass(options.classes.menu)) { + return; + } + + // Hide through loading class to short-circuit transitions (perf) + $container.addClass([ + options.classes.loading, + options.classes.menu + ].join(' ')); + + /* Forced to do this in JS until CSS learns second-grade math. Save old + style value for restoration when menu is hidden. */ + if (Modernizr.csstransforms) { + $.each(rootSlides, function(i, $slide) { + $slide.data('oldStyle', $slide.attr('style')); + $slide.css({ + 'position': 'absolute', + 'left': ((i % 4) * 25) + '%', + 'top': (Math.floor(i / 4) * 25) + '%' + }); + }); + } + + // Need to ensure the loading class renders first, then remove + window.setTimeout(function() { + $container.removeClass(options.classes.loading); + $container.scrollTop($.deck('getSlide').position().top); + }, 0); + }); + + /* + jQuery.deck('hideMenu') + + Hides the slide menu by removing the class specified by the menu class + option from the deck container. + */ + $.deck('extend', 'hideMenu', function() { + var $container = $.deck('getContainer'); + var options = $.deck('getOptions'); + + if (!$container.hasClass(options.classes.menu)) { + return; + } + + $container.removeClass(options.classes.menu); + $container.addClass(options.classes.loading); + + /* Restore old style value */ + if (Modernizr.csstransforms) { + $.each(rootSlides, function(i, $slide) { + var oldStyle = $slide.data('oldStyle'); + $slide.attr('style', oldStyle ? oldStyle : ''); + }); + } + + window.setTimeout(function() { + $container.removeClass(options.classes.loading); + $container.scrollTop(0); + }, 0); + }); + + /* + jQuery.deck('toggleMenu') + + Toggles between showing and hiding the slide menu. + */ + $.deck('extend', 'toggleMenu', function() { + $.deck('getContainer').hasClass($.deck('getOptions').classes.menu) ? + $.deck('hideMenu') : $.deck('showMenu'); + }); + + $document.bind('deck.init', function() { + populateRootSlidesArray(); + bindKeyEvents(); + bindTouchEvents(); + setupMenuSlideSelection(); + }); + + $document.bind('deck.change', function(event, from, to) { + var $container = $.deck('getContainer'); + var containerScroll, slideTop; + + if ($container.hasClass($.deck('getOptions').classes.menu)) { + containerScroll = $container.scrollTop(); + slideTop = $.deck('getSlide', to).position().top; + $container.scrollTop(containerScroll + slideTop); + } + }); +})(jQuery); diff --git a/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.scss b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.scss new file mode 100755 index 00000000..2c6b3ae8 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/menu/deck.menu.scss @@ -0,0 +1,55 @@ +.deck-menu { + overflow:auto; + + .slide { + background:#eee; + position:relative; + left:0; + top:0; + visibility:visible; + cursor:pointer; + } + + > .slide { + .no-csstransforms & { + float:left; + width:22%; + height:22%; + min-height:0; + margin:1%; + font-size:0.22em; + overflow:hidden; + padding:0 0.5%; + } + + .csstransforms & { + -webkit-transform:scale(.22) !important; + -ms-transform:scale(.22) !important; + transform:scale(.22) !important; + -webkit-transform-origin:0 0; + -ms-transform-origin:0 0; + transform-origin:0 0; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + height:100%; + overflow:hidden; + padding:0 48px; + margin:12px; + } + } + + iframe, img, video { + max-width:100%; + } + + .deck-current, .no-touch & .slide:hover { + background:#ddf; + } + + &.deck-container:hover { + .deck-prev-link, .deck-next-link { + display:none; + } + } +}
\ No newline at end of file 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; + } +} diff --git a/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.css b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.css new file mode 100644 index 00000000..785e4033 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.css @@ -0,0 +1,20 @@ +.csstransforms .deck-container.deck-scale:not(.deck-menu) { + overflow: hidden; +} +.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide { + -moz-box-sizing: padding-box; + box-sizing: padding-box; + width: 100%; + padding-bottom: 20px; +} +.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide > .deck-slide-scaler { + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; +} + +.csstransforms .deck-container.deck-menu .deck-slide-scaler { + -webkit-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} diff --git a/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.js b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.js new file mode 100644 index 00000000..0e216318 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.js @@ -0,0 +1,190 @@ +/*! +Deck JS - deck.scale +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 automatic scaling to the deck. Slides are scaled down +using CSS transforms to fit within the deck container. If the container is +big enough to hold the slides without scaling, no scaling occurs. The user +can disable and enable scaling with a keyboard shortcut. + +Note: CSS transforms may make Flash videos render incorrectly. Presenters +that need to use video may want to disable scaling to play them. HTML5 video +works fine. +*/ +(function($, undefined) { + var $document = $(document); + var $window = $(window); + var baseHeight, timer, rootSlides; + + /* + Internal function to do all the dirty work of scaling the slides. + */ + var scaleDeck = function() { + var options = $.deck('getOptions'); + var $container = $.deck('getContainer'); + var baseHeight = options.baseHeight; + + if (!baseHeight) { + baseHeight = $container.height(); + } + + // Scale each slide down if necessary (but don't scale up) + $.each(rootSlides, function(i, $slide) { + var slideHeight = $slide.innerHeight(); + var $scaler = $slide.find('.' + options.classes.scaleSlideWrapper); + var shouldScale = $container.hasClass(options.classes.scale); + var scale = shouldScale ? baseHeight / slideHeight : 1; + + if (scale === 1) { + $scaler.css('transform', ''); + } + else { + $scaler.css('transform', 'scale(' + scale + ')'); + window.setTimeout(function() { + $container.scrollTop(0) + }, 1); + } + }); + }; + + var populateRootSlides = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootSlides = []; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + if (!$parentSlides.length) { + rootSlides.push($slide); + } + }); + }; + + var wrapRootSlideContent = function() { + var options = $.deck('getOptions'); + var wrap = '<div class="' + options.classes.scaleSlideWrapper + '"/>'; + $.each(rootSlides, function(i, $slide) { + $slide.children().wrapAll(wrap); + }); + }; + + var scaleOnResizeAndLoad = function() { + var options = $.deck('getOptions'); + + $window.unbind('resize.deckscale'); + $window.bind('resize.deckscale', function() { + window.clearTimeout(timer); + timer = window.setTimeout(scaleDeck, options.scaleDebounce); + }); + $.deck('enableScale'); + $window.unbind('load.deckscale'); + $window.bind('load.deckscale', scaleDeck); + }; + + var bindKeyEvents = function() { + var options = $.deck('getOptions'); + $document.unbind('keydown.deckscale'); + $document.bind('keydown.deckscale', function(event) { + var isKey = event.which === options.keys.scale; + isKey = isKey || $.inArray(event.which, options.keys.scale) > -1; + if (isKey) { + $.deck('toggleScale'); + event.preventDefault(); + } + }); + }; + + /* + Extends defaults/options. + + options.classes.scale + This class is added to the deck container when scaling is enabled. + It is enabled by default when the module is included. + + options.classes.scaleSlideWrapper + Scaling is done using a wrapper around the contents of each slide. This + class is applied to that wrapper. + + options.keys.scale + The numeric keycode used to toggle enabling and disabling scaling. + + options.baseHeight + When baseHeight is falsy, as it is by default, the deck is scaled in + proportion to the height of the deck container. You may instead specify + a height as a number of px, and slides will be scaled against this + height regardless of the container size. + + options.scaleDebounce + Scaling on the browser resize event is debounced. This number is the + threshold in milliseconds. You can learn more about debouncing here: + http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + + */ + $.extend(true, $.deck.defaults, { + classes: { + scale: 'deck-scale', + scaleSlideWrapper: 'deck-slide-scaler' + }, + + keys: { + scale: 83 // s + }, + + baseHeight: null, + scaleDebounce: 200 + }); + + /* + jQuery.deck('disableScale') + + Disables scaling and removes the scale class from the deck container. + */ + $.deck('extend', 'disableScale', function() { + $.deck('getContainer').removeClass($.deck('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('enableScale') + + Enables scaling and adds the scale class to the deck container. + */ + $.deck('extend', 'enableScale', function() { + $.deck('getContainer').addClass($.deck('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('toggleScale') + + Toggles between enabling and disabling scaling. + */ + $.deck('extend', 'toggleScale', function() { + var $container = $.deck('getContainer'); + var isScaled = $container.hasClass($.deck('getOptions').classes.scale); + $.deck(isScaled? 'disableScale' : 'enableScale'); + }); + + $document.bind('deck.init', function() { + populateRootSlides(); + wrapRootSlideContent(); + scaleOnResizeAndLoad(); + bindKeyEvents(); + }); +})(jQuery, 'deck', this); + diff --git a/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.scss b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.scss new file mode 100644 index 00000000..8909357a --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/scale/deck.scale.scss @@ -0,0 +1,22 @@ +.csstransforms .deck-container.deck-scale:not(.deck-menu) { + overflow:hidden; + + > .slide { + -moz-box-sizing: padding-box; + box-sizing: padding-box; + width:100%; + padding-bottom:20px; + + > .deck-slide-scaler { + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + } + } +} + +.csstransforms .deck-container.deck-menu .deck-slide-scaler { + -webkit-transform:none !important; + -ms-transform:none !important; + transform:none !important; +}
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/split/README.md b/doc/backends/deckjs/deck.js/extensions/split/README.md new file mode 100644 index 00000000..eb2e9c6d --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/split/README.md @@ -0,0 +1,30 @@ + +deck.split.js +============== + +`deck.split.js` is a deckjs extension that helps you split long slide into +multiple small slides. + + +Installation +------------ + +Just drop the whole repo into deck.js's `extensions` directory, then include +the script in your slide. + + +Usage +----- + +To split a long slide, you need to indicate position inside original slide by +adding following line: + +```html +<div style="page-break-after:always"></div> +``` + +Indeed, it could be any tag set with `page-break-after:always` style. Every +time you add this line, a new slide with the same title will be created, so you +can split your slide into pieces as much as you want. + + diff --git a/doc/backends/deckjs/deck.js/extensions/split/deck.split.js b/doc/backends/deckjs/deck.js/extensions/split/deck.split.js new file mode 100644 index 00000000..081035c4 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/split/deck.split.js @@ -0,0 +1,59 @@ +/*! +Deck JS - deck.split +Copyright (c) 2012 Qingping Hou <dave2008713@gmail.com> + about.houqp.me +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 splits a long slide into multiple slides. +*/ +(function($, deck, undefined) { + var $d = $(document); + + createEmptySlide = function(title_el) { + slide = $(document.createElement('section')); + slide.addClass('slide').append(title_el.clone()); + return slide; + }; + + $d.bind('deck.beforeInit', function() { + $(".slide").each( function(i, slide) { + /* each slide */ + var is_split = false, + prev_slide = $(slide), + /* extract title which will be added to each new slides */ + title_el = prev_slide.children('h2'), + tmp_slide = createEmptySlide(title_el); + + $(slide).children().each(function() { + /* for each element inside original slide */ + var el = $(this); + + if (el.css('page-break-after') == 'always') { + if (is_split) { + tmp_slide.insertAfter(prev_slide); + prev_slide = tmp_slide; + tmp_slide = createEmptySlide(title_el); + } + else { + /* find the first page break */ + is_split = true; + } + } + else { + if (is_split) { + tmp_slide.append(el); + } + } + }) + /* add remaining elements to a new slides */ + if (is_split) { + tmp_slide.insertAfter(prev_slide); + } + }); + }) +})(jQuery, 'deck'); + diff --git a/doc/backends/deckjs/deck.js/extensions/status/deck.status.css b/doc/backends/deckjs/deck.js/extensions/status/deck.status.css new file mode 100644 index 00000000..b2736464 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/status/deck.status.css @@ -0,0 +1,18 @@ +.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; + } +} diff --git a/doc/backends/deckjs/deck.js/extensions/status/deck.status.html b/doc/backends/deckjs/deck.js/extensions/status/deck.status.html new file mode 100644 index 00000000..5ecea5e4 --- /dev/null +++ b/doc/backends/deckjs/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" aria-role="status"> + <span class="deck-status-current"></span> + / + <span class="deck-status-total"></span> +</p> diff --git a/doc/backends/deckjs/deck.js/extensions/status/deck.status.js b/doc/backends/deckjs/deck.js/extensions/status/deck.status.js new file mode 100644 index 00000000..dca0734f --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/status/deck.status.js @@ -0,0 +1,108 @@ +/*! +Deck JS - deck.status +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 a (current)/(total) style status indicator to the deck. +*/ +(function($, undefined) { + var $document = $(document); + var rootCounter; + + var updateCurrent = function(event, from, to) { + var options = $.deck('getOptions'); + var currentSlideNumber = to + 1; + if (!options.countNested) { + currentSlideNumber = $.deck('getSlide', to).data('rootSlide'); + } + $(options.selectors.statusCurrent).text(currentSlideNumber); + }; + + var markRootSlides = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootCounter = 0; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + + if ($parentSlides.length) { + $slide.data('rootSlide', $parentSlides.last().data('rootSlide')); + } + else { + ++rootCounter; + $slide.data('rootSlide', rootCounter); + } + }); + }; + + var setInitialSlideNumber = function() { + var slides = $.deck('getSlides'); + var $currentSlide = $.deck('getSlide'); + var index; + + $.each(slides, function(i, $slide) { + if ($slide === $currentSlide) { + index = i; + return false; + } + }); + updateCurrent(null, index, index); + }; + + var setTotalSlideNumber = function() { + var options = $.deck('getOptions'); + var slides = $.deck('getSlides'); + + if (options.countNested) { + $(options.selectors.statusTotal).text(slides.length); + } + else { + $(options.selectors.statusTotal).text(rootCounter); + } + }; + + /* + 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' + }, + + countNested: true + }); + + $document.bind('deck.init', function() { + markRootSlides(); + setInitialSlideNumber(); + setTotalSlideNumber(); + }); + $document.bind('deck.change', updateCurrent); +})(jQuery, 'deck'); + diff --git a/doc/backends/deckjs/deck.js/extensions/status/deck.status.scss b/doc/backends/deckjs/deck.js/extensions/status/deck.status.scss new file mode 100755 index 00000000..d0722bfe --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/status/deck.status.scss @@ -0,0 +1,18 @@ +.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; + } +} diff --git a/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.css b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.css new file mode 100644 index 00000000..6ed25c4c --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.css @@ -0,0 +1,40 @@ +.deck-container .deck-toc { + position: absolute; + z-index: 40; + top: 0px; + bottom: 0px; + left: 0; + right: 55%; + padding: 0.625em; + display: none; + background: #ccc; + overflow-y: auto; + overflow-x: auto; + background-color: #DDE4EB; + border-right: #A9A9A9 solid 1px; + width: 500px; } + .deck-container .deck-toc ul { + list-style: none; + margin: 0px; + padding: 0px; + font-size: 1em; } + .deck-container .deck-toc ul li { + white-space: nowrap; + padding-left: 1.5em; + font-weight: normal; } + .deck-container .deck-toc ul li#toc-0 { + font-weight: bold; + padding-bottom: 1em; + padding-left: 0px; } + .deck-container .deck-toc a { + width: 100%; + display: block !important; + text-decoration: none; + color: #595959 !important; } + +.deck-toc-frame .deck-toc { + display: block; } + +@media print { + .deck-toc { + display: none; } } diff --git a/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.html b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.html new file mode 100644 index 00000000..27b8cc26 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.html @@ -0,0 +1,12 @@ +<!-- Place the following snippet at the bottom of the deck container. --> + +<!-- this is for the toc panel --> +<div class="deck-toc"></div> + +<!-- this is a toc status panel --> +<table class="deck-toc-status"> + <tr> + <td class="right deck-toc-h2"> </td> + <td class="left deck-toc-h3"> </td> + </tr> +</table>
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js new file mode 100644 index 00000000..b16bd6a9 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.js @@ -0,0 +1,271 @@ +/*! +Deck JS - deck.toc +Copyright (c) 2011 Remi BARRAQUAND +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 provides a support for TOC to the deck. +*/ + +(function($, deck, undefined) { + var $d = $(document); + var $toc; + + /* + Extends defaults/options. + + options.classes.toc + This class is added to the deck container when showing the slide + toc. + + options.keys.toc + The numeric keycode used to toggle between showing and hiding + the slide toc. + + options.selectors.toc + The element matching this selector displays the toc. + + options.selectors.tocTitle + The element matching this selector displays the current title + of the slide i.e the current h1. + + options.selectors.tocSection + The element matching this selector displays the current section + of the slide i.e the current h2. + + options.selectors.tocSubSection + The element matching this selector displays the current + subsection of the slide i.e the current h3. + + options.selectors.tocSubSubSection + The element matching this selector displays the current + subsubsection of the slide i.e the current h4. + */ + $.extend(true, $[deck].defaults, { + classes: { + toc: 'deck-toc-frame' + }, + + keys: { + toc: 84 // t + }, + + selectors: { + toc: '.deck-toc', + tocTitle: '.deck-toc-h1', + tocSection: '.deck-toc-h2', + tocSubSection: '.deck-toc-h3', + tocSubSubSection: '.deck-toc-h4', + tocStatus: '.deck-toc-status' + } + }); + + /* + jQuery.deck('showToc') + + Shows the slide toc by adding the class specified by the toc class option + to the deck container. + */ + $[deck]('extend', 'showToc', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.toc); + }); + + /* + jQuery.deck('hideToc') + + Hides the slide toc by removing the class specified by the toc class + option from the deck container. + */ + $[deck]('extend', 'hideToc', function() { + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.toc); + }); + + /* + jQuery.deck('toggleToc') + + Toggles between showing and hiding the TOC. + */ + $[deck]('extend', 'toggleToc', function() { + $[deck]('getContainer').hasClass($[deck]('getOptions').classes.toc) ? + $[deck]('hideToc') : $[deck]('showToc'); + }); + + /* + jQuery.deck('Init') + */ + $d.bind('deck.init', function() { + var opts = $[deck]('getOptions'); + var container = $[deck]('getContainer'); + + /* Bind key events */ + $d.unbind('keydown.decktoc').bind('keydown.decktoc', function(e) { + if (e.which === opts.keys.toc || $.inArray(e.which, opts.keys.toc) > -1) { + $[deck]('toggleToc'); + e.preventDefault(); + } + }); + + /* Hide TOC panel when user click on container */ + container.click(function(e){ + $[deck]('hideToc'); + }); + + /* Init TOC and append it to the document */ + $toc = new TOC(); + $($[deck]('getOptions').selectors.toc).append($toc.root); + + /* Go through all slides */ + $.each($[deck]('getSlides'), function(i, $el) { + var slide = $[deck]('getSlide',i); + //var tocElementFound = false; + + /* If there is a toc item, push it in the TOC */ + for(var level=1; level<6; level++) { + if( slide.find("h"+level).length > 0) { + var tocTitle = ""; + var $tocElement = slide.find("h"+level+":first"); + if( $tocElement.attr("title") != undefined && $tocElement.attr("title") != "") { + tocTitle = $tocElement.attr("title"); + } else { + tocTitle = $tocElement.text(); + } + $toc.push(level, tocTitle, slide); + $toc.tag(slide); + //tocElementFound = true; + } + } + + /* Tag the slide with the current TOC level */ + $toc.tag(slide); + }); + }) + /* Update current slide number with each change event */ + .bind('deck.change', function(e, from, to) { + var opts = $[deck]('getOptions'); + var slideTo = $[deck]('getSlide', to); + var container = $[deck]('getContainer'); + + if (container.hasClass($[deck]('getOptions').classes.toc)) { + container.scrollTop(slideTo.offset().top); + } + + /* update toc status */ + if( slideTo.data("toc") ) { + // reset + $(opts.selectors.tocTitle).text(""); + $(opts.selectors.tocSection).text(""); + $(opts.selectors.tocSubSection).text(""); + $(opts.selectors.tocSubSubSection).text(""); + + if( slideTo.hasClass('hide-toc-status') ) { + $(opts.selectors.tocStatus).hide(); + } else { + $(opts.selectors.tocStatus).show(); + // update according to the current context + var $context = $toc.context(slideTo.data('toc')) + for(var level=1; level<=$context.length; level++) { + switch(level) { + case 1: + $(opts.selectors.tocTitle).text($context[level-1]); + break; + case 2: + $(opts.selectors.tocSection).text($context[level-1]); + break; + case 3: + $(opts.selectors.tocSubSection).text($context[level-1]); + break; + case 4: + $(opts.selectors.tocSubSubSection).text($context[level-1]); + break; + } + } + } + } + }); + + /* + Simple TOC manager (must be improved) + */ + var TOC = function() { + + this.root = $("<ul/>", {"class":"toc"}); + + /* + Push new item in the TOC + + depth is the level (e.g. 1 for h1, 2 for h2, etc.) + title is the toc-item title + slide is the slide that provides the toc-element + */ + this.push = function(depth,title,slide) { + inc(depth); + + /* Create toc element */ + var $tocElm = $("<li />", { + id: "toc-"+($c.join('-')) + }).data({ // keep track of the slide in case... + slide: slide, + title: title + }).append($("<a />", { // create an hyperlink + href: "#"+$(slide).attr('id'), + text: title + })).append($("<ul />")); + + /* insert it at the right place */ + var $target = this.root; + if( depth > 1) { + $target = ($target.find("li#toc-"+($c.slice(0,$c.length-1).join('-')))).children("ul"); + } + $tocElm.appendTo($target); + }; + + /* + Tag the slide with the current TOC level. + + slide is the slide to tag + */ + this.tag = function(slide) { + slide.data({ + toc: $c.slice(0) + }); + } + + /* + Get the current TOC context + + path is the current path in the TOC + */ + this.context = function(path) { + $context = new Array(); + var $target = this.root; + for(var depth=0; depth<path.length; depth++) { + var tocElm = $target.find("li#toc-"+(path.slice(0,depth+1).join('-'))) + $context.push(tocElm.data('title')); + $target = (tocElm).children("ul"); + } + + return $context; + } + + /* cursor */ + var $c = [-1]; + function inc(depth) { + var current_depth = $c.length; + if(depth>current_depth) { + for(i=current_depth;i<depth;i++) { + $c.push(0); + } + } else if( current_depth>depth) { + for(i=depth;i<current_depth;i++) { + $c.pop(); + $c[depth-1]++ + } + } else { + $c[depth-1]++ + } + } + } +})(jQuery, 'deck');
\ No newline at end of file diff --git a/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.scss b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.scss new file mode 100644 index 00000000..bcb6c599 --- /dev/null +++ b/doc/backends/deckjs/deck.js/extensions/toc/deck.toc.scss @@ -0,0 +1,54 @@ +.deck-container {
+ .deck-toc {
+ position: absolute;
+ z-index: 40;
+ top: 0px;
+ bottom: 0px;
+ left: 0;
+ right: 55%;
+ padding: 0.625em;
+ display: none;
+ background: #ccc;
+ overflow-y: auto;
+ overflow-x: auto;
+ background-color: #DDE4EB;
+ border-right: #A9A9A9 solid 1px;
+ width: 500px;
+
+ ul {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+ font-size: 1em;
+
+ li {
+ white-space: nowrap;
+ padding-left: 1.5em;
+ font-weight: normal;
+
+ &#toc-0 {
+ font-weight: bold;
+ padding-bottom: 1em;
+ padding-left: 0px;
+ }
+ }
+ }
+
+ a {
+ width: 100%;
+ display: block !important;
+ text-decoration: none;
+ color: #595959 !important;
+ }
+ }
+}
+
+.deck-toc-frame .deck-toc {
+ display: block;
+}
+
+@media print {
+ .deck-toc {
+ display:none;
+ }
+}
\ No newline at end of file |