iceshrimp-legacy/packages/client/src/pages/page-editor/page-editor.vue

<template>
	<MkStickyContainer>
		<template #header
			><MkPageHeader
				v-model:tab="tab"
				:actions="headerActions"
				:tabs="headerTabs"
		/></template>
		<MkSpacer :content-max="700">
			<div class="jqqmcavi">
				<MkButton
					v-if="pageId"
					class="button"
					inline
					link
					:to="`/@${author.username}/pages/${currentName}`"
					><i class="ph-arrow-square-out ph-bold ph-lg"></i>
					{{ i18n.ts._pages.viewPage }}</MkButton
				>
				<MkButton
					v-if="!readonly"
					inline
					primary
					class="button"
					@click="save"
					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
					{{ i18n.ts.save }}</MkButton
				>
				<MkButton v-if="pageId" inline class="button" @click="duplicate"
					><i class="ph-clipboard-text ph-bold ph-lg"></i>
					{{ i18n.ts.duplicate }}</MkButton
				>
				<MkButton
					v-if="pageId && !readonly"
					inline
					class="button"
					danger
					@click="del"
					><i class="ph-trash ph-bold ph-lg"></i>
					{{ i18n.ts.delete }}</MkButton
				>
			</div>

			<div v-if="tab === 'settings'">
				<div class="_formRoot">
					<MkInput v-model="title" class="_formBlock">
						<template #label>{{ i18n.ts._pages.title }}</template>
					</MkInput>

					<MkInput v-model="summary" class="_formBlock">
						<template #label>{{ i18n.ts._pages.summary }}</template>
					</MkInput>

					<MkInput v-model="name" class="_formBlock">
						<template #prefix
							>{{ url }}/@{{ author.username }}/pages/</template
						>
						<template #label>{{ i18n.ts._pages.url }}</template>
					</MkInput>

					<MkSwitch v-model="isPublic" class="_formBlock">{{
						i18n.ts.public
					}}</MkSwitch>
					<MkSwitch v-model="alignCenter" class="_formBlock">{{
						i18n.ts._pages.alignCenter
					}}</MkSwitch>

					<MkSelect v-model="font" class="_formBlock">
						<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"
						class="_formBlock"
						>{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch
					>

					<div class="eyeCatch">
						<MkButton
							v-if="eyeCatchingImageId == null && !readonly"
							@click="setEyeCatchingImage"
							><i class="ph-plus ph-bold ph-lg"></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="ph-trash ph-bold ph-lg"></i>
								{{
									i18n.ts._pages.eyeCatchingImageRemove
								}}</MkButton
							>
						</div>
					</div>
				</div>
			</div>

			<div v-else-if="tab === 'contents'">
				<div>
					<XBlocks v-model="content" class="content" :hpml="hpml" />
					<MkButton v-if="!readonly" @click="add()"
						><i class="ph-plus ph-bold ph-lg"></i
					></MkButton>
				</div>
			</div>

			<div v-else-if="tab === 'variables'">
				<div class="qmuvgica">
					<VueDraggable
						v-show="variables.length > 0"
						v-model="variables"
						tag="div"
						class="variables"
						item-key="name"
						handle=".drag-handle"
						:group="{ name: 'variables' }"
						animation="150"
						swap-threshold="0.5"
					>
						<template #item="{ element }">
							<XVariable
								:model-value="element"
								:removable="true"
								:hpml="hpml"
								:name="element.name"
								:title="element.name"
								:draggable="true"
								@remove="() => removeVariable(element)"
							/>
						</template>
					</VueDraggable>

					<MkButton
						v-if="!readonly"
						class="add"
						@click="addVariable()"
						><i class="ph-plus ph-bold ph-lg"></i
					></MkButton>
				</div>
			</div>

			<div v-else-if="tab === 'script'">
				<div>
					<MkTextarea v-model="script" class="_code" />
				</div>
			</div>
		</MkSpacer>
	</MkStickyContainer>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, computed, provide, watch } from "vue";
import { v4 as uuid } from "uuid";
import XVariable from "./page-editor.script-block.vue";
import XBlocks from "./page-editor.blocks.vue";
import MkTextarea from "@/components/form/textarea.vue";
import MkButton from "@/components/MkButton.vue";
import MkSelect from "@/components/form/select.vue";
import MkSwitch from "@/components/form/switch.vue";
import MkInput from "@/components/form/input.vue";
import { blockDefs } from "@/scripts/hpml/index";
import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
import { url } from "@/config";
import { collectPageVars } from "@/scripts/collect-page-vars";
import { VueDraggable } from "vue-draggable-plus";
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 isPublic = $ref(true);
let hideTitleWhenPinned = $ref(false);
let variables = $ref([]);
let hpml = $ref(null);
let script = $ref("");

provide("readonly", readonly);
provide("getScriptBlockList", getScriptBlockList);
provide("getPageBlockList", getPageBlockList);

watch($$(eyeCatchingImageId), async () => {
	if (eyeCatchingImageId == null) {
		eyeCatchingImage = null;
	} else {
		eyeCatchingImage = await os.api("drive/files/show", {
			fileId: eyeCatchingImageId,
		});
	}
});

function getSaveOptions() {
	return {
		title: title.trim(),
		name: name.trim(),
		summary: summary,
		font: font,
		script: script,
		hideTitleWhenPinned: hideTitleWhenPinned,
		alignCenter: alignCenter,
		isPublic: isPublic,
		content: content,
		variables: variables,
		eyeCatchingImageId: eyeCatchingImageId,
	};
}

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) {
		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() {
	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,
		groupedItems: getPageBlockList(),
	});
	if (canceled) return;

	const id = uuid();
	content.push({ id, type });
}

async function addVariable() {
	let { canceled, result: name } = await os.inputText({
		title: i18n.ts._pages.enterVariableName,
	});
	if (canceled) return;

	name = name.trim();

	if (hpml.isUsedName(name)) {
		os.alert({
			type: "error",
			text: i18n.ts._pages.variableNameIsAlreadyUsed,
		});
		return;
	}

	const id = uuid();
	variables.push({ id, name, type: null });
}

function removeVariable(v) {
	variables = variables.filter((x) => x.name !== v.name);
}

function getPageBlockList() {
	return [
		{
			label: i18n.ts._pages.contentBlocks,
			items: [
				{ 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: "textarea", text: i18n.ts._pages.blocks.textarea },
				{ value: "note", text: i18n.ts._pages.blocks.note },
				{ value: "canvas", text: i18n.ts._pages.blocks.canvas },
			],
		},
		{
			label: i18n.ts._pages.inputBlocks,
			items: [
				{ value: "button", text: i18n.ts._pages.blocks.button },
				{
					value: "radioButton",
					text: i18n.ts._pages.blocks.radioButton,
				},
				{ value: "textInput", text: i18n.ts._pages.blocks.textInput },
				{
					value: "textareaInput",
					text: i18n.ts._pages.blocks.textareaInput,
				},
				{
					value: "numberInput",
					text: i18n.ts._pages.blocks.numberInput,
				},
				{ value: "switch", text: i18n.ts._pages.blocks.switch },
				{ value: "counter", text: i18n.ts._pages.blocks.counter },
			],
		},
		{
			label: i18n.ts._pages.specialBlocks,
			items: [
				{ value: "if", text: i18n.ts._pages.blocks.if },
				{ value: "post", text: i18n.ts._pages.blocks.post },
			],
		},
	];
}

function getScriptBlockList(type: string = null) {
	const list = [];

	const blocks = blockDefs.filter(
		(block) =>
			type == null ||
			block.out == null ||
			block.out === type ||
			typeof block.out === "number",
	);

	for (const block of blocks) {
		const category = list.find((x) => x.category === block.category);
		if (category) {
			category.items.push({
				value: block.type,
				text: i18n.t(`_pages.script.blocks.${block.type}`),
			});
		} else {
			list.push({
				category: block.category,
				label: i18n.t(`_pages.script.categories.${block.category}`),
				items: [
					{
						value: block.type,
						text: i18n.t(`_pages.script.blocks.${block.type}`),
					},
				],
			});
		}
	}

	const userFns = variables.filter((x) => x.type === "fn");
	if (userFns.length > 0) {
		list.unshift({
			label: i18n.t("_pages.script.categories.fn"),
			items: userFns.map((v) => ({
				value: "fn:" + v.name,
				text: v.name,
			})),
		});
	}

	return list;
}

function setEyeCatchingImage(img) {
	selectFile(img.currentTarget ?? img.target, null).then((file) => {
		eyeCatchingImageId = file.id;
	});
}

function removeEyeCatchingImage() {
	eyeCatchingImageId = null;
}

async function init() {
	hpml = new HpmlTypeChecker();

	watch(
		$$(variables),
		() => {
			hpml.variables = variables;
		},
		{ deep: true },
	);

	watch(
		$$(content),
		() => {
			hpml.pageVars = collectPageVars(content);
		},
		{ deep: true },
	);

	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;
		script = page.script;
		hideTitleWhenPinned = page.hideTitleWhenPinned;
		alignCenter = page.alignCenter;
		isPublic = page.isPublic;
		content = page.content;
		variables = page.variables;
		eyeCatchingImageId = page.eyeCatchingImageId;
	} else {
		const id = uuid();
		content = [
			{
				id,
				type: "text",
				text: "",
			},
		];
	}
}

init();

const headerActions = $computed(() => []);

const headerTabs = $computed(() => [
	{
		key: "settings",
		title: i18n.ts._pages.pageSetting,
		icon: "ph-gear-six ph-bold ph-lg",
	},
	{
		key: "contents",
		title: i18n.ts._pages.contents,
		icon: "ph-sticker ph-bold ph-lg",
	},
	{
		key: "variables",
		title: i18n.ts._pages.variables,
		icon: "ph-magic-wand ph-bold ph-lg",
	},
	{
		key: "script",
		title: i18n.ts.script,
		icon: "ph-code ph-bold ph-lg",
	},
]);

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: "ph-pencil ph-bold ph-lg",
		};
	}),
);
</script>

<style lang="scss" scoped>
.jqqmcavi {
	> .button {
		& + .button {
			margin: 4px;
		}
	}
}

.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>