slippery 0.3.0 → 0.4.0

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

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

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

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

data/assets/deck.js/extensions/hash/deck.hash.css

@@ -0,0 +1,13 @@
+.deck-permalink {
+  display: none;
+  position: absolute;
+  z-index: 4;
+  bottom: 30px;
+  right: 0;
+  width: 48px;
+  text-align: center;
+}
+
+.no-history .deck-container:hover .deck-permalink {
+  display: block;
+}

data/assets/deck.js/extensions/hash/deck.hash.html

@@ -0,0 +1,2 @@
+<!-- Place the following snippet at the bottom of the deck container. -->
+<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

data/assets/deck.js/extensions/hash/deck.hash.js

@@ -0,0 +1,145 @@
+/*!
+Deck JS - deck.hash
+Copyright (c) 2011-2013 Caleb Troughton
+Dual licensed under the MIT license.
+https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
+*/
+
+/*
+This module adds deep linking to individual slides, enables internal links
+to slides within decks, and updates the address bar with the hash as the user
+moves through the deck. A permalink anchor is also updated. Standard themes
+hide this link in browsers that support the History API, and show it for
+those that do not. Slides that do not have an id are assigned one according to
+the hashPrefix option. In addition to the on-slide container state class
+kept by core, this module adds an on-slide state class that uses the id of each
+slide.
+*/
+(function ($, undefined) {
+  var $document = $(document);
+  var $window = $(window);
+
+  /* Collection of internal fragment links in the deck */
+  var $fragmentLinks;
+
+  /*
+  Internal only function.  Given a string, extracts the id from the hash,
+  matches it to the appropriate slide, and navigates there.
+  */
+  var goByHash = function(str) {
+    var id = str.substr(str.indexOf("#") + 1);
+    var slides = $.deck('getSlides');
+
+    $.each(slides, function(i, $slide) {
+      if ($slide.attr('id') === id) {
+        $.deck('go', i);
+        return false;
+      }
+    });
+
+    // If we don't set these to 0 the container scrolls due to hashchange
+    if ($.deck('getOptions').preventFragmentScroll) {
+      $.deck('getContainer').scrollLeft(0).scrollTop(0);
+    }
+  };
+
+  var assignSlideId = function(i, $slide) {
+    var options = $.deck('getOptions');
+    var currentId = $slide.attr('id');
+    var previouslyAssigned = $slide.data('deckAssignedId') === currentId;
+    if (!currentId || previouslyAssigned) {
+      $slide.attr('id', options.hashPrefix + i);
+      $slide.data('deckAssignedId', options.hashPrefix + i);
+    }
+  };
+
+  var removeContainerStateClass = function(id) {
+    var options = $.deck('getOptions');
+    $.deck('getContainer').removeClass(options.classes.onPrefix + id);
+  };
+
+  var addContainerStateClass = function(id) {
+    var options = $.deck('getOptions');
+    $.deck('getContainer').addClass(options.classes.onPrefix + id);
+  };
+
+  /*
+  Extends defaults/options.
+
+  options.selectors.hashLink
+    The element matching this selector has its href attribute updated to
+    the hash of the current slide as the user navigates through the deck.
+
+  options.hashPrefix
+    Every slide that does not have an id is assigned one at initialization.
+    Assigned ids take the form of hashPrefix + slideIndex, e.g., slide-0,
+    slide-12, etc.
+
+  options.preventFragmentScroll
+    When deep linking to a hash of a nested slide, this scrolls the deck
+    container to the top, undoing the natural browser behavior of scrolling
+    to the document fragment on load.
+  */
+  $.extend(true, $.deck.defaults, {
+    selectors: {
+      hashLink: '.deck-permalink'
+    },
+
+    hashPrefix: 'slide-',
+    preventFragmentScroll: true
+  });
+
+
+  $document.bind('deck.init', function() {
+    var options = $.deck('getOptions');
+    var slides = $.deck('getSlides');
+
+    $fragmentLinks = $();
+    $.each(slides, function(i, $slide) {
+      var hash;
+
+      assignSlideId(i, $slide);
+      hash = '#' + $slide.attr('id');
+      if (hash === window.location.hash) {
+        setTimeout(function() {
+          $.deck('go', i);
+        }, 1);
+      }
+      $fragmentLinks = $fragmentLinks.add('a[href="' + hash + '"]');
+    });
+
+    /* Set up first id container state class */
+    if (slides.length) {
+      addContainerStateClass($.deck('getSlide').attr('id'));
+    };
+  });
+
+  /* Update permalink, address bar, and state class on a slide change */
+  $document.bind('deck.change', function(event, from, to) {
+    var hash = '#' + $.deck('getSlide', to).attr('id');
+    var hashPath = window.location.href.replace(/#.*/, '') + hash;
+    var options = $.deck('getOptions');
+
+    removeContainerStateClass($.deck('getSlide', from).attr('id'));
+    addContainerStateClass($.deck('getSlide', to).attr('id'));
+    $(options.selectors.hashLink).attr('href', hashPath);
+    if (Modernizr.history) {
+      window.history.replaceState({}, "", hashPath);
+    }
+  });
+
+  $window.bind('hashchange.deckhash', function(event) {
+    if (event.originalEvent && event.originalEvent.newURL) {
+      goByHash(event.originalEvent.newURL);
+    }
+    else {
+      goByHash(window.location.hash);
+    }
+  })
+
+  $window.bind('load', function() {
+    if ($.deck('getOptions').preventFragmentScroll) {
+      $.deck('getContainer').scrollLeft(0).scrollTop(0);
+    }
+  });
+})(jQuery);

data/assets/deck.js/extensions/hash/deck.hash.scss

@@ -0,0 +1,13 @@
+.deck-permalink {
+  display:none;
+  position:absolute;
+  z-index:4;
+  bottom:30px;
+  right:0;
+  width:48px;
+  text-align:center;
+}
+
+.no-history .deck-container:hover .deck-permalink {
+  display:block;
+}