Sharkey/packages/frontend/src/components/MkModalPageWindow.vue

182 lines
4.1 KiB
Vue
Raw Normal View History

2021-04-11 15:09:35 +03:00
<template>
<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
2023-01-06 02:41:14 +02:00
<div ref="rootEl" class="hrmcaedk" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
2021-04-23 08:59:21 +03:00
<div class="header" @contextmenu="onContextmenu">
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
2021-10-08 18:46:52 +03:00
<span v-else style="display: inline-block; width: 20px"></span>
<span v-if="pageMetadata?.value" class="title">
<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
<span>{{ pageMetadata?.value.title }}</span>
2021-04-11 15:09:35 +03:00
</span>
<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
2021-04-11 15:09:35 +03:00
</div>
2022-12-28 11:02:11 +02:00
<div class="body" style="container-type: inline-size;">
2021-10-23 22:03:07 +03:00
<MkStickyContainer>
<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
<RouterView :router="router"/>
2021-10-23 22:03:07 +03:00
</MkStickyContainer>
2021-04-11 15:09:35 +03:00
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { ComputedRef, provide } from 'vue';
import MkModal from '@/components/MkModal.vue';
import { popout as _popout } from '@/scripts/popout';
2021-11-11 19:02:25 +02:00
import copyToClipboard from '@/scripts/copy-to-clipboard';
import { url } from '@/config';
import * as os from '@/os';
import { mainRouter, routes } from '@/router';
import { i18n } from '@/i18n';
import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
import { Router } from '@/nirax';
2021-04-11 15:09:35 +03:00
const props = defineProps<{
initialPath: string;
}>();
2021-04-11 15:09:35 +03:00
defineEmits<{
(ev: 'closed'): void;
(ev: 'click'): void;
}>();
2021-04-11 15:09:35 +03:00
const router = new Router(routes, props.initialPath);
2021-04-11 15:09:35 +03:00
router.addListener('push', ctx => {
});
2021-04-11 15:09:35 +03:00
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
let rootEl = $ref();
let modal = $shallowRef<InstanceType<typeof MkModal>>();
let path = $ref(props.initialPath);
let width = $ref(860);
let height = $ref(660);
const history = [];
provide('router', router);
provideMetadataReceiver((info) => {
pageMetadata = info;
});
provide('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true);
const pageUrl = $computed(() => url + path);
const contextmenu = $computed(() => {
return [{
type: 'label',
text: path,
}, {
2022-12-21 01:39:28 +02:00
icon: 'ti ti-player-eject',
text: i18n.ts.showInPage,
action: expand,
}, {
2022-12-20 03:52:39 +02:00
icon: 'ti ti-window-maximize',
text: i18n.ts.popout,
action: popout,
}, null, {
icon: 'ti ti-external-link',
text: i18n.ts.openInNewTab,
action: () => {
window.open(pageUrl, '_blank');
modal.close();
2021-04-11 15:09:35 +03:00
},
}, {
icon: 'ti ti-link',
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(pageUrl);
2021-04-11 15:09:35 +03:00
},
}];
});
2021-04-11 15:09:35 +03:00
function navigate(path, record = true) {
if (record) history.push(router.getCurrentPath());
router.push(path);
}
2021-04-11 15:09:35 +03:00
function back() {
navigate(history.pop(), false);
}
2021-04-23 08:59:21 +03:00
function expand() {
mainRouter.push(path);
modal.close();
}
function popout() {
_popout(path, rootEl);
modal.close();
}
function onContextmenu(ev: MouseEvent) {
os.contextMenu(contextmenu, ev);
}
2021-04-11 15:09:35 +03:00
</script>
<style lang="scss" scoped>
2021-04-11 15:09:35 +03:00
.hrmcaedk {
overflow: hidden;
display: flex;
flex-direction: column;
contain: content;
2022-06-26 13:41:21 +03:00
border-radius: var(--radius);
2021-04-11 15:09:35 +03:00
--root-margin: 24px;
@media (max-width: 500px) {
--root-margin: 16px;
}
> .header {
2021-04-13 19:41:49 +03:00
$height: 52px;
2021-04-11 15:09:35 +03:00
$height-narrow: 42px;
display: flex;
flex-shrink: 0;
2021-10-08 18:46:52 +03:00
height: $height;
line-height: $height;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2022-06-26 13:41:21 +03:00
background: var(--windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
2021-04-11 15:09:35 +03:00
2021-10-08 18:46:52 +03:00
> button {
2021-08-05 16:43:14 +03:00
height: $height;
2021-10-08 18:46:52 +03:00
width: $height;
&:hover {
color: var(--fgHighlighted);
}
}
@media (max-width: 500px) {
height: $height-narrow;
line-height: $height-narrow;
padding-left: 16px;
2021-04-11 15:09:35 +03:00
2021-10-08 18:46:52 +03:00
> button {
2021-08-05 16:43:14 +03:00
height: $height-narrow;
2021-10-08 18:46:52 +03:00
width: $height-narrow;
}
}
> .title {
flex: 1;
> .icon {
margin-right: 0.5em;
2021-04-11 15:09:35 +03:00
}
}
}
> .body {
overflow: auto;
background: var(--bg);
}
}
</style>