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

391 lines
8.9 KiB
Vue
Raw Normal View History

2018-02-14 06:26:08 +02:00
<template>
<div class="mk-post-form">
<header>
<button class="cancel" @click="cancel">%fa:times%</button>
<div>
2018-02-22 00:06:47 +02:00
<span class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</span>
2018-03-05 07:09:12 +02:00
<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
2018-05-18 00:27:27 +03:00
<button class="submit" :disabled="posting" @click="post">
<template v-if="reply">%i18n:@reply%</template>
<template v-else-if="renote">%i18n:@renote%</template>
<template v-else>%i18n:@submit%</template>
</button>
2018-02-14 06:26:08 +02:00
</div>
</header>
<div class="form">
2018-04-07 20:30:37 +03:00
<mk-note-preview v-if="reply" :note="reply"/>
2018-05-18 00:27:27 +03:00
<mk-note-preview v-if="renote" :note="renote"/>
2018-04-29 02:51:17 +03:00
<div v-if="visibility == 'specified'" class="visibleUsers">
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
<a @click="addVisibleUser">+ユーザーを追加</a>
</div>
2018-04-22 11:04:52 +03:00
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
2018-05-20 14:26:38 +03:00
<textarea v-model="text" ref="text" :disabled="posting" :placeholder="reply ? '%i18n:@reply-placeholder%' : renote ? '%i18n:@renote-placeholder%' : '%i18n:@note-placeholder%'"></textarea>
2018-02-21 19:37:04 +02:00
<div class="attaches" v-show="files.length != 0">
2018-02-22 00:06:47 +02:00
<x-draggable class="files" :list="files" :options="{ animation: 150 }">
<div class="file" v-for="file in files" :key="file.id">
<div class="img" :style="`background-image: url(${file.url}?thumbnail&size=128)`" @click="detachMedia(file)"></div>
</div>
</x-draggable>
2018-02-14 06:26:08 +02:00
</div>
2018-03-04 05:14:44 +02:00
<mk-poll-editor v-if="poll" ref="poll" @destroyed="poll = false"/>
2018-02-22 00:06:47 +02:00
<mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/>
2018-05-07 10:39:00 +03:00
<footer>
<button class="upload" @click="chooseFile">%fa:upload%</button>
<button class="drive" @click="chooseFileFromDrive">%fa:cloud%</button>
<button class="kao" @click="kao">%fa:R smile%</button>
<button class="poll" @click="poll = true">%fa:chart-pie%</button>
<button class="poll" @click="useCw = !useCw">%fa:eye-slash%</button>
<button class="geo" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
<button class="visibility" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
</footer>
2018-02-22 00:06:47 +02:00
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
2018-02-14 06:26:08 +02:00
</div>
2018-02-21 19:15:46 +02:00
</div>
2018-02-14 06:26:08 +02:00
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-22 00:06:47 +02:00
import * as XDraggable from 'vuedraggable';
2018-04-29 02:51:17 +03:00
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
2018-02-21 19:37:04 +02:00
import getKao from '../../../common/scripts/get-kao';
2018-05-26 17:20:52 +03:00
import parse from '../../../../../text/parse';
2018-02-14 06:26:08 +02:00
export default Vue.extend({
2018-02-22 00:06:47 +02:00
components: {
2018-04-29 02:51:17 +03:00
XDraggable,
MkVisibilityChooser
2018-02-22 00:06:47 +02:00
},
2018-04-22 11:04:52 +03:00
2018-05-18 00:27:27 +03:00
props: ['reply', 'renote'],
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
data() {
return {
posting: false,
text: '',
uploadings: [],
files: [],
2018-03-05 01:44:37 +02:00
poll: false,
2018-04-22 11:04:52 +03:00
geo: null,
2018-04-29 02:51:17 +03:00
visibility: 'public',
visibleUsers: [],
2018-04-22 11:04:52 +03:00
useCw: false,
cw: null
2018-02-14 06:26:08 +02:00
};
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
mounted() {
if (this.reply && this.reply.user.host != null) {
this.text = `@${this.reply.user.username}@${this.reply.user.host} `;
}
2018-05-26 17:20:52 +03:00
if (this.reply && this.reply.text != null) {
const ast = parse(this.reply.text);
ast.filter(t => t.type == 'mention').forEach(x => {
const mention = x.host ? `@${x.username}@${x.host}` : `@${x.username}`;
2018-05-26 21:01:08 +03:00
// 自分は除外
2018-05-27 07:49:09 +03:00
if (this.$store.state.i.username == x.username && x.host == null) return;
2018-05-26 21:01:08 +03:00
// 重複は除外
if (this.text.indexOf(`${mention} `) != -1) return;
this.text += `${mention} `;
2018-05-26 17:20:52 +03:00
});
}
2018-02-22 00:06:47 +02:00
this.$nextTick(() => {
2018-02-22 22:43:19 +02:00
this.focus();
2018-02-14 06:26:08 +02:00
});
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
methods: {
2018-02-22 22:43:19 +02:00
focus() {
(this.$refs.text as any).focus();
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
chooseFile() {
(this.$refs.file as any).click();
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
chooseFileFromDrive() {
(this as any).apis.chooseDriveFile({
multiple: true
}).then(files => {
files.forEach(this.attachMedia);
});
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
attachMedia(driveFile) {
this.files.push(driveFile);
this.$emit('change-attached-media', this.files);
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
detachMedia(file) {
this.files = this.files.filter(x => x.id != file.id);
2018-02-14 06:26:08 +02:00
this.$emit('change-attached-media', this.files);
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
onChangeFile() {
Array.from((this.$refs.file as any).files).forEach(this.upload);
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
upload(file) {
(this.$refs.uploader as any).upload(file);
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
onChangeUploadings(uploads) {
this.$emit('change-uploadings', uploads);
},
2018-04-22 11:04:52 +03:00
2018-03-05 01:44:37 +02:00
setGeo() {
if (navigator.geolocation == null) {
alert('お使いの端末は位置情報に対応していません');
return;
}
navigator.geolocation.getCurrentPosition(pos => {
this.geo = pos.coords;
}, err => {
alert('エラー: ' + err.message);
}, {
enableHighAccuracy: true
});
},
2018-04-22 11:04:52 +03:00
2018-03-05 07:09:12 +02:00
removeGeo() {
this.geo = null;
},
2018-04-22 11:04:52 +03:00
2018-04-29 02:51:17 +03:00
setVisibility() {
const w = (this as any).os.new(MkVisibilityChooser, {
source: this.$refs.visibilityButton,
compact: true,
v: this.visibility
});
w.$once('chosen', v => {
this.visibility = v;
});
},
addVisibleUser() {
(this as any).apis.input({
title: 'ユーザー名を入力してください'
}).then(username => {
(this as any).api('users/show', {
username
}).then(user => {
this.visibleUsers.push(user);
});
});
},
removeVisibleUser(user) {
this.visibleUsers = this.visibleUsers.filter(u => u != user);
},
2018-02-14 06:26:08 +02:00
clear() {
this.text = '';
this.files = [];
this.poll = false;
this.$emit('change-attached-media');
},
2018-04-22 11:04:52 +03:00
2018-02-22 00:06:47 +02:00
post() {
this.posting = true;
2018-05-27 07:49:09 +03:00
const viaMobile = this.$store.state.settings.disableViaMobile !== true;
2018-04-07 20:30:37 +03:00
(this as any).api('notes/create', {
2018-02-22 00:06:47 +02:00
text: this.text == '' ? undefined : this.text,
2018-03-29 08:48:47 +03:00
mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
replyId: this.reply ? this.reply.id : undefined,
2018-05-18 00:27:27 +03:00
renoteId: this.renote ? this.renote.id : undefined,
2018-03-04 02:39:25 +02:00
poll: this.poll ? (this.$refs.poll as any).get() : undefined,
2018-04-22 11:04:52 +03:00
cw: this.useCw ? this.cw || '' : undefined,
2018-03-05 02:03:54 +02:00
geo: this.geo ? {
2018-03-29 09:23:15 +03:00
coordinates: [this.geo.longitude, this.geo.latitude],
2018-03-05 02:03:54 +02:00
altitude: this.geo.altitude,
accuracy: this.geo.accuracy,
altitudeAccuracy: this.geo.altitudeAccuracy,
heading: isNaN(this.geo.heading) ? null : this.geo.heading,
speed: this.geo.speed,
} : null,
2018-04-29 02:51:17 +03:00
visibility: this.visibility,
visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined,
2018-03-29 08:48:47 +03:00
viaMobile: viaMobile
2018-02-22 00:06:47 +02:00
}).then(data => {
2018-04-07 20:30:37 +03:00
this.$emit('note');
2018-02-22 00:06:47 +02:00
this.$destroy();
}).catch(err => {
this.posting = false;
});
},
2018-04-22 11:04:52 +03:00
2018-02-14 06:26:08 +02:00
cancel() {
this.$emit('cancel');
this.$destroy();
2018-02-21 19:37:04 +02:00
},
2018-04-22 11:04:52 +03:00
2018-02-21 19:37:04 +02:00
kao() {
this.text += getKao();
2018-02-14 06:26:08 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-03-03 06:47:55 +02:00
@import '~const.styl'
2018-04-29 02:51:17 +03:00
root(isDark)
2018-02-14 06:26:08 +02:00
max-width 500px
width calc(100% - 16px)
margin 8px auto
2018-04-29 02:51:17 +03:00
background isDark ? #282C37 : #fff
2018-02-14 06:26:08 +02:00
border-radius 8px
2018-04-29 02:51:17 +03:00
box-shadow 0 0 2px rgba(#000, 0.1)
2018-02-14 06:26:08 +02:00
@media (min-width 500px)
margin 16px auto
width calc(100% - 32px)
2018-04-29 02:51:17 +03:00
box-shadow 0 8px 32px rgba(#000, 0.1)
2018-04-27 15:33:18 +03:00
@media (min-width 600px)
margin 32px auto
2018-02-14 06:26:08 +02:00
> header
2018-04-29 02:51:17 +03:00
z-index 1000
2018-02-14 06:26:08 +02:00
height 50px
2018-04-29 02:51:17 +03:00
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
2018-02-14 06:26:08 +02:00
> .cancel
2018-03-04 05:14:53 +02:00
padding 0
2018-02-14 06:26:08 +02:00
width 50px
line-height 50px
font-size 24px
2018-04-29 02:51:17 +03:00
color isDark ? #9baec8 : #555
2018-02-14 06:26:08 +02:00
> div
position absolute
top 0
right 0
2018-03-05 07:09:12 +02:00
color #657786
2018-02-14 06:26:08 +02:00
> .text-count
line-height 50px
2018-03-05 07:09:12 +02:00
> .geo
margin 0 8px
line-height 50px
2018-02-14 06:26:08 +02:00
> .submit
margin 8px
padding 0 16px
line-height 34px
2018-03-04 05:14:53 +02:00
vertical-align bottom
2018-02-14 06:26:08 +02:00
color $theme-color-foreground
background $theme-color
border-radius 4px
&:disabled
opacity 0.7
> .form
max-width 500px
margin 0 auto
2018-04-07 20:30:37 +03:00
> .mk-note-preview
2018-02-14 06:26:08 +02:00
padding 16px
2018-04-29 02:51:17 +03:00
> .visibleUsers
margin-bottom 8px
font-size 14px
> span
margin-right 16px
color isDark ? #fff : #666
> input
z-index 1
> input
> textarea
display block
padding 12px
margin 0
width 100%
font-size 16px
color isDark ? #fff : #333
background isDark ? #191d23 : #fff
border none
border-radius 0
box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
&:disabled
opacity 0.5
> textarea
max-width 100%
min-width 100%
min-height 80px
2018-02-14 06:26:08 +02:00
> .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
2018-02-16 20:01:00 +02:00
> .mk-uploader
2018-02-14 06:26:08 +02:00
margin 8px 0 0 0
padding 8px
2018-02-22 00:06:47 +02:00
> .file
2018-02-14 06:26:08 +02:00
display none
2018-05-07 10:39:00 +03:00
> footer
white-space nowrap
overflow auto
-webkit-overflow-scrolling touch
overflow-scrolling touch
> *
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
2018-02-14 06:26:08 +02:00
2018-04-29 02:51:17 +03:00
.mk-post-form[data-darkmode]
root(true)
.mk-post-form:not([data-darkmode])
root(false)
2018-02-14 06:26:08 +02:00
2018-04-29 02:51:17 +03:00
</style>