/*!
* meny 1.4
* http://lab.hakim.se/meny
* MIT licensed
*
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
(function( root, factory ) {
if( typeof define === 'function' && define.amd ) {
// AMD module
define( factory );
} else {
// Browser global
root.Meny = factory();
}
}(this, function () {
// Date.now polyfill
if( typeof Date.now !== 'function' ) Date.now = function() { return new Date().getTime(); };
var Meny = {
// Creates a new instance of Meny
create: function( options ) {
return (function(){
// Make sure the required arguments are defined
if( !options || !options.menuElement || !options.contentsElement ) {
throw 'You need to specify which menu and contents elements to use.';
}
// Make sure the menu and contents have the same parent
if( options.menuElement.parentNode !== options.contentsElement.parentNode ) {
throw 'The menu and contents elements must have the same parent.';
}
// Constants
var POSITION_T = 'top',
POSITION_R = 'right',
POSITION_B = 'bottom',
POSITION_L = 'left';
// Feature detection for 3D transforms
var supports3DTransforms = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style;
// Default options, gets extended by passed in arguments
var config = {
width: 300,
height: 300,
position: POSITION_L,
threshold: 40,
angle: 30,
overlap: 6,
transitionDuration: '0.5s',
transitionEasing: 'ease',
gradient: 'rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%)',
mouse: true,
touch: true
};
// Cache references to DOM elements
var dom = {
menu: options.menuElement,
contents: options.contentsElement,
wrapper: options.menuElement.parentNode,
cover: null
};
// State and input
var indentX = dom.wrapper.offsetLeft,
indentY = dom.wrapper.offsetTop,
touchStartX = null,
touchStartY = null,
touchMoveX = null,
touchMoveY = null,
isOpen = false,
isMouseDown = false;
// Precalculated transform and style states
var menuTransformOrigin,
menuTransformClosed,
menuTransformOpened,
menuStyleClosed,
menuStyleOpened,
contentsTransformOrigin,
contentsTransformClosed,
contentsTransformOpened,
contentsStyleClosed,
contentsStyleOpened;
var originalStyles = {},
addedEventListeners = [];
// Ongoing animations (for fallback mode)
var menuAnimation,
contentsAnimation,
coverAnimation;
configure( options );
/**
* Initializes Meny with the specified user options,
* may be called multiple times as configuration changes.
*/
function configure( o ) {
// Extend the default config object with the passed in
// options
Meny.extend( config, o );
setupPositions();
setupWrapper();
setupCover();
setupMenu();
setupContents();
bindEvents();
}
/**
* Prepares the transforms for the current positioning
* settings.
*/
function setupPositions() {
menuTransformOpened = '';
contentsTransformClosed = '';
menuAngle = config.angle;
contentsAngle = config.angle / -2;
switch( config.position ) {
case POSITION_T:
// Primary transform:
menuTransformOrigin = '50% 0%';
menuTransformClosed = 'rotateX( ' + menuAngle + 'deg ) translateY( -100% ) translateY( '+ config.overlap +'px )';
contentsTransformOrigin = '50% 0';
contentsTransformOpened = 'translateY( '+ config.height +'px ) rotateX( ' + contentsAngle + 'deg )';
// Position fallback:
menuStyleClosed = { top: '-' + (config.height-config.overlap) + 'px' };
menuStyleOpened = { top: '0px' };
contentsStyleClosed = { top: '0px' };
contentsStyleOpened = { top: config.height + 'px' };
break;
case POSITION_R:
// Primary transform:
menuTransformOrigin = '100% 50%';
menuTransformClosed = 'rotateY( ' + menuAngle + 'deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )';
contentsTransformOrigin = '100% 50%';
contentsTransformOpened = 'translateX( -'+ config.width +'px ) rotateY( ' + contentsAngle + 'deg )';
// Position fallback:
menuStyleClosed = { right: '-' + (config.width-config.overlap) + 'px' };
menuStyleOpened = { right: '0px' };
contentsStyleClosed = { left: '0px' };
contentsStyleOpened = { left: '-' + config.width + 'px' };
break;
case POSITION_B:
// Primary transform:
menuTransformOrigin = '50% 100%';
menuTransformClosed = 'rotateX( ' + -menuAngle + 'deg ) translateY( 100% ) translateY( -'+ config.overlap +'px )';
contentsTransformOrigin = '50% 100%';
contentsTransformOpened = 'translateY( -'+ config.height +'px ) rotateX( ' + -contentsAngle + 'deg )';
// Position fallback:
menuStyleClosed = { bottom: '-' + (config.height-config.overlap) + 'px' };
menuStyleOpened = { bottom: '0px' };
contentsStyleClosed = { top: '0px' };
contentsStyleOpened = { top: '-' + config.height + 'px' };
break;
default:
// Primary transform:
menuTransformOrigin = '100% 50%';
menuTransformClosed = 'translateX( -100% ) translateX( '+ config.overlap +'px ) scale( 1.01 ) rotateY( ' + -menuAngle + 'deg )';
contentsTransformOrigin = '0 50%';
contentsTransformOpened = 'translateX( '+ config.width +'px ) rotateY( ' + -contentsAngle + 'deg )';
// Position fallback:
menuStyleClosed = { left: '-' + (config.width-config.overlap) + 'px' };
menuStyleOpened = { left: '0px' };
contentsStyleClosed = { left: '0px' };
contentsStyleOpened = { left: config.width + 'px' };
break;
}
}
/**
* The wrapper element holds the menu and contents.
*/
function setupWrapper() {
// Add a class to allow for custom styles based on
// position
Meny.addClass( dom.wrapper, 'meny-' + config.position );
originalStyles.wrapper = dom.wrapper.style.cssText;
dom.wrapper.style[ Meny.prefix( 'perspective' ) ] = '800px';
dom.wrapper.style[ Meny.prefix( 'perspectiveOrigin' ) ] = contentsTransformOrigin;
}
/**
* The cover is used to obfuscate the contents while
* Meny is open.
*/
function setupCover() {
if( dom.cover ) {
dom.cover.parentNode.removeChild( dom.cover );
}
dom.cover = document.createElement( 'div' );
// Disabled until a falback fade in animation is added
dom.cover.style.position = 'absolute';
dom.cover.style.display = 'block';
dom.cover.style.width = '100%';
dom.cover.style.height = '100%';
dom.cover.style.left = 0;
dom.cover.style.top = 0;
dom.cover.style.zIndex = 1000;
dom.cover.style.visibility = 'hidden';
dom.cover.style.opacity = 0;
// Silence unimportant errors in IE8
try {
dom.cover.style.background = 'rgba( 0, 0, 0, 0.4 )';
dom.cover.style.background = '-ms-linear-gradient('+ config.position +','+ config.gradient;
dom.cover.style.background = '-moz-linear-gradient('+ config.position +','+ config.gradient;
dom.cover.style.background = '-webkit-linear-gradient('+ config.position +','+ config.gradient;
}
catch( e ) {}
if( supports3DTransforms ) {
dom.cover.style[ Meny.prefix( 'transition' ) ] = 'all ' + config.transitionDuration +' '+ config.transitionEasing;
}
dom.contents.appendChild( dom.cover );
}
/**
* The meny element that folds out upon activation.
*/
function setupMenu() {
// Shorthand
var style = dom.menu.style;
switch( config.position ) {
case POSITION_T:
style.width = '100%';
style.height = config.height + 'px';
break;
case POSITION_R:
style.right = '0';
style.width = config.width + 'px';
style.height = '100%';
break;
case POSITION_B:
style.bottom = '0';
style.width = '100%';
style.height = config.height + 'px';
break;
case POSITION_L:
style.width = config.width + 'px';
style.height = '100%';
break;
}
originalStyles.menu = style.cssText;
style.position = 'fixed';
style.display = 'block';
style.zIndex = 1;
if( supports3DTransforms ) {
style[ Meny.prefix( 'transform' ) ] = menuTransformClosed;
style[ Meny.prefix( 'transformOrigin' ) ] = menuTransformOrigin;
style[ Meny.prefix( 'transition' ) ] = 'all ' + config.transitionDuration +' '+ config.transitionEasing;
}
else {
Meny.extend( style, menuStyleClosed );
}
}
/**
* The contents element which gets pushed aside while
* Meny is open.
*/
function setupContents() {
// Shorthand
var style = dom.contents.style;
originalStyles.contents = style.cssText;
if( supports3DTransforms ) {
style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
style[ Meny.prefix( 'transformOrigin' ) ] = contentsTransformOrigin;
style[ Meny.prefix( 'transition' ) ] = 'all ' + config.transitionDuration +' '+ config.transitionEasing;
}
else {
style.position = style.position.match( /relative|absolute|fixed/gi ) ? style.position : 'relative';
Meny.extend( style, contentsStyleClosed );
}
}
/**
* Attaches all input event listeners.
*/
function bindEvents() {
if( 'ontouchstart' in window ) {
if( config.touch ) {
Meny.bindEvent( document, 'touchstart', onTouchStart );
Meny.bindEvent( document, 'touchend', onTouchEnd );
}
else {
Meny.unbindEvent( document, 'touchstart', onTouchStart );
Meny.unbindEvent( document, 'touchend', onTouchEnd );
}
}
if( config.mouse ) {
Meny.bindEvent( document, 'mousedown', onMouseDown );
Meny.bindEvent( document, 'mouseup', onMouseUp );
Meny.bindEvent( document, 'mousemove', onMouseMove );
}
else {
Meny.unbindEvent( document, 'mousedown', onMouseDown );
Meny.unbindEvent( document, 'mouseup', onMouseUp );
Meny.unbindEvent( document, 'mousemove', onMouseMove );
}
}
/**
* Expands the menu.
*/
function open() {
if( !isOpen ) {
isOpen = true;
Meny.addClass( dom.wrapper, 'meny-active' );
dom.cover.style.height = dom.contents.scrollHeight + 'px';
dom.cover.style.visibility = 'visible';
// Use transforms and transitions if available...
if( supports3DTransforms ) {
// 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
Meny.dispatchEvent( dom.menu, 'opened' );
} );
dom.cover.style.opacity = 1;
dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformOpened;
dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformOpened;
}
// ...fall back on JS animation
else {
menuAnimation && menuAnimation.stop();
menuAnimation = Meny.animate( dom.menu, menuStyleOpened, 500 );
contentsAnimation && contentsAnimation.stop();
contentsAnimation = Meny.animate( dom.contents, contentsStyleOpened, 500 );
coverAnimation && coverAnimation.stop();
coverAnimation = Meny.animate( dom.cover, { opacity: 1 }, 500 );
}
Meny.dispatchEvent( dom.menu, 'open' );
}
}
/**
* Collapses the menu.
*/
function close() {
if( isOpen ) {
isOpen = false;
Meny.removeClass( dom.wrapper, 'meny-active' );
// Use transforms and transitions if available...
if( supports3DTransforms ) {
// 'webkitAnimationEnd oanimationend msAnimationEnd animationend transitionend'
Meny.bindEventOnce( dom.wrapper, 'transitionend', function() {
Meny.dispatchEvent( dom.menu, 'closed' );
} );
dom.cover.style.visibility = 'hidden';
dom.cover.style.opacity = 0;
dom.contents.style[ Meny.prefix( 'transform' ) ] = contentsTransformClosed;
dom.menu.style[ Meny.prefix( 'transform' ) ] = menuTransformClosed;
}
// ...fall back on JS animation
else {
menuAnimation && menuAnimation.stop();
menuAnimation = Meny.animate( dom.menu, menuStyleClosed, 500 );
contentsAnimation && contentsAnimation.stop();
contentsAnimation = Meny.animate( dom.contents, contentsStyleClosed, 500 );
coverAnimation && coverAnimation.stop();
coverAnimation = Meny.animate( dom.cover, { opacity: 0 }, 500, function() {
dom.cover.style.visibility = 'hidden';
Meny.dispatchEvent( dom.menu, 'closed' );
} );
}
Meny.dispatchEvent( dom.menu, 'close' );
}
}
/**
* Unbinds Meny and resets the DOM to the state it
* was at before Meny was initialized.
*/
function destroy() {
dom.wrapper.style.cssText = originalStyles.wrapper
dom.menu.style.cssText = originalStyles.menu;
dom.contents.style.cssText = originalStyles.contents;
if( dom.cover && dom.cover.parentNode ) {
dom.cover.parentNode.removeChild( dom.cover );
}
Meny.unbindEvent( document, 'touchstart', onTouchStart );
Meny.unbindEvent( document, 'touchend', onTouchEnd );
Meny.unbindEvent( document, 'mousedown', onMouseDown );
Meny.unbindEvent( document, 'mouseup', onMouseUp );
Meny.unbindEvent( document, 'mousemove', onMouseMove );
for( var i in addedEventListeners ) {
this.removeEventListener( addedEventListeners[i][0], addedEventListeners[i][1] );
}
addedEventListeners = [];
}
/// INPUT: /////////////////////////////////
function onMouseDown( event ) {
isMouseDown = true;
}
function onMouseMove( event ) {
// Prevent opening/closing when mouse is down since
// the user may be selecting text
if( !isMouseDown ) {
var x = event.clientX - indentX,
y = event.clientY - indentY;
switch( config.position ) {
case POSITION_T:
if( y > config.height ) {
close();
}
else if( y < config.threshold ) {
open();
}
break;
case POSITION_R:
var w = dom.wrapper.offsetWidth;
if( x < w - config.width ) {
close();
}
else if( x > w - config.threshold ) {
open();
}
break;
case POSITION_B:
var h = dom.wrapper.offsetHeight;
if( y < h - config.height ) {
close();
}
else if( y > h - config.threshold ) {
open();
}
break;
case POSITION_L:
if( x > config.width ) {
close();
}
else if( x < config.threshold ) {
open();
}
break;
}
}
}
function onMouseUp( event ) {
isMouseDown = false;
}
function onTouchStart( event ) {
touchStartX = event.touches[0].clientX - indentX;
touchStartY = event.touches[0].clientY - indentY;
touchMoveX = null;
touchMoveY = null;
Meny.bindEvent( document, 'touchmove', onTouchMove );
}
function onTouchMove( event ) {
touchMoveX = event.touches[0].clientX - indentX;
touchMoveY = event.touches[0].clientY - indentY;
var swipeMethod = null;
// Check for swipe gestures in any direction
if( Math.abs( touchMoveX - touchStartX ) > Math.abs( touchMoveY - touchStartY ) ) {
if( touchMoveX < touchStartX - config.threshold ) {
swipeMethod = onSwipeRight;
}
else if( touchMoveX > touchStartX + config.threshold ) {
swipeMethod = onSwipeLeft;
}
}
else {
if( touchMoveY < touchStartY - config.threshold ) {
swipeMethod = onSwipeDown;
}
else if( touchMoveY > touchStartY + config.threshold ) {
swipeMethod = onSwipeUp;
}
}
if( swipeMethod && swipeMethod() ) {
event.preventDefault();
}
}
function onTouchEnd( event ) {
Meny.unbindEvent( document, 'touchmove', onTouchMove );
// If there was no movement this was a tap
if( touchMoveX === null && touchMoveY === null ) {
onTap();
}
}
function onTap() {
var isOverContent = ( config.position === POSITION_T && touchStartY > config.height ) ||
( config.position === POSITION_R && touchStartX < dom.wrapper.offsetWidth - config.width ) ||
( config.position === POSITION_B && touchStartY < dom.wrapper.offsetHeight - config.height ) ||
( config.position === POSITION_L && touchStartX > config.width );
if( isOverContent ) {
close();
}
}
function onSwipeLeft() {
if( config.position === POSITION_R && isOpen ) {
close();
return true;
}
else if( config.position === POSITION_L && !isOpen ) {
open();
return true;
}
}
function onSwipeRight() {
if( config.position === POSITION_R && !isOpen ) {
open();
return true;
}
else if( config.position === POSITION_L && isOpen ) {
close();
return true;
}
}
function onSwipeUp() {
if( config.position === POSITION_B && isOpen ) {
close();
return true;
}
else if( config.position === POSITION_T && !isOpen ) {
open();
return true;
}
}
function onSwipeDown() {
if( config.position === POSITION_B && !isOpen ) {
open();
return true;
}
else if( config.position === POSITION_T && isOpen ) {
close();
return true;
}
}
/// API: ///////////////////////////////////
return {
configure: configure,
open: open,
close: close,
destroy: destroy,
isOpen: function() {
return isOpen;
},
/**
* Forward event binding to the menu DOM element.
*/
addEventListener: function( type, listener ) {
addedEventListeners.push( [type, listener] );
dom.menu && Meny.bindEvent( dom.menu, type, listener );
},
removeEventListener: function( type, listener ) {
dom.menu && Meny.unbindEvent( dom.menu, type, listener );
}
};
})();
},
/**
* Helper method, changes an element style over time.
*/
animate: function( element, properties, duration, callback ) {
return (function() {
// Will hold start/end values for all properties
var interpolations = {};
// Format properties
for( var p in properties ) {
interpolations[p] = {
start: parseFloat( element.style[p] ) || 0,
end: parseFloat( properties[p] ),
unit: ( typeof properties[p] === 'string' && properties[p].match( /px|em|%/gi ) ) ? properties[p].match( /px|em|%/gi )[0] : ''
};
}
var animationStartTime = Date.now(),
animationTimeout;
// Takes one step forward in the animation
function step() {
// Ease out
var progress = 1 - Math.pow( 1 - ( ( Date.now() - animationStartTime ) / duration ), 5 );
// Set style to interpolated value
for( var p in interpolations ) {
var property = interpolations[p];
element.style[p] = property.start + ( ( property.end - property.start ) * progress ) + property.unit;
}
// Continue as long as we're not done
if( progress < 1 ) {
animationTimeout = setTimeout( step, 1000 / 60 );
}
else {
callback && callback();
stop();
}
}
// Cancels the animation
function stop() {
clearTimeout( animationTimeout );
}
// Starts the animation
step();
/// API: ///////////////////////////////////
return {
stop: stop
};
})();
},
/**
* Extend object a with the properties of object b.
* If there's a conflict, object b takes precedence.
*/
extend: function( a, b ) {
for( var i in b ) {
a[ i ] = b[ i ];
}
},
/**
* Prefixes a style property with the correct vendor.
*/
prefix: function( property, el ) {
var propertyUC = property.slice( 0, 1 ).toUpperCase() + property.slice( 1 ),
vendors = [ 'Webkit', 'Moz', 'O', 'ms' ];
for( var i = 0, len = vendors.length; i < len; i++ ) {
var vendor = vendors[i];
if( typeof ( el || document.body ).style[ vendor + propertyUC ] !== 'undefined' ) {
return vendor + propertyUC;
}
}
return property;
},
/**
* Adds a class to the target element.
*/
addClass: function( element, name ) {
element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
},
/**
* Removes a class from the target element.
*/
removeClass: function( element, name ) {
element.className = element.className.replace( name, '' );
},
/**
* Adds an event listener in a browser safe way.
*/
bindEvent: function( element, ev, fn ) {
if( element.addEventListener ) {
element.addEventListener( ev, fn, false );
}
else {
element.attachEvent( 'on' + ev, fn );
}
},
/**
* Removes an event listener in a browser safe way.
*/
unbindEvent: function( element, ev, fn ) {
if( element.removeEventListener ) {
element.removeEventListener( ev, fn, false );
}
else {
element.detachEvent( 'on' + ev, fn );
}
},
bindEventOnce: function ( element, ev, fn ) {
var me = this;
var listener = function() {
me.unbindEvent( element, ev, listener );
fn.apply( this, arguments );
};
this.bindEvent( element, ev, listener );
},
/**
* Dispatches an event of the specified type from the
* menu DOM element.
*/
dispatchEvent: function( element, type, properties ) {
if( element ) {
var event = document.createEvent( "HTMLEvents", 1, 2 );
event.initEvent( type, true, true );
Meny.extend( event, properties );
element.dispatchEvent( event );
}
},
/**
* Retrieves query string as a key/value hash.
*/
getQuery: function() {
var query = {};
location.search.replace( /[A-Z0-9]+?=([\w|:|\/\.]*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
return query;
}
};
return Meny;
}));