deck revised extension example: goto

gistfile1.js

(function($, undefined) {
  $.deck('extend', {
    name: 'goto',

    options: {
      class: 'deck-goto',
      datalistSelector: '#goto-datalist',
      formSelector: '.goto-form',
      inputSelector: '#goto-slide',
      countNested: true
    },

    keys: {
      'g': {
        method: 'toggleGoto',
        description: 'Shows or hides a form that will allow you to jump around slides by typing in the slide number or slide ID.'
      }
    },

    methods: {
      showGoTo: function() {
        var options = $.deck('getOptions');
        $.deck('getContainer').addClass(options.goto.class);
        $(options.goto.inputSelector).focus();
      },
      
      hideGoTo: function() {
        var options = $.deck('getOptions');
        $(options.goto.inputSelector).blur();
        $.deck('getContainer').removeClass(options.goto.class);
      },
      
      toggleGoTo: function() {
        var options = $.deck('getOptions');
        var $container = $.deck('getContainer');
        $.deck($container.hasClass(options.goto.class) ? 'hideGoTo' : 'showGoTo');
      }
    },
    
    events: {
      init: function() {
        var options = $.deck('getOptions');
        var $datalist = $(options.goto.datalistSelector);
        var $field = $(options.goto.inputSelector);
        var rootCounter = 1;
        var slideTest = $.map([
          options.beforeClass,
          options.previousClass,
          options.currentClass,
          options.nextClass,
          options.afterClass
        ], function(el, i) {
          return '.' + el;
        }).join(', ');
        
        $.each($.deck('getSlides'), function(i, $slide) {
          var id = $slide.attr('id');
          var $parentSlides = $slide.parentsUntil(options.containerSelector, slideTest);

          if (id) {
            $datalist.append('<option value="' + id + '">');
          }
			
          if ($parentSlides.length) {
            $slide.removeData('rootIndex');
          }
          else if (!options.goto.countNested) {
            $slide.data('rootIndex', rootCounter);
            ++rootCounter;
          }
        });
        
        $(options.goto.formSelector).bind('submit.deckgoto', function(event) {
          var target = parseInt($field.val(), 10);
          
          if (!options.goto.countNested) {
            if (target >= rootCounter) return false;
            $.each($.deck('getSlides'), function(i, $slide) {
              if ($slide.data('rootIndex') === target) {
                target = i + 1;
                return false;
              }
            });
          }
          
          $.deck('go', isNan(target) ? $field.val() : target - 1);
          $.deck('hideGoTo');
          $field.val('');
          event.preventDefault();
        });
        
        $field.bind('keydown.deckgoto', function(event) {
          event.stopPropagation();
        });
      }
    }
  });
})(jQuery, 'deck');


// Usage examples

$.deck('.slide', {
  all: {
    countNested: false // Will be passed to all extensions
  }
  goto: {
    inputSelector: '.some-other-input'
  },
  menu: false // Disables menu extension entirely
});