Merge branch 'develop' into pr/4549

src/client/app/common/views/components/messaging-room.form.vue

@@ -158,7 +158,7 @@ export default Vue.extend({
 		},
 
 		upload(file) {
-			(this.$refs.uploader as any).upload(file);
+			(this.$refs.uploader as any).upload(file, this.$store.state.settings.uploadFolder);
 		},
 
 		onUploaded(file) {

src/client/app/common/views/components/page/page.block.vue

@@ -0,0 +1,40 @@
+<template>
+<component :is="'x-' + value.type" :value="value" :page="page" :script="script" :key="value.id" :h="h"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XText from './page.text.vue';
+import XSection from './page.section.vue';
+import XImage from './page.image.vue';
+import XButton from './page.button.vue';
+import XNumberInput from './page.number-input.vue';
+import XTextInput from './page.text-input.vue';
+import XTextareaInput from './page.textarea-input.vue';
+import XSwitch from './page.switch.vue';
+import XIf from './page.if.vue';
+import XTextarea from './page.textarea.vue';
+import XPost from './page.post.vue';
+import XCounter from './page.counter.vue';
+
+export default Vue.extend({
+	components: {
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter
+	},
+
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		},
+		page: {
+			required: true
+		},
+		h: {
+			required: true
+		}
+	},
+});
+</script>

src/client/app/common/views/components/page/page.button.vue

@@ -0,0 +1,55 @@
+<template>
+<div>
+	<ui-button class="kudkigyw" @click="click()" :primary="value.primary">{{ script.interpolate(value.text) }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	methods: {
+		click() {
+			if (this.value.action === 'dialog') {
+				this.script.eval();
+				this.$root.dialog({
+					text: this.script.interpolate(this.value.content)
+				});
+			} else if (this.value.action === 'resetRandom') {
+				this.script.aiScript.updateRandomSeed(Math.random());
+				this.script.eval();
+			} else if (this.value.action === 'pushEvent') {
+				this.$root.api('page-push', {
+					pageId: this.script.page.id,
+					event: this.value.event,
+					...(this.value.var ? {
+						var: this.script.vars[this.value.var]
+					} : {})
+				});
+
+				this.$root.dialog({
+					type: 'success',
+					text: this.script.interpolate(this.value.message)
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kudkigyw
+	display inline-block
+	min-width 200px
+	max-width 450px
+	margin 8px 0
+</style>

src/client/app/common/views/components/page/page.counter.vue

@@ -0,0 +1,47 @@
+<template>
+<div>
+	<ui-button class="llumlmnx" @click="click()">{{ script.interpolate(value.text) }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: 0,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	},
+
+	methods: {
+		click() {
+			this.v = this.v + (this.value.inc || 1);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.llumlmnx
+	display inline-block
+	min-width 300px
+	max-width 450px
+	margin 8px 0
+</style>

src/client/app/common/views/components/page/page.if.vue

@@ -0,0 +1,30 @@
+<template>
+<div v-show="script.vars[value.var]">
+	<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>

src/client/app/common/views/components/page/page.image.vue

@@ -0,0 +1,36 @@
+<template>
+<div class="lzyxtsnt">
+	<img v-if="image" :src="image.url"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		page: {
+			required: true
+		},
+	},
+
+	data() {
+		return {
+			image: null,
+		};
+	},
+
+	created() {
+		this.image = this.page.attachedFiles.find(x => x.id === this.value.fileId);
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.lzyxtsnt
+	> img
+		max-width 100%
+</style>

src/client/app/common/views/components/page/page.number-input.vue

@@ -0,0 +1,41 @@
+<template>
+<div>
+	<ui-input class="kudkigyw" v-model="v" type="number">{{ script.interpolate(value.text) }}</ui-input>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kudkigyw
+	display inline-block
+	min-width 300px
+	max-width 450px
+	margin 8px 0
+</style>

src/client/app/common/views/components/page/page.post.vue

@@ -0,0 +1,68 @@
+<template>
+<div class="ngbfujlo">
+	<ui-textarea class="textarea" :value="text" readonly></ui-textarea>
+	<ui-button primary @click="post()" :disabled="posting || posted">{{ posted ? $t('posted-from-post-form') : $t('post-from-post-form') }}</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			text: this.script.interpolate(this.value.text),
+			posted: false,
+			posting: false,
+		};
+	},
+
+	created() {
+		this.$watch('script.vars', () => {
+			this.text = this.script.interpolate(this.value.text);
+		}, { deep: true });
+	},
+
+	methods: {
+		post() {
+			this.posting = true;
+			this.$root.api('notes/create', {
+				text: this.text,
+			}).then(() => {
+				this.posted = true;
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ngbfujlo
+	padding 0 32px 32px 32px
+	border solid 2px var(--pageBlockBorder)
+	border-radius 6px
+
+	@media (max-width 600px)
+		padding 0 16px 16px 16px
+
+		> .textarea
+			margin-top 16px
+			margin-bottom 16px
+
+</style>

src/client/app/common/views/components/page/page.section.vue

@@ -0,0 +1,55 @@
+<template>
+<section class="sdgxphyu">
+	<component :is="'h' + h">{{ value.title }}</component>
+
+	<div class="children">
+		<x-block v-for="child in value.children" :value="child" :page="page" :script="script" :key="child.id" :h="h + 1"/>
+	</div>
+</section>
+</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>
+
+<style lang="stylus" scoped>
+.sdgxphyu
+	margin 1.5em 0
+
+	> h2
+		font-size 1.35em
+		margin 0 0 0.5em 0
+
+	> h3
+		font-size 1em
+		margin 0 0 0.5em 0
+
+	> h4
+		font-size 1em
+		margin 0 0 0.5em 0
+
+	> .children
+		//padding 16px
+
+</style>

src/client/app/common/views/components/page/page.switch.vue

@@ -0,0 +1,43 @@
+<template>
+<div class="hkcxmtwj">
+	<ui-switch v-model="v">{{ script.interpolate(value.text) }}</ui-switch>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.hkcxmtwj
+	display inline-block
+	margin 16px auto
+
+	& + .hkcxmtwj
+		margin-left 16px
+
+</style>

src/client/app/common/views/components/page/page.text-input.vue

@@ -0,0 +1,41 @@
+<template>
+<div>
+	<ui-input class="kudkigyw" v-model="v" type="text">{{ script.interpolate(value.text) }}</ui-input>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.kudkigyw
+	display inline-block
+	min-width 300px
+	max-width 450px
+	margin 8px 0
+</style>

src/client/app/common/views/components/page/page.text.vue

@@ -0,0 +1,62 @@
+<template>
+<div class="mrdgzndn">
+	<mfm :text="text" :is-note="false" :i="$store.state.i" :key="text"/>
+
+	<mk-url-preview v-for="url in urls" :url="url" :key="url" class="url"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { parse } from '../../../../../../mfm/parse';
+import { unique } from '../../../../../../prelude/array';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			text: this.script.interpolate(this.value.text),
+		};
+	},
+
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				const ast = parse(this.text);
+				// TODO: 再帰的にURL要素がないか調べる
+				return unique(ast
+					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.map(t => t.node.props.url));
+			} else {
+				return [];
+			}
+		}
+	},
+
+	created() {
+		this.$watch('script.vars', () => {
+			this.text = this.script.interpolate(this.value.text);
+		}, { deep: true });
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mrdgzndn
+	&:not(:first-child)
+		margin-top 0.5em
+
+	&:not(:last-child)
+		margin-bottom 0.5em
+
+	> .url
+		margin 0.5em 0
+</style>

src/client/app/common/views/components/page/page.textarea-input.vue

@@ -0,0 +1,36 @@
+<template>
+<div>
+	<ui-textarea class="" v-model="v">{{ script.interpolate(value.text) }}</ui-textarea>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			v: this.value.default,
+		};
+	},
+
+	watch: {
+		v() {
+			this.script.aiScript.updatePageVar(this.value.name, this.v);
+			this.script.eval();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/client/app/common/views/components/page/page.textarea.vue

@@ -0,0 +1,33 @@
+<template>
+<ui-textarea class="" :value="text" readonly></ui-textarea>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			required: true
+		},
+		script: {
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			text: this.script.interpolate(this.value.text),
+		};
+	},
+
+	created() {
+		this.$watch('script.vars', () => {
+			this.text = this.script.interpolate(this.value.text);
+		}, { deep: true });
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+</style>

src/client/app/common/views/components/page/page.vue

@@ -0,0 +1,218 @@
+<template>
+<div class="iroscrza" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners, center: page.alignCenter }" :style="{ fontFamily: page.font }">
+	<header v-if="showTitle">
+		<div class="title">{{ page.title }}</div>
+	</header>
+
+	<div v-if="script">
+		<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :script="script" :key="child.id" :h="2"/>
+	</div>
+
+	<footer v-if="showFooter">
+		<small>@{{ page.user.username }}</small>
+		<template v-if="$store.getters.isSignedIn && $store.state.i.id === page.userId">
+			<router-link :to="`/i/pages/edit/${page.id}`">{{ $t('edit-this-page') }}</router-link>
+			<a v-if="$store.state.i.pinnedPageId === page.id" @click="pin(false)">{{ $t('unpin-this-page') }}</a>
+			<a v-else @click="pin(true)">{{ $t('pin-this-page') }}</a>
+		</template>
+		<router-link :to="`./${page.name}/view-source`">{{ $t('view-source') }}</router-link>
+		<div class="like">
+			<button @click="unlike()" v-if="page.isLiked" :title="$t('unlike')"><fa :icon="faHeartS"/></button>
+			<button @click="like()" v-else :title="$t('like')"><fa :icon="faHeart"/></button>
+			<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
+		</div>
+	</footer>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
+import { faHeart } from '@fortawesome/free-regular-svg-icons';
+import XBlock from './page.block.vue';
+import { ASEvaluator } from '../../../../../../misc/aiscript/evaluator';
+import { collectPageVars } from '../../../scripts/collect-page-vars';
+import { url } from '../../../../config';
+
+class Script {
+	public aiScript: ASEvaluator;
+	private onError: any;
+	public vars: Record<string, any>;
+	public page: Record<string, any>;
+
+	constructor(page, aiScript, onError) {
+		this.page = page;
+		this.aiScript = aiScript;
+		this.onError = onError;
+		this.eval();
+	}
+
+	public eval() {
+		try {
+			this.vars = this.aiScript.evaluateVars();
+		} catch (e) {
+			this.onError(e);
+		}
+	}
+
+	public interpolate(str: string) {
+		if (str == null) return null;
+		return str.replace(/{(.+?)}/g, match => {
+			const v = this.vars[match.slice(1, -1).trim()];
+			return v == null ? 'NULL' : v.toString();
+		});
+	}
+}
+
+export default Vue.extend({
+	i18n: i18n('pages'),
+
+	components: {
+		XBlock
+	},
+
+	props: {
+		page: {
+			type: Object,
+			required: true
+		},
+		showTitle: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		showFooter: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+
+	data() {
+		return {
+			script: null,
+			faHeartS, faHeart
+		};
+	},
+
+	created() {
+		const pageVars = this.getPageVars();
+		this.script = new Script(this.page, new ASEvaluator(this.page.variables, pageVars, {
+			randomSeed: Math.random(),
+			user: this.page.user,
+			visitor: this.$store.state.i,
+			page: this.page,
+			url: url
+		}), e => {
+			console.dir(e);
+		});
+	},
+
+	methods: {
+		getPageVars() {
+			return collectPageVars(this.page.content);
+		},
+
+		like() {
+			this.$root.api('pages/like', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = true;
+				this.page.likedCount++;
+			});
+		},
+
+		unlike() {
+			this.$root.api('pages/unlike', {
+				pageId: this.page.id,
+			}).then(() => {
+				this.page.isLiked = false;
+				this.page.likedCount--;
+			});
+		},
+
+		pin(pin) {
+			this.$root.api('i/update', {
+				pinnedPageId: pin ? this.page.id : null,
+			}).then(() => {
+				this.$root.dialog({
+					type: 'success',
+					splash: true
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.iroscrza
+	overflow hidden
+	background var(--face)
+
+	&.center
+		text-align center
+
+	&.round
+		border-radius 6px
+
+	&.shadow
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+
+	> header
+		> .title
+			z-index 1
+			margin 0
+			padding 16px 32px
+			font-size 20px
+			font-weight bold
+			color var(--text)
+			box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
+
+			@media (max-width 600px)
+				padding 16px 32px
+				font-size 20px
+
+			@media (max-width 400px)
+				padding 10px 20px
+				font-size 16px
+
+	> div
+		color var(--text)
+		padding 24px 32px
+		font-size 16px
+
+		@media (max-width 600px)
+			padding 24px 32px
+			font-size 16px
+
+		@media (max-width 400px)
+			padding 20px 20px
+			font-size 15px
+
+	> footer
+		color var(--text)
+		padding 0 32px 28px 32px
+
+		@media (max-width 600px)
+			padding 0 32px 28px 32px
+
+		@media (max-width 400px)
+			padding 0 20px 20px 20px
+			font-size 14px
+
+		> small
+			display block
+			opacity 0.5
+
+		> a
+			font-size 90%
+
+		> a + a
+			margin-left 8px
+
+		> .like
+			margin-top 16px
+
+</style>

src/client/app/common/views/components/settings/drive.vue

@@ -11,6 +11,12 @@
 		<header>{{ $t('stats') }}</header>
 		<div ref="chart" style="margin-bottom: -16px; margin-left: -8px; color: #000;"></div>
 	</section>
+
+	<section>
+		<header>{{ $t('default-upload-folder') }}</header>
+		<ui-input v-model="uploadFolderName" readonly>{{ $t('default-upload-folder-name') }}</ui-input>
+		<ui-button @click="chooseUploadFolder()">{{ $t('change-default-upload-folder') }}</ui-button>
+	</section>
 </ui-card>
 </template>
 
@@ -26,7 +32,8 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			usage: null,
-			capacity: null
+			capacity: null,
+			uploadFolderName: null
 		};
 	},
 
@@ -40,10 +47,25 @@ export default Vue.extend({
 					l: 0.5
 				})
 			};
-		}
+		},
+
+		uploadFolder: {
+			get() { return this.$store.state.settings.uploadFolder; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'uploadFolder', value }); }
+		},
 	},
 
 	mounted() {
+		if (this.uploadFolder == null) {
+			this.uploadFolderName = this.$t('@._settings.root');
+		} else {
+			this.$root.api('drive/folders/show', {
+				folderId: this.uploadFolder
+			}).then(folder => {
+				this.uploadFolderName = folder.name;
+			});
+		}
+	
 		this.$root.api('drive').then(info => {
 			this.capacity = info.capacity;
 			this.usage = info.usage;
@@ -89,6 +111,9 @@ export default Vue.extend({
 						height: 150,
 						zoom: {
 							enabled: false
+						},
+						toolbar: {
+							show: false
 						}
 					},
 					plotOptions: {
@@ -152,6 +177,13 @@ export default Vue.extend({
 
 				chart.render();
 			});
+		},
+
+		chooseUploadFolder() {
+			this.$chooseDriveFolder().then(folder => {
+				this.uploadFolder = folder ? folder.id : null;
+				this.uploadFolderName = folder ? folder.name : this.$t('@._settings.root');
+			})
 		}
 	}
 });