paricafe/packages/frontend/src/pages/page-editor/page-editor.vue

394 lines
8.8 KiB
Vue
Raw Normal View History

2022-06-20 05:49:51 -05:00
<template>
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
2022-06-20 05:49:51 -05:00
<MkSpacer :content-max="700">
<div class="jqqmcavi">
2023-04-01 00:01:57 -05:00
<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>
2022-06-20 05:49:51 -05:00
</div>
<div v-if="tab === 'settings'">
2023-01-05 22:40:17 -06:00
<div class="_gaps_m">
2023-01-05 06:04:56 -06:00
<MkInput v-model="title">
2023-04-01 00:01:57 -05:00
<template #label>{{ i18n.ts._pages.title }}</template>
2022-06-20 05:49:51 -05:00
</MkInput>
2023-01-05 06:04:56 -06:00
<MkInput v-model="summary">
2023-04-01 00:01:57 -05:00
<template #label>{{ i18n.ts._pages.summary }}</template>
2022-06-20 05:49:51 -05:00
</MkInput>
2023-01-05 06:04:56 -06:00
<MkInput v-model="name">
2022-06-20 05:49:51 -05:00
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
2023-04-01 00:01:57 -05:00
<template #label>{{ i18n.ts._pages.url }}</template>
2022-06-20 05:49:51 -05:00
</MkInput>
2023-04-01 00:01:57 -05:00
<MkSwitch v-model="alignCenter">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
2022-06-20 05:49:51 -05:00
2023-01-05 06:04:56 -06:00
<MkSelect v-model="font">
2023-04-01 00:01:57 -05:00
<template #label>{{ i18n.ts._pages.font }}</template>
<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
2022-06-20 05:49:51 -05:00
</MkSelect>
2023-04-01 00:01:57 -05:00
<MkSwitch v-model="hideTitleWhenPinned">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
2022-06-20 05:49:51 -05:00
<div class="eyeCatch">
2023-04-01 00:01:57 -05:00
<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
2022-06-20 05:49:51 -05:00
<div v-else-if="eyeCatchingImage">
<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
2023-04-01 00:01:57 -05:00
<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
2022-06-20 05:49:51 -05:00
</div>
2020-11-14 22:42:04 -06:00
</div>
</div>
</div>
2022-06-20 05:49:51 -05:00
<div v-else-if="tab === 'contents'">
2022-12-23 20:57:06 -06:00
<div :class="$style.contents">
<XBlocks v-model="content" class="content"/>
2022-12-23 20:57:06 -06:00
<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
2022-06-20 05:49:51 -05:00
</div>
</div>
2022-06-20 05:49:51 -05:00
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed, provide, watch } from 'vue';
import { v4 as uuid } from 'uuid';
2019-05-02 03:55:59 -05:00
import XBlocks from './page-editor.blocks.vue';
import MkButton from '@/components/MkButton.vue';
2023-01-07 00:09:46 -06:00
import MkSelect from '@/components/MkSelect.vue';
2023-01-06 23:59:54 -06:00
import MkSwitch from '@/components/MkSwitch.vue';
2023-01-07 00:09:46 -06:00
import MkInput from '@/components/MkInput.vue';
2021-11-11 11:02:25 -06:00
import { url } from '@/config';
import * as os from '@/os';
import { selectFile } from '@/scripts/select-file';
import { mainRouter } from '@/router';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
const props = defineProps<{
initPageId?: string;
initPageName?: string;
initUser?: string;
}>();
let tab = $ref('settings');
let author = $ref($i);
let readonly = $ref(false);
let page = $ref(null);
let pageId = $ref(null);
let currentName = $ref(null);
let title = $ref('');
let summary = $ref(null);
let name = $ref(Date.now().toString());
let eyeCatchingImage = $ref(null);
let eyeCatchingImageId = $ref(null);
let font = $ref('sans-serif');
let content = $ref([]);
let alignCenter = $ref(false);
let hideTitleWhenPinned = $ref(false);
provide('readonly', readonly);
provide('getPageBlockList', getPageBlockList);
watch($$(eyeCatchingImageId), async () => {
if (eyeCatchingImageId == null) {
eyeCatchingImage = null;
} else {
eyeCatchingImage = await os.api('drive/files/show', {
fileId: eyeCatchingImageId,
});
}
});
function getSaveOptions() {
return {
2022-06-21 00:12:39 -05:00
title: title.trim(),
name: name.trim(),
summary: summary,
font: font,
2022-12-23 20:57:06 -06:00
script: '',
2022-06-21 00:12:39 -05:00
hideTitleWhenPinned: hideTitleWhenPinned,
alignCenter: alignCenter,
content: content,
2022-12-23 20:57:06 -06:00
variables: [],
2022-06-21 00:12:39 -05:00
eyeCatchingImageId: eyeCatchingImageId,
};
}
function save() {
2022-06-21 00:12:39 -05:00
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,
2019-05-24 05:19:43 -05:00
});
}
};
2022-06-21 00:12:39 -05:00
if (pageId) {
options.pageId = pageId;
os.api('pages/update', options)
.then(page => {
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.updated,
});
}).catch(onError);
} else {
os.api('pages/create', options)
.then(created => {
pageId = created.id;
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
});
mainRouter.push(`/pages/edit/${pageId}`);
}).catch(onError);
}
}
function del() {
os.confirm({
type: 'warning',
text: i18n.t('removeAreYouSure', { x: title.trim() }),
}).then(({ canceled }) => {
if (canceled) return;
os.api('pages/delete', {
pageId: pageId,
}).then(() => {
os.alert({
type: 'success',
text: i18n.ts._pages.deleted,
});
mainRouter.push('/pages');
});
});
}
function duplicate() {
2022-06-21 00:12:39 -05:00
title = title + ' - copy';
name = name + '-copy';
os.api('pages/create', getSaveOptions()).then(created => {
pageId = created.id;
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
});
mainRouter.push(`/pages/edit/${pageId}`);
});
}
async function add() {
const { canceled, result: type } = await os.select({
type: null,
title: i18n.ts._pages.chooseBlock,
2022-12-23 20:57:06 -06:00
items: getPageBlockList(),
});
if (canceled) return;
const id = uuid();
2022-06-21 00:12:39 -05:00
content.push({ id, type });
}
function getPageBlockList() {
2022-12-23 20:57:06 -06:00
return [
{ value: 'section', text: i18n.ts._pages.blocks.section },
{ value: 'text', text: i18n.ts._pages.blocks.text },
{ value: 'image', text: i18n.ts._pages.blocks.image },
{ value: 'note', text: i18n.ts._pages.blocks.note },
];
}
function setEyeCatchingImage(img) {
selectFile(img.currentTarget ?? img.target, null).then(file => {
eyeCatchingImageId = file.id;
});
}
function removeEyeCatchingImage() {
2022-06-21 00:12:39 -05:00
eyeCatchingImageId = null;
}
async function init() {
if (props.initPageId) {
page = await os.api('pages/show', {
pageId: props.initPageId,
});
} else if (props.initPageName && props.initUser) {
page = await os.api('pages/show', {
name: props.initPageName,
username: props.initUser,
});
readonly = true;
}
if (page) {
author = page.user;
pageId = page.id;
title = page.title;
name = page.name;
currentName = page.name;
summary = page.summary;
font = page.font;
hideTitleWhenPinned = page.hideTitleWhenPinned;
alignCenter = page.alignCenter;
content = page.content;
eyeCatchingImageId = page.eyeCatchingImageId;
} else {
const id = uuid();
content = [{
id,
type: 'text',
text: 'Hello World!',
}];
}
}
init();
const headerActions = $computed(() => []);
2022-06-20 05:49:51 -05:00
const headerTabs = $computed(() => [{
key: 'settings',
2022-06-20 05:49:51 -05:00
title: i18n.ts._pages.pageSetting,
icon: 'ti ti-settings',
2022-06-20 05:49:51 -05:00
}, {
key: 'contents',
2022-06-20 05:49:51 -05:00
title: i18n.ts._pages.contents,
2022-12-23 23:45:27 -06:00
icon: 'ti ti-note',
2022-06-20 05:49:51 -05:00
}]);
2020-08-21 18:03:11 -05:00
definePageMetadata(computed(() => {
let title = i18n.ts._pages.newPage;
if (props.initPageId) {
title = i18n.ts._pages.editPage;
}
else if (props.initPageName && props.initUser) {
title = i18n.ts._pages.readPage;
}
return {
title: title,
icon: 'ti ti-pencil',
};
}));
</script>
2022-12-23 20:57:06 -06:00
<style lang="scss" module>
.contents {
&:global {
> .add {
margin: 16px auto 0 auto;
}
}
}
</style>
<style lang="scss" scoped>
2021-10-11 11:04:50 -05:00
.jqqmcavi {
2022-12-23 20:57:06 -06:00
margin-bottom: 16px;
2021-10-11 11:04:50 -05:00
> .button {
& + .button {
margin-left: 8px;
}
}
}
.gwbmwxkm {
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 06:12:00 -05:00
position: relative;
> header {
> .title {
z-index: 1;
margin: 0;
padding: 0 16px;
line-height: 42px;
font-size: 0.9em;
font-weight: bold;
2020-04-15 10:39:21 -05:00
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;
}
2019-04-29 00:46:35 -05:00
> .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 {
2021-10-11 11:04:50 -05:00
padding: 16px;
> .variables {
margin-bottom: 16px;
}
> .add {
margin-bottom: 16px;
}
}
</style>