jakiestfu / Snap.js

A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
http://jakiestfu.github.io/Snap.js/
5.99k stars 663 forks source link

small swipe improvement #152

Closed ohmycode closed 10 years ago

ohmycode commented 10 years ago

Hi Jacob, really great tool you're sharing here :+1: I just felt the need to snap the panel after a fast swipe, to make it feel more natural.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />

        <script src="hammer.js"></script>
        <style>
            #content {
                width: 500px;
                margin-left: 291px;
            }

            #panel-left {
                width:300px;
                height: 100%;
                background: red;
            }
        </style>

    </head>
    <body>
        <div id="panel-left"></div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('panel-left'),
                hyperextensible: false,
                tapToClose: false,
                maxPosition: 0,
                minPosition: -200,
            });

            var lastPosition = { x : 0, y :0 };
            var panelDrag = Hammer(document.getElementById('panel-left'), {
              drag_lock_to_axis: true
            });

            panelDrag.on("dragend", function(e) {
                e.preventDefault();

                if (lastPosition.x > e.gesture.deltaX) {

                    if (e.gesture.velocityX > 0.1) {
                        setTimeout(function(){
                            snapper.expand('right');
                        },10);
                        console.log("go");
                    }

                } else if(lastPosition.x < e.gesture.deltaX) {

                    if (e.gesture.velocityX > 0.1) {
                        setTimeout(function(){
                            snapper.expand('left');
                        },10);
                    }
                }
            });
        </script>
    </body>
</html>

I used hammer.js to get the swipe velocity.

This looks a bit hackish, so it would be great to see this implemented the "right" way in Snap.js some day!

jakiestfu commented 10 years ago

I will be looking into adding velocity support for the v2.0 version of Snap.js without the use of Hammer.js, thanks!