Better post form

src/client/app/mobile/api/post.ts

@@ -0,0 +1,23 @@
+import PostForm from '../views/components/post-form-dialog.vue';
+
+export default (os) => (opts) => {
+	const o = opts || {};
+
+	document.documentElement.style.overflow = 'hidden';
+
+	function recover() {
+		document.documentElement.style.overflow = 'auto';
+	}
+
+	const vm = new PostForm({
+		parent: os.app,
+		propsData: {
+			reply: o.reply,
+			renote: o.renote
+		}
+	}).$mount();
+	vm.$once('cancel', recover);
+	vm.$once('posted', recover);
+	document.body.appendChild(vm.$el);
+	(vm as any).focus();
+};

src/client/app/mobile/script.ts

@@ -14,6 +14,7 @@ import chooseDriveFolder from './api/choose-drive-folder';
 import chooseDriveFile from './api/choose-drive-file';
 import dialog from './api/dialog';
 import input from './api/input';
+import post from './api/post';
 import notify from './api/notify';
 
 import MkIndex from './views/pages/index.vue';
@@ -90,7 +91,7 @@ init((launch) => {
 		chooseDriveFile,
 		dialog: dialog(os),
 		input,
-		post: () => alert('deprecated'),
+		post: post(os),
 		notify
 	}));
 }, true);

src/client/app/mobile/views/components/note-detail.vue

@@ -75,19 +75,11 @@
 	<div class="replies" v-if="!compact">
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -113,9 +105,7 @@ export default Vue.extend({
 		return {
 			conversation: [],
 			conversationFetching: false,
-			replies: [],
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			replies: []
 		};
 	},
 
@@ -195,19 +185,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {

src/client/app/mobile/views/components/note.vue

@@ -60,19 +60,11 @@
 			</footer>
 		</div>
 	</article>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -90,9 +82,7 @@ export default Vue.extend({
 		return {
 			showContent: false,
 			connection: null,
-			connectionId: null,
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			connectionId: null
 		};
 	},
 
@@ -205,19 +195,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {

src/client/app/mobile/views/components/post-form-dialog.vue

@@ -0,0 +1,131 @@
+<template>
+<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main" @click.self="onBgClick">
+		<mk-post-form ref="form"
+			:reply="reply"
+			:renote="renote"
+			:initial-text="initialText"
+			:instant="instant"
+			@posted="onPosted"
+			@cancel="onCanceled"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				translateY: [-16, 0],
+				duration: 300,
+				easing: 'easeOutQuad'
+			});
+		});
+	},
+
+	methods: {
+		focus() {
+			this.$refs.form.focus();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				translateY: 16,
+				duration: 300,
+				easing: 'easeOutQuad',
+				complete: () => this.$destroy()
+			});
+		},
+
+		onBgClick() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		onPosted() {
+			this.$emit('posted');
+			this.close();
+		},
+
+		onCanceled() {
+			this.$emit('cancel');
+			this.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ulveipglmagnxfgvitaxyszerjwiqmwl
+	> .bg
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		right 0
+		height 100%
+		overflow auto
+		margin 0 auto 0 auto
+		opacity 0
+		transform translateY(-16px)
+
+</style>

src/client/app/mobile/views/pages/home.vue

@@ -42,10 +42,6 @@
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
-
-	<modal name="postForm">
-		<mk-post-form @posted="postFormClosed" @cancel="postFormClosed"/>
-	</modal>
 </mk-ui>
 </template>
 
@@ -111,11 +107,7 @@ export default Vue.extend({
 
 	methods: {
 		fn() {
-			this.$modal.push('postForm');
-		},
-
-		postFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post();
 		},
 
 		saveSrc() {