Drawer add a class on event
Hi Keenthemes,
I wanted to create an event for every (all) Drawer in my app (I got 21 drawers : 11 on the Right and 10 on the left ).
On every show event of the drawer I want to add a class "shadow-lg" to the fired drawer and remove the "shadow-lg" after the current drawer closes.
Now you could say, why you want to complicate things ... why not add manually on every Drawer to its class "shadow-lg" for every drawer out there ??? good question...
But when I do so... It create a huuuuuge dark shadow on the edge of each side of the screen (The right one and the left one), because for example imagine every Drawer on the right has it own shadow-lg, so the shadow add up for 10 times, wich create a really anoying visible shadow on the side of the screen even if there's no drawer visible (shown ) yet until now....
That's why I want to select every Drawer out there by attribute "data-kt-drawer" and on drawer event show, I add "shadow-lg" to this drawer, and if it closes I remove "shadow-lg" from it.
Thank you soo much guys for the support, I have been struglling with that, I appreciate in advance all your time and effort.
Thank you
Replies (3)
Hi 
,
Sure, you can try the below code:
// On document ready
KTUtil.onDOMContentLoaded(function() {
consts drawers = document.querySelectorAll("[data-kt-drawer="true"]");
[].forEach.call(drawers, function(drawer) {
let drawerObj = KTDrawer.getInstance(drawer);
drawerObj.on("kt.drawer.shown", function() {
drawer.classList.add("shadow-lg");
});
drawerObj.on("kt.drawer.hidden", function() {
drawer.classList.remove("shadow-lg");
});
});
});Regards.
Hi Sean,
Thank your for your quick reply, the code above didn't work,
I just edited the line : document.querySelectorAll("[data-kt-drawer='true']");
and after saw the doc, the line : kt.drawer.after.hidden
Here's the adjusted code :
// Add shadow to every Drawer on shown or hidden
// On document ready
KTUtil.onDOMContentLoaded(function() {
const drawers = document.querySelectorAll("[data-kt-drawer="true"]");
//const drawers = document.querySelectorAll(".mahmoud");
[].forEach.call(drawers, function(drawer) {
let drawerObj = KTDrawer.getInstance(drawer);
drawerObj.on("kt.drawer.show", function() {
drawer.classList.add("shadow-lg");
});
//hidden
drawerObj.on("kt.drawer.after.hidden", function() {
drawer.classList.remove("shadow-lg");
});
});
});Thank you sooooooooooo much now it is working like a charm.
You rock.
Hi ,
Great correction. Glad to hear that. All the best with your project.
If you need any further help please let us know.
Regards
