Permalink
Browse files

tap-support (closes #1), update readme

  • Loading branch information...
1 parent 8e72708 commit 273f267dbb5c277e380500e18c168fb2db1753f2 @hakimel hakimel committed Aug 7, 2012
Showing with 60 additions and 22 deletions.
  1. +12 −2 README.md
  2. +1 −1 css/meny.css
  3. +2 −2 index.html
  4. +45 −17 js/meny.js
View
@@ -1,10 +1,20 @@
# Meny
-A UI experiment with a 3D fold-in menu. Requires a browser with support for CSS 3D transforms. Also works in Mobile Safari.
+A three dimensional and space effecient menu concept. Requires a browser with support for CSS 3D transforms. Works very well in Mobile Safari.
[Check out the demo page](http://lab.hakim.se/meny/).
-# License
+## History
+
+#### 0.2
+- Cleaned up CSS
+- Fix bug where original events for taps on anchors were blocked
+- It's now possible to reach the meny via tapping as well as swiping
+
+#### 0.1
+- Initial release
+
+## License
MIT licensed
View
@@ -1,5 +1,5 @@
/*!
- * meny 0.1
+ * meny 0.2
* http://lab.hakim.se/meny
* MIT licensed
*
View
@@ -50,10 +50,10 @@
Pass in a URL to test it with any page, like so: <a href="http://lab.hakim.se/meny/?http://hakim.se">lab.hakim.se/meny/?http://hakim.se.</a>
</p>
<p>
- This was created using CSS 3D transforms. JavaScript is used to track mouse/touch movement.
+ CSS 3D transforms are used for the transition effect and JavaScript is used to track mouse/touch movement.
</p>
<p>
- It's called Meny with a <em>y</em> since that's how it's spelled in swedish.
+ The name, <em>Meny</em>, is swedish.
</p>
<small>
Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
View
@@ -1,5 +1,5 @@
/*!
- * meny 0.1
+ * meny 0.2
* http://lab.hakim.se/meny
* MIT licensed
*
@@ -11,49 +11,77 @@
var activateX = 40,
deactivateX = meny.offsetWidth || 300,
- startTouchX = 0,
- isActive = false;
+ touchStartX = null,
+ touchMoveX = null,
+ isActive = false,
+ isMouseDown = false;
+ document.addEventListener( 'mousedown', onMouseDown, false );
+ document.addEventListener( 'mouseup', onMouseUp, false );
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'touchstart', onTouchStart, false );
+ document.addEventListener( 'touchend', onTouchEnd, false );
+
+ function onMouseDown( event ) {
+ isMouseDown = true;
+ }
function onMouseMove( event ) {
- var x = event.clientX,
- y = event.clientY;
+ // Prevent opening/closing when mouse is down since
+ // the user may be selecting text
+ if( !isMouseDown ) {
+ var x = event.clientX;
- if( isActive && x > deactivateX ) {
- deactivate();
- }
- else if( !isActive && x < activateX ) {
- activate();
+ if( x > deactivateX ) {
+ deactivate();
+ }
+ else if( x < activateX ) {
+ activate();
+ }
}
}
+ function onMouseUp( event ) {
+ isMouseDown = false;
+ }
+
function onTouchStart( event ) {
- lastTouchX = event.touches[0].clientX;
+ touchStartX = event.touches[0].clientX;
+ touchMoveX = null;
- if( isActive || lastTouchX < activateX ) {
+ if( isActive || touchStartX < activateX ) {
document.addEventListener( 'touchmove', onTouchMove, false );
- document.addEventListener( 'touchend', onTouchEnd, false );
}
}
function onTouchMove( event ) {
- var x = event.touches[0].clientX;
+ touchMoveX = event.touches[0].clientX;
- if( isActive && x < lastTouchX - activateX ) {
+ if( isActive && touchMoveX < touchStartX - activateX ) {
deactivate();
event.preventDefault();
}
- else if( !isActive && lastTouchX < activateX && x > lastTouchX + activateX ) {
+ else if( touchStartX < activateX && touchMoveX > touchStartX + activateX ) {
activate();
event.preventDefault();
}
}
function onTouchEnd( event ) {
document.addEventListener( 'touchmove', onTouchMove, false );
- document.addEventListener( 'touchend', onTouchEnd, false );
+
+ // If there was no movement this was a tap
+ if( touchMoveX === null ) {
+ // Hide the menu when tapping on the content area
+ if( touchStartX > deactivateX ) {
+ deactivate();
+ }
+ // Show the meny when tapping on the left edge
+ else if( touchStartX < activateX * 2 ) {
+ activate();
+ }
+ }
+
}
function activate() {

0 comments on commit 273f267

Please sign in to comment.