最近使ったハッシュタグを表示するようにするなど

This commit is contained in:
syuilo 2018-07-20 05:29:56 +09:00
parent cbdc061891
commit 8dc5375d55
5 changed files with 211 additions and 18358 deletions

1
.npmrc
View File

@ -1 +1,2 @@
save-exact=true save-exact=true
package-lock = false

18198
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -126,6 +126,7 @@
"highlight.js": "9.12.0", "highlight.js": "9.12.0",
"html-minifier": "3.5.19", "html-minifier": "3.5.19",
"http-signature": "1.2.0", "http-signature": "1.2.0",
"insert-text-at-cursor": "0.1.1",
"is-root": "2.0.0", "is-root": "2.0.0",
"is-url": "1.2.4", "is-url": "1.2.4",
"jquery": "3.3.1", "jquery": "3.3.1",
@ -205,6 +206,7 @@
"vue-json-tree-view": "2.1.4", "vue-json-tree-view": "2.1.4",
"vue-loader": "15.2.6", "vue-loader": "15.2.6",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-style-loader": "4.1.1",
"vue-template-compiler": "2.5.16", "vue-template-compiler": "2.5.16",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",
"vuex": "3.0.1", "vuex": "3.0.1",

View File

@ -10,6 +10,9 @@
<span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span> <span v-for="u in visibleUsers">{{ u | userName }}<a @click="removeVisibleUser(u)">[x]</a></span>
<a @click="addVisibleUser">+ユーザーを追加</a> <a @click="addVisibleUser">+ユーザーを追加</a>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
</div>
<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)"> <input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
<textarea :class="{ with: (files.length != 0 || poll) }" <textarea :class="{ with: (files.length != 0 || poll) }"
ref="text" v-model="text" :disabled="posting" ref="text" v-model="text" :disabled="posting"
@ -46,6 +49,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as XDraggable from 'vuedraggable'; import * as XDraggable from 'vuedraggable';
import getKao from '../../../common/scripts/get-kao'; import getKao from '../../../common/scripts/get-kao';
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
@ -91,7 +95,8 @@ export default Vue.extend({
visibility: 'public', visibility: 'public',
visibleUsers: [], visibleUsers: [],
autocomplete: null, autocomplete: null,
draghover: false draghover: false,
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
}; };
}, },
@ -183,6 +188,10 @@ export default Vue.extend({
}, },
methods: { methods: {
addTag(tag: string) {
insertTextAtCursor(this.$refs.text, ` #${tag} `);
},
watch() { watch() {
this.$watch('text', () => this.saveDraft()); this.$watch('text', () => this.saveDraft());
this.$watch('poll', () => this.saveDraft()); this.$watch('poll', () => this.saveDraft());
@ -370,6 +379,13 @@ export default Vue.extend({
}).then(() => { }).then(() => {
this.posting = false; this.posting = false;
}); });
if (this.text && this.text != '') {
const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
history = history.filter(x => !hashtags.includes(x));
localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
}
}, },
saveDraft() { saveDraft() {
@ -478,6 +494,10 @@ root(isDark)
margin-right 16px margin-right 16px
color isDark ? #fff : #666 color isDark ? #fff : #666
> .hashtags
> *
margin-right 8px
> .medias > .medias
margin 0 margin 0
padding 0 padding 0

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="mk-post-form"> <div class="mk-post-form">
<div class="form">
<header> <header>
<button class="cancel" @click="cancel">%fa:times%</button> <button class="cancel" @click="cancel">%fa:times%</button>
<div> <div>
@ -38,10 +39,15 @@
<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/> <input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
</div> </div>
</div> </div>
<div class="hashtags" v-if="recentHashtags.length > 0">
<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import insertTextAtCursor from 'insert-text-at-cursor';
import * as XDraggable from 'vuedraggable'; import * as XDraggable from 'vuedraggable';
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue'; import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
import getKao from '../../../common/scripts/get-kao'; import getKao from '../../../common/scripts/get-kao';
@ -85,7 +91,8 @@ export default Vue.extend({
visibility: 'public', visibility: 'public',
visibleUsers: [], visibleUsers: [],
useCw: false, useCw: false,
cw: null cw: null,
recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]')
}; };
}, },
@ -161,6 +168,10 @@ export default Vue.extend({
}, },
methods: { methods: {
addTag(tag: string) {
insertTextAtCursor(this.$refs.text, ` #${tag} `);
},
focus() { focus() {
(this.$refs.text as any).focus(); (this.$refs.text as any).focus();
}, },
@ -281,6 +292,13 @@ export default Vue.extend({
}).catch(err => { }).catch(err => {
this.posting = false; this.posting = false;
}); });
if (this.text && this.text != '') {
const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
let history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
history = history.filter(x => !hashtags.includes(x));
localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history)));
}
}, },
cancel() { cancel() {
@ -302,18 +320,22 @@ root(isDark)
max-width 500px max-width 500px
width calc(100% - 16px) width calc(100% - 16px)
margin 8px auto margin 8px auto
background isDark ? #282C37 : #fff
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
@media (min-width 500px) @media (min-width 500px)
margin 16px auto margin 16px auto
width calc(100% - 32px) width calc(100% - 32px)
> .form
box-shadow 0 8px 32px rgba(#000, 0.1) box-shadow 0 8px 32px rgba(#000, 0.1)
@media (min-width 600px) @media (min-width 600px)
margin 32px auto margin 32px auto
> .form
background isDark ? #282C37 : #fff
border-radius 8px
box-shadow 0 0 2px rgba(#000, 0.1)
> header > header
z-index 1000 z-index 1000
height 50px height 50px
@ -443,6 +465,12 @@ root(isDark)
border-radius 0 border-radius 0
box-shadow none box-shadow none
> .hashtags
margin 8px
> *
margin-right 8px
.mk-post-form[data-darkmode] .mk-post-form[data-darkmode]
root(true) root(true)