client: simplify page editor

This commit is contained in:
Johann150 2022-07-31 22:49:02 +02:00
parent 90d35b951f
commit b662ce8460
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
2 changed files with 6 additions and 323 deletions

View file

@ -1,6 +1,6 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<div class="jqqmcavi"> <div class="jqqmcavi">
<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton> <MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="fas fa-external-link-square-alt"></i> {{ $ts._pages.viewPage }}</MkButton>
@ -45,69 +45,25 @@
</div> </div>
<div v-else-if="tab === 'contents'"> <div v-else-if="tab === 'contents'">
<div> <textarea v-model="text"/>
<XBlocks v-model="content" class="content" :hpml="hpml"/>
<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
<div v-else-if="tab === 'variables'">
<div class="qmuvgica">
<XDraggable 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>
</XDraggable>
<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
</div>
</div>
<div v-else-if="tab === 'script'">
<div>
<MkTextarea v-model="script" class="_code"/>
</div>
</div> </div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, computed, provide, watch } from 'vue'; import { computed, watch } from 'vue';
import 'prismjs';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-okaidia.css';
import 'vue-prism-editor/dist/prismeditor.min.css';
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/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkSelect from '@/components/form/select.vue'; import MkSelect from '@/components/form/select.vue';
import MkSwitch from '@/components/form/switch.vue'; import MkSwitch from '@/components/form/switch.vue';
import MkInput from '@/components/form/input.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 { url } from '@/config';
import { collectPageVars } from '@/scripts/collect-page-vars';
import * as os from '@/os'; import * as os from '@/os';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
import { mainRouter } from '@/router'; import { mainRouter } from '@/router';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account'; import { $i } from '@/account';
const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{ const props = defineProps<{
initPageId?: string; initPageId?: string;
@ -123,20 +79,13 @@ let pageId = $ref(null);
let currentName = $ref(null); let currentName = $ref(null);
let title = $ref(''); let title = $ref('');
let summary = $ref(null); let summary = $ref(null);
let text = $ref('Hello, world!');
let name = $ref(Date.now().toString()); let name = $ref(Date.now().toString());
let eyeCatchingImage = $ref(null); let eyeCatchingImage = $ref(null);
let eyeCatchingImageId = $ref(null); let eyeCatchingImageId = $ref(null);
let font = $ref('sans-serif'); let font = $ref('sans-serif');
let content = $ref([]);
let alignCenter = $ref(false); let alignCenter = $ref(false);
let hideTitleWhenPinned = $ref(false); 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 () => { watch($$(eyeCatchingImageId), async () => {
if (eyeCatchingImageId == null) { if (eyeCatchingImageId == null) {
@ -154,11 +103,9 @@ function getSaveOptions() {
name: name.trim(), name: name.trim(),
summary, summary,
font, font,
script,
hideTitleWhenPinned, hideTitleWhenPinned,
alignCenter, alignCenter,
content, text,
variables,
eyeCatchingImageId, eyeCatchingImageId,
}; };
} }
@ -239,111 +186,6 @@ function duplicate() {
}); });
} }
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(evt) { function setEyeCatchingImage(evt) {
selectFile(evt.currentTarget ?? evt.target, null).then(file => { selectFile(evt.currentTarget ?? evt.target, null).then(file => {
eyeCatchingImageId = file.id; eyeCatchingImageId = file.id;
@ -354,21 +196,7 @@ function removeEyeCatchingImage() {
eyeCatchingImageId = null; eyeCatchingImageId = null;
} }
function highlighter(code) {
return highlight(code, languages.js, 'javascript');
}
async function init() { async function init() {
hpml = new HpmlTypeChecker();
watch($$(variables), () => {
hpml.variables = variables;
}, { deep: true });
watch($$(content), () => {
hpml.pageVars = collectPageVars(content);
}, { deep: true });
if (props.initPageId) { if (props.initPageId) {
page = await os.api('pages/show', { page = await os.api('pages/show', {
pageId: props.initPageId, pageId: props.initPageId,
@ -389,26 +217,15 @@ async function init() {
currentName = page.name; currentName = page.name;
summary = page.summary; summary = page.summary;
font = page.font; font = page.font;
script = page.script;
hideTitleWhenPinned = page.hideTitleWhenPinned; hideTitleWhenPinned = page.hideTitleWhenPinned;
alignCenter = page.alignCenter; alignCenter = page.alignCenter;
content = page.content; text = page.text;
variables = page.variables;
eyeCatchingImageId = page.eyeCatchingImageId; eyeCatchingImageId = page.eyeCatchingImageId;
} else {
const id = uuid();
content = [{
id,
type: 'text',
text: 'Hello World!',
}];
} }
} }
init(); init();
const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{ const headerTabs = $computed(() => [{
key: 'settings', key: 'settings',
title: i18n.ts._pages.pageSetting, title: i18n.ts._pages.pageSetting,
@ -417,14 +234,6 @@ const headerTabs = $computed(() => [{
key: 'contents', key: 'contents',
title: i18n.ts._pages.contents, title: i18n.ts._pages.contents,
icon: 'fas fa-sticky-note', icon: 'fas fa-sticky-note',
}, {
key: 'variables',
title: i18n.ts._pages.variables,
icon: 'fas fa-magic',
}, {
key: 'script',
title: i18n.ts.script,
icon: 'fas fa-code',
}]); }]);
definePageMetadata(computed(() => { definePageMetadata(computed(() => {
@ -450,82 +259,4 @@ definePageMetadata(computed(() => {
} }
} }
} }
.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> </style>

View file

@ -1,48 +0,0 @@
export function collectPageVars(content) {
const pageVars = [];
const collect = (xs: any[]) => {
for (const x of xs) {
if (x.type === 'textInput') {
pageVars.push({
name: x.name,
type: 'string',
value: x.default || '',
});
} else if (x.type === 'textareaInput') {
pageVars.push({
name: x.name,
type: 'string',
value: x.default || '',
});
} else if (x.type === 'numberInput') {
pageVars.push({
name: x.name,
type: 'number',
value: x.default || 0,
});
} else if (x.type === 'switch') {
pageVars.push({
name: x.name,
type: 'boolean',
value: x.default || false,
});
} else if (x.type === 'counter') {
pageVars.push({
name: x.name,
type: 'number',
value: 0,
});
} else if (x.type === 'radioButton') {
pageVars.push({
name: x.name,
type: 'string',
value: x.default || '',
});
} else if (x.children) {
collect(x.children);
}
}
};
collect(content);
return pageVars;
}