Close modals on browser back

This commit is contained in:
Freeplay 2023-05-17 12:34:45 -04:00
parent 1e0d38dc55
commit 49acbd10ae
2 changed files with 32 additions and 2 deletions

View File

@ -108,6 +108,7 @@ onMounted(() => {
},
imageClickAction: "close",
tapAction: "toggle-controls",
preloadFirstSlide: false,
pswpModule: PhotoSwipe,
});
@ -162,7 +163,22 @@ onMounted(() => {
});
});
lightbox.on("afterInit", () => {
history.pushState(null, "", location.href);
addEventListener("popstate", close);
})
lightbox.on("close", () => {
removeEventListener("popstate", close);
history.back();
})
lightbox.init();
function close() {
removeEventListener("popstate", close);
history.forward();
lightbox.pswp.close();
}
});
const previewable = (file: misskey.entities.DriveFile): boolean => {

View File

@ -74,7 +74,7 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, watch, provide } from "vue";
import { nextTick, onMounted, watch, provide, onUnmounted } from "vue";
import * as os from "@/os";
import { isTouchUsing } from "@/scripts/touch";
import { defaultStore } from "@/store";
@ -176,7 +176,11 @@ let transitionDuration = $computed(() =>
let contentClicking = false;
const focusedElement = document.activeElement;
function close(opts: { useSendAnimation?: boolean } = {}) {
function close(ev, opts: { useSendAnimation?: boolean } = {}) {
removeEventListener("popstate", close);
if (props.preferType == "dialog") {
history.forward();
}
if (opts.useSendAnimation) {
useSendAnime = true;
}
@ -354,6 +358,10 @@ const onOpened = () => {
},
{ passive: true }
);
if (props.preferType == "dialog") {
history.pushState(null, "", location.href);
}
addEventListener("popstate", close);
};
onMounted(() => {
@ -379,6 +387,12 @@ onMounted(() => {
}).observe(content!);
});
});
onUnmounted(() => {
removeEventListener("popstate", close);
if (props.preferType == "dialog") {
history.back();
}
});
defineExpose({
close,