Search code examples
javascriptjqueryswipe-gesturematerial-design-lite

Open navigation drawer on swipe (Material Design Lite)


I'm using Material Design Lite to create a UI for an app in a web view however I have come across a problem where I can't deploy the navigation drawer on swipe.

I am using this jquery code to recognise the swipe event

  $(function() {      
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(this).text("Event Triggered" );  
        },
      });
    });

From here I'm not sure how to open up the navigation drawer. I would prefer to have the entire screen "swipeable" especially the left edge. How can I go about opening the navigation bar when this swipe handler is triggered?


Solution

  • I was trying to add this effect in the demo material design lite, http://www.getmdl.io/templates/dashboard/index.html. So the solution I found was to simulate the click event of the hamburger button, through the class "mdl-layout__drawer-button" that is generated by material design lite.

    $(function() {      
        $("#test").swipe( {
            //Generic swipe handler for all directions
            swipeRight:function(event, direction, distance, duration, fingerCount) {
                $(".mdl-layout__drawer-button").click();                        
            },
        });
    });