IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 11:48:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: correctly enable/disable body scroll on modal (#26784)

Browse Source
This commit is contained in:
Joffrey JAFFEUX 2024-04-29 08:45:48 +02:00 committed by GitHub
parent c1c823144b
commit 1510c6d004
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/assets/javascripts/discourse/app/components/d-modal.gjs
View File

@ -7,11 +7,15 @@ import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy"; import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { modifier as modifierFn } from "ember-modifier";
import { and, not, or } from "truth-helpers"; import { and, not, or } from "truth-helpers";
import ConditionalInElement from "discourse/components/conditional-in-element"; import ConditionalInElement from "discourse/components/conditional-in-element";
import DButton from "discourse/components/d-button"; import DButton from "discourse/components/d-button";
import concatClass from "discourse/helpers/concat-class"; import concatClass from "discourse/helpers/concat-class";
import { disableBodyScroll } from "discourse/lib/body-scroll-lock"; import {
disableBodyScroll,
enableBodyScroll,
} from "discourse/lib/body-scroll-lock";
import swipe from "discourse/modifiers/swipe"; import swipe from "discourse/modifiers/swipe";
import trapTab from "discourse/modifiers/trap-tab"; import trapTab from "discourse/modifiers/trap-tab";
import { bind } from "discourse-common/utils/decorators"; import { bind } from "discourse-common/utils/decorators";
@ -35,8 +39,20 @@ export default class DModal extends Component {
@tracked wrapperElement; @tracked wrapperElement;
@tracked animating = false; @tracked animating = false;
setupModalBody = modifierFn((element) => {
if (this.site.mobileView) {
disableBodyScroll(element);
}
return () => {
if (this.site.mobileView) {
enableBodyScroll(element);
}
};
});
@action @action
setupModal(element) { async setupModal(element) {
document.documentElement.addEventListener( document.documentElement.addEventListener(
"keydown", "keydown",
this.handleDocumentKeydown this.handleDocumentKeydown
@ -48,17 +64,18 @@ export default class DModal extends Component {
); );
if (this.site.mobileView) { if (this.site.mobileView) {
disableBodyScroll(element.querySelector(".d-modal__body"));
this.animating = true; this.animating = true;
element
.animate( await element.animate(
[{ transform: "translateY(100%)" }, { transform: "translateY(0)" }], [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
{ duration: ANIMATE_MODAL_DURATION, easing: "ease", fill: "forwards" } {
) duration: ANIMATE_MODAL_DURATION,
.finished.then(() => { easing: "ease",
fill: "forwards",
}
).finished;
this.animating = false; this.animating = false;
});
} }
this.wrapperElement = element; this.wrapperElement = element;
@ -375,7 +392,11 @@ export default class DModal extends Component {
</div> </div>
{{/if}} {{/if}}
<div class={{concatClass "d-modal__body" @bodyClass}} tabindex="-1"> <div
class={{concatClass "d-modal__body" @bodyClass}}
{{this.setupModalBody}}
tabindex="-1"
>
{{#if (has-block "body")}} {{#if (has-block "body")}}
{{yield to="body"}} {{yield to="body"}}
{{else}} {{else}}