diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 99bcb1b50f..25c052bc42 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -101,6 +101,34 @@ common: follow-users-to-make-your-timeline: "ユーザーをフォローすると投稿がタイムラインに表示されます。" explore: "ユーザーを探索する" + post-form: + attach-location-information: "位置情報を添付する" + hide-contents: "内容を隠す" + reply-placeholder: "この投稿への返信..." + quote-placeholder: "この投稿を引用..." + option-quote-placeholder: "この投稿を引用... (オプション)" + quote-attached: "引用付き" + quote-question: "引用として添付しますか?" + submit: "投稿" + reply: "返信" + renote: "Renote" + posting: "投稿中" + attach-media-from-local: "PCからメディアを添付" + attach-media-from-drive: "ドライブからメディアを添付" + insert-a-kao: "v('ω')v" + create-poll: "アンケートを作成" + text-remain: "残り{}文字" + recent-tags: "最近" + local-only-message: "この投稿はローカルにのみ公開されます" + click-to-tagging: "クリックでタグ付け" + visibility: "公開範囲" + geolocation-alert: "お使いの端末は位置情報に対応していません" + error: "エラー" + enter-username: "ユーザー名を入力してください" + add-visible-user: "ユーザーを追加" + cw-placeholder: "内容への注釈 (オプション)" + username-prompt: "ユーザー名を入力してください" + weekday-short: sunday: "日" monday: "月" @@ -1017,34 +1045,12 @@ desktop/views/components/notifications.vue: empty: "ありません!" desktop/views/components/post-form.vue: - add-visible-user: "+ユーザーを追加" - attach-location-information: "位置情報を添付する" - hide-contents: "内容を隠す" - reply-placeholder: "この投稿への返信..." - quote-placeholder: "この投稿を引用..." - submit: "投稿" - reply: "返信" - renote: "Renote" posted: "投稿しました!" replied: "返信しました!" reposted: "Renoteしました!" note-failed: "投稿に失敗しました" reply-failed: "返信に失敗しました" renote-failed: "Renoteに失敗しました" - posting: "投稿中" - attach-media-from-local: "PCからメディアを添付" - attach-media-from-drive: "ドライブからメディアを添付" - insert-a-kao: "v('ω')v" - create-poll: "アンケートを作成" - text-remain: "残り{}文字" - recent-tags: "最近" - local-only-message: "この投稿はローカルにのみ公開されます" - click-to-tagging: "クリックでタグ付け" - visibility: "公開範囲" - geolocation-alert: "お使いの端末は位置情報に対応していません" - error: "エラー" - enter-username: "ユーザー名を入力してください" - annotations: "内容への注釈 (オプション)" desktop/views/components/post-form-window.vue: note: "新規投稿" @@ -1726,18 +1732,6 @@ mobile/views/components/note-sub.vue: mobile/views/components/notifications.vue: empty: "ありません!" -mobile/views/components/post-form.vue: - add-visible-user: "ユーザーを追加" - submit: "投稿" - reply: "返信" - renote: "Renote" - quote-placeholder: "この投稿を引用... (オプション)" - reply-placeholder: "この投稿への返信..." - cw-placeholder: "内容への注釈 (オプション)" - geolocation-alert: "お使いの端末は位置情報に対応していません" - error: "エラー" - username-prompt: "ユーザー名を入力してください" - mobile/views/components/sub-note-content.vue: private: "この投稿は非公開です" deleted: "この投稿は削除されました" diff --git a/package.json b/package.json index 6fc8a0648d..b6615ed5b0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "misskey", "author": "syuilo <i@syuilo.com>", - "version": "11.19.1", + "version": "11.20.0", "codename": "daybreak", "repository": { "type": "git", diff --git a/src/client/app/common/scripts/post-form.ts b/src/client/app/common/scripts/post-form.ts new file mode 100644 index 0000000000..85a578484f --- /dev/null +++ b/src/client/app/common/scripts/post-form.ts @@ -0,0 +1,478 @@ +import insertTextAtCursor from 'insert-text-at-cursor'; +import { length } from 'stringz'; +import { toASCII } from 'punycode'; +import MkVisibilityChooser from '../views/components/visibility-chooser.vue'; +import getFace from './get-face'; +import { parse } from '../../../../mfm/parse'; +import { host, url } from '../../config'; +import i18n from '../../i18n'; +import { erase, unique } from '../../../../prelude/array'; +import extractMentions from '../../../../misc/extract-mentions'; + +export default (opts) => ({ + i18n: i18n(), + + components: { + XPostFormAttaches: () => import('../views/components/post-form-attaches.vue').then(m => m.default), + XPollEditor: () => import('../views/components/poll-editor.vue').then(m => m.default) + }, + + props: { + reply: { + type: Object, + required: false + }, + renote: { + type: Object, + required: false + }, + mention: { + type: Object, + required: false + }, + initialText: { + type: String, + required: false + }, + instant: { + type: Boolean, + required: false, + default: false + } + }, + + data() { + return { + posting: false, + text: '', + files: [], + uploadings: [], + poll: false, + pollChoices: [], + pollMultiple: false, + pollExpiration: [], + useCw: false, + cw: null, + geo: null, + visibility: 'public', + visibleUsers: [], + localOnly: false, + autocomplete: null, + draghover: false, + quoteId: null, + recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'), + maxNoteTextLength: 1000 + }; + }, + + computed: { + draftId(): string { + return this.renote + ? `renote:${this.renote.id}` + : this.reply + ? `reply:${this.reply.id}` + : 'note'; + }, + + placeholder(): string { + const xs = [ + this.$t('@.note-placeholders.a'), + this.$t('@.note-placeholders.b'), + this.$t('@.note-placeholders.c'), + this.$t('@.note-placeholders.d'), + this.$t('@.note-placeholders.e'), + this.$t('@.note-placeholders.f') + ]; + const x = xs[Math.floor(Math.random() * xs.length)]; + + return this.renote + ? opts.mobile ? this.$t('@.post-form.option-quote-placeholder') : this.$t('@.post-form.quote-placeholder') + : this.reply + ? this.$t('@.post-form.reply-placeholder') + : x; + }, + + submitText(): string { + return this.renote + ? this.$t('@.post-form.renote') + : this.reply + ? this.$t('@.post-form.reply') + : this.$t('@.post-form.submit'); + }, + + canPost(): boolean { + return !this.posting && + (1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) && + (length(this.text.trim()) <= this.maxNoteTextLength) && + (!this.poll || this.pollChoices.length >= 2); + } + }, + + created() { + this.$root.getMeta().then(meta => { + this.maxNoteTextLength = meta.maxNoteTextLength; + }); + }, + + mounted() { + if (this.initialText) { + this.text = this.initialText; + } + + if (this.mention) { + this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`; + this.text += ' '; + } + + if (this.reply && this.reply.user.host != null) { + this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `; + } + + if (this.reply && this.reply.text != null) { + const ast = parse(this.reply.text); + + for (const x of extractMentions(ast)) { + const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`; + + // 自分は除外 + if (this.$store.state.i.username == x.username && x.host == null) continue; + if (this.$store.state.i.username == x.username && x.host == host) continue; + + // 重複は除外 + if (this.text.indexOf(`${mention} `) != -1) continue; + + this.text += `${mention} `; + } + } + + // デフォルト公開範囲 + this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility); + + // 公開以外へのリプライ時は元の公開範囲を引き継ぐ + if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) { + this.visibility = this.reply.visibility; + } + + if (this.reply) { + this.$root.api('users/show', { userId: this.reply.userId }).then(user => { + this.visibleUsers.push(user); + }); + } + + // keep cw when reply + if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) { + this.useCw = true; + this.cw = this.reply.cw; + } + + this.focus(); + + this.$nextTick(() => { + this.focus(); + }); + + this.$nextTick(() => { + // 書きかけの投稿を復元 + if (!this.instant && !this.mention) { + const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId]; + if (draft) { + this.text = draft.data.text; + this.files = (draft.data.files || []).filter(e => e); + if (draft.data.poll) { + this.poll = true; + this.$nextTick(() => { + (this.$refs.poll as any).set(draft.data.poll); + }); + } + this.$emit('change-attached-files', this.files); + } + } + + this.$nextTick(() => this.watch()); + }); + }, + + methods: { + watch() { + this.$watch('text', () => this.saveDraft()); + this.$watch('poll', () => this.saveDraft()); + this.$watch('files', () => this.saveDraft()); + }, + + trimmedLength(text: string) { + return length(text.trim()); + }, + + addTag(tag: string) { + insertTextAtCursor(this.$refs.text, ` #${tag} `); + }, + + focus() { + (this.$refs.text as any).focus(); + }, + + chooseFile() { + (this.$refs.file as any).click(); + }, + + chooseFileFromDrive() { + this.$chooseDriveFile({ + multiple: true + }).then(files => { + for (const x of files) this.attachMedia(x); + }); + }, + + attachMedia(driveFile) { + this.files.push(driveFile); + this.$emit('change-attached-files', this.files); + }, + + detachMedia(id) { + this.files = this.files.filter(x => x.id != id); + this.$emit('change-attached-files', this.files); + }, + + onChangeFile() { + for (const x of Array.from((this.$refs.file as any).files)) this.upload(x); + }, + + upload(file) { + (this.$refs.uploader as any).upload(file); + }, + + onChangeUploadings(uploads) { + this.$emit('change-uploadings', uploads); + }, + + onPollUpdate() { + const got = this.$refs.poll.get(); + this.pollChoices = got.choices; + this.pollMultiple = got.multiple; + this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter]; + this.saveDraft(); + }, + + setGeo() { + if (navigator.geolocation == null) { + this.$root.dialog({ + type: 'warning', + text: this.$t('@.post-form.geolocation-alert') + }); + return; + } + + navigator.geolocation.getCurrentPosition(pos => { + this.geo = pos.coords; + this.$emit('geo-attached', this.geo); + }, err => { + this.$root.dialog({ + type: 'error', + title: this.$t('@.post-form.error'), + text: err.message + }); + }, { + enableHighAccuracy: true + }); + }, + + removeGeo() { + this.geo = null; + this.$emit('geo-dettached'); + }, + + setVisibility() { + const w = this.$root.new(MkVisibilityChooser, { + source: this.$refs.visibilityButton, + currentVisibility: this.visibility + }); + w.$once('chosen', v => { + this.applyVisibility(v); + }); + }, + + applyVisibility(v: string) { + const m = v.match(/^local-(.+)/); + if (m) { + this.localOnly = true; + this.visibility = m[1]; + } else { + this.localOnly = false; + this.visibility = v; + } + }, + + addVisibleUser() { + this.$root.dialog({ + title: this.$t('@.post-form.enter-username'), + user: true + }).then(({ canceled, result: user }) => { + if (canceled) return; + this.visibleUsers.push(user); + }); + }, + + removeVisibleUser(user) { + this.visibleUsers = erase(user, this.visibleUsers); + }, + + clear() { + this.text = ''; + this.files = []; + this.poll = false; + this.$emit('change-attached-files', this.files); + }, + + onKeydown(e) { + if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post(); + }, + + async onPaste(e) { + for (const item of Array.from(e.clipboardData.items)) { + if (item.kind == 'file') { + this.upload(item.getAsFile()); + } + } + + const paste = e.clipboardData.getData('text'); + + if (paste.startsWith(url + '/notes/')) { + e.preventDefault(); + + this.$root.dialog({ + type: 'info', + text: this.$t('@.post-form.quote-question'), + showCancelButton: true + }).then(({ canceled }) => { + if (canceled) { + insertTextAtCursor(this.$refs.text, paste); + return; + } + + this.quoteId = paste.substr(url.length).match(/^\/notes\/(.+?)\/?$/)[1]; + }); + } + }, + + onDragover(e) { + const isFile = e.dataTransfer.items[0].kind == 'file'; + const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file'; + if (isFile || isDriveFile) { + e.preventDefault(); + this.draghover = true; + e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move'; + } + }, + + onDragenter(e) { + this.draghover = true; + }, + + onDragleave(e) { + this.draghover = false; + }, + + onDrop(e): void { + this.draghover = false; + + // ファイルだったら + if (e.dataTransfer.files.length > 0) { + e.preventDefault(); + for (const x of Array.from(e.dataTransfer.files)) this.upload(x); + return; + } + + //#region ドライブのファイル + const driveFile = e.dataTransfer.getData('mk_drive_file'); + if (driveFile != null && driveFile != '') { + const file = JSON.parse(driveFile); + this.files.push(file); + this.$emit('change-attached-files', this.files); + e.preventDefault(); + } + //#endregion + }, + + async emoji() { + const Picker = await import('../../desktop/views/components/emoji-picker-dialog.vue').then(m => m.default); + const button = this.$refs.emoji; + const rect = button.getBoundingClientRect(); + const vm = this.$root.new(Picker, { + x: button.offsetWidth + rect.left + window.pageXOffset, + y: rect.top + window.pageYOffset + }); + vm.$once('chosen', emoji => { + insertTextAtCursor(this.$refs.text, emoji); + }); + }, + + saveDraft() { + if (this.instant) return; + + const data = JSON.parse(localStorage.getItem('drafts') || '{}'); + + data[this.draftId] = { + updatedAt: new Date(), + data: { + text: this.text, + files: this.files, + poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined + } + }; + + localStorage.setItem('drafts', JSON.stringify(data)); + }, + + deleteDraft() { + const data = JSON.parse(localStorage.getItem('drafts') || '{}'); + + delete data[this.draftId]; + + localStorage.setItem('drafts', JSON.stringify(data)); + }, + + kao() { + this.text += getFace(); + }, + + post() { + this.posting = true; + const viaMobile = opts.mobile && !this.$store.state.settings.disableViaMobile; + this.$root.api('notes/create', { + text: this.text == '' ? undefined : this.text, + fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined, + replyId: this.reply ? this.reply.id : undefined, + renoteId: this.renote ? this.renote.id : this.quoteId ? this.quoteId : undefined, + poll: this.poll ? (this.$refs.poll as any).get() : undefined, + cw: this.useCw ? this.cw || '' : undefined, + visibility: this.visibility, + visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined, + localOnly: this.localOnly, + geo: this.geo ? { + coordinates: [this.geo.longitude, this.geo.latitude], + 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, + viaMobile: viaMobile + }).then(data => { + this.clear(); + this.deleteDraft(); + this.$emit('posted'); + if (opts.onSuccess) opts.onSuccess(this); + }).catch(err => { + if (opts.onSuccess) opts.onFailure(this); + }).then(() => { + this.posting = false; + }); + + if (this.text && this.text != '') { + const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag); + const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[]; + localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history)))); + } + }, + } +}); diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index 64652e0eb9..99f508a923 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -10,14 +10,15 @@ <span v-for="u in visibleUsers"> <mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a> </span> - <a @click="addVisibleUser">{{ $t('add-visible-user') }}</a> + <a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a> </div> <div class="hashtags" v-if="recentHashtags.length > 0 && $store.state.settings.suggestRecentHashtags"> - <b>{{ $t('recent-tags') }}:</b> - <a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a> + <b>{{ $t('@.post-form.recent-tags') }}:</b> + <a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('@.post-form.click-to-tagging')">#{{ tag }}</a> </div> - <div class="local-only" v-if="localOnly == true">{{ $t('local-only-message') }}</div> - <input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }"> + <div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }}</div> + <div class="local-only" v-if="localOnly == true">{{ $t('@.post-form.local-only-message') }}</div> + <input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.annotations')" v-autocomplete="{ model: 'cw' }"> <div class="textarea"> <textarea :class="{ with: (files.length != 0 || poll) }" ref="text" v-model="text" :disabled="posting" @@ -32,13 +33,13 @@ </div> </div> <mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/> - <button class="upload" :title="$t('attach-media-from-local')" @click="chooseFile"><fa icon="upload"/></button> - <button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button> - <button class="kao" :title="$t('insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button> - <button class="poll" :title="$t('create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button> - <button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button> - <button class="geo" :title="$t('attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button> - <button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton"> + <button class="upload" :title="$t('@.post-form.attach-media-from-local')" @click="chooseFile"><fa icon="upload"/></button> + <button class="drive" :title="$t('@.post-form.attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button> + <button class="kao" :title="$t('@.post-form.insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button> + <button class="poll" :title="$t('@.post-form.create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button> + <button class="cw" :title="$t('@.post-form.hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button> + <button class="geo" :title="$t('@.post-form.attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button> + <button class="visibility" :title="$t('@.post-form.visibility')" @click="setVisibility" ref="visibilityButton"> <span v-if="visibility === 'public'"><fa icon="globe"/></span> <span v-if="visibility === 'home'"><fa icon="home"/></span> <span v-if="visibility === 'followers'"><fa icon="unlock"/></span> @@ -46,7 +47,7 @@ </button> <p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p> <ui-button primary :wait="posting" class="submit" :disabled="!canPost" @click="post"> - {{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/> + {{ posting ? $t('@.post-form.posting') : submitText }}<mk-ellipsis v-if="posting"/> </ui-button> <input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/> <div class="dropzone" v-if="draghover"></div> @@ -56,465 +57,29 @@ <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; -import insertTextAtCursor from 'insert-text-at-cursor'; -import getFace from '../../../common/scripts/get-face'; -import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; -import { parse } from '../../../../../mfm/parse'; -import { host } from '../../../config'; -import { erase, unique } from '../../../../../prelude/array'; -import { length } from 'stringz'; -import { toASCII } from 'punycode'; -import extractMentions from '../../../../../misc/extract-mentions'; -import XPostFormAttaches from '../../../common/views/components/post-form-attaches.vue'; +import form from '../../../common/scripts/post-form'; export default Vue.extend({ i18n: i18n('desktop/views/components/post-form.vue'), - components: { - MkVisibilityChooser, - XPostFormAttaches, - XPollEditor: () => import('../../../common/views/components/poll-editor.vue').then(m => m.default) - }, - - props: { - reply: { - type: Object, - required: false - }, - renote: { - type: Object, - required: false - }, - mention: { - type: Object, - required: false - }, - initialText: { - type: String, - required: false - }, - instant: { - type: Boolean, - required: false, - default: false - } - }, - - data() { - return { - posting: false, - text: '', - files: [], - uploadings: [], - poll: false, - pollChoices: [], - pollMultiple: false, - pollExpiration: [], - useCw: false, - cw: null, - geo: null, - visibility: 'public', - visibleUsers: [], - localOnly: false, - autocomplete: null, - draghover: false, - recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'), - maxNoteTextLength: 1000 - }; - }, - - created() { - this.$root.getMeta().then(meta => { - this.maxNoteTextLength = meta.maxNoteTextLength; - }); - }, - - computed: { - draftId(): string { - return this.renote - ? `renote:${this.renote.id}` - : this.reply - ? `reply:${this.reply.id}` - : 'note'; - }, - - placeholder(): string { - const xs = [ - this.$t('@.note-placeholders.a'), - this.$t('@.note-placeholders.b'), - this.$t('@.note-placeholders.c'), - this.$t('@.note-placeholders.d'), - this.$t('@.note-placeholders.e'), - this.$t('@.note-placeholders.f') - ]; - const x = xs[Math.floor(Math.random() * xs.length)]; - - return this.renote - ? this.$t('quote-placeholder') - : this.reply - ? this.$t('reply-placeholder') - : x; - }, - - submitText(): string { - return this.renote - ? this.$t('renote') - : this.reply - ? this.$t('reply') - : this.$t('submit'); - }, - - canPost(): boolean { - return !this.posting && - (1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) && - (length(this.text.trim()) <= this.maxNoteTextLength) && - (!this.poll || this.pollChoices.length >= 2); - } - }, - - mounted() { - if (this.initialText) { - this.text = this.initialText; - } - - if (this.mention) { - this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`; - this.text += ' '; - } - - if (this.reply && this.reply.user.host != null) { - this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `; - } - - if (this.reply && this.reply.text != null) { - const ast = parse(this.reply.text); - - for (const x of extractMentions(ast)) { - const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`; - - // 自分は除外 - if (this.$store.state.i.username == x.username && x.host == null) continue; - if (this.$store.state.i.username == x.username && x.host == host) continue; - - // 重複は除外 - if (this.text.indexOf(`${mention} `) != -1) continue; - - this.text += `${mention} `; + mixins: [ + form({ + onSuccess: self => { + self.$notify(self.renote + ? self.$t('reposted') + : self.reply + ? self.$t('replied') + : self.$t('posted')); + }, + onFailure: self => { + self.$notify(self.renote + ? self.$t('renote-failed') + : self.reply + ? self.$t('reply-failed') + : self.$t('note-failed')); } - } - - // デフォルト公開範囲 - this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility); - - // 公開以外へのリプライ時は元の公開範囲を引き継ぐ - if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) { - this.visibility = this.reply.visibility; - } - - if (this.reply) { - this.$root.api('users/show', { userId: this.reply.userId }).then(user => { - this.visibleUsers.push(user); - }); - } - - // keep cw when reply - if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) { - this.useCw = true; - this.cw = this.reply.cw; - } - - this.$nextTick(() => { - // 書きかけの投稿を復元 - if (!this.instant && !this.mention) { - const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[this.draftId]; - if (draft) { - this.text = draft.data.text; - this.files = (draft.data.files || []).filter(e => e); - if (draft.data.poll) { - this.poll = true; - this.$nextTick(() => { - (this.$refs.poll as any).set(draft.data.poll); - }); - } - this.$emit('change-attached-files', this.files); - } - } - - this.$nextTick(() => this.watch()); - }); - }, - - methods: { - trimmedLength(text: string) { - return length(text.trim()); - }, - - addTag(tag: string) { - insertTextAtCursor(this.$refs.text, ` #${tag} `); - }, - - watch() { - this.$watch('text', () => this.saveDraft()); - this.$watch('poll', () => this.saveDraft()); - this.$watch('files', () => this.saveDraft()); - }, - - focus() { - (this.$refs.text as any).focus(); - }, - - chooseFile() { - (this.$refs.file as any).click(); - }, - - chooseFileFromDrive() { - this.$chooseDriveFile({ - multiple: true - }).then(files => { - for (const x of files) this.attachMedia(x); - }); - }, - - attachMedia(driveFile) { - this.files.push(driveFile); - this.$emit('change-attached-files', this.files); - }, - - detachMedia(id) { - this.files = this.files.filter(x => x.id != id); - this.$emit('change-attached-files', this.files); - }, - - onChangeFile() { - for (const x of Array.from((this.$refs.file as any).files)) this.upload(x); - }, - - onPollUpdate() { - const got = this.$refs.poll.get(); - this.pollChoices = got.choices; - this.pollMultiple = got.multiple; - this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter]; - this.saveDraft(); - }, - - 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-files', this.files); - }, - - onKeydown(e) { - if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canPost) this.post(); - }, - - onPaste(e) { - for (const item of Array.from(e.clipboardData.items)) { - if (item.kind == 'file') { - this.upload(item.getAsFile()); - } - } - }, - - onDragover(e) { - const isFile = e.dataTransfer.items[0].kind == 'file'; - const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file'; - if (isFile || isDriveFile) { - e.preventDefault(); - this.draghover = true; - e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move'; - } - }, - - onDragenter(e) { - this.draghover = true; - }, - - onDragleave(e) { - this.draghover = false; - }, - - onDrop(e): void { - this.draghover = false; - - // ファイルだったら - if (e.dataTransfer.files.length > 0) { - e.preventDefault(); - for (const x of Array.from(e.dataTransfer.files)) this.upload(x); - return; - } - - //#region ドライブのファイル - const driveFile = e.dataTransfer.getData('mk_drive_file'); - if (driveFile != null && driveFile != '') { - const file = JSON.parse(driveFile); - this.files.push(file); - this.$emit('change-attached-files', this.files); - e.preventDefault(); - } - //#endregion - }, - - setGeo() { - if (navigator.geolocation == null) { - this.$root.dialog({ - type: 'warning', - text: this.$t('geolocation-alert') - }); - return; - } - - navigator.geolocation.getCurrentPosition(pos => { - this.geo = pos.coords; - this.$emit('geo-attached', this.geo); - }, err => { - this.$root.dialog({ - type: 'error', - title: this.$t('error'), - text: err.message - }); - }, { - enableHighAccuracy: true - }); - }, - - removeGeo() { - this.geo = null; - this.$emit('geo-dettached'); - }, - - setVisibility() { - const w = this.$root.new(MkVisibilityChooser, { - source: this.$refs.visibilityButton, - currentVisibility: this.visibility - }); - w.$once('chosen', v => { - this.applyVisibility(v); - }); - }, - - applyVisibility(v :string) { - const m = v.match(/^local-(.+)/); - if (m) { - this.localOnly = true; - this.visibility = m[1]; - } else { - this.localOnly = false; - this.visibility = v; - } - }, - - addVisibleUser() { - this.$root.dialog({ - title: this.$t('enter-username'), - user: true - }).then(({ canceled, result: user }) => { - if (canceled) return; - this.visibleUsers.push(user); - }); - }, - - removeVisibleUser(user) { - this.visibleUsers = erase(user, this.visibleUsers); - }, - - async emoji() { - const Picker = await import('./emoji-picker-dialog.vue').then(m => m.default); - const button = this.$refs.emoji; - const rect = button.getBoundingClientRect(); - const vm = this.$root.new(Picker, { - x: button.offsetWidth + rect.left + window.pageXOffset, - y: rect.top + window.pageYOffset - }); - vm.$once('chosen', emoji => { - insertTextAtCursor(this.$refs.text, emoji); - }); - }, - - post() { - this.posting = true; - - this.$root.api('notes/create', { - text: this.text == '' ? undefined : this.text, - fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined, - replyId: this.reply ? this.reply.id : undefined, - renoteId: this.renote ? this.renote.id : undefined, - poll: this.poll ? (this.$refs.poll as any).get() : undefined, - cw: this.useCw ? this.cw || '' : undefined, - visibility: this.visibility, - visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined, - localOnly: this.localOnly, - geo: this.geo ? { - coordinates: [this.geo.longitude, this.geo.latitude], - 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 - }).then(data => { - this.clear(); - this.deleteDraft(); - this.$emit('posted'); - this.$notify(this.renote - ? this.$t('reposted') - : this.reply - ? this.$t('replied') - : this.$t('posted')); - }).catch(err => { - this.$notify(this.renote - ? this.$t('renote-failed') - : this.reply - ? this.$t('reply-failed') - : this.$t('note-failed')); - }).then(() => { - this.posting = false; - }); - - if (this.text && this.text != '') { - const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag); - const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[]; - localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history)))); - } - }, - - saveDraft() { - if (this.instant) return; - - const data = JSON.parse(localStorage.getItem('drafts') || '{}'); - - data[this.draftId] = { - updatedAt: new Date(), - data: { - text: this.text, - files: this.files, - poll: this.poll && this.$refs.poll ? (this.$refs.poll as any).get() : undefined - } - } - - localStorage.setItem('drafts', JSON.stringify(data)); - }, - - deleteDraft() { - const data = JSON.parse(localStorage.getItem('drafts') || '{}'); - - delete data[this.draftId]; - - localStorage.setItem('drafts', JSON.stringify(data)); - }, - - kao() { - this.text += getFace(); - }, - } + }), + ], }); </script> diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index 85246036a2..495fa0cf2a 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -1,6 +1,11 @@ <template> <div class="gafaadew"> - <div class="form"> + <div class="form" + @dragover.stop="onDragover" + @dragenter="onDragenter" + @dragleave="onDragleave" + @drop.stop="onDrop" + > <header> <button class="cancel" @click="cancel"><fa icon="times"/></button> <div> @@ -17,10 +22,11 @@ <mk-user-name :user="u"/> <a @click="removeVisibleUser(u)">[x]</a> </span> - <a @click="addVisibleUser">+{{ $t('add-visible-user') }}</a> + <a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a> </div> - <input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="{ model: 'cw' }"> - <textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }"></textarea> + <input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }"> + <textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @paste="onPaste"></textarea> + <div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }}</div> <x-post-form-attaches class="attaches" :files="files"/> <x-poll-editor v-if="poll" ref="poll" @destroyed="poll = false" @updated="onPollUpdate()"/> <mk-uploader ref="uploader" @uploaded="attachMedia" @change="onChangeUploadings"/> @@ -50,337 +56,21 @@ <script lang="ts"> import Vue from 'vue'; import i18n from '../../../i18n'; -import insertTextAtCursor from 'insert-text-at-cursor'; -import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; -import getFace from '../../../common/scripts/get-face'; -import { parse } from '../../../../../mfm/parse'; -import { host } from '../../../config'; -import { erase, unique } from '../../../../../prelude/array'; -import { length } from 'stringz'; -import { toASCII } from 'punycode'; -import extractMentions from '../../../../../misc/extract-mentions'; +import form from '../../../common/scripts/post-form'; export default Vue.extend({ - i18n: i18n('mobile/views/components/post-form.vue'), - components: { - XPostFormAttaches: () => import('../../../common/views/components/post-form-attaches.vue').then(m => m.default), - XPollEditor: () => import('../../../common/views/components/poll-editor.vue').then(m => m.default) - }, + i18n: i18n(), - props: { - reply: { - type: Object, - required: false - }, - renote: { - type: Object, - required: false - }, - mention: { - type: Object, - required: false - }, - initialText: { - type: String, - required: false - }, - instant: { - type: Boolean, - required: false, - default: false - } - }, - - data() { - return { - posting: false, - text: '', - uploadings: [], - files: [], - poll: false, - pollChoices: [], - pollMultiple: false, - geo: null, - visibility: 'public', - visibleUsers: [], - localOnly: false, - useCw: false, - cw: null, - recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'), - maxNoteTextLength: 1000 - }; - }, - - created() { - this.$root.getMeta().then(meta => { - this.maxNoteTextLength = meta.maxNoteTextLength; - }); - }, - - computed: { - draftId(): string { - return this.renote - ? `renote:${this.renote.id}` - : this.reply - ? `reply:${this.reply.id}` - : 'note'; - }, - - placeholder(): string { - const xs = [ - this.$t('@.note-placeholders.a'), - this.$t('@.note-placeholders.b'), - this.$t('@.note-placeholders.c'), - this.$t('@.note-placeholders.d'), - this.$t('@.note-placeholders.e'), - this.$t('@.note-placeholders.f') - ]; - const x = xs[Math.floor(Math.random() * xs.length)]; - - return this.renote - ? this.$t('quote-placeholder') - : this.reply - ? this.$t('reply-placeholder') - : x; - }, - - submitText(): string { - return this.renote - ? this.$t('renote') - : this.reply - ? this.$t('reply') - : this.$t('submit'); - }, - - canPost(): boolean { - return !this.posting && - (1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) && - (this.text.trim().length <= this.maxNoteTextLength) && - (!this.poll || this.pollChoices.length >= 2); - } - }, - - mounted() { - if (this.initialText) { - this.text = this.initialText; - } - - if (this.reply && this.reply.user.host != null) { - this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `; - } - - if (this.mention) { - this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`; - this.text += ' '; - } - - if (this.reply && this.reply.text != null) { - const ast = parse(this.reply.text); - - for (const x of extractMentions(ast)) { - const mention = x.host ? `@${x.username}@${toASCII(x.host)}` : `@${x.username}`; - - // 自分は除外 - if (this.$store.state.i.username == x.username && x.host == null) continue; - if (this.$store.state.i.username == x.username && x.host == host) continue; - - // 重複は除外 - if (this.text.indexOf(`${mention} `) != -1) continue; - - this.text += `${mention} `; - } - } - - // デフォルト公開範囲 - this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility); - - // 公開以外へのリプライ時は元の公開範囲を引き継ぐ - if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) { - this.visibility = this.reply.visibility; - } - - if (this.reply) { - this.$root.api('users/show', { userId: this.reply.userId }).then(user => { - this.visibleUsers.push(user); - }); - } - - // keep cw when reply - if (this.$store.state.settings.keepCw && this.reply && this.reply.cw) { - this.useCw = true; - this.cw = this.reply.cw; - } - - this.focus(); - - this.$nextTick(() => { - this.focus(); - }); - }, + mixins: [ + form({ + mobile: true + }), + ], methods: { - trimmedLength(text: string) { - return length(text.trim()); - }, - - addTag(tag: string) { - insertTextAtCursor(this.$refs.text, ` #${tag} `); - }, - - focus() { - (this.$refs.text as any).focus(); - }, - - addVisibleUser() { - this.$root.dialog({ - title: this.$t('enter-username'), - user: true - }).then(({ canceled, result: user }) => { - if (canceled) return; - this.visibleUsers.push(user); - }); - }, - - chooseFile() { - (this.$refs.file as any).click(); - }, - - chooseFileFromDrive() { - this.$chooseDriveFile({ - multiple: true - }).then(files => { - for (const x of files) this.attachMedia(x); - }); - }, - - attachMedia(driveFile) { - this.files.push(driveFile); - this.$emit('change-attached-files', this.files); - }, - - detachMedia(id) { - this.files = this.files.filter(x => x.id != id); - this.$emit('change-attached-files', this.files); - }, - - onChangeFile() { - for (const x of Array.from((this.$refs.file as any).files)) this.upload(x); - }, - - onPollUpdate() { - const got = this.$refs.poll.get(); - this.pollChoices = got.choices; - this.pollMultiple = got.multiple; - }, - - upload(file) { - (this.$refs.uploader as any).upload(file); - }, - - onChangeUploadings(uploads) { - this.$emit('change-uploadings', uploads); - }, - - setGeo() { - if (navigator.geolocation == null) { - this.$root.dialog({ - type: 'warning', - text: this.$t('geolocation-alert') - }); - return; - } - - navigator.geolocation.getCurrentPosition(pos => { - this.geo = pos.coords; - }, err => { - this.$root.dialog({ - type: 'error', - title: this.$t('error'), - text: err.message - }); - }, { - enableHighAccuracy: true - }); - }, - - removeGeo() { - this.geo = null; - }, - - setVisibility() { - const w = this.$root.new(MkVisibilityChooser, { - source: this.$refs.visibilityButton, - currentVisibility: this.visibility - }); - w.$once('chosen', v => { - this.applyVisibility(v); - }); - }, - - applyVisibility(v :string) { - const m = v.match(/^local-(.+)/); - if (m) { - this.localOnly = true; - this.visibility = m[1]; - } else { - this.localOnly = false; - this.visibility = v; - } - }, - - removeVisibleUser(user) { - this.visibleUsers = erase(user, this.visibleUsers); - }, - - clear() { - this.text = ''; - this.files = []; - this.poll = false; - this.$emit('change-attached-files'); - }, - - post() { - this.posting = true; - const viaMobile = !this.$store.state.settings.disableViaMobile; - this.$root.api('notes/create', { - text: this.text == '' ? undefined : this.text, - fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined, - replyId: this.reply ? this.reply.id : undefined, - renoteId: this.renote ? this.renote.id : undefined, - poll: this.poll ? (this.$refs.poll as any).get() : undefined, - cw: this.useCw ? this.cw || '' : undefined, - geo: this.geo ? { - coordinates: [this.geo.longitude, this.geo.latitude], - 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, - visibility: this.visibility, - visibleUserIds: this.visibility == 'specified' ? this.visibleUsers.map(u => u.id) : undefined, - localOnly: this.localOnly, - viaMobile: viaMobile - }).then(data => { - this.$emit('posted'); - }).catch(err => { - this.posting = false; - }); - - if (this.text && this.text != '') { - const hashtags = parse(this.text).filter(x => x.node.type === 'hashtag').map(x => x.node.props.hashtag); - const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[]; - localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history)))); - } - }, - cancel() { this.$emit('cancel'); }, - - kao() { - this.text += getFace(); - } } }); </script>