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", imageClickAction: "close",
tapAction: "toggle-controls", tapAction: "toggle-controls",
preloadFirstSlide: false,
pswpModule: PhotoSwipe, 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(); lightbox.init();
function close() {
removeEventListener("popstate", close);
history.forward();
lightbox.pswp.close();
}
}); });
const previewable = (file: misskey.entities.DriveFile): boolean => { const previewable = (file: misskey.entities.DriveFile): boolean => {

View File

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