How to hide drawer upon user click

13,600

Solution 1

I believe you can remove the is-visible class from .mdl-layout__drawer. I tried modifying a codepen example from their site: demo. My pure javascript event binding is rusty, but as I mentioned, you just need to remove the .is-visible class from the drawer.

Update

The code I provided was for v1.0.0 of mdl and is not actual anymore. Starting at v1.1.0 there is a public API provided for toggling the drawer, as described in Benjamin's answer. If you're between v1.0.6 and v1.1.0, have a look at idleherb's answer.

Solution 2

toggleDrawer is now a public function since @be54f78.

var layout = document.querySelector('.mdl-layout');
layout.MaterialLayout.toggleDrawer();

Not currently available with v1.0.6, so you will need to build from source (as of today).

Solution 3

Based on GitHub discourse, I have a couple of working solutions to the (hopefully soon to be resolved) issue of having a MDL drawer close when link is clicked. At the moment I'm using:

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}

document.querySelector('.mdl-layout__drawer').addEventListener('click', close);

Other variations are:

1.

document.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  document.querySelector('.mdl-layout__obfuscator').classList.remove('is-visible');
  this.classList.remove('is-visible');
}, false);

2.

function close() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

Someone in the discussion mentioned the idea of targeting the querySelector so as not to require looking through the entire document and I came up with the following two variations:

3.

var drawer_container = document.getElementsByClassName('mdl-layout')[0]; 
# no IDs in the html code.
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
  var obfuscator = document.querySelector('.mdl-layout__obfuscator');
  if (obfuscator.classList.contains('is-visible')) {
    obfuscator.classList.remove('is-visible');
    this.classList.remove('is-visible');
  }
}, false);

4.

function close() {
  var d = document.getElementsByClassName('mdl-layout__container')[0].querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}
var drawer_container = document.getElementsByClassName('mdl-layout')[0];
drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');

In both of my versions the browser has to run document.getElementsByClassName as well as a targeted querySelector call.

In my first version there is also the check: classList.contains('is-visible') which someone had recommended, but which seems unnecessary as, the function is being called from an item that is only visible if classList.contains('is-visible') is true.

I added the following calls to each of my variations (#3 and 4), within the functions:

console.time("anonymous");
console.timeEnd("anonymous");
console.time("close function");
console.timeEnd("close function");

And the one with the if statement runs in .39ms. Without the if statement they both run in .19ms. But I'm also not measuring the getElementsByClassName and querySelector methods that, if I understand correctly, are running on page load.

When I ran console.time("first"); and console.timeEnd("first"); through the first, and to me, prettiest code, the time was 23ms.

Apparently ie8, which I want to support, doesn't support getElementsByClassName.

I'm hoping someone can provide and explain an optimal solution to this relatively simple problem.

Here's a CodePen (not mine).

Solution 4

For version 1.0.6, you have to remove the before mentioned class from two elements:

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );

Solution 5

I'm using this jquery command:

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );
Share:
13,600

Related videos on Youtube

krato
Author by

krato

Apparently, this user prefers to keep an air of mystery around them to produce lift.

Updated on June 22, 2022

Comments

  • krato
    krato almost 2 years

    How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

    <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">Title</span>
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect" id="clickme">
              <i class="material-icons">add</i>
            </button>
    </div>
    

    How do I do it that when the button is clicked, the drawer will be hidden as if I clicked outside of the drawer? I tried simulating a click event outside of the drawer but it still does not hide.

  • Magesh khanna
    Magesh khanna about 8 years
    Please check one of the other answers too. .mdl-layout__obfuscator need to be removed as well. I think that should be the accepted answer
  • jdepypere
    jdepypere about 8 years
    @Mageshkhanna obviously a lot has changed since July last year, but my code sample obviously works so I don't quite see why you would need to downvote this. My code works for version 1.0.0, the version that was active when the question was asked.
  • Magesh khanna
    Magesh khanna about 8 years
    sorry mate! Updated now :)
  • Sam
    Sam almost 8 years
  • Lancelot
    Lancelot over 7 years
    Does anyone know how to check if the drawer is opened or not. I don't want to trigger the toggleDrawer if the drawer is already close as it would then open it.
  • Stephen
    Stephen almost 7 years
    @Lancelot I know it is a bit late, but I covered that in my answer below.
  • AndreaM16
    AndreaM16 over 6 years
    I get MaterialLayout undefined. Any idea?
  • ofekp
    ofekp over 6 years
    For"Material Kit - v1.1.1.0" your first suggestion work perfectly (no variation needed)
  • MikeiLL
    MikeiLL over 6 years
    Thanks for letting me and others know.
  • DavidTaubmann
    DavidTaubmann over 4 years
    This one has the problem that it now requires the interaction with the button or keyboard.

Related