hotomoe/src/web/app/mobile/views/components/post-form.vue

<template>
<div class="mk-post-form">
	<header>
		<button class="cancel" @click="cancel">%fa:times%</button>
		<div>
			<span v-if="refs.text" class="text-count { over: refs.text.value.length > 1000 }">{ 1000 - refs.text.value.length }</span>
			<button class="submit" @click="post">%i18n:mobile.tags.mk-post-form.submit%</button>
		</div>
	</header>
	<div class="form">
		<mk-post-preview v-if="opts.reply" post={ opts.reply }/>
		<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder={ opts.reply ? '%i18n:mobile.tags.mk-post-form.reply-placeholder%' : '%i18n:mobile.tags.mk-post-form.post-placeholder%' }></textarea>
		<div class="attaches" show={ files.length != 0 }>
			<ul class="files" ref="attaches">
				<li class="file" each={ files } data-id={ id }>
					<div class="img" style="background-image: url({ url + '?thumbnail&size=128' })" @click="removeFile"></div>
				</li>
			</ul>
		</div>
		<mk-poll-editor v-if="poll" ref="poll" ondestroy={ onPollDestroyed }/>
		<mk-uploader @uploaded="attachMedia" @change="onChangeUploadings"/>
		<button ref="upload" @click="selectFile">%fa:upload%</button>
		<button ref="drive" @click="selectFileFromDrive">%fa:cloud%</button>
		<button class="kao" @click="kao">%fa:R smile%</button>
		<button class="poll" @click="addPoll">%fa:chart-pie%</button>
		<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
	</div>
</div
</template>

<script lang="ts">
import Vue from 'vue';
import Sortable from 'sortablejs';
import getKao from '../../common/scripts/get-kao';

export default Vue.extend({
	data() {
		return {
			posting: false,
			text: '',
			uploadings: [],
			files: [],
			poll: false
		};
	},
	mounted() {
		(this.$refs.text as any).focus();

		new Sortable(this.$refs.attaches, {
			animation: 150
		});
	},
	methods: {
		attachMedia(driveFile) {
			this.files.push(driveFile);
			this.$emit('change-attached-media', this.files);
		},
		detachMedia(id) {
			this.files = this.files.filter(x => x.id != id);
			this.$emit('change-attached-media', this.files);
		},
		onChangeFile() {
			Array.from((this.$refs.file as any).files).forEach(this.upload);
		},
		upload(file) {
			(this.$refs.uploader as any).upload(file);
		},
		onChangeUploadings(uploads) {
			this.$emit('change-uploadings', uploads);
		},
		clear() {
			this.text = '';
			this.files = [];
			this.poll = false;
			this.$emit('change-attached-media');
		},
		cancel() {
			this.$emit('cancel');
			this.$destroy();
		}
	}
});
</script>

<style lang="stylus" scoped>
.mk-post-form
	max-width 500px
	width calc(100% - 16px)
	margin 8px auto
	background #fff
	border-radius 8px
	box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)

	@media (min-width 500px)
		margin 16px auto
		width calc(100% - 32px)

	> header
		z-index 1
		height 50px
		box-shadow 0 1px 0 0 rgba(0, 0, 0, 0.1)

		> .cancel
			width 50px
			line-height 50px
			font-size 24px
			color #555

		> div
			position absolute
			top 0
			right 0

			> .text-count
				line-height 50px
				color #657786

			> .submit
				margin 8px
				padding 0 16px
				line-height 34px
				color $theme-color-foreground
				background $theme-color
				border-radius 4px

				&:disabled
					opacity 0.7

	> .form
		max-width 500px
		margin 0 auto

		> .mk-post-preview
			padding 16px

		> .attaches

			> .files
				display block
				margin 0
				padding 4px
				list-style none

				&:after
					content ""
					display block
					clear both

				> .file
					display block
					float left
					margin 0
					padding 0
					border solid 4px transparent

					> .img
						width 64px
						height 64px
						background-size cover
						background-position center center

		> .mk-uploader
			margin 8px 0 0 0
			padding 8px

		> [ref='file']
			display none

		> [ref='text']
			display block
			padding 12px
			margin 0
			width 100%
			max-width 100%
			min-width 100%
			min-height 80px
			font-size 16px
			color #333
			border none
			border-bottom solid 1px #ddd
			border-radius 0

			&:disabled
				opacity 0.5

		> [ref='upload']
		> [ref='drive']
		.kao
		.poll
			display inline-block
			padding 0
			margin 0
			width 48px
			height 48px
			font-size 20px
			color #657786
			background transparent
			outline none
			border none
			border-radius 0
			box-shadow none

</style>