SWREI/switched
0
0
Fork 0
Code

Improve MisskeyPages

Browse Source 
* ifブロック を追加
* ボタンやスイッチなどのテキストに変数使えるようにした
This commit is contained in:
syuilo 2019-04-30 06:40:02 +09:00
parent a60d83b101
commit 2e8e5c2751
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
16 changed files with 227 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
locales/ja-JP.yml
View File

@ -1842,6 +1842,7 @@ dev/views/new-app.vue:
pages:
new-page: "ページの作成"
edit-page: "ページの編集"
read-page: "ソースを表示中"
page-created: "ページを作成しました"
page-updated: "ページを更新しました"
are-you-sure-delete: "このページを削除しますか？"
@ -1871,6 +1872,9 @@ pages:
section: "セクション"
image: "画像"
button: "ボタン"
if: "もし"
_if:
variable: "変数"
input: "ユーザー入力"
_input:
name: "変数名"

4
src/client/app/common/views/components/page-editor/page-editor.button.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.button.vue
View File

@ -16,9 +16,9 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { faBolt } from '@fortawesome/free-solid-svg-icons';
import XContainer from './page-editor.container.vue';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),

113
src/client/app/common/views/components/page-editor/els/page-editor.el.if.vue Normal file
View File

@ -0,0 +1,113 @@
<template>
<x-container @remove="() => $emit('remove')">
<template #header><fa :icon="faQuestion"/> {{ $t('blocks.if') }}</template>
<template #func>
<button @click="add()">
<fa :icon="faPlus"/>
</button>
</template>
<section class="romcojzs">
<ui-select v-model="value.var">
<template #label>{{ $t('blocks._if.variable') }}</template>
<option v-for="v in aiScript.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
<optgroup :label="$t('script.pageVariables')">
<option v-for="v in aiScript.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
</optgroup>
<optgroup :label="$t('script.enviromentVariables')">
<option v-for="v in aiScript.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
</optgroup>
</ui-select>
<div class="children">
<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
</div>
</section>
</x-container>
</template>
<script lang="ts">
import Vue from 'vue';
import * as uuid from 'uuid';
import { faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
components: {
XContainer
},
inject: ['getPageBlockList'],
props: {
value: {
required: true
},
aiScript: {
required: true,
},
},
data() {
return {
faPlus, faQuestion
};
},
beforeCreate() {
this.$options.components.XBlock = require('../page-editor.block.vue').default
},
created() {
if (this.value.children == null) Vue.set(this.value, 'children', []);
if (this.value.var === undefined) Vue.set(this.value, 'var', null);
},
methods: {
async add() {
const { canceled, result: type } = await this.$root.dialog({
type: null,
title: this.$t('choose-block'),
select: {
items: this.getPageBlockList()
},
showCancelButton: true
});
if (canceled) return;
const id = uuid.v4();
this.value.children.push({ id, type });
},
updateItem(v) {
const i = this.value.children.findIndex(x => x.id === v.id);
const newValue = [
...this.value.children.slice(0, i),
v,
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
},
remove(el) {
const i = this.value.children.findIndex(x => x.id === el.id);
const newValue = [
...this.value.children.slice(0, i),
...this.value.children.slice(i + 1)
];
this.value.children = newValue;
this.$emit('input', this.value);
}
}
});
</script>
<style lang="stylus" scoped>
.romcojzs
padding 0 16px 16px 16px
</style>

6
src/client/app/common/views/components/page-editor/page-editor.image.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.image.vue
View File

@ -15,11 +15,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faImage, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
import XContainer from './page-editor.container.vue';
import XFileThumbnail from '../drive-file-thumbnail.vue';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
import XFileThumbnail from '../../drive-file-thumbnail.vue';
export default Vue.extend({
i18n: i18n('pages'),

4
src/client/app/common/views/components/page-editor/page-editor.input.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.input.vue
View File

@ -17,9 +17,9 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import XContainer from './page-editor.container.vue';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),

29
src/client/app/common/views/components/page-editor/page-editor.section.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.section.vue
View File

@ -12,7 +12,7 @@
<section class="ilrvjyvi">
<div class="children">
<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id"/>
<x-block v-for="child in value.children" :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
</div>
</section>
</x-container>
@ -20,11 +20,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import * as uuid from 'uuid';
import { faPlus, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
import XContainer from './page-editor.container.vue';
import * as uuid from 'uuid';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),
@ -33,10 +33,15 @@ export default Vue.extend({
XContainer
},
inject: ['getPageBlockList'],
props: {
value: {
required: true
},
aiScript: {
required: true,
},
},
data() {
@ -46,7 +51,7 @@ export default Vue.extend({
},
beforeCreate() {
this.$options.components.XBlock = require('./page-editor.block.vue').default
this.$options.components.XBlock = require('../page-editor.block.vue').default
},
created() {
@ -79,19 +84,7 @@ export default Vue.extend({
type: null,
title: this.$t('choose-block'),
select: {
items: [{
value: 'section', text: this.$t('blocks.section')
}, {
value: 'text', text: this.$t('blocks.text')
}, {
value: 'image', text: this.$t('blocks.image')
}, {
value: 'button', text: this.$t('blocks.button')
}, {
value: 'input', text: this.$t('blocks.input')
}, {
value: 'switch', text: this.$t('blocks.switch')
}]
items: this.getPageBlockList()
},
showCancelButton: true
});

4
src/client/app/common/views/components/page-editor/page-editor.switch.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.switch.vue
View File

@ -12,9 +12,9 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { faBolt, faSquareRootAlt } from '@fortawesome/free-solid-svg-icons';
import XContainer from './page-editor.container.vue';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),

4
src/client/app/common/views/components/page-editor/page-editor.text.vue → src/client/app/common/views/components/page-editor/els/page-editor.el.text.vue
View File

@ -10,9 +10,9 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
import { faAlignLeft } from '@fortawesome/free-solid-svg-icons';
import XContainer from './page-editor.container.vue';
import i18n from '../../../../../i18n';
import XContainer from '../page-editor.container.vue';
export default Vue.extend({
i18n: i18n('pages'),

22
src/client/app/common/views/components/page-editor/page-editor.block.vue
View File

@ -1,25 +1,29 @@
<template>
<component :is="'x-' + value.type" :value="value" @input="v => updateItem(v)" @remove="() => $emit('remove', value)" :key="value.id"/>
<component :is="'x-' + value.type" :value="value" @input="v => updateItem(v)" @remove="() => $emit('remove', value)" :key="value.id" :ai-script="aiScript"/>
</template>
<script lang="ts">
import Vue from 'vue';
import XSection from './page-editor.section.vue';
import XText from './page-editor.text.vue';
import XImage from './page-editor.image.vue';
import XButton from './page-editor.button.vue';
import XInput from './page-editor.input.vue';
import XSwitch from './page-editor.switch.vue';
import XSection from './els/page-editor.el.section.vue';
import XText from './els/page-editor.el.text.vue';
import XImage from './els/page-editor.el.image.vue';
import XButton from './els/page-editor.el.button.vue';
import XInput from './els/page-editor.el.input.vue';
import XSwitch from './els/page-editor.el.switch.vue';
import XIf from './els/page-editor.el.if.vue';
export default Vue.extend({
components: {
XSection, XText, XImage, XButton, XInput, XSwitch
XSection, XText, XImage, XButton, XInput, XSwitch, XIf
},
props: {
value: {
required: true
}
},
aiScript: {
required: true,
},
},
});
</script>

62
src/client/app/common/views/components/page-editor/page-editor.vue
View File

@ -2,16 +2,16 @@
<div>
<div class="gwbmwxkm" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<header>
<div class="title"><fa :icon="faStickyNote"/> {{ pageId ? $t('edit-page') : $t('new-page') }}</div>
<div class="title"><fa :icon="faStickyNote"/> {{ readonly ? $t('read-page') : pageId ? $t('edit-page') : $t('new-page') }}</div>
<div class="buttons">
<button @click="del()"><fa :icon="faTrashAlt"/></button>
<button @click="del()" v-if="!readonly"><fa :icon="faTrashAlt"/></button>
<button @click="() => showOptions = !showOptions"><fa :icon="faCog"/></button>
<button @click="save()"><fa :icon="faSave"/></button>
<button @click="save()" v-if="!readonly"><fa :icon="faSave"/></button>
</div>
</header>
<section>
<a class="view" v-if="pageId" :href="`/@${ $store.state.i.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
<a class="view" v-if="pageId" :href="`/@${ author.username }/pages/${ currentName }`" target="_blank"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('view-page') }}</a>
<ui-input v-model="title">
<span>{{ $t('title') }}</span>
@ -23,7 +23,7 @@
</ui-input>
<ui-input v-model="name">
<template #prefix>{{ url }}/@{{ $store.state.i.username }}/pages/</template>
<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
<span>{{ $t('url') }}</span>
</ui-input>
@ -45,10 +45,10 @@
</template>
<div class="content" v-for="child in content">
<x-block :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id"/>
<x-block :value="child" @input="v => updateItem(v)" @remove="() => remove(child)" :key="child.id" :ai-script="aiScript"/>
</div>
<ui-button @click="add()"><fa :icon="faPlus"/></ui-button>
<ui-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
</section>
</div>
@ -70,7 +70,7 @@
</template>
</div>
<ui-button @click="addVariable()" class="add"><fa :icon="faPlus"/></ui-button>
<ui-button @click="addVariable()" class="add" v-if="!readonly"><fa :icon="faPlus"/></ui-button>
<ui-info><span v-html="$t('variables-info')"></span><a @click="() => moreDetails = true" style="display:block;">{{ $t('more-details') }}</a></ui-info>
@ -106,11 +106,17 @@ export default Vue.extend({
page: {
type: String,
required: false
}
},
readonly: {
type: Boolean,
required: false,
default: false
},
},
data() {
return {
author: this.$store.state.i,
pageId: null,
currentName: null,
title: '',
@ -157,6 +163,7 @@ export default Vue.extend({
this.$root.api('pages/show', {
pageId: this.page,
}).then(page => {
this.author = page.user;
this.pageId = page.id;
this.title = page.title;
this.name = page.name;
@ -180,7 +187,9 @@ export default Vue.extend({
provide() {
return {
getScriptBlockList: this.getScriptBlockList
readonly: this.readonly,
getScriptBlockList: this.getScriptBlockList,
getPageBlockList: this.getPageBlockList
}
},
@ -250,19 +259,7 @@ export default Vue.extend({
type: null,
title: this.$t('choose-block'),
select: {
items: [{
value: 'section', text: this.$t('blocks.section')
}, {
value: 'text', text: this.$t('blocks.text')
}, {
value: 'image', text: this.$t('blocks.image')
}, {
value: 'button', text: this.$t('blocks.button')
}, {
value: 'input', text: this.$t('blocks.input')
}, {
value: 'switch', text: this.$t('blocks.switch')
}]
items: this.getPageBlockList()
},
showCancelButton: true
});
@ -324,6 +321,24 @@ export default Vue.extend({
this.variables = newValue;
},
getPageBlockList() {
return [{
value: 'section', text: this.$t('blocks.section')
}, {
value: 'text', text: this.$t('blocks.text')
}, {
value: 'image', text: this.$t('blocks.image')
}, {
value: 'button', text: this.$t('blocks.button')
}, {
value: 'input', text: this.$t('blocks.input')
}, {
value: 'switch', text: this.$t('blocks.switch')
}, {
value: 'if', text: this.$t('blocks.if')
}];
},
getScriptBlockList(type: string = null) {
const list = [];
@ -436,6 +451,7 @@ export default Vue.extend({
> .view
display inline-block
margin 16px 0 0 0
font-size 14px
> .content
margin-bottom 16px

3
src/client/app/common/views/pages/page/page.block.vue
View File

@ -10,10 +10,11 @@ import XImage from './page.image.vue';
import XButton from './page.button.vue';
import XInput from './page.input.vue';
import XSwitch from './page.switch.vue';
import XIf from './page.if.vue';
export default Vue.extend({
components: {
XText, XSection, XImage, XButton, XInput, XSwitch
XText, XSection, XImage, XButton, XInput, XSwitch, XIf
},
props: {

2
src/client/app/common/views/pages/page/page.button.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<ui-button class="kudkigyw" @click="click()">{{ value.text }}</ui-button>
<ui-button class="kudkigyw" @click="click()">{{ script.interpolate(value.text) }}</ui-button>
</div>
</template>

30
src/client/app/common/views/pages/page/page.if.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div v-show="script.vars.find(x => x.name === value.var).value">
<x-block v-for="child in value.children" :value="child" :page="page" :script="script" :key="child.id" :h="h"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
required: true
},
script: {
required: true
},
page: {
required: true
},
h: {
required: true
}
},
beforeCreate() {
this.$options.components.XBlock = require('./page.block.vue').default
},
});
</script>

2
src/client/app/common/views/pages/page/page.input.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ value.text }}</ui-input>
<ui-input class="kudkigyw" v-model="v" :type="value.inputType">{{ script.interpolate(value.text) }}</ui-input>
</div>
</template>

2
src/client/app/common/views/pages/page/page.switch.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="hkcxmtwj">
<ui-switch v-model="v">{{ value.text }}</ui-switch>
<ui-switch v-model="v">{{ script.interpolate(value.text) }}</ui-switch>
</div>
</template>

1
src/client/app/common/views/pages/page/page.vue
View File

@ -38,6 +38,7 @@ class Script {
}
public interpolate(str: string) {
if (str == null) return null;
return str.replace(/\{(.+?)\}/g, match => {
const v = this.vars.find(x => x.name === match.slice(1, -1).trim()).value;
return v == null ? 'NULL' : v.toString();