mdbottomsheet disable drag down to close

Question

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.

Answer 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.

Answer 2

First, inject $element into your controller. You known what AngularJS $element do, right?

Then we both known that the drag events are registered in BottomSheet

parent.on('$md.dragstart', onDragStart)
    .on('$md.drag', onDrag)
    .on('$md.dragend', onDragEnd);

So, the simple solution is: Remove those events, override those events... without override the function BottomSheet, right?

            $element
            .on('$md.dragstart', function (ev) {
                return false;
            })
            .on('$md.drag', function (ev) {
                return false;
            })
            .on('$md.dragend', function (ev) {
                return false;
            });

Something still wrong here! The backdrop still draggable! So, we do the same for backdrop

var parent = $element.parent();
var backdrop = parent.find('md-backdrop');
backdrop
                .on(blah blah blah

These is code in case you are asking for

Answer 3

You can try

$mdBottomSheet.show({
                      template: *yourTemplate*,
                      clickOutsideToClose:false
                   })

this will not let the user close the bottom sheet even with drag or click outside.