Tuesday, March 7, 2017

mdbottomsheet disable drag down to close

Leave a Comment

I would like to disable the drag down to close gesture of mdbottomsheet. I've found a work around on scripts but I'm not sure where to put the code. Thanks for the help.

1 Answers

Answers 1

As you say that angular-material doesn't provide any option to disable it, obviously you will have to make changes in its source code.

Now, you haven't mentioned whether you want to disable it at specific places or turn drag-down-to-close for bottomSheets everywhere.

1) In case of latter, it would be quite straightforward, as the only thing you need to do is remove the event listeners for drag events. If you use angular-material.js file, heres what you can do:

Find the function BottomSheet(element, parent). This function basically registers the drag events which close the sheet. We need make it not attach the listeners.

Reduce it to:

function BottomSheet(element, parent){    return {       element: element,       cleanup: angular.noop     }; } 

The cleanup function basically de-registers the listeners on drag event.This function is called when the scope of the bottomSheet is destroyed. To make minimal changes, we have just reduced the cleanup function to do nothing.

2) If you want to be able to pass an option while creating the sheet in your controller, you do the same thing, but conditionally based on the option you pass. Wont write the code because I assume you know how angular works, but here are the steps:

=> Add a boolean variable along with other options(template,scope,etc. ). Lets call it dragDownToClose.

=> In the defaults injector function inside the provider function of MdbottomSheet , assign it a default value (true/false).

=>Pass this along with element and parent during instantiation of BottomSheet() inside the onShow function.

=> So BottomSheet() will now have three argument - dragDownToClose being the new one.

=> As we did in the former case, return the element without any handler attached when the value is false, and let the original function be when its true.

Of-course there are various ways in which you can actually implement this. However, I hope you get the idea.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment