wip
This commit is contained in:
kakkokari-gtyih
parent
10f6b28790
commit
85197f4936
|
|
@ -5,56 +5,37 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||||
<MkSpacer :contentMax="700">
|
<MkSpacer :contentMax="800">
|
||||||
<div class="jqqmcavi">
|
<div v-if="fetchStatus === 'loading'">
|
||||||
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
|
<MkLoading/>
|
||||||
<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
|
||||||
<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ i18n.ts.duplicate }}</MkButton>
|
|
||||||
<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="fetchStatus === 'done' && page != null" :class="$style.pageMain">
|
||||||
<div v-if="tab === 'settings'">
|
<div :class="$style.pageBanner">
|
||||||
<div class="_gaps_m">
|
<div v-if="page?.eyeCatchingImageId" :class="$style.pageBannerImage">
|
||||||
<MkInput v-model="title">
|
<MkMediaImage
|
||||||
<template #label>{{ i18n.ts._pages.title }}</template>
|
:image="page.eyeCatchingImage!"
|
||||||
</MkInput>
|
:cover="true"
|
||||||
|
:disableImageLink="true"
|
||||||
<MkInput v-model="summary">
|
:class="$style.thumbnail"
|
||||||
<template #label>{{ i18n.ts._pages.summary }}</template>
|
/>
|
||||||
</MkInput>
|
</div>
|
||||||
|
</div>
|
||||||
<MkInput v-model="name">
|
<div :class="$style.pageBannerTitle" class="_gaps_s">
|
||||||
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
|
<h1></h1>
|
||||||
<template #label>{{ i18n.ts._pages.url }}</template>
|
<div :class="$style.pageBannerTitleSub">
|
||||||
</MkInput>
|
<div v-if="page?.user" :class="$style.pageBannerTitleUser">
|
||||||
|
<MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA>
|
||||||
<MkSwitch v-model="alignCenter">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
|
</div>
|
||||||
|
<div :class="$style.pageBannerTitleSubActions">
|
||||||
<MkSelect v-model="font">
|
<MkA v-if="page?.userId === $i?.id" v-tooltip="i18n.ts._pages.editThisPage" :to="`/pages/edit/${page.id}`" class="_button" :class="$style.generalActionButton"><i class="ti ti-pencil ti-fw"></i></MkA>
|
||||||
<template #label>{{ i18n.ts._pages.font }}</template>
|
<button v-tooltip="i18n.ts.share" class="_button" :class="$style.generalActionButton" @click="share"><i class="ti ti-share ti-fw"></i></button>
|
||||||
<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
|
|
||||||
<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
|
|
||||||
</MkSelect>
|
|
||||||
|
|
||||||
<MkSwitch v-model="hideTitleWhenPinned">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
|
|
||||||
|
|
||||||
<div class="eyeCatch">
|
|
||||||
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
|
|
||||||
<div v-else-if="eyeCatchingImage">
|
|
||||||
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
|
|
||||||
<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="fetchStatus === 'notMe'" class="_fullInfo">
|
||||||
<div v-else-if="tab === 'contents'">
|
This page is not yours
|
||||||
<div :class="$style.contents">
|
|
||||||
<XBlocks v-model="content" class="content"/>
|
|
||||||
|
|
||||||
<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</MkSpacer>
|
</MkSpacer>
|
||||||
</MkStickyContainer>
|
</MkStickyContainer>
|
||||||
|
|
@ -69,189 +50,50 @@ import MkButton from '@/components/MkButton.vue';
|
||||||
import MkSelect from '@/components/MkSelect.vue';
|
import MkSelect from '@/components/MkSelect.vue';
|
||||||
import MkSwitch from '@/components/MkSwitch.vue';
|
import MkSwitch from '@/components/MkSwitch.vue';
|
||||||
import MkInput from '@/components/MkInput.vue';
|
import MkInput from '@/components/MkInput.vue';
|
||||||
|
import MkMediaImage from '@/components/MkMediaImage.vue';
|
||||||
import { url } from '@@/js/config.js';
|
import { url } from '@@/js/config.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||||
import { selectFile } from '@/scripts/select-file.js';
|
import { selectFile } from '@/scripts/select-file.js';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||||
import { $i } from '@/account.js';
|
import { signinRequired } from '@/account.js';
|
||||||
import { mainRouter } from '@/router/main.js';
|
import { mainRouter } from '@/router/main.js';
|
||||||
import { getPageBlockList } from '@/pages/page-editor/common.js';
|
import { getPageBlockList } from '@/pages/page-editor/common.js';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
initPageId?: string;
|
initPageId?: string;
|
||||||
initPageName?: string;
|
|
||||||
initUser?: string;
|
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const tab = ref('settings');
|
const $i = signinRequired();
|
||||||
const author = ref($i);
|
|
||||||
const readonly = ref(false);
|
|
||||||
const page = ref<Misskey.entities.Page | null>(null);
|
|
||||||
const pageId = ref<string | null>(null);
|
|
||||||
const currentName = ref<string | null>(null);
|
|
||||||
const title = ref('');
|
|
||||||
const summary = ref<string | null>(null);
|
|
||||||
const name = ref(Date.now().toString());
|
|
||||||
const eyeCatchingImage = ref<Misskey.entities.DriveFile | null>(null);
|
|
||||||
const eyeCatchingImageId = ref<string | null>(null);
|
|
||||||
const font = ref('sans-serif');
|
|
||||||
const content = ref<Misskey.entities.Page['content']>([]);
|
|
||||||
const alignCenter = ref(false);
|
|
||||||
const hideTitleWhenPinned = ref(false);
|
|
||||||
|
|
||||||
provide('readonly', readonly.value);
|
const fetchStatus = ref<'loading' | 'done' | 'notMe'>('loading');
|
||||||
|
const page = ref<Partial<Misskey.entities.Page> | null>(null);
|
||||||
watch(eyeCatchingImageId, async () => {
|
const content = computed<Misskey.entities.Page['content']>({
|
||||||
if (eyeCatchingImageId.value == null) {
|
get: () => page.value?.content ?? [],
|
||||||
eyeCatchingImage.value = null;
|
set: (value) => {
|
||||||
} else {
|
if (page.value) {
|
||||||
eyeCatchingImage.value = await misskeyApi('drive/files/show', {
|
page.value.content = value;
|
||||||
fileId: eyeCatchingImageId.value,
|
} else {
|
||||||
});
|
page.value = {
|
||||||
}
|
content: value,
|
||||||
});
|
};
|
||||||
|
|
||||||
function getSaveOptions() {
|
|
||||||
return {
|
|
||||||
title: title.value.trim(),
|
|
||||||
name: name.value.trim(),
|
|
||||||
summary: summary.value,
|
|
||||||
font: font.value,
|
|
||||||
script: '',
|
|
||||||
hideTitleWhenPinned: hideTitleWhenPinned.value,
|
|
||||||
alignCenter: alignCenter.value,
|
|
||||||
content: content.value,
|
|
||||||
variables: [],
|
|
||||||
eyeCatchingImageId: eyeCatchingImageId.value,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function save() {
|
|
||||||
const options = getSaveOptions();
|
|
||||||
|
|
||||||
const onError = err => {
|
|
||||||
if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
|
|
||||||
if (err.info.param === 'name') {
|
|
||||||
os.alert({
|
|
||||||
type: 'error',
|
|
||||||
title: i18n.ts._pages.invalidNameTitle,
|
|
||||||
text: i18n.ts._pages.invalidNameText,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else if (err.code === 'NAME_ALREADY_EXISTS') {
|
|
||||||
os.alert({
|
|
||||||
type: 'error',
|
|
||||||
text: i18n.ts._pages.nameAlreadyExists,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
},
|
||||||
|
});
|
||||||
if (pageId.value) {
|
|
||||||
options.pageId = pageId.value;
|
|
||||||
misskeyApi('pages/update', options)
|
|
||||||
.then(page => {
|
|
||||||
currentName.value = name.value.trim();
|
|
||||||
os.alert({
|
|
||||||
type: 'success',
|
|
||||||
text: i18n.ts._pages.updated,
|
|
||||||
});
|
|
||||||
}).catch(onError);
|
|
||||||
} else {
|
|
||||||
misskeyApi('pages/create', options)
|
|
||||||
.then(created => {
|
|
||||||
pageId.value = created.id;
|
|
||||||
currentName.value = name.value.trim();
|
|
||||||
os.alert({
|
|
||||||
type: 'success',
|
|
||||||
text: i18n.ts._pages.created,
|
|
||||||
});
|
|
||||||
mainRouter.push(`/pages/edit/${pageId.value}`);
|
|
||||||
}).catch(onError);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function del() {
|
|
||||||
os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
text: i18n.tsx.removeAreYouSure({ x: title.value.trim() }),
|
|
||||||
}).then(({ canceled }) => {
|
|
||||||
if (canceled) return;
|
|
||||||
misskeyApi('pages/delete', {
|
|
||||||
pageId: pageId.value,
|
|
||||||
}).then(() => {
|
|
||||||
os.alert({
|
|
||||||
type: 'success',
|
|
||||||
text: i18n.ts._pages.deleted,
|
|
||||||
});
|
|
||||||
mainRouter.push('/pages');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function duplicate() {
|
|
||||||
title.value = title.value + ' - copy';
|
|
||||||
name.value = name.value + '-copy';
|
|
||||||
misskeyApi('pages/create', getSaveOptions()).then(created => {
|
|
||||||
pageId.value = created.id;
|
|
||||||
currentName.value = name.value.trim();
|
|
||||||
os.alert({
|
|
||||||
type: 'success',
|
|
||||||
text: i18n.ts._pages.created,
|
|
||||||
});
|
|
||||||
mainRouter.push(`/pages/edit/${pageId.value}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function add() {
|
|
||||||
const { canceled, result: type } = await os.select({
|
|
||||||
type: null,
|
|
||||||
title: i18n.ts._pages.chooseBlock,
|
|
||||||
items: getPageBlockList(),
|
|
||||||
});
|
|
||||||
if (canceled) return;
|
|
||||||
|
|
||||||
const id = uuid();
|
|
||||||
content.value.push({ id, type });
|
|
||||||
}
|
|
||||||
|
|
||||||
function setEyeCatchingImage(img) {
|
|
||||||
selectFile(img.currentTarget ?? img.target, null).then(file => {
|
|
||||||
eyeCatchingImageId.value = file.id;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeEyeCatchingImage() {
|
|
||||||
eyeCatchingImageId.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
if (props.initPageId) {
|
if (props.initPageId) {
|
||||||
page.value = await misskeyApi('pages/show', {
|
const _page = await misskeyApi('pages/show', {
|
||||||
pageId: props.initPageId,
|
pageId: props.initPageId,
|
||||||
});
|
});
|
||||||
} else if (props.initPageName && props.initUser) {
|
if (_page.user.id !== $i.id) {
|
||||||
page.value = await misskeyApi('pages/show', {
|
fetchStatus.value = 'notMe';
|
||||||
name: props.initPageName,
|
return;
|
||||||
username: props.initUser,
|
}
|
||||||
});
|
|
||||||
readonly.value = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (page.value) {
|
if (page.value === null) {
|
||||||
author.value = page.value.user;
|
|
||||||
pageId.value = page.value.id;
|
|
||||||
title.value = page.value.title;
|
|
||||||
name.value = page.value.name;
|
|
||||||
currentName.value = page.value.name;
|
|
||||||
summary.value = page.value.summary;
|
|
||||||
font.value = page.value.font;
|
|
||||||
hideTitleWhenPinned.value = page.value.hideTitleWhenPinned;
|
|
||||||
alignCenter.value = page.value.alignCenter;
|
|
||||||
content.value = page.value.content;
|
|
||||||
eyeCatchingImageId.value = page.value.eyeCatchingImageId;
|
|
||||||
} else {
|
|
||||||
const id = uuid();
|
const id = uuid();
|
||||||
content.value = [{
|
content.value = [{
|
||||||
id,
|
id,
|
||||||
|
|
@ -259,126 +101,84 @@ async function init() {
|
||||||
text: 'Hello World!',
|
text: 'Hello World!',
|
||||||
}];
|
}];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fetchStatus.value = 'done';
|
||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
const headerActions = computed(() => []);
|
const headerActions = computed(() => []);
|
||||||
|
|
||||||
const headerTabs = computed(() => [{
|
const headerTabs = computed(() => []);
|
||||||
key: 'settings',
|
|
||||||
title: i18n.ts._pages.pageSetting,
|
|
||||||
icon: 'ti ti-settings',
|
|
||||||
}, {
|
|
||||||
key: 'contents',
|
|
||||||
title: i18n.ts._pages.contents,
|
|
||||||
icon: 'ti ti-note',
|
|
||||||
}]);
|
|
||||||
|
|
||||||
definePageMetadata(() => ({
|
definePageMetadata(() => ({
|
||||||
title: props.initPageId ? i18n.ts._pages.editPage
|
title: props.initPageId ? i18n.ts._pages.editPage : i18n.ts._pages.newPage,
|
||||||
: props.initPageName && props.initUser ? i18n.ts._pages.readPage
|
|
||||||
: i18n.ts._pages.newPage,
|
|
||||||
icon: 'ti ti-pencil',
|
icon: 'ti ti-pencil',
|
||||||
}));
|
}));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.contents {
|
.pageMain {
|
||||||
&:global {
|
border-radius: var(--MI-radius);
|
||||||
> .add {
|
padding: 2rem;
|
||||||
margin: 16px auto 0 auto;
|
background: var(--MI_THEME-panel);
|
||||||
}
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
.pageBanner {
|
||||||
.jqqmcavi {
|
width: calc(100% + 4rem);
|
||||||
margin-bottom: 16px;
|
margin: -2rem -2rem 1.5rem;
|
||||||
|
border-radius: var(--MI-radius) var(--MI-radius) 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
> .button {
|
.pageBannerImage {
|
||||||
& + .button {
|
position: relative;
|
||||||
margin-left: 8px;
|
padding-top: 56.25%;
|
||||||
}
|
|
||||||
|
> .thumbnail {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gwbmwxkm {
|
.pageBannerTitle {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> header {
|
h1 {
|
||||||
> .title {
|
font-size: 2rem;
|
||||||
z-index: 1;
|
font-weight: 700;
|
||||||
margin: 0;
|
color: var(--MI_THEME-fg);
|
||||||
padding: 0 16px;
|
margin: 0;
|
||||||
line-height: 42px;
|
}
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: 0 1px rgba(#000, 0.07);
|
|
||||||
|
|
||||||
> i {
|
.pageBannerTitleSub {
|
||||||
margin-right: 6px;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&:empty {
|
.pageBannerTitleUser {
|
||||||
display: none;
|
--height: 32px;
|
||||||
}
|
flex-shrink: 0;
|
||||||
}
|
line-height: var(--height);
|
||||||
|
|
||||||
> .buttons {
|
.avatar {
|
||||||
position: absolute;
|
height: var(--height);
|
||||||
z-index: 2;
|
width: var(--height);
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
padding: 0;
|
|
||||||
width: 42px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
line-height: 42px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> section {
|
.pageBannerTitleSubActions {
|
||||||
padding: 0 32px 32px 32px;
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
@media (max-width: 500px) {
|
align-items: center;
|
||||||
padding: 0 16px 16px 16px;
|
gap: var(--MI-marginHalf);
|
||||||
}
|
margin-left: auto;
|
||||||
|
|
||||||
> .view {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 16px 0 0 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .content {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .eyeCatch {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
> img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qmuvgica {
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
> .variables {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .add {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
384
packages/frontend/src/pages/page-editor/page-editor_.vue
Normal file
384
packages/frontend/src/pages/page-editor/page-editor_.vue
Normal file
|
|
@ -0,0 +1,384 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<MkStickyContainer>
|
||||||
|
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
||||||
|
<MkSpacer :contentMax="700">
|
||||||
|
<div class="jqqmcavi">
|
||||||
|
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
|
||||||
|
<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
|
||||||
|
<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ i18n.ts.duplicate }}</MkButton>
|
||||||
|
<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="tab === 'settings'">
|
||||||
|
<div class="_gaps_m">
|
||||||
|
<MkInput v-model="title">
|
||||||
|
<template #label>{{ i18n.ts._pages.title }}</template>
|
||||||
|
</MkInput>
|
||||||
|
|
||||||
|
<MkInput v-model="summary">
|
||||||
|
<template #label>{{ i18n.ts._pages.summary }}</template>
|
||||||
|
</MkInput>
|
||||||
|
|
||||||
|
<MkInput v-model="name">
|
||||||
|
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
|
||||||
|
<template #label>{{ i18n.ts._pages.url }}</template>
|
||||||
|
</MkInput>
|
||||||
|
|
||||||
|
<MkSwitch v-model="alignCenter">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
|
||||||
|
|
||||||
|
<MkSelect v-model="font">
|
||||||
|
<template #label>{{ i18n.ts._pages.font }}</template>
|
||||||
|
<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
|
||||||
|
<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
|
||||||
|
</MkSelect>
|
||||||
|
|
||||||
|
<MkSwitch v-model="hideTitleWhenPinned">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
|
||||||
|
|
||||||
|
<div class="eyeCatch">
|
||||||
|
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
|
||||||
|
<div v-else-if="eyeCatchingImage">
|
||||||
|
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
|
||||||
|
<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="tab === 'contents'">
|
||||||
|
<div :class="$style.contents">
|
||||||
|
<XBlocks v-model="content" class="content"/>
|
||||||
|
|
||||||
|
<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</MkSpacer>
|
||||||
|
</MkStickyContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, provide, watch, ref } from 'vue';
|
||||||
|
import * as Misskey from 'misskey-js';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
import XBlocks from './page-editor.blocks.vue';
|
||||||
|
import MkButton from '@/components/MkButton.vue';
|
||||||
|
import MkSelect from '@/components/MkSelect.vue';
|
||||||
|
import MkSwitch from '@/components/MkSwitch.vue';
|
||||||
|
import MkInput from '@/components/MkInput.vue';
|
||||||
|
import { url } from '@@/js/config.js';
|
||||||
|
import * as os from '@/os.js';
|
||||||
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||||
|
import { selectFile } from '@/scripts/select-file.js';
|
||||||
|
import { i18n } from '@/i18n.js';
|
||||||
|
import { definePageMetadata } from '@/scripts/page-metadata.js';
|
||||||
|
import { $i } from '@/account.js';
|
||||||
|
import { mainRouter } from '@/router/main.js';
|
||||||
|
import { getPageBlockList } from '@/pages/page-editor/common.js';
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
initPageId?: string;
|
||||||
|
initPageName?: string;
|
||||||
|
initUser?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const tab = ref('settings');
|
||||||
|
const author = ref($i);
|
||||||
|
const readonly = ref(false);
|
||||||
|
const page = ref<Misskey.entities.Page | null>(null);
|
||||||
|
const pageId = ref<string | null>(null);
|
||||||
|
const currentName = ref<string | null>(null);
|
||||||
|
const title = ref('');
|
||||||
|
const summary = ref<string | null>(null);
|
||||||
|
const name = ref(Date.now().toString());
|
||||||
|
const eyeCatchingImage = ref<Misskey.entities.DriveFile | null>(null);
|
||||||
|
const eyeCatchingImageId = ref<string | null>(null);
|
||||||
|
const font = ref('sans-serif');
|
||||||
|
const content = ref<Misskey.entities.Page['content']>([]);
|
||||||
|
const alignCenter = ref(false);
|
||||||
|
const hideTitleWhenPinned = ref(false);
|
||||||
|
|
||||||
|
provide('readonly', readonly.value);
|
||||||
|
|
||||||
|
watch(eyeCatchingImageId, async () => {
|
||||||
|
if (eyeCatchingImageId.value == null) {
|
||||||
|
eyeCatchingImage.value = null;
|
||||||
|
} else {
|
||||||
|
eyeCatchingImage.value = await misskeyApi('drive/files/show', {
|
||||||
|
fileId: eyeCatchingImageId.value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function getSaveOptions() {
|
||||||
|
return {
|
||||||
|
title: title.value.trim(),
|
||||||
|
name: name.value.trim(),
|
||||||
|
summary: summary.value,
|
||||||
|
font: font.value,
|
||||||
|
script: '',
|
||||||
|
hideTitleWhenPinned: hideTitleWhenPinned.value,
|
||||||
|
alignCenter: alignCenter.value,
|
||||||
|
content: content.value,
|
||||||
|
variables: [],
|
||||||
|
eyeCatchingImageId: eyeCatchingImageId.value,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function save() {
|
||||||
|
const options = getSaveOptions();
|
||||||
|
|
||||||
|
const onError = err => {
|
||||||
|
if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
|
||||||
|
if (err.info.param === 'name') {
|
||||||
|
os.alert({
|
||||||
|
type: 'error',
|
||||||
|
title: i18n.ts._pages.invalidNameTitle,
|
||||||
|
text: i18n.ts._pages.invalidNameText,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (err.code === 'NAME_ALREADY_EXISTS') {
|
||||||
|
os.alert({
|
||||||
|
type: 'error',
|
||||||
|
text: i18n.ts._pages.nameAlreadyExists,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (pageId.value) {
|
||||||
|
options.pageId = pageId.value;
|
||||||
|
misskeyApi('pages/update', options)
|
||||||
|
.then(page => {
|
||||||
|
currentName.value = name.value.trim();
|
||||||
|
os.alert({
|
||||||
|
type: 'success',
|
||||||
|
text: i18n.ts._pages.updated,
|
||||||
|
});
|
||||||
|
}).catch(onError);
|
||||||
|
} else {
|
||||||
|
misskeyApi('pages/create', options)
|
||||||
|
.then(created => {
|
||||||
|
pageId.value = created.id;
|
||||||
|
currentName.value = name.value.trim();
|
||||||
|
os.alert({
|
||||||
|
type: 'success',
|
||||||
|
text: i18n.ts._pages.created,
|
||||||
|
});
|
||||||
|
mainRouter.push(`/pages/edit/${pageId.value}`);
|
||||||
|
}).catch(onError);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function del() {
|
||||||
|
os.confirm({
|
||||||
|
type: 'warning',
|
||||||
|
text: i18n.tsx.removeAreYouSure({ x: title.value.trim() }),
|
||||||
|
}).then(({ canceled }) => {
|
||||||
|
if (canceled) return;
|
||||||
|
misskeyApi('pages/delete', {
|
||||||
|
pageId: pageId.value,
|
||||||
|
}).then(() => {
|
||||||
|
os.alert({
|
||||||
|
type: 'success',
|
||||||
|
text: i18n.ts._pages.deleted,
|
||||||
|
});
|
||||||
|
mainRouter.push('/pages');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function duplicate() {
|
||||||
|
title.value = title.value + ' - copy';
|
||||||
|
name.value = name.value + '-copy';
|
||||||
|
misskeyApi('pages/create', getSaveOptions()).then(created => {
|
||||||
|
pageId.value = created.id;
|
||||||
|
currentName.value = name.value.trim();
|
||||||
|
os.alert({
|
||||||
|
type: 'success',
|
||||||
|
text: i18n.ts._pages.created,
|
||||||
|
});
|
||||||
|
mainRouter.push(`/pages/edit/${pageId.value}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function add() {
|
||||||
|
const { canceled, result: type } = await os.select({
|
||||||
|
type: null,
|
||||||
|
title: i18n.ts._pages.chooseBlock,
|
||||||
|
items: getPageBlockList(),
|
||||||
|
});
|
||||||
|
if (canceled) return;
|
||||||
|
|
||||||
|
const id = uuid();
|
||||||
|
content.value.push({ id, type });
|
||||||
|
}
|
||||||
|
|
||||||
|
function setEyeCatchingImage(img) {
|
||||||
|
selectFile(img.currentTarget ?? img.target, null).then(file => {
|
||||||
|
eyeCatchingImageId.value = file.id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeEyeCatchingImage() {
|
||||||
|
eyeCatchingImageId.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
if (props.initPageId) {
|
||||||
|
page.value = await misskeyApi('pages/show', {
|
||||||
|
pageId: props.initPageId,
|
||||||
|
});
|
||||||
|
} else if (props.initPageName && props.initUser) {
|
||||||
|
page.value = await misskeyApi('pages/show', {
|
||||||
|
name: props.initPageName,
|
||||||
|
username: props.initUser,
|
||||||
|
});
|
||||||
|
readonly.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (page.value) {
|
||||||
|
author.value = page.value.user;
|
||||||
|
pageId.value = page.value.id;
|
||||||
|
title.value = page.value.title;
|
||||||
|
name.value = page.value.name;
|
||||||
|
currentName.value = page.value.name;
|
||||||
|
summary.value = page.value.summary;
|
||||||
|
font.value = page.value.font;
|
||||||
|
hideTitleWhenPinned.value = page.value.hideTitleWhenPinned;
|
||||||
|
alignCenter.value = page.value.alignCenter;
|
||||||
|
content.value = page.value.content;
|
||||||
|
eyeCatchingImageId.value = page.value.eyeCatchingImageId;
|
||||||
|
} else {
|
||||||
|
const id = uuid();
|
||||||
|
content.value = [{
|
||||||
|
id,
|
||||||
|
type: 'text',
|
||||||
|
text: 'Hello World!',
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
|
||||||
|
const headerActions = computed(() => []);
|
||||||
|
|
||||||
|
const headerTabs = computed(() => [{
|
||||||
|
key: 'settings',
|
||||||
|
title: i18n.ts._pages.pageSetting,
|
||||||
|
icon: 'ti ti-settings',
|
||||||
|
}, {
|
||||||
|
key: 'contents',
|
||||||
|
title: i18n.ts._pages.contents,
|
||||||
|
icon: 'ti ti-note',
|
||||||
|
}]);
|
||||||
|
|
||||||
|
definePageMetadata(() => ({
|
||||||
|
title: props.initPageId ? i18n.ts._pages.editPage
|
||||||
|
: props.initPageName && props.initUser ? i18n.ts._pages.readPage
|
||||||
|
: i18n.ts._pages.newPage,
|
||||||
|
icon: 'ti ti-pencil',
|
||||||
|
}));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.contents {
|
||||||
|
&:global {
|
||||||
|
> .add {
|
||||||
|
margin: 16px auto 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.jqqmcavi {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
> .button {
|
||||||
|
& + .button {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gwbmwxkm {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> header {
|
||||||
|
> .title {
|
||||||
|
z-index: 1;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 16px;
|
||||||
|
line-height: 42px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: 0 1px rgba(#000, 0.07);
|
||||||
|
|
||||||
|
> i {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .buttons {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
> button {
|
||||||
|
padding: 0;
|
||||||
|
width: 42px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> section {
|
||||||
|
padding: 0 32px 32px 32px;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
padding: 0 16px 16px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .view {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 16px 0 0 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .content {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .eyeCatch {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
> img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.qmuvgica {
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
> .variables {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .add {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -285,10 +285,6 @@ function showMenu(ev: MouseEvent) {
|
||||||
}
|
}
|
||||||
} else if ($i && $i.id !== page.value.userId) {
|
} else if ($i && $i.id !== page.value.userId) {
|
||||||
menuItems.push({
|
menuItems.push({
|
||||||
icon: 'ti ti-code',
|
|
||||||
text: i18n.ts._pages.viewSource,
|
|
||||||
action: () => router.push(`/@${props.username}/pages/${props.pageName}/view-source`),
|
|
||||||
}, {
|
|
||||||
icon: 'ti ti-exclamation-circle',
|
icon: 'ti ti-exclamation-circle',
|
||||||
text: i18n.ts.reportAbuse,
|
text: i18n.ts.reportAbuse,
|
||||||
action: reportAbuse,
|
action: reportAbuse,
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,6 @@ export const page = (loader: AsyncComponentLoader) => defineAsyncComponent({
|
||||||
});
|
});
|
||||||
|
|
||||||
const routes: RouteDef[] = [{
|
const routes: RouteDef[] = [{
|
||||||
path: '/@:initUser/pages/:initPageName/view-source',
|
|
||||||
component: page(() => import('@/pages/page-editor/page-editor.vue')),
|
|
||||||
}, {
|
|
||||||
path: '/@:username/pages/:pageName',
|
path: '/@:username/pages/:pageName',
|
||||||
component: page(() => import('@/pages/page.vue')),
|
component: page(() => import('@/pages/page.vue')),
|
||||||
}, {
|
}, {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue