FoldseekDialog.vue

<script setup lang="ts">

interface Props {
    foldseekPath: string
    title: string
}

const props = withDefaults(defineProps<Props>(), { title: "Result of Foldseek search" });
const { width, height } = useDisplay()
const dialog = ref(false)
const iframe = ref()
const layout = ref({
    scrollbarWidth: 15,
    paddingLeft: 24,
    paddingRight: 24,
    toolbarHeight: 48,
    containerPaddingTop: 16,
    containerPaddingBottom: 10


})

const xMargin = computed(() => {
    const toValLayout = toValue(layout)
    return toValLayout.scrollbarWidth + toValLayout.paddingLeft + toValLayout.paddingRight
})

const yMargin = computed(() => {
    const toValLayout = toValue(layout)
    return toValLayout.toolbarHeight + toValLayout.containerPaddingBottom + toValLayout.containerPaddingTop
})

const computedWidth = computed(() => {
    return toValue(width) - toValue(xMargin)
})
const computedHeight = computed(() => {
    return toValue(height) - toValue(yMargin)
})


function fullscreen() {
    console.log(iframe.value)
    iframe.value.requestFullscreen();
}



</script>
<template>
    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition">
        <template v-slot:activator="{ props }">
            <v-avatar>
                <v-img src="~/assets/foldseek.png" alt="Foldseek results" v-bind="props" class="cursor-pointer"></v-img>
                <!-- <v-btn color="primary" dark v-bind="props">
                <v-img src="~/assets/foldseek.png" alt="Foldseek results"></v-img>
            </v-btn> -->
            </v-avatar>
        </template>
        <v-card variant="flat">
            <v-toolbar flat color="transparent" density="compact">
                <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-left" @click="dialog = false">
                    Return to structure list
                </v-btn>

                <v-divider vertical inset></v-divider>
                <v-toolbar-title> {{ props.title }}</v-toolbar-title>
                <v-spacer></v-spacer>
                <v-toolbar-items>
                    <v-btn @click="fullscreen()" icon="md:fullscreen"></v-btn>

                </v-toolbar-items>
            </v-toolbar>
            <v-card-text>
                <iframe ref="iframe" :width="computedWidth" :height="computedHeight" allow="fullscreen" loading="eager"
                    :src="props.foldseekPath"></iframe>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>
<style scoped>
.cursor-pointer {
    cursor: pointer
}
</style>