From 9403ee649569d923df03ca1870982d325d5432a1 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 27 May 2019 15:38:14 +0900 Subject: [PATCH] Improve post form Resolve #4998 Resolve #1151 --- locales/ja-JP.yml | 62 +-- package.json | 2 +- src/client/app/common/scripts/post-form.ts | 478 +++++++++++++++++ .../desktop/views/components/post-form.vue | 499 ++---------------- .../app/mobile/views/components/post-form.vue | 344 +----------- 5 files changed, 556 insertions(+), 829 deletions(-) create mode 100644 src/client/app/common/scripts/post-form.ts diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 99bcb1b50..25c052bc4 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 6fc8a0648..b6615ed5b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "misskey", "author": "syuilo ", - "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 000000000..85a578484 --- /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 64652e0eb..99f508a92 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 @@ [x] - {{ $t('add-visible-user') }} + {{ $t('@.post-form.add-visible-user') }}
- {{ $t('recent-tags') }}: - #{{ tag }} + {{ $t('@.post-form.recent-tags') }}: + #{{ tag }}
-
{{ $t('local-only-message') }}
- +
{{ $t('@.post-form.quote-attached') }}
+
{{ $t('@.post-form.local-only-message') }}
+
+ + +
{{ $t('@.post-form.quote-attached') }}
@@ -50,337 +56,21 @@