How to hide drawer upon user click
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" );
Related videos on Youtube
krato
Apparently, this user prefers to keep an air of mystery around them to produce lift.
Updated on June 22, 2022Comments
-
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 about 8 yearsPlease 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 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 about 8 yearssorry mate! Updated now :)
-
Sam almost 8 yearsAvailable in 1.1.3 now github.com/google/material-design-lite/blob/v1.1.3/…
-
Lancelot over 7 yearsDoes 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 almost 7 years@Lancelot I know it is a bit late, but I covered that in my answer below.
-
AndreaM16 over 6 yearsI get
MaterialLayout
undefined. Any idea? -
ofekp over 6 yearsFor"Material Kit - v1.1.1.0" your first suggestion work perfectly (no variation needed)
-
MikeiLL over 6 yearsThanks for letting me and others know.
-
DavidTaubmann over 4 yearsThis one has the problem that it now requires the interaction with the button or keyboard.