diff --git a/README.md b/README.md index 7aa3475..db7af50 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,9 @@ var meny = Meny.create({ // Transition style for menu animations transitionEasing: 'ease', + // Gradient overlay for the contents + gradient: 'rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%)', + // Use mouse movement to automatically open/close mouse: true, diff --git a/js/meny.js b/js/meny.js index fe7ece3..c21d8cd 100644 --- a/js/meny.js +++ b/js/meny.js @@ -58,6 +58,7 @@ var Meny = { 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 }; @@ -229,9 +230,9 @@ var Meny = { // 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 +', rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)'; - dom.cover.style.background = '-moz-linear-gradient('+ config.position +', rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)'; - dom.cover.style.background = '-webkit-linear-gradient('+ config.position +', rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)'; + 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 ) {} diff --git a/js/meny.min.js b/js/meny.min.js deleted file mode 100644 index 715855f..0000000 --- a/js/meny.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/*! - * meny 1.4 - * http://lab.hakim.se/meny - * MIT licensed - * - * Created by Hakim El Hattab (http://hakim.se, @hakimel) - */ -(function(e,t){if(typeof define==="function"&&define.amd){define(t)}else{e.Meny=t()}})(this,function(){if(typeof Date.now!=="function")Date.now=function(){return(new Date).getTime()};var e={create:function(t){return function(){function _(t){e.extend(u,t);D();P();H();B();j();F()}function D(){b="";x="";menuAngle=u.angle;contentsAngle=u.angle/-2;switch(u.position){case n:g="50% 0%";y="rotateX( "+menuAngle+"deg ) translateY( -100% ) translateY( "+u.overlap+"px )";S="50% 0";T="translateY( "+u.height+"px ) rotateX( "+contentsAngle+"deg )";w={top:"-"+(u.height-u.overlap)+"px"};E={top:"0px"};N={top:"0px"};C={top:u.height+"px"};break;case r:g="100% 50%";y="rotateY( "+menuAngle+"deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";S="100% 50%";T="translateX( -"+u.width+"px ) rotateY( "+contentsAngle+"deg )";w={right:"-"+(u.width-u.overlap)+"px"};E={right:"0px"};N={left:"0px"};C={left:"-"+u.width+"px"};break;case i:g="50% 100%";y="rotateX( "+ -menuAngle+"deg ) translateY( 100% ) translateY( -"+u.overlap+"px )";S="50% 100%";T="translateY( -"+u.height+"px ) rotateX( "+ -contentsAngle+"deg )";w={bottom:"-"+(u.height-u.overlap)+"px"};E={bottom:"0px"};N={top:"0px"};C={top:"-"+u.height+"px"};break;default:g="100% 50%";y="translateX( -100% ) translateX( "+u.overlap+"px ) scale( 1.01 ) rotateY( "+ -menuAngle+"deg )";S="0 50%";T="translateX( "+u.width+"px ) rotateY( "+ -contentsAngle+"deg )";w={left:"-"+(u.width-u.overlap)+"px"};E={left:"0px"};N={left:"0px"};C={left:u.width+"px"};break}}function P(){e.addClass(a.wrapper,"meny-"+u.position);k.wrapper=a.wrapper.style.cssText;a.wrapper.style[e.prefix("perspective")]="800px";a.wrapper.style[e.prefix("perspectiveOrigin")]=S}function H(){if(a.cover){a.cover.parentNode.removeChild(a.cover)}a.cover=document.createElement("div");a.cover.style.position="absolute";a.cover.style.display="block";a.cover.style.width="100%";a.cover.style.height="100%";a.cover.style.left=0;a.cover.style.top=0;a.cover.style.zIndex=1e3;a.cover.style.visibility="hidden";a.cover.style.opacity=0;try{a.cover.style.background="rgba( 0, 0, 0, 0.4 )";a.cover.style.background="-ms-linear-gradient("+u.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";a.cover.style.background="-moz-linear-gradient("+u.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";a.cover.style.background="-webkit-linear-gradient("+u.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)"}catch(t){}if(o){a.cover.style[e.prefix("transition")]="all "+u.transitionDuration+" "+u.transitionEasing}a.contents.appendChild(a.cover)}function B(){var t=a.menu.style;switch(u.position){case n:t.width="100%";t.height=u.height+"px";break;case r:t.right="0";t.width=u.width+"px";t.height="100%";break;case i:t.bottom="0";t.width="100%";t.height=u.height+"px";break;case s:t.width=u.width+"px";t.height="100%";break}k.menu=t.cssText;t.position="fixed";t.display="block";t.zIndex=1;if(o){t[e.prefix("transform")]=y;t[e.prefix("transformOrigin")]=g;t[e.prefix("transition")]="all "+u.transitionDuration+" "+u.transitionEasing}else{e.extend(t,w)}}function j(){var t=a.contents.style;k.contents=t.cssText;if(o){t[e.prefix("transform")]=x;t[e.prefix("transformOrigin")]=S;t[e.prefix("transition")]="all "+u.transitionDuration+" "+u.transitionEasing}else{t.position=t.position.match(/relative|absolute|fixed/gi)?t.position:"relative";e.extend(t,N)}}function F(){if("ontouchstart"in window){if(u.touch){e.bindEvent(document,"touchstart",X);e.bindEvent(document,"touchend",$)}else{e.unbindEvent(document,"touchstart",X);e.unbindEvent(document,"touchend",$)}}if(u.mouse){e.bindEvent(document,"mousedown",U);e.bindEvent(document,"mouseup",W);e.bindEvent(document,"mousemove",z)}else{e.unbindEvent(document,"mousedown",U);e.unbindEvent(document,"mouseup",W);e.unbindEvent(document,"mousemove",z)}}function I(){if(!v){v=true;e.addClass(a.wrapper,"meny-active");a.cover.style.height=a.contents.scrollHeight+"px";a.cover.style.visibility="visible";if(o){e.bindEventOnce(a.wrapper,"transitionend",function(){e.dispatchEvent(a.menu,"opened")});a.cover.style.opacity=1;a.contents.style[e.prefix("transform")]=T;a.menu.style[e.prefix("transform")]=b}else{A&&A.stop();A=e.animate(a.menu,E,500);O&&O.stop();O=e.animate(a.contents,C,500);M&&M.stop();M=e.animate(a.cover,{opacity:1},500)}e.dispatchEvent(a.menu,"open")}}function q(){if(v){v=false;e.removeClass(a.wrapper,"meny-active");if(o){e.bindEventOnce(a.wrapper,"transitionend",function(){e.dispatchEvent(a.menu,"closed")});a.cover.style.visibility="hidden";a.cover.style.opacity=0;a.contents.style[e.prefix("transform")]=x;a.menu.style[e.prefix("transform")]=y}else{A&&A.stop();A=e.animate(a.menu,w,500);O&&O.stop();O=e.animate(a.contents,N,500);M&&M.stop();M=e.animate(a.cover,{opacity:0},500,function(){a.cover.style.visibility="hidden";e.dispatchEvent(a.menu,"closed")})}e.dispatchEvent(a.menu,"close")}}function R(){a.wrapper.style.cssText=k.wrapper;a.menu.style.cssText=k.menu;a.contents.style.cssText=k.contents;if(a.cover&&a.cover.parentNode){a.cover.parentNode.removeChild(a.cover)}e.unbindEvent(document,"touchstart",X);e.unbindEvent(document,"touchend",$);e.unbindEvent(document,"mousedown",U);e.unbindEvent(document,"mouseup",W);e.unbindEvent(document,"mousemove",z);for(var t in L){this.removeEventListener(L[t][0],L[t][1])}L=[]}function U(e){m=true}function z(e){if(!m){var t=e.clientX-f,o=e.clientY-l;switch(u.position){case n:if(o>u.height){q()}else if(oc-u.threshold){I()}break;case i:var h=a.wrapper.offsetHeight;if(oh-u.threshold){I()}break;case s:if(t>u.width){q()}else if(tMath.abs(d-h)){if(pc+u.threshold){t=K}}else{if(dh+u.threshold){t=G}}if(t&&t()){e.preventDefault()}}function $(t){e.unbindEvent(document,"touchmove",V);if(p===null&&d===null){J()}}function J(){var e=u.position===n&&h>u.height||u.position===r&&cu.width;if(e){q()}}function K(){if(u.position===r&&v){q();return true}else if(u.position===s&&!v){I();return true}}function Q(){if(u.position===r&&!v){I();return true}else if(u.position===s&&v){q();return true}}function G(){if(u.position===i&&v){q();return true}else if(u.position===n&&!v){I();return true}}function Y(){if(u.position===i&&!v){I();return true}else if(u.position===n&&v){q();return true}}if(!t||!t.menuElement||!t.contentsElement){throw"You need to specify which menu and contents elements to use."}if(t.menuElement.parentNode!==t.contentsElement.parentNode){throw"The menu and contents elements must have the same parent."}var n="top",r="right",i="bottom",s="left";var o="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;var u={width:300,height:300,position:s,threshold:40,angle:30,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease",mouse:true,touch:true};var a={menu:t.menuElement,contents:t.contentsElement,wrapper:t.menuElement.parentNode,cover:null};var f=a.wrapper.offsetLeft,l=a.wrapper.offsetTop,c=null,h=null,p=null,d=null,v=false,m=false;var g,y,b,w,E,S,x,T,N,C;var k={},L=[];var A,O,M;_(t);return{configure:_,open:I,close:q,destroy:R,isOpen:function(){return v},addEventListener:function(t,n){L.push([t,n]);a.menu&&e.bindEvent(a.menu,t,n)},removeEventListener:function(t,n){a.menu&&e.unbindEvent(a.menu,t,n)}}}()},animate:function(e,t,n,r){return function(){function a(){var t=1-Math.pow(1-(Date.now()-o)/n,5);for(var s in i){var l=i[s];e.style[s]=l.start+(l.end-l.start)*t+l.unit}if(t<1){u=setTimeout(a,1e3/60)}else{r&&r();f()}}function f(){clearTimeout(u)}var i={};for(var s in t){i[s]={start:parseFloat(e.style[s])||0,end:parseFloat(t[s]),unit:typeof t[s]==="string"&&t[s].match(/px|em|%/gi)?t[s].match(/px|em|%/gi)[0]:""}}var o=Date.now(),u;a();return{stop:f}}()},extend:function(e,t){for(var n in t){e[n]=t[n]}},prefix:function(e,t){var n=e.slice(0,1).toUpperCase()+e.slice(1),r=["Webkit","Moz","O","ms"];for(var i=0,s=r.length;i