forked from FoundKeyGang/FoundKey
wip: refactor(client): migrate components to composition api
This commit is contained in:
parent
df61e173c1
commit
3e9677904d
4 changed files with 292 additions and 316 deletions
|
@ -2,7 +2,7 @@
|
||||||
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
|
<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
|
||||||
<div class="cwepdizn _formRoot">
|
<div class="cwepdizn _formRoot">
|
||||||
<FormFolder :default-open="true" class="_formBlock">
|
<FormFolder :default-open="true" class="_formBlock">
|
||||||
<template #label>{{ $ts.backgroundColor }}</template>
|
<template #label>{{ i18n.locale.backgroundColor }}</template>
|
||||||
<div class="cwepdizn-colors">
|
<div class="cwepdizn-colors">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
|
<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
|
|
||||||
<FormFolder :default-open="true" class="_formBlock">
|
<FormFolder :default-open="true" class="_formBlock">
|
||||||
<template #label>{{ $ts.accentColor }}</template>
|
<template #label>{{ i18n.locale.accentColor }}</template>
|
||||||
<div class="cwepdizn-colors">
|
<div class="cwepdizn-colors">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
|
<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
|
|
||||||
<FormFolder :default-open="true" class="_formBlock">
|
<FormFolder :default-open="true" class="_formBlock">
|
||||||
<template #label>{{ $ts.textColor }}</template>
|
<template #label>{{ i18n.locale.textColor }}</template>
|
||||||
<div class="cwepdizn-colors">
|
<div class="cwepdizn-colors">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
|
<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
|
||||||
|
@ -41,22 +41,22 @@
|
||||||
|
|
||||||
<FormFolder :default-open="false" class="_formBlock">
|
<FormFolder :default-open="false" class="_formBlock">
|
||||||
<template #icon><i class="fas fa-code"></i></template>
|
<template #icon><i class="fas fa-code"></i></template>
|
||||||
<template #label>{{ $ts.editCode }}</template>
|
<template #label>{{ i18n.locale.editCode }}</template>
|
||||||
|
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<FormTextarea v-model="themeCode" tall class="_formBlock">
|
<FormTextarea v-model="themeCode" tall class="_formBlock">
|
||||||
<template #label>{{ $ts._theme.code }}</template>
|
<template #label>{{ i18n.locale._theme.code }}</template>
|
||||||
</FormTextarea>
|
</FormTextarea>
|
||||||
<FormButton primary class="_formBlock" @click="applyThemeCode">{{ $ts.apply }}</FormButton>
|
<FormButton primary class="_formBlock" @click="applyThemeCode">{{ i18n.locale.apply }}</FormButton>
|
||||||
</div>
|
</div>
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
|
|
||||||
<FormFolder :default-open="false" class="_formBlock">
|
<FormFolder :default-open="false" class="_formBlock">
|
||||||
<template #label>{{ $ts.addDescription }}</template>
|
<template #label>{{ i18n.locale.addDescription }}</template>
|
||||||
|
|
||||||
<div class="_formRoot">
|
<div class="_formRoot">
|
||||||
<FormTextarea v-model="description">
|
<FormTextarea v-model="description">
|
||||||
<template #label>{{ $ts._theme.description }}</template>
|
<template #label>{{ i18n.locale._theme.description }}</template>
|
||||||
</FormTextarea>
|
</FormTextarea>
|
||||||
</div>
|
</div>
|
||||||
</FormFolder>
|
</FormFolder>
|
||||||
|
@ -64,8 +64,8 @@
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { watch } from 'vue';
|
||||||
import { toUnicode } from 'punycode/';
|
import { toUnicode } from 'punycode/';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import * as tinycolor from 'tinycolor2';
|
||||||
import { v4 as uuid} from 'uuid';
|
import { v4 as uuid} from 'uuid';
|
||||||
|
@ -78,48 +78,13 @@ import FormFolder from '@/components/form/folder.vue';
|
||||||
import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme';
|
import { Theme, applyTheme, darkTheme, lightTheme } from '@/scripts/theme';
|
||||||
import { host } from '@/config';
|
import { host } from '@/config';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { ColdDeviceStorage } from '@/store';
|
import { ColdDeviceStorage, defaultStore } from '@/store';
|
||||||
import { addTheme } from '@/theme-store';
|
import { addTheme } from '@/theme-store';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
import { useLeaveGuard } from '@/scripts/use-leave-guard';
|
||||||
|
|
||||||
export default defineComponent({
|
const bgColors = [
|
||||||
components: {
|
|
||||||
FormButton,
|
|
||||||
FormTextarea,
|
|
||||||
FormFolder,
|
|
||||||
},
|
|
||||||
|
|
||||||
async beforeRouteLeave(to, from) {
|
|
||||||
if (this.changed && !(await this.leaveConfirm())) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
[symbols.PAGE_INFO]: {
|
|
||||||
title: this.$ts.themeEditor,
|
|
||||||
icon: 'fas fa-palette',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
actions: [{
|
|
||||||
asFullButton: true,
|
|
||||||
icon: 'fas fa-eye',
|
|
||||||
text: this.$ts.preview,
|
|
||||||
handler: this.showPreview,
|
|
||||||
}, {
|
|
||||||
asFullButton: true,
|
|
||||||
icon: 'fas fa-check',
|
|
||||||
text: this.$ts.saveAs,
|
|
||||||
handler: this.saveAs,
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
theme: {
|
|
||||||
base: 'light',
|
|
||||||
props: lightTheme.props
|
|
||||||
} as Theme,
|
|
||||||
description: null,
|
|
||||||
themeCode: null,
|
|
||||||
bgColors: [
|
|
||||||
{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
|
{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
|
||||||
{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
|
{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
|
||||||
{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
|
{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
|
||||||
|
@ -136,9 +101,9 @@ export default defineComponent({
|
||||||
{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
|
{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
|
||||||
{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
|
{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
|
||||||
{ color: '#191919', kind: 'dark', forPreview: '#272727' },
|
{ color: '#191919', kind: 'dark', forPreview: '#272727' },
|
||||||
],
|
] as const;
|
||||||
accentColors: ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'],
|
const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
|
||||||
fgColors: [
|
const fgColors = [
|
||||||
{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
|
{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
|
||||||
{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
|
{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
|
||||||
{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
|
{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
|
||||||
|
@ -146,113 +111,114 @@ export default defineComponent({
|
||||||
{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
|
{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
|
||||||
{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
|
{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
|
||||||
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
|
{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
|
||||||
],
|
];
|
||||||
changed: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
const theme = $ref<Partial<Theme>>({
|
||||||
this.$watch('theme', this.apply, { deep: true });
|
base: 'light',
|
||||||
window.addEventListener('beforeunload', this.beforeunload);
|
props: lightTheme.props,
|
||||||
},
|
});
|
||||||
|
let description = $ref<string | null>(null);
|
||||||
|
let themeCode = $ref<string | null>(null);
|
||||||
|
let changed = $ref(false);
|
||||||
|
|
||||||
beforeUnmount() {
|
useLeaveGuard($$(changed));
|
||||||
window.removeEventListener('beforeunload', this.beforeunload);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
function showPreview() {
|
||||||
beforeunload(e: BeforeUnloadEvent) {
|
|
||||||
if (this.changed) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.returnValue = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async leaveConfirm(): Promise<boolean> {
|
|
||||||
const { canceled } = await os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
text: this.$ts.leaveConfirm,
|
|
||||||
});
|
|
||||||
return !canceled;
|
|
||||||
},
|
|
||||||
|
|
||||||
showPreview() {
|
|
||||||
os.pageWindow('preview');
|
os.pageWindow('preview');
|
||||||
},
|
}
|
||||||
|
|
||||||
setBgColor(color) {
|
function setBgColor(color: typeof bgColors[number]) {
|
||||||
if (this.theme.base != color.kind) {
|
if (theme.base != color.kind) {
|
||||||
const base = color.kind === 'dark' ? darkTheme : lightTheme;
|
const base = color.kind === 'dark' ? darkTheme : lightTheme;
|
||||||
for (const prop of Object.keys(base.props)) {
|
for (const prop of Object.keys(base.props)) {
|
||||||
if (prop === 'accent') continue;
|
if (prop === 'accent') continue;
|
||||||
if (prop === 'fg') continue;
|
if (prop === 'fg') continue;
|
||||||
this.theme.props[prop] = base.props[prop];
|
theme.props[prop] = base.props[prop];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.theme.base = color.kind;
|
theme.base = color.kind;
|
||||||
this.theme.props.bg = color.color;
|
theme.props.bg = color.color;
|
||||||
|
|
||||||
if (this.theme.props.fg) {
|
if (theme.props.fg) {
|
||||||
const matchedFgColor = this.fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(this.theme.props.fg).toRgbString()));
|
const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
|
||||||
if (matchedFgColor) this.setFgColor(matchedFgColor);
|
if (matchedFgColor) setFgColor(matchedFgColor);
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
|
|
||||||
setAccentColor(color) {
|
function setAccentColor(color) {
|
||||||
this.theme.props.accent = color;
|
theme.props.accent = color;
|
||||||
},
|
}
|
||||||
|
|
||||||
setFgColor(color) {
|
function setFgColor(color) {
|
||||||
this.theme.props.fg = this.theme.base === 'light' ? color.forLight : color.forDark;
|
theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
|
||||||
},
|
}
|
||||||
|
|
||||||
apply() {
|
function apply() {
|
||||||
this.themeCode = JSON5.stringify(this.theme, null, '\t');
|
themeCode = JSON5.stringify(theme, null, '\t');
|
||||||
applyTheme(this.theme, false);
|
applyTheme(theme, false);
|
||||||
this.changed = true;
|
changed = true;
|
||||||
},
|
}
|
||||||
|
|
||||||
applyThemeCode() {
|
function applyThemeCode() {
|
||||||
let parsed;
|
let parsed;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
parsed = JSON5.parse(this.themeCode);
|
parsed = JSON5.parse(themeCode);
|
||||||
} catch (e) {
|
} catch (err) {
|
||||||
os.alert({
|
os.alert({
|
||||||
type: 'error',
|
type: 'error',
|
||||||
text: this.$ts._theme.invalid
|
text: i18n.locale._theme.invalid,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.theme = parsed;
|
theme = parsed;
|
||||||
},
|
}
|
||||||
|
|
||||||
async saveAs() {
|
async function saveAs() {
|
||||||
const { canceled, result: name } = await os.inputText({
|
const { canceled, result: name } = await os.inputText({
|
||||||
title: this.$ts.name,
|
title: i18n.locale.name,
|
||||||
allowEmpty: false
|
allowEmpty: false,
|
||||||
});
|
});
|
||||||
if (canceled) return;
|
if (canceled) return;
|
||||||
|
|
||||||
this.theme.id = uuid();
|
theme.id = uuid();
|
||||||
this.theme.name = name;
|
theme.name = name;
|
||||||
this.theme.author = `@${this.$i.username}@${toUnicode(host)}`;
|
theme.author = `@${$i.username}@${toUnicode(host)}`;
|
||||||
if (this.description) this.theme.desc = this.description;
|
if (description) theme.desc = description;
|
||||||
addTheme(this.theme);
|
addTheme(theme);
|
||||||
applyTheme(this.theme);
|
applyTheme(theme);
|
||||||
if (this.$store.state.darkMode) {
|
if (defaultStore.state.darkMode) {
|
||||||
ColdDeviceStorage.set('darkTheme', this.theme);
|
ColdDeviceStorage.set('darkTheme', theme);
|
||||||
} else {
|
} else {
|
||||||
ColdDeviceStorage.set('lightTheme', this.theme);
|
ColdDeviceStorage.set('lightTheme', theme);
|
||||||
}
|
}
|
||||||
this.changed = false;
|
changed = false;
|
||||||
os.alert({
|
os.alert({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
text: this.$t('_theme.installed', { name: this.theme.name })
|
text: i18n.t('_theme.installed', { name: theme.name }),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
watch($$(theme), apply, { deep: true });
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
[symbols.PAGE_INFO]: {
|
||||||
|
title: i18n.locale.themeEditor,
|
||||||
|
icon: 'fas fa-palette',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-eye',
|
||||||
|
text: i18n.locale.preview,
|
||||||
|
handler: showPreview,
|
||||||
|
}, {
|
||||||
|
asFullButton: true,
|
||||||
|
icon: 'fas fa-check',
|
||||||
|
text: i18n.locale.saveAs,
|
||||||
|
handler: saveAs,
|
||||||
|
}],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<div v-hotkey.global="keymap" class="cmuxhskf">
|
<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
|
||||||
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
|
||||||
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
|
||||||
|
|
||||||
|
@ -17,163 +17,139 @@
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent, defineAsyncComponent, computed } from 'vue';
|
import { defineAsyncComponent, computed, watch } from 'vue';
|
||||||
import XTimeline from '@/components/timeline.vue';
|
import XTimeline from '@/components/timeline.vue';
|
||||||
import XPostForm from '@/components/post-form.vue';
|
import XPostForm from '@/components/post-form.vue';
|
||||||
import { scroll } from '@/scripts/scroll';
|
import { scroll } from '@/scripts/scroll';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
|
import { defaultStore } from '@/store';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
import { instance } from '@/instance';
|
||||||
|
import { $i } from '@/account';
|
||||||
|
|
||||||
export default defineComponent({
|
const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
|
||||||
name: 'timeline',
|
|
||||||
|
|
||||||
components: {
|
const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
|
||||||
XTimeline,
|
const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
|
||||||
XTutorial: defineAsyncComponent(() => import('./timeline.tutorial.vue')),
|
const keymap = {
|
||||||
XPostForm,
|
't': focus,
|
||||||
},
|
};
|
||||||
|
|
||||||
data() {
|
const tlComponent = $ref<InstanceType<typeof XTimeline>>();
|
||||||
return {
|
const rootEl = $ref<HTMLElement>();
|
||||||
src: 'home',
|
|
||||||
queue: 0,
|
|
||||||
[symbols.PAGE_INFO]: computed(() => ({
|
|
||||||
title: this.$ts.timeline,
|
|
||||||
icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
actions: [{
|
|
||||||
icon: 'fas fa-list-ul',
|
|
||||||
text: this.$ts.lists,
|
|
||||||
handler: this.chooseList
|
|
||||||
}, {
|
|
||||||
icon: 'fas fa-satellite',
|
|
||||||
text: this.$ts.antennas,
|
|
||||||
handler: this.chooseAntenna
|
|
||||||
}, {
|
|
||||||
icon: 'fas fa-satellite-dish',
|
|
||||||
text: this.$ts.channel,
|
|
||||||
handler: this.chooseChannel
|
|
||||||
}, {
|
|
||||||
icon: 'fas fa-calendar-alt',
|
|
||||||
text: this.$ts.jumpToSpecifiedDate,
|
|
||||||
handler: this.timetravel
|
|
||||||
}],
|
|
||||||
tabs: [{
|
|
||||||
active: this.src === 'home',
|
|
||||||
title: this.$ts._timelines.home,
|
|
||||||
icon: 'fas fa-home',
|
|
||||||
iconOnly: true,
|
|
||||||
onClick: () => { this.src = 'home'; this.saveSrc(); },
|
|
||||||
}, ...(this.isLocalTimelineAvailable ? [{
|
|
||||||
active: this.src === 'local',
|
|
||||||
title: this.$ts._timelines.local,
|
|
||||||
icon: 'fas fa-comments',
|
|
||||||
iconOnly: true,
|
|
||||||
onClick: () => { this.src = 'local'; this.saveSrc(); },
|
|
||||||
}, {
|
|
||||||
active: this.src === 'social',
|
|
||||||
title: this.$ts._timelines.social,
|
|
||||||
icon: 'fas fa-share-alt',
|
|
||||||
iconOnly: true,
|
|
||||||
onClick: () => { this.src = 'social'; this.saveSrc(); },
|
|
||||||
}] : []), ...(this.isGlobalTimelineAvailable ? [{
|
|
||||||
active: this.src === 'global',
|
|
||||||
title: this.$ts._timelines.global,
|
|
||||||
icon: 'fas fa-globe',
|
|
||||||
iconOnly: true,
|
|
||||||
onClick: () => { this.src = 'global'; this.saveSrc(); },
|
|
||||||
}] : [])],
|
|
||||||
})),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
let src = $ref<'home' | 'local' | 'social' | 'global'>(defaultStore.state.tl.src);
|
||||||
keymap(): any {
|
let queue = $ref(0);
|
||||||
return {
|
|
||||||
't': this.focus
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
isLocalTimelineAvailable(): boolean {
|
function queueUpdated(q: number): void {
|
||||||
return !this.$instance.disableLocalTimeline || this.$i.isModerator || this.$i.isAdmin;
|
queue = q;
|
||||||
},
|
}
|
||||||
|
|
||||||
isGlobalTimelineAvailable(): boolean {
|
function top(): void {
|
||||||
return !this.$instance.disableGlobalTimeline || this.$i.isModerator || this.$i.isAdmin;
|
scroll(rootEl, { top: 0 });
|
||||||
},
|
}
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
async function chooseList(ev: MouseEvent): Promise<void> {
|
||||||
src() {
|
|
||||||
this.showNav = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.src = this.$store.state.tl.src;
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
queueUpdated(q) {
|
|
||||||
this.queue = q;
|
|
||||||
},
|
|
||||||
|
|
||||||
top() {
|
|
||||||
scroll(this.$el, { top: 0 });
|
|
||||||
},
|
|
||||||
|
|
||||||
async chooseList(ev) {
|
|
||||||
const lists = await os.api('users/lists/list');
|
const lists = await os.api('users/lists/list');
|
||||||
const items = lists.map(list => ({
|
const items = lists.map(list => ({
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: list.name,
|
text: list.name,
|
||||||
to: `/timeline/list/${list.id}`
|
to: `/timeline/list/${list.id}`,
|
||||||
}));
|
}));
|
||||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||||
},
|
}
|
||||||
|
|
||||||
async chooseAntenna(ev) {
|
async function chooseAntenna(ev: MouseEvent): Promise<void> {
|
||||||
const antennas = await os.api('antennas/list');
|
const antennas = await os.api('antennas/list');
|
||||||
const items = antennas.map(antenna => ({
|
const items = antennas.map(antenna => ({
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: antenna.name,
|
text: antenna.name,
|
||||||
indicate: antenna.hasUnreadNote,
|
indicate: antenna.hasUnreadNote,
|
||||||
to: `/timeline/antenna/${antenna.id}`
|
to: `/timeline/antenna/${antenna.id}`,
|
||||||
}));
|
}));
|
||||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||||
},
|
}
|
||||||
|
|
||||||
async chooseChannel(ev) {
|
async function chooseChannel(ev: MouseEvent): Promise<void> {
|
||||||
const channels = await os.api('channels/followed');
|
const channels = await os.api('channels/followed');
|
||||||
const items = channels.map(channel => ({
|
const items = channels.map(channel => ({
|
||||||
type: 'link',
|
type: 'link',
|
||||||
text: channel.name,
|
text: channel.name,
|
||||||
indicate: channel.hasUnreadNote,
|
indicate: channel.hasUnreadNote,
|
||||||
to: `/channels/${channel.id}`
|
to: `/channels/${channel.id}`,
|
||||||
}));
|
}));
|
||||||
os.popupMenu(items, ev.currentTarget || ev.target);
|
os.popupMenu(items, ev.currentTarget || ev.target);
|
||||||
},
|
}
|
||||||
|
|
||||||
saveSrc() {
|
function saveSrc(): void {
|
||||||
this.$store.set('tl', {
|
defaultStore.set('tl', {
|
||||||
src: this.src,
|
src: src,
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
|
|
||||||
async timetravel() {
|
async function timetravel(): Promise<void> {
|
||||||
const { canceled, result: date } = await os.inputDate({
|
const { canceled, result: date } = await os.inputDate({
|
||||||
title: this.$ts.date,
|
title: i18n.locale.date,
|
||||||
});
|
});
|
||||||
if (canceled) return;
|
if (canceled) return;
|
||||||
|
|
||||||
this.$refs.tl.timetravel(date);
|
tlComponent.timetravel(date);
|
||||||
},
|
}
|
||||||
|
|
||||||
focus() {
|
function focus(): void {
|
||||||
(this.$refs.tl as any).focus();
|
tlComponent.focus();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
defineExpose({
|
||||||
|
[symbols.PAGE_INFO]: computed(() => ({
|
||||||
|
title: i18n.locale.timeline,
|
||||||
|
icon: src === 'local' ? 'fas fa-comments' : src === 'social' ? 'fas fa-share-alt' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
|
||||||
|
bg: 'var(--bg)',
|
||||||
|
actions: [{
|
||||||
|
icon: 'fas fa-list-ul',
|
||||||
|
text: i18n.locale.lists,
|
||||||
|
handler: chooseList,
|
||||||
|
}, {
|
||||||
|
icon: 'fas fa-satellite',
|
||||||
|
text: i18n.locale.antennas,
|
||||||
|
handler: chooseAntenna,
|
||||||
|
}, {
|
||||||
|
icon: 'fas fa-satellite-dish',
|
||||||
|
text: i18n.locale.channel,
|
||||||
|
handler: chooseChannel,
|
||||||
|
}, {
|
||||||
|
icon: 'fas fa-calendar-alt',
|
||||||
|
text: i18n.locale.jumpToSpecifiedDate,
|
||||||
|
handler: timetravel,
|
||||||
|
}],
|
||||||
|
tabs: [{
|
||||||
|
active: src === 'home',
|
||||||
|
title: i18n.locale._timelines.home,
|
||||||
|
icon: 'fas fa-home',
|
||||||
|
iconOnly: true,
|
||||||
|
onClick: () => { src = 'home'; saveSrc(); },
|
||||||
|
}, ...(isLocalTimelineAvailable ? [{
|
||||||
|
active: src === 'local',
|
||||||
|
title: i18n.locale._timelines.local,
|
||||||
|
icon: 'fas fa-comments',
|
||||||
|
iconOnly: true,
|
||||||
|
onClick: () => { src = 'local'; saveSrc(); },
|
||||||
|
}, {
|
||||||
|
active: src === 'social',
|
||||||
|
title: i18n.locale._timelines.social,
|
||||||
|
icon: 'fas fa-share-alt',
|
||||||
|
iconOnly: true,
|
||||||
|
onClick: () => { src = 'social'; saveSrc(); },
|
||||||
|
}] : []), ...(isGlobalTimelineAvailable ? [{
|
||||||
|
active: src === 'global',
|
||||||
|
title: i18n.locale._timelines.global,
|
||||||
|
icon: 'fas fa-globe',
|
||||||
|
iconOnly: true,
|
||||||
|
onClick: () => { src = 'global'; saveSrc(); },
|
||||||
|
}] : [])],
|
||||||
|
})),
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
34
packages/client/src/scripts/use-leave-guard.ts
Normal file
34
packages/client/src/scripts/use-leave-guard.ts
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import { inject, onUnmounted, Ref } from 'vue';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
import * as os from '@/os';
|
||||||
|
|
||||||
|
export function useLeaveGuard(enabled: Ref<boolean>) {
|
||||||
|
const setLeaveGuard = inject('setLeaveGuard');
|
||||||
|
|
||||||
|
if (setLeaveGuard) {
|
||||||
|
setLeaveGuard(async () => {
|
||||||
|
if (!enabled.value) return false;
|
||||||
|
|
||||||
|
const { canceled } = await os.confirm({
|
||||||
|
type: 'warning',
|
||||||
|
text: i18n.locale.leaveConfirm,
|
||||||
|
});
|
||||||
|
|
||||||
|
return canceled;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
function onBeforeLeave(ev: BeforeUnloadEvent) {
|
||||||
|
if (enabled.value) {
|
||||||
|
ev.preventDefault();
|
||||||
|
ev.returnValue = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', onBeforeLeave);
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('beforeunload', onBeforeLeave);
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
}
|
|
@ -97,7 +97,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
||||||
tl: {
|
tl: {
|
||||||
where: 'deviceAccount',
|
where: 'deviceAccount',
|
||||||
default: {
|
default: {
|
||||||
src: 'home',
|
src: 'home' as 'home' | 'local' | 'social' | 'global',
|
||||||
arg: null
|
arg: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue