extensions/menu/deck.menu.js

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