113 lines
3 KiB
JavaScript
113 lines
3 KiB
JavaScript
/*!
|
|
Deck JS - deck.menu - v1.0
|
|
Copyright (c) 2011 Caleb Troughton
|
|
Dual licensed under the MIT license and GPL license.
|
|
https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
|
|
https://github.com/imakewebthings/deck.js/blob/master/GPL-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($, deck, undefined) {
|
|
var $d = $(document);
|
|
|
|
/*
|
|
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() {
|
|
$[deck]('getContainer').addClass($[deck]('getOptions').classes.menu);
|
|
$[deck]('getContainer').scrollTop($[deck]('getSlide').offset().top);
|
|
});
|
|
|
|
/*
|
|
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() {
|
|
$[deck]('getContainer').removeClass($[deck]('getOptions').classes.menu);
|
|
$[deck]('getContainer').scrollTop(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');
|
|
});
|
|
|
|
$d.bind('deck.init', function() {
|
|
var opts = $[deck]('getOptions'),
|
|
touchEndTime = 0,
|
|
currentSlide;
|
|
|
|
// Bind key events
|
|
$d.unbind('keydown.deckmenu').bind('keydown.deckmenu', function(e) {
|
|
if (e.which === opts.keys.menu || $.inArray(e.which, opts.keys.menu) > -1) {
|
|
$[deck]('toggleMenu');
|
|
}
|
|
});
|
|
|
|
// Double tap to toggle slide menu for touch devices
|
|
$[deck]('getContainer').unbind('touchstart.deckmenu').bind('touchstart.deckmenu', function(e) {
|
|
currentSlide = $[deck]('getSlide');
|
|
})
|
|
.unbind('touchend.deckmenu').bind('touchend.deckmenu', function(e) {
|
|
var now = Date.now();
|
|
|
|
// Ignore this touch event if it caused a nav change (swipe)
|
|
if (currentSlide !== $[deck]('getSlide')) return;
|
|
|
|
if (now - touchEndTime < opts.touch.doubletapWindow) {
|
|
$[deck]('toggleMenu');
|
|
e.preventDefault();
|
|
}
|
|
touchEndTime = now;
|
|
});
|
|
})
|
|
.bind('deck.change', function(e, from, to) {
|
|
var container = $[deck]('getContainer');
|
|
if (container.hasClass($[deck]('getOptions').classes.menu)) {
|
|
container.scrollTop($[deck]('getSlide', to).offset().top);
|
|
}
|
|
});
|
|
})(jQuery, 'deck');
|
|
|