extensions/menu/deck.menu.js

   1 /*!
   2 Deck JS - deck.menu
   3 Copyright (c) 2011 Caleb Troughton
   4 Dual licensed under the MIT license.
   5 https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
   6 */
   7
   8 /*
   9 This module adds the methods and key binding to show and hide a menu of all
  10 slides in the deck. The deck menu state is indicated by the presence of a class
  11 on the deck container.
  12 */
  13 (function($, undefined) {
  14   var $document = $(document);
  15   var $html = $('html');
  16   var rootSlides;
  17
  18   var populateRootSlidesArray = function() {
  19     var options = $.deck('getOptions');
  20     var slideTest = $.map([
  21       options.classes.before,
  22       options.classes.previous,
  23       options.classes.current,
  24       options.classes.next,
  25       options.classes.after
  26     ], function(el, i) {
  27       return '.' + el;
  28     }).join(', ');
  29
  30     rootSlides = [];
  31     $.each($.deck('getSlides'), function(i, $slide) {
  32       var $parentSlides = $slide.parentsUntil(
  33         options.selectors.container,
  34         slideTest
  35       );
  36       if (!$parentSlides.length) {
  37         rootSlides.push($slide);
  38       }
  39     });
  40   };
  41
  42   var bindKeyEvents = function() {
  43     var options = $.deck('getOptions');
  44     $document.unbind('keydown.deckmenu');
  45     $document.bind('keydown.deckmenu', function(event) {
  46       var isMenuKey = event.which === options.keys.menu;
  47       isMenuKey = isMenuKey || $.inArray(event.which, options.keys.menu) > -1;
  48       if (isMenuKey && !event.ctrlKey) {
  49         $.deck('toggleMenu');
  50         event.preventDefault();
  51       }
  52     });
  53   };
  54
  55   var bindTouchEvents = function() {
  56     var $container = $.deck('getContainer');
  57     var options = $.deck('getOptions');
  58     var touchEndTime = 0;
  59     var currentSlide;
  60
  61     $container.unbind('touchstart.deckmenu');
  62     $container.bind('touchstart.deckmenu', function() {
  63       currentSlide = $.deck('getSlide');
  64     });
  65     $container.unbind('touchend.deckmenu');
  66     $container.bind('touchend.deckmenu', function(event) {
  67       var now = Date.now();
  68       var isDoubletap = now - touchEndTime < options.touch.doubletapWindow;
  69
  70       // Ignore this touch event if it caused a nav change (swipe)
  71       if (currentSlide !== $.deck('getSlide')) {
  72         return;
  73       }
  74       if (isDoubletap) {
  75         $.deck('toggleMenu');
  76         event.preventDefault();
  77       }
  78       touchEndTime = now;
  79     });
  80   };
  81
  82   var setupMenuSlideSelection = function() {
  83     var options = $.deck('getOptions');
  84
  85     $.each($.deck('getSlides'), function(i, $slide) {
  86       $slide.unbind('click.deckmenu');
  87       $slide.bind('click.deckmenu', function(event) {
  88         if (!$.deck('getContainer').hasClass(options.classes.menu)) {
  89           return;
  90         }
  91         $.deck('go', i);
  92         $.deck('hideMenu');
  93         event.stopPropagation();
  94         event.preventDefault();
  95       });
  96     });
  97   };
  98
  99   /*
 100   Extends defaults/options.
 101
 102   options.classes.menu
 103     This class is added to the deck container when showing the slide menu.
 104
 105   options.keys.menu
 106     The numeric keycode used to toggle between showing and hiding the slide
 107     menu.
 108
 109   options.touch.doubletapWindow
 110     Two consecutive touch events within this number of milliseconds will
 111     be considered a double tap, and will toggle the menu on touch devices.
 112   */
 113   $.extend(true, $.deck.defaults, {
 114     classes: {
 115       menu: 'deck-menu'
 116     },
 117
 118     keys: {
 119       menu: 77 // m
 120     },
 121
 122     touch: {
 123       doubletapWindow: 400
 124     }
 125   });
 126
 127   /*
 128   jQuery.deck('showMenu')
 129
 130   Shows the slide menu by adding the class specified by the menu class option
 131   to the deck container.
 132   */
 133   $.deck('extend', 'showMenu', function() {
 134     var $container = $.deck('getContainer');
 135     var options = $.deck('getOptions');
 136
 137     if ($container.hasClass(options.classes.menu)) {
 138       return;
 139     }
 140
 141     // Hide through loading class to short-circuit transitions (perf)
 142     $container.addClass([
 143       options.classes.loading,
 144       options.classes.menu
 145     ].join(' '));
 146
 147     /* Forced to do this in JS until CSS learns second-grade math. Save old
 148     style value for restoration when menu is hidden. */
 149     if (Modernizr.csstransforms) {
 150       $.each(rootSlides, function(i, $slide) {
 151         $slide.data('oldStyle', $slide.attr('style'));
 152         $slide.css({
 153           'position': 'absolute',
 154           'left': ((i % 4) * 25) + '%',
 155           'top': (Math.floor(i / 4) * 25) + '%'
 156         });
 157       });
 158     }
 159
 160     // Need to ensure the loading class renders first, then remove
 161     window.setTimeout(function() {
 162       $container.removeClass(options.classes.loading);
 163       $container.scrollTop($.deck('getSlide').position().top);
 164     }, 0);
 165   });
 166
 167   /*
 168   jQuery.deck('hideMenu')
 169
 170   Hides the slide menu by removing the class specified by the menu class
 171   option from the deck container.
 172   */
 173   $.deck('extend', 'hideMenu', function() {
 174     var $container = $.deck('getContainer');
 175     var options = $.deck('getOptions');
 176
 177     if (!$container.hasClass(options.classes.menu)) {
 178       return;
 179     }
 180
 181     $container.removeClass(options.classes.menu);
 182     $container.addClass(options.classes.loading);
 183
 184     /* Restore old style value */
 185     if (Modernizr.csstransforms) {
 186       $.each(rootSlides, function(i, $slide) {
 187         var oldStyle = $slide.data('oldStyle');
 188         $slide.attr('style', oldStyle ? oldStyle : '');
 189       });
 190     }
 191
 192     window.setTimeout(function() {
 193       $container.removeClass(options.classes.loading);
 194       $container.scrollTop(0);
 195     }, 0);
 196   });
 197
 198   /*
 199   jQuery.deck('toggleMenu')
 200
 201   Toggles between showing and hiding the slide menu.
 202   */
 203   $.deck('extend', 'toggleMenu', function() {
 204     $.deck('getContainer').hasClass($.deck('getOptions').classes.menu) ?
 205     $.deck('hideMenu') : $.deck('showMenu');
 206   });
 207
 208   $document.bind('deck.init', function() {
 209     populateRootSlidesArray();
 210     bindKeyEvents();
 211     bindTouchEvents();
 212     setupMenuSlideSelection();
 213   });
 214
 215   $document.bind('deck.change', function(event, from, to) {
 216     var $container = $.deck('getContainer');
 217     var containerScroll, slideTop;
 218
 219     if ($container.hasClass($.deck('getOptions').classes.menu)) {
 220       containerScroll = $container.scrollTop();
 221       slideTop = $.deck('getSlide', to).position().top;
 222       $container.scrollTop(containerScroll + slideTop);
 223     }
 224   });
 225 })(jQuery);