frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
635 stars 25 forks source link

[Off Canvas] Closing feature #111

Closed acespace90 closed 5 years ago

acespace90 commented 5 years ago

Is it possible to disable the closing when you click outside the off canvas. I want the only way to close the component is when you press on the close button. Thanks.

adamduncan commented 5 years ago

Hey @acespace90, it's not currently possible, although adding an option in the API might be a nice way of achieving this. preventClickOutside or preventDocumentClick 🤔 as a boolean, false by default? What do you think?

acespace90 commented 5 years ago

It would be great.

adamduncan commented 5 years ago

Cool. How does this look #112?

acespace90 commented 5 years ago

Thank you @adamduncan

adamduncan commented 5 years ago

No problem, @acespace90. That's out in Offcanvas 1.1.0 and docs. Enjoy

acespace90 commented 5 years ago

@adamduncan It doesn't seem to work.

See this codepen: https://codepen.io/acespace90/pen/daBWeY

Moreover the transition for opening and closing doesn't work. What am I wrong?

adamduncan commented 5 years ago

@acespace90, you're correct. I neglected to publish the distribution script as part of v1.1.0 🤦‍♂️ It's been a while since we've done the publish dance on this project...

Have patched the fix through in v1.1.1, which now properly includes preventClickOutside.

Here's a forked version of your Pen, with the option set (remember this is done during Froffcanvas() construction, not as part of the init() method) and the necessary CSS for a open/close transition (we consider this a user-/project-specific feature, so don't include these declarations as part of the base offcanvas.css).

Cheers for your patience