slippery 0.3.0 → 0.4.0

data/assets/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;
+}

data/assets/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);

data/assets/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;
+    }
+  }
+}

data/assets/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;
+  }
+}

data/assets/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>

data/assets/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);
+