forked from FoundKeyGang/FoundKey
client: simplify page editor
This commit is contained in:
parent
90d35b951f
commit
b662ce8460
GPG key ID:
9EE6577A2A06F8F1
2 changed files with 6 additions and 323 deletions
|
|
@ -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>
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue